PM

[ TIL 16-2 ] 서비스 기획 숙련 : UX/UI & 리서치 란?

emma-lin 2025. 1. 8. 20:45

 

[ 1. UX/UI 개념 ]

1) UX

- User experience, 사용자 경험

- 디지털뿐만 아니라 오프라인에서의 경험 또한 포괄하는 개념

- 모든 감각을 활용하는 다양한 경험을 고려한다.

- 유저가 제품이나 서비스와 상호작용하는 과정에서 얻는 모든 경험

 

2) UI

- User Interface, 사용자 인터페이스

- 유저가 최종적으로 제품이나 서비스 사용할 때 맞닿는 시각적 구성요소

- UX에 UI가 포함된다는 시각도 존재함

 

3) UX vs UI

- UX 디자인 : 유저의 관점에서 문제를 해결하는 것에 집중

- UI 디자인 : 시각 언어의 규칙을 만드는 것에 집중

- 최근에는 두디자인을 모두 아우르는 디자이너 직군이 늘어남에 따라 크게 나눠 구분 않는다.

 

 

[ 2. UX/UI 디자인 프로세스 ]

1) 더블 다이아몬드 모형

- 문제 정의와 해결에 초점을 둔 디자인 프로세스 모형

- 아이디어 발산과 수렴과정을 나타내는 4단계로 구성

⓵ 발견 Discover

-  무엇이 문제인지 발견하고 이해하는 단계

- 유저 리서치 진행, 여러 문제가 발견될 수도 있다.

- 대표적인 활동 : 데스크 리서치, 필드 리서치

⓶ 정의 Define

- 집중할 문제가 무엇인지 정의하는 단계

- 리서치 결과물을 분석하고 정리

- 어떤 문제에 집중할지 논리를 정립

- 대표적인 활동 : 어피니티 다이어그램, 유저 페르소나 작성 등

⓷ 발전 Develop

- 문제 해결을 위한 아이데이션을 진행하는 단계

- 문제 해결 할 수 있는 아이디어를 발산

- 제한 두지 않고 다양한 방향 열어두고 고민하는 것이 중요하다.

- 대표적인 활동 : 정보구조도, 와이어프레임 등

⓸ 전달 Deliver

- 디자인을 구현하여 유저에게 제공하는 단계

- 프로토타입 제작 후 사용성 테스트를 해보면서 개선을 거듭

- 대표적인 활동 : 최종 프로토타입, 사용성 테스트 등

 

2) 더블 다이아몬드 핵심원칙 4가지

- 이해 : 유저와 유저 니즈를 이해하는 것에서 시작하기

- 목표방향성 소통 : 문제와 아이디어에 대해 구성원들과 얼라인하기

- 협업 : 구성원들과 협업하고 공동 작업하기

- 짧게 반복 : 이터레이션을 통해 에러와 리스트 일찍 발견하기

*이터레이션 - (Iteration) - (반복) : 짧은 주기 반복하며 고객 평가와 요구를 수용

 

3) 오해와 한계점

- 하나의 방법론으로 목적이 아닌 하나의 수단이다

- 고정된 단계가 아니다

- 모든 디자인 프로세스를 설명하지는 못한다.

- 복잡한 프로젝트나 대규모 서비스에서는 한계가 있다.

 

 

[ 3. Lean UX와 MVP ]

1) Lean UX 프로세스 

- 유저 피드백을 데이터로 측정하고 반복적으로 디자인과 기능을 개선하는 과정을 거쳐
   더 나은 유저 경험을 제공하는 프로세스

- 클라우드 발전으로 실시간 협업이 활발해졌다.

- 분석 툴의 발전으로 데이터를 통해 임팩트를 측정하기 용이해졌다.

- 치열한 시장 경쟁에서 살아남기에 적합

 

 

[ 4. 데이터 드리븐 UX 트렌드 ] 

1) 데이터 드리븐 등장 배경

- 직관과 추측에 의존 > 데이터 기반 가설 설정과 검증

- 제품을 만들기까지 많은 시간과 비용 소모 > MVP를 빠르게 내놓고 데이터를 꾸준히 개선

- 소수를 대상으로 하는 정성적 리서치 > 실제 행동 데이터 기반의 정량적 리서치

# 빠르게 변화하는 시장에서 효율적으로 제품을 개선할 수 있다.

 

2) 데이터 드리븐 중요성

- 디자이너 : 유저 데이터 해석 바탕으로 산출물에 대한 논리적인 근거를 제공

- 커뮤니케이션 : 타 조직과 원활한 의사소통을 돕는 공용어 역할

- 비즈니스 : 디자인 산출물이 비즈니스에 얼마나 기여하는지 파악

#홀로 작업할 때뿐만 아니라 협업, 산출물의 임팩트 측정에 중요한 역할을 한다.

 

3) 활용되는 지표 예시

⓵ 유저 관여도 관점 (Engagement) 

- 얼마나 많이 이용하는가? - DAU, WAU, MAU

- 얼마나 자주 이용하는가? - DAU/MAU, DAU/WAU

⓶ 유저 재방문 관점 (Retention)

- 특정한 특성의 유저들이 재방문하는가? - 코호트 리텐션

- N 일째 된 유저들이 재방문하는가? - Day N 리텐션

⓷ 유저 획득 관점 (Acquisition)

- 얼마나 보는가? - 페이지 뷰 수, 클릭 뷰 수

- 얼마나 획득되는가? - 전환율, 이탈률

#주요 지표는 프로덕트별 도메인별 특성을 고려해 다르게 설정된다.

 

🔗 여기 어때 UI개선 케이스

 

[ 5. UX/UI 용어 ]

1) 디자인 관련 용어

- 시각적 계층 구조 Visual Hierarchy

  : 중요한 순서에 따라 시선의 흐름이 이동하도록 디자인하는 것

- 와이어 프레임 Wireframe

  : 화면의 인터페이스를 단순한 선과 도형으로 표현한 것

- 프로토 타입 Prototype

  : 초기버전으로, 아이디어를 시각적으로 보여주고 테스트하는 모델

- 정보 구조도 Information Architecture

  : 요소들의 구조를 도식화하는 것으로, 유저가 원하는 정보 쉽게 찾고 작업 완료하도록 돕는 것

- 피델리티 Fidelity

  : 디자인의 디테일 및 정확성, 낮으면 Lo-fi, 높으면 Hi-fi

- CTA Call to Action

  : 사용자에게 원하는 동작을 취하도록 유도하기 위해 설계된 디자인 요소나 텍스트

- 모크업 Mockup

  : 정적인 형태로 디자인된 레이아웃을 모여주는 이미지나 모형

 

2) 인지 심리 관련 용어

- 인지 부하 Cognitive Load

  : 정보를 이해하고 처리하는데 필요한 정신적 노력의 양

- 멘탈 모델 Mental Model

  : 유저가 시스템이나 서비스를 어떻게 이해하고 예측하는지를 나타내는 개념

- 어포던스 Affordance

  : 디자인 요소가 유저에게 어떤 동작을 할 수 있는 단서나 힌트를 제공하는 원리

- 게슈탈트 원리 Gestalt Principles

  : 사람이 이미지를 인식할 때 주변 요소 간의 관계와 맥락에 영향을 받는다는 이론

- 훅의 법칙 Hick’s Law

  : 선택할 수 있는 옵션수가 늘어날수록 결정 시간이 증가하는 원리

- 피츠의 법칙 Fitts’ Law

  : 대상까지의 거리와 크기에 따라 상호작용 시간이 달라지는 원리

- 제이콥의 법칙 Jacob’s Law

  : 유저가 과거 경험을 토대로 익숙한 디자인 패턴을 기대하는 원리

 

3) 개발 관련 용어

- 서버 Server

  : 정보와 서비스를 제공하는 소프트웨어로, 웹사이트나 앱의 데이터를 저장하고 제공함

- 클라이언트 Client

  : 서버로부터 정보를 요청하고 받아오는 디바이스나 소프트웨어로,

    웹 브라우저나 모바일 앱과 같은 유저가 상호작용하는 부분을 가리킴

- 접근성 Accessibility

  : 모든 유저가 웹사이트나 앱을 이용할 수 있도록 디자인하고 개발하는 것을 의미함

- API Application Programming Interface

  : 서로 다른 소프트웨어 간의 상호작용을 도와주는 인터페이스로,

     데이터를 교환하거나 서비스를 활용할 수 있도록 하는 프로그래밍 규칙과 도구의 집합

- CMS Content Management System

  : 웹사이트 또는 앱의 콘텐츠를 쉽게 관리하고 업데이트하는 도구 또는 플랫폼

- 오픈 소스 Open Source

  : 소프트웨어 또는 프로젝트가 무료로 공개되며,

    누구나 소스 코드를 확인하고 수정할 수 있는 개발 방식

- 디버깅 Debugging

  : 소프트웨어 오류를 찾고 수정하는 프로세스로,

   프로그램이 예상대로 동작하지 않을 때 문제를 식별하고 해결하기 위해 사용하는 과정


[ 1. 유저 리서치의 중요성 ]

# 유저리서치 란?

유저의 행동과 동기를 조사하여 제품,서비스 개선에 유용한 인사이트를 얻는 활동

 

1. 유저에 대한 이해도 강화

- 유저의 행동과 동기를 파악할 수 있다.

- 해결해야 할 새로운 문제를 발견할 수 있다.

 

2. 효율적인 커뮤니케이션 도구

- 의사 결정의 근거를 마련할 수 있다.

- 사전에 문제를 미리 발견하고 수정 비용을 절감할 수 있다.

 

 

[ 2. 유저 리서치 종류와 목적 ]

닐슨 노먼 그룹의 What-Why 프레임 워크에따라 나눈 유저 리서치 종류

1. 유저 리서치 목적

1) 정성적 리서치

- 유저의 생각, 의견, 감정을 이해하여 why에 대한 심층적인 인사이트 얻는것이 목적

- 소수 유저를 대상으로 하기 때문에 모든 유저를 대표하기는 어렵다.

- 대표 활동 : 심층 인터뷰, 포커스 그룹, VOC분석

2) 정량적 리서치

- 유저 행동 기반의 통계 데이터를 분석하여 What과 How much에 대한 답 얻는것이 목적

- "왜"에 대한 근본적인 원인을 파악하기는 어렵다.

- 대표활동 : 설문조사, A/B테스트, 애널리틱스

 

 

[ 3. 데스크 리서치 ]

1) 마켓 리서치

- 시장 규모 및 성장 동향 : 시장의 수요와 성장가능성 예측, 미래가능성 평가 가능

- 수익 구조 : 유저가 지불할 의사가 있는 부분 파악, 유저 경험 평가하여 개선하는데 도움

- 법적 제약 : 소비자 권리와 보호를 고려하여 디자인에 반영, 국제시장 진입시 대비 가능

- 🔗앱기반 서비스 순위,다운로드,매출 트렌드 파악가능

 

2) 경쟁사 분석

- 직접 경쟁사(동일 산업군)와 간접 경쟁사(대체 가능성)로 나눌수있다. 

- SWOT 분석 : 강점, 약점, 기회, 위험

- 포지셔닝 맵핑

 

 

[ 4. 정성적 리서치 ]

1) 심층 인터뷰

  : 유저로 부터 대중앞에 털어놓기 어려운 개인적인 이야기를 들을 수 있다.

⓵ 심층 인터뷰 준비하기

- 인터뷰 목적 설정 : 어떤 정보를 수집하고 싶은지 명확하게 정의 

- 대상자 선정 : 어떤 그룹의 유저를 인터뷰할지 목적과 관련된 습관을 고려하여 선정

- 리크루팅 : 목적, 방식, 일정, 보상 등 공지

- 질문지 작성 : 주요 질문을 리스트업, 순서 조정

 

⓶ 심층 인터뷰 질문지 예시

⓷ 심층 인터뷰 진행 TIP

- 라포형성을 위해 적절한 언어/비언어적 표현을 활용

- 모든 질문 한번에 하지 않고, 꼬리 질문을 활용

- 네/아니오 같은 답변 질문은 피한다.

- 구체적 해결책 묻는질문은 하지 않는다.

- 집중도를 고려하여 1시간 내외로 기준

 

2) 포커스 그룹

  : 유사한 경험을 가진 6~9명의 유저를 모더레이터가 동시에 인터뷰하는 방법

- 참가자의 의견에 중립적으로 대해야한다.

- 특정 참가자가 지나치게 말이 많거나 조용할 경우 균형맞춰주면 좋다.

- 제한된 시간에 질문 별로 적절한 시간을 분배하는 것이 중요

- 비언어적 신호를 주의깊게 관촬

 

3) VoC 분석

- 고객센터로 유입된 불만 / 건의 / 문의사항, 스토어 리뷰등을 수집하여 분석

- 수집한 보이스에 태그를 부여하고 주간 or 월간 단위로 통계를 확인하며 정량적 확인도 가능

 

4) 유용한 툴 소개

: Dovetail, Condens, Notably 국내무료로는 "🔗클로바노트"

 

 

[ 5. 정량적 리서치 ]

1) 설문조사

- 가벼운 의견 수집 용도는 5분 이내의 분향이 적당

- 선택지가 많은 경우 순서를 무작위로 설정하여 순서효과 줄일 수 있다.

- 전문용어 피하되 불가피한경우 정의나 예시 표시

- 질문자의 의도가 드러나거나 한쪽으로 유도하는 질문은 피해야한다.

- 한 질문에서는 하나만 묻는다.

 

2) A/B 테스트

- 2개 이상의 옵션을 유저 그룹을 나누어 동시에 보여준뒤 효과적인 방법을 찾는 것

- 동일 기간에 진행되어야한다.

- 충분한 모수가 확보되는 기간을 고려하여 기간 설정

- 🔗VWO 🔗핵클 🔗앰플리튜드 🔗구글옵티마이즈느 GA4로 통합예정

 

3) 애널리틱스

- 웹이나 앱에서 얻은 페이지뷰, 바운스율, 전환율 등의 데이터를 통합하여 분석하는 방법

- 특정 이벤트, 계절, 휴가 기간등 외부이슈를 고려하여 분석 해야한다.

- 상관관계를 발견했다고 반드시 인과관계가 있는 것이 아니다.

- 조직내에서 중요하게 고려하는 지표들과 해당 용어에 대한 얼라인이 필요하다.

- 🔗구글 애널리틱스 🔗앰플리튜드 🔗믹스패널