[UX 기획 및 리서치] CH1: UX/UI의 이해

 

1-2) UX/UI 개념 이해

 

UX vs UI

• UX(User experience, 사용자 경험): 유저가 제품이나 서비스와 상호작용하는 과정에서 얻는 모든 경험
• UI(User Interface, 사용자 인터페이스): 유저가 최종적으로 제품이나 서비스를 사용할 때 맞닿는 시각적 구성 요소
• 차이점
  • UX 디자인은 유저의 관점에서 유저의 문제를 해결하는 것에 집중하고, UI 디자인은 시각 언어의 규칙을 만드는 것에 집중함
  • 최근에는 점차 UX와 UI 디자인을 모두 아우르는 UX/UI 디자이너 및 프로덕트 디자이너 직군이 늘어남에 따라 칼 자르듯이 개념을 구분하지 않는 추세

출처: UX 기획 및 리서치(1-2)

 

 

1-3) UX/UI 디자인 프로세스

 

더블 다이아몬드 모형

• 이해하기
  • 더블 다이아몬드 모형은 문제 정의와 문제 해결에 초점을 둔 디자인 프로세스 모형
  • 아이디어의 발산과 수렴 과정을 나타내는 4단계로 구성됨
  • 다이아몬드1, 다이아몬드2

출처: UX 기획 및 리서치(1-3)

• 다이아몬드 1: 해결해야 할 문제 찾기(문제들을 발견하고 그 중 어떤 문제를 해결할 것인지 정의하는 단계)
  • 1. 발견(Discover) 단계
    무엇이 문제인지를 발견하고 이해하는 단계
    유저 리서치를 진행하며, 이 과정에서 문제가 여러 개 발견될 수도 있음
    대표적인 활동 : 유저 리서치 (데스크 리서치, 필드 리서치)
  • 2. 정의(Define) 단계
    집중할 문제가 무엇인지 정의하는 단계
    유저 리서치 결과물을 분석하고 정리하며,이 과정에서 어떤 문제에 집중할 지 논리를 정립함
    대표적인 활동 : 어피니티 다이어그램, 유저 페르소나 작성 등
• 다이아몬드 2: 해결책 찾기(문제 해결을 위한 아이디어를 발전시키고 구현하여 유저에게 제공하는 단계)
  • 3. 발전(Develop) 단계
    문제 해결을 위한 아이데이션을 진행하는 단계
    문제를 해결할 수 있는 아이디어를 발산하되,제한을 두기보다 다양한 방향을 열어두고 고민하는 것이 중요
    대표적인 활동 : 정보구조도, 와이어프레임 등
  • 4. 전달(Deliver) 단계
    디자인을 구현하여 유저에게 제공하는 단계
    프로토타입 제작 후 사용성 테스트를 해보면서 개선을 거듭함
    대표적인 활동 : 최종 프로토타입, 사용성 테스트 등

• 4가지 핵심 원칙
  • 유저와 유저 니즈를 이해하는 것에서 시작하기
  • 문제와 아이디어에 대해 구성원들과 얼라인하기
  • 구성원들과 협업하고 공동 작업하기
  • 이터레이션을 통해 에러와 리스크 일찍 발견하기 → 가장 중요
    • 이터레이션을 통해 반복적으로 개선할 것을 강조함
• 오해와 한계점
  • 더블 다이아몬드 모형 또한 하나의 방식으로, 목적이 아닌 수단임
  • 더블 다이아몬드는 선형적인 프로세스, 고정된 단계에 해당되지 않음
  • 복잡한 프로젝트나 대규모 서비스에는 한계가 있음

 

 

1-4) Lean UX와 MVP

 

Lean UX 프로세스

• 유저 피드백을 데이터로 측정하고 반복적으로 디자인과 기능을 개선하는 과정을 거쳐 더 나은 유저 경험을 제공하는 프로세스
  • 가설 검증이 핵심
• Lean UX 프로세스가 널리 활용되는 이유
  • 클라우드의 발전으로 실시간 협업이 활발해짐
  • 분석 툴의 발전으로 데이터를 통해 임팩트를 측정하기 용이해짐
  • 치열한 시장 경쟁에서 살아남기에 적합함

출처: UX 기획 및 리서치(1-4)

 

MVP

• 최소한의 기능을 갖춘 제품 또는 서비스로, 앞으로 더 많은 자원을 투자할 가치가 있을 지 판단할 할 수 있음
• 예시: ‘유저가 편리하게 이용할 수 있는 이동 수단을 만들자’는 미션이 주어졌을 때 어떻게 디자인해야 할까?
  • 1️⃣ 바퀴 만들기 + 부품 만들기 → 자동차 완성!
  • 2️⃣ MVP 1 : 바퀴에 판을 덧댄 이동 수단 → (유저 피드백)
    MVP 2 : 손잡이를 더한 이동 수단 → (유저 피드백)
    MVP 3 : 바퀴 크기를 키운 이동 수단 → (유저 피드백)
    MVP 4 : 모터를 단 이동 수단 → (유저 피드백)
    MVP 5 : 문을 여닫을 수 있는 이동 수단

출처: UX 기획 및 리서치(1-4)

 

케이스 스터디

• 에어비앤비와 아마존 두 기업의 MVP 실험은 초기 가설을 검증하고 유저 피드백을 수집하여 서비스를 발전시키는 데 중요한 역할을 했으며, 현재의 성공적인 비즈니스 모델 기반이 됨
• 에어비앤비
  • MVP 1
    • 가설 : 다양한 연령층의 유저들은 낯선 사람의 집에서 숙박하기 위해 지불할 의향이 있을 것이다.
    • 가설 검증 방법 : 특정 테크 컨퍼런스 참가자들을 대상으로 인당 80달러씩 지불할 의향이 있는지 파악해보기
    • MVP 스펙 : 서비스 소개 페이지 (숙박 시 에어 매트리스 3개, 무료 와이파이, 아침 식사 제공)
    • MVP 검증 결과 : 3명의 지불 의사를 통해 수요를 파악할 수 있었음
  • MVP 2
    • 가설 : 유저들은 자신의 집에 낯선 사람이 머무는 대가로 돈을 지불하는 것을 허용할 것이다.
    • 가설 검증 방법 : 대형 행사가 있는 곳 주변의 호스트가 자신의 공간을 플랫폼에 등록하면, 유저들이 실제로 공간을 예약하는지 파악해보기
    • MVP 스펙 : 위치, 날짜, 가격 필터링을 통해 호스트의 공간을 검색하고 예약을 요청할 수 있는 기능
    • MVP 검증 결과 : 샌프란시스코에서 열리는 모빌리티 테크 컨퍼런스 행사장소 5마일 이내에서 최소 10명 이상의 지불 의사(1박 80달러)를 파악할 수 있었음
• 아마존
  • MVP
    • 가설 : 온라인에서 모든 종류의 제품을 판매하는 세계 최대의 상점을 만들 수 있을 것이다.
    • 가설 검증 방법 : 20가지 상품군 중 책에 초점을 맞추어 유저가 책을 주문하면 제프 베조스가 직접 책을 구매하여 우편으로 보냄
    • MVP 스펙 : 책 주문을 할 수 있는 웹 페이지
    • MVP 검증 결과 : 2개월 내에 주간 매출 2만 달러를 달성하며 성장 가능성을 파악함MVP
  • Wizard of Oz: 실제로는 기능이 구현되지 않았지만, 사용자는 구현된 것처럼 느끼게 하고, 뒤에서 사람이 대신 수행하는 방식
  • Fake Door Test: 실제 기능이 없는데 있다고 표시해서, 사용자가 클릭하거나 관심을 보이는지를 확인하는 기법

 

 

1-5) 데이터 드리븐 UX 트렌드

 

데이터 드리븐 UX 등장 배경과 중요성

• 데이터 드리븐 UX를 통해 빠르게 변화하는 시장에서 효율적으로 제품을 개선할 수 있음
• 데이터 드리븐 UX는 디자이너가 홀로 작업할 때 뿐만 아니라 협업 할 때, 그리고 산출물의 임팩트를 측정할 때에도 중요한 역할을 함
  • 디자이너 관점: 유저 데이터의 해석을 바탕으로 디자인 산출물에 대한 논리적인 근거를 제공함
  • 커뮤니케이션 관점: 데이터는 타 조직과 원활한 의사소통을 돕는 공용어 역할을 수행함
  • 비즈니스 관점: 디자인 산출물이 비즈니스에 얼마나 기여하는 지 파악 가능함

출처: UX 기획 및 리서치(1-5)

 

데이터 드리븐 UX에서 활용되는 지표 예시

• 유저 관여도 관점 (Engagement)
  • 얼마나 많이 이용하는가? - DAU, WAU, MAU (일간, 주간, 월간)
  • 얼마나 자주 이용하는가? - DAU/MAU, DAU/WAU
• 유저 재방문 관점 (Retention)
  • 특정한 특성의 유저들이 재방문하는가? - 코호트 리텐션(특성한 유저 모아 기간별로 재방문하는 지 확인하는 지표: 성별이나 행동 등)
  • N일째 된 유저들이 재방문하는가? - Day N 리텐션(Day 0는 가입한 날)
• 유저 획득 관점 (Acquisition)
  • 얼마나 보는가? - 페이지 뷰 수, 클릭 뷰 수
  • 얼마나 획득되는가? - 전환율, 이탈율

 

케이스 스터디

• 실제 유저 행동 데이터 기반 의사결정은 앞으로 어떤 제품 개선을 해나갈 지에 대한 논리적인 인사이트를 얻음과 동시에 비즈니스 성과에도 긍정적인 영향을 미칠 수 있다는 장점이 있음
• 여기어때
  • 문제 정의
    • 문제 발견 : 쿠폰 받기 UI에서 유저들이 혜택을 놓치는 문제가 있었다. 특히, 상품 구매 시 가격 차이에 혼란을 겪는 유저가 다수 확인됨
    • 원인 찾기 : 쿠폰의 디자인이 명확하지 않아 유저들이 혜택을 인식하는 데 어려움을 겪고 있었으며, 이로 인해 가격 차이에 대한 혼란이 발생. 일부 쿠폰은 다른 것들과 시각적으로 일관성 부족
  • 가설 수립: 유저가 혜택을 명확하게 파악하고 더 높은 확률로 쿠폰을 받는다면, 이는 결제 전환율 증가로 이어질 것이다.
  • 해결 방법
    • 쿠폰 UI 일관성 문제 해결 다양한 디자인의 쿠폰을 통일하고, 디자인 시스템의 일관성을 유지하여 유저에게 일관된 경험 제공
    • 쿠폰 혜택 정보 강조 혜택과 행동 문구를 나눠 노출하여 유저가 빠르게 이해하고 쿠폰을 받을 수 있도록 함
    • 텍스트와 꾸밈 요소 최소화 간결하면서 명확한 정보 제공을 위해 텍스트와 꾸밈 요소를 최소화하여 유저에게 직관적으로 전달
  • 검증 과정
    • A/B 테스트를 통해 다양한 디자인 솔루션을 실험하고, 클릭률을 비교하여 어떤 디자인이 높은 효과를 가져오는지 확인한다
  • 결과
    • 쿠폰 받기 UI 개선 후, 클릭한 유저 비율이 17% 상승
    • 유저들이 개선된 UI를 통해 쿠폰을 받는 확률이 높아지고, 이는 결제 전환율에도 긍정적인 영향을 미칠 것으로 기대됨

• 코드 아카데미
  • 문제 정의
    • 문제 발견 : 유저들은 현재 체크아웃 페이지에서 가장 혜택이 큰 요금제를 쉽게 식별할 수 없어, 가격 할인의 최적화된 선택을 하지 못하고 있다.
    • 원인 찾기 : 체크아웃 페이지의 디자인이나 레이아웃 등이 가격 할인 혜택을 명확히 비교하고 강조하는 데 실패하고 있어, 유저가 최대 혜택을 얻을 수 있는 요금제를 찾기 어렵다.
  • 가설 수립
    • 유용한 가격 옵션을 우선하고, 절약 내용을 달러로 강조하면 연간 요금제의 채택률을 향상시킬 것이다.
  • 해결 방법
    • 플랜 카드 재정렬 더 매력적인 요금제를 우선적으로 노출함.
    • 100의 법칙을 활용한 절약 내용 강조 연간 요금제의 절약 내용을 백분율이 아닌 달러로 절약 내용을 표시함
  • 검증 과정
    • A/B 테스트를 통해 요금제별 전환 비율을 비교하여 어떤 디자인이 높은 효과를 가져오는지 확인한다.
  • 결과
    • 연간 결제 플랜 전환 비율 28% 상승
    • 전반적인 페이지 전환율 개선
  • A/B 테스트 사이트 

 

 

1-6) 실무 UX/UI 용어

 

디자인 관련 용어

• 시각적 계층 구조 (Visual Hierarchy): 중요한 순서에 따라 시선의 흐름이 이동하도록 디자인하는 것
• 와이어프레임 (Wireframe): 화면의 인터페이스를 단순한 선과 도형으로 표현한 것
• 프로토타입 (Prototype): 제품이나 서비스의 초기 버전으로, 아이디어를 시각적으로 보여주고 테스트하는 모델
• 정보 구조도 (Information Architecture; IA): 제품이나 서비스를 구성하는 요소들의 구조를 도식화하는 것으로, 유저가 길을 잃지 않고 원하는 정보를 쉽게 찾고 작업을 완료할 수 있도록 돕는 과정
• 피델리티 (Fidelity): 디자인 또는 프로토타입의 디테일 및 정확성 수준으로 Lo-fi는 낮은 피델리티, Hi-fi는 높은 피델리티를 가짐
• CTA (Call To Action): 사용자에게 원하는 동작을 취하도록 유도하기 위해 설계된 디자인 요소나 텍스트
• 모크업 (Mockup): 정적인 형태로 디자인된 인터페이스나 레이아웃을 보여주는 이미지나 모형

 

 

인지 심리 관련 용어

• 인지 부하 (Cognitive Load): 정보를 이해하고 처리하는 데 필요한 정신적 노력의 양
• 멘탈 모델 (Mental Model): 유저가 시스템이나 서비스를 어떻게 이해하고 예측하는지를 나타내는 개념
• 어포던스 (Affordance): 디자인 요소가 유저에게 어떤 동작을 할 수 있는 단서나 힌트를 제공하는 원리
• 게슈탈트 원리 (Gestalt Principles): 사람이 이미지를 인식할 때 주변에 있는 요소 간의 관계와 맥락에 영향을 받는다는 이론으로 유사성, 근접성, 연속성, 폐쇄성 등이 해당됨
• 힉의 법칙 (Hick’s Law): 선택할 수 있는 옵션 수가 늘어날수록 결정 시간이 증가하는 원리
• 피츠의 법칙 (Fitts’ Law): 대상까지의 거리와 크기에 따라 상호작용 시간이 달라지는 원리
• 제이콥의 법칙 (Jacob’s Law): 유저가 과거 경험을 토대로 익숙한 디자인 패턴을 기대하는 원리

 

 

개발 관련 용어

• 서버 (Server): 정보와 서비스를 제공하는 소프트웨어로, 웹사이트나 앱의 데이터를 저장하고 제공함
• 클라이언트 (Client): 서버로부터 정보를 요청하고 받아오는 디바이스나 소프트웨어로, 웹 브라우저나 모바일 앱과 같은 유저가 상호작용하는 부분을 가리킴
• 접근성 (Accessibility): 모든 유저, 포괄적으로 장애가 있는 유저를 포함하여, 웹사이트나 앱을 이용할 수 있도록 디자인하고 개발하는 것을 의미함
• API (Application Programming Interface): 서로 다른 소프트웨어 간의 상호작용을 도와주는 인터페이스로, 데이터를 교환하거나 서비스를 활용할 수 있도록 하는 프로그래밍 규칙과 도구의 집합
• CMS (Content Management System): 웹사이트 또는 앱의 콘텐츠를 쉽게 관리하고 업데이트하는 도구 또는 플랫폼
• 오픈 소스 (Open Source): 소프트웨어 또는 프로젝트가 무료로 공개되며, 누구나 소스 코드를 확인하고 수정할 수 있는 개발 방식
• 디버깅 (Debugging): 소프트웨어 오류를 찾고 수정하는 프로세스로, 프로그램이 예상대로 동작하지 않을 때 문제를 식별하고 해결하기 위해 사용하는 과정

 

출처: UX 기획 및 리서치(1-6)