본문 바로가기
강의 정리/UX 기획 및 리서치

[UX 기획 및 리서치] CH4: UX 기획 및 디자인 이해

by yeon jeong 2025. 8. 28.

 

4-1) UX 기획: 문제 정의 및 가설 수립

 

문제 정의

  • 유저 리서치를 통해 도출한 제품의 현재 문제점을 특정하는 단계
    • 해결해야 할 문제가 무엇인지를 정의함
    • 문제의 크기를 정량화된 수치로 파악함
    • 왜 문제로 정의했는지 충분한 근거가 있어야 함
    • 문제 발생 원인에 대한 근거 데이터를 파악
  • 문제 정의 시작하는 방법
    (아래 세 가지를 연결지어 생각해보는 연습하기)
    • 문제를 풀고자 하는 목적: 문제를 통해 무엇을 이루고자 하나요?
    • 문제: 목적을 이루기 위해 문제가 되는 것은 무엇인가요?
    • 문제를 풀었을 때의 임팩트: 문제를 해결하면 목적이 얼마나 달성되나요?
  • 문제 정의 예시
더보기

회원가입 화면에서의 문제 정의 과정

  • 문제
    • 유저의 40%가 회원가입을 완료하지 않고 중도에 이탈하는 문제가 있다.
  • 문제로 정의한 이유
    (유저 경험 관점과 비즈니스 관점을 함께 생각해보는 것을 추천)
    • 유저 경험 관점
      회원가입은 제품의 초기 진입점 중 하나로,
      유저가 제품을 처음 경험하는 단계
      여기에서 유저가 얼마나 수월하게 진입하느냐가 전반적인 유저 경험에 큰 영향을 미칠 수 있기 때문에 이 부분에서의 개선이 필요하다.
    • 비즈니스 관점
      많은 유저가 회원가입 중 이탈한다면, 효과적인 유저 획득이 어려워져서 잠재적인 유저 손실로 이어질 수 있다.
  • 근거 데이터
    (유저 행동 데이터, 인터뷰 등을 통해 문제 발생 원인에 대한 힌트를 찾을 수 있음)
    • 회원가입을 위해 한 번에 입력해야 하는 정보가 많아서 유저가 부담감을 느끼고 있다.
      힌트: 이탈하는 유저 중 65%가 정보를 모두 입력하기 전에 이탈하고 있다.
    • 약관 동의가 왜 필요한지에 대한 명확한 안내가 없어서 유저가 프라이버시 침해에 대한 불안감을 느끼고 있다.
      힌트1: 이탈하는 유저 중 20%가 정보 입력 후 약관 동의 전에 이탈하고 있다.
      힌트2: 인터뷰에 따르면 유저들은 약관 동의 시 개인정보가 수집되는데 그에 대한 설명이 불충분하다고 느꼈다.
    • 회원 가입을 위한 정보 입력과 약관 동의가 동시에 이루어져서 유저가 복잡하다고 느끼고 있다.
      힌트: 인터뷰에 따르면 유저들은 첫 눈에 보기에 해야하는 게 많아보여서 귀찮다고 느꼈다.

 

 

가설 수립

  • 특정 문제에 대한 가정을 명확하게 정의하고 검증 가능한 형태로 제시하는 단계
  • 가설 설정
    • 작은 문제부터 큰 문제까지 모두 가설을 통해 검증할 수 있음
      (다만, 문제를 하나의 아이디어로 한 번에 해결하는 것은 어려운 일)
    • 가설은 개선을 시도하고자 하는 부분에 초점을 맞춰 1) 어떤 변경을 통해 2) 어떤 결과를 얻고자 하는지 담고 있어야 함
  • 가설 검증
    • 가설을 어떻게 검증할 것인지 검증 방법 선정
    • 가설을 검증할 수 있는 올바른 모니터링 지표 설정
  • 좋은 가설의 요건
    • 목표 지향
      가설은 특정 목표를 달성하기 위한 것이어야 함
      여기서 목표는 유저 경험 개선이나 유저가 가진 문제 해결과 관련 있어야 함
    • 구체성과 명확성
      불확실한 용어나 추상적인 문구는 피해야 함
      구체적인 결과물을 예측할 수 있도록 해야 함
    • 측정 가능성
      가설은 검증 가능하고 측정 가능해야 함
      지표를 통해 성공과 실패를 측정할 수 있어야 함
  • 가설 수립 예시
더보기

회원가입 화면에서의 문제를 바탕으로 가설을 수립하는 과정

  • 가설
    • 회원 가입을 시도하는 유저가 한 번에 한 정보만 입력할 수 있도록 하면, 더 많은 유저가 회원 가입을 완료할 것이다.
  • 검증방법
    • A/B 테스트
      A안: 기존 안 노출
      B안: 한 번에 한 정보만 입력할 수 있도록 하는 새로운 안 노출
  • 모니터링 지표
    • 성공 지표: 가설을 검증할 수 있는 지표
    • 가드레일 지표: 조직 전체에서 중요하게 고려하는 지표, 혹은 해당 실험으로 부정적인 영향을 받을 수 있는 지표
    • 성공 지표와 가드레일 지표 설정
      • 성공 지표(Success Metric): 이탈율
        • 이탈율이 B군에서 30% 이내일 경우 성공한 것으로 볼 것이다.
      • 가드레일 지표(Guardrail Metric): 구매 전환율, 소요 시간, 단계 완료율
        • B군에서 구매 전환율이 5% 이상 낮을 경우: 성공 지표를 달성하더라도 전면 적용은 고민해봐야 한다.
        • B군에서 소요 시간이 5% 이상 길 경우: 성공 지표를 달성하더라도 전면 적용은 고민해봐야 한다.
        • B군에서 단계 완료율이 10% 이상 낮을 경우: 성공 지표를 달성하더라도 전면 적용은 고민해봐야 한다.

 

 

원페이저(1 Pager) 작성

  • 정의한 문제와 가설을 중점으로 실험의 방향성과 목적을 한 눈에 파악할 수 있도록 정리하는 단계
  • 논의를 진행해나가면서 원페이저는 계속 수정/보완되고, 더 다양한 정보들을 담게 됨
  • 원페이저 초안 예시
더보기
  • 해결해야 할 문제의 성격에 따라 포함되는 내용은 더 많아질 수 있으며, 논의 과정에서 디자인 솔루션, 실험 기간, 예상 일정 등에 대한 내용이 구체화 됨
출처: UX 기획 및 리서치(4-1)

 

 

4-2) UX 기획 구체화: 유저 사용 맥락 반영

 

유저 시나리오(User Scenario)

  • 제품 또는 서비스에 대한 유저 경험을 스토리텔링으로 기술하는 방법
  • 디자인 초기 단계에서 유저에 대한 공감을 바탕으로 유저 중심의 솔루션을 찾을 때 활용함
  • 유저 페르소나와 결합하여 작성하면 유저의 동기와 목표를 감성적으로 이해하는 데 도움됨
  • 유저 시나리오의 구성 요소
    • 유저: 유저 페르소나
    • 목표: 무엇을 달성하려고 하나요?
    • 동기: 왜 달성하려고 하나요?
    • 외부 요소: 어떤 것에 영향을 받나요? (ex. 사용 상황, 사용 시간 등)
  • 유저 시나리오 예시
더보기

버티컬 커머스 서비스를 사용하는 유저의 시나리오

  • 유저: 홈트를 즐기고 건강에 관심 있는 30대 직장인 여성 클레어
  • 목표: 건강과 관련된 제품을 효율적으로 온라인으로 구매하고, 홈트 공간을 더욱 효과적으로 꾸미기
  • 동기: 품질높은 건강 제품과 홈트를 위한 트렌디하고 기능적인 아이템을 갖고 싶어요.
  • 외부 요소: 평소 때는 구매를 하지 않지만, 오늘 블랙프라이데이 할인 쿠폰을 받았어요. 눈독 들이고 있던 요가블럭이 마침 78% 할인된 가격에 판매되고 있어서 얼른 쿠폰까지 적용하여 저렴하게 구매해요.

 

 

고객 여정 지도(Customer Journey Map)

  • 제품 또는 서비스를 유저가 이용하는 흐름을 시각화하여 분석하는 방법
  • 타임라인에 따른 유저의 여정을 시각적으로 표현하여 특정 시점에서의 경험을 파악하고 개선점을 찾을 때 활용함
  • 전체 유저 경험을 한눈에 파악할 수 있음
  • 고객 여정 지도의 구성 요소
    출처: UX 기획 및 리서치(4-2)

    • Zone A: 관점
      • 1. 유저 페르소나: 여정을 체험하는 유저
        예시: 야근을 자주하는 20대 회사원 유진
      • 2. 유저 시나리오: 여정 지도가 다루는 상황 묘사, 유저의 목표와 기대치와 연결
        예시: 카카오T로 택시를 호출하여 편리하게 집에 돌아가고 싶어해요. 얼른 빨리 집에 돌아가서 쉬고 싶은 마음 뿐이에요. 그런데 시간대가 밤이라서 편리한 호출과 안전한 운행을 기대하고 있어요.
    • Zone B: 경험
      • 3. 여정 단계: 타임라인 기반으로 분류
        예시: 호출 및 대기 단계, 픽업 단계, 이동 단계, 도착 및 결제 단계
      • 4. 행동: 유저가 특정 단계에서 취하는 행동
        예시: 호출 시 앱을 열어 목적지를 입력하고 택시를 호출해요. 이동 중 휴대폰이나 업무에 전념하거나 휴식을 취해요. 결제 시 앱을 통해 간편하게 결제를 진행하고 리뷰를 남겨요.
      • 5. 생각: 유저의 생각, 질문, 동기, 정보에 대한 니즈
        예시: 호출 시 택시가 빨리왔으면 좋겠다고 생각해요. 이동 중 길이 많이 안 막히길 바라면서 끝내지 못한 업무를 계속 생각해요. 결제 시 등록된 카드에 잔액이 남아있는지 잠시 생각해요.
      • 6. 감정: 단계에 걸쳐 단일 선으로 표현
        예시: 호출 시 근거리라 배차 거부를 하는 몇몇 택시 때문에 조급해져요. 이동 중에 괜히 길을 빙 둘러가지 않을까 불안해요. 결제 시 할증으로 비싼 택시비 때문에 잠시 당황해요.
    • Zone C: 인사이트
      • 7. 기회: 유저의 경험을 어떻게 최적화할 수 있는지에 대한 인사이트
        예시: 할증에 대한 투명성과 다양한 결제 옵션을 제공하면 유진이 더 편리한 결제 경험을 할 수 있을 거예요. 근거리 배차 거부를 최소화한다면 야근하는 유진이 퇴근하기 더 편리할 거예요.
      • 8. 담당 팀이나 부서: 해당 인사이트를 적용해볼 수 있는 협업자 코멘트
        예시: 결제 팀에서 요금 구조를 전달하는 방식과 결제 옵션 다양화를 고려할 수 있어요. 운영 및 품질 담당 팀에서 근거리 운행 거절에 대한 패널티 시스템을 고려할 수 있어요.
  • 고객 여정 지도 시각화 방법
    • 목적 설정: 어떤 유저의 여정을 시각화할 것인지 명확한 목적 설정하기
    • 유저 페르소나 정의
      어떤 유저를 대상으로 할 것인지 결정하기(유저 페르소나별로 각각의 유저 저니맵이 나올 수 있음)
      유저가 여정을 통해 이루고자 하는 목표와 가지고 있는 기대 작성하기
    • 여정 단계 분류: 유저가 시간의 흐름에 따라 언제 어떤 행동을 하는지 분류하기
    • 터치 포인트 파악
      유저가 제품 또는 서비스와 상호작용 하는 지점, 즉 터치 포인트를 파악하기
      유저가 터치 포인트에서 어떤 페인 포인트를 가지고 있고, 어떤 감정을 느끼고, 어떤 생각을 하는지 작성하기
    • 기회 파악: 유저의 타임라인별에서 문제를 파악하고, 개선점을 찾기
  • 고객 여정 지도 예시
    (고객 여정 지도는 상황에 맞게 다양하게 변형해서 활용할 수 있음)
더보기
  • 휴대폰 요금제를 바꾸려는 유저의 고객 여정 지도
출처: UX 기획 및 리서치(4-2)
  • 우버 앱을 다운로드해서 탑승 경험을 하기까지의 경험을 다루는 고객 여정 지도
출처: UX 기획 및 리서치(4-2)

 

 

유저 스토리(User Story)

  • 특정 기능을 실제 개발 구현 가능한 작은 단위로 기술하는 방법
  • 주로 애자일(Agile) 방법론에서 사용됨
  • 문서에서 일일이 모든 내용을 정의하기에는 한계가 있기 때문에 유저 스토리를 통해 구현할 사항에 대한 구성원 간 합의를 도출함
  • 실무에서는 협업 시 유저 시나리오, 유저 저니맵보다 빈번하게 활용됨
  • 유저 스토리의 구성요소
    • As a {user}: 유저
    • I want {goal}: 유저가 원하는 기능 또는 행동
    • So that {benefit}: 이를 통해 유저가 얻을 수 있는 이득
  • 유저 스토리 예시
더보기

커머스 서비스에서의 유저 스토리

  • 장바구니 기능
    • 로그인한 유저는 나중에 담긴 상품들을 확인하고 구매하기 위해서 장바구니에 상품을 추가할 수 있다. 
    • As a: 로그인한 유저
    • I want: 장바구니에 상품을 추가
    • So that: 나중에 담긴 상품들을 확인하고 구매하기 위해서
  • 간편 결제 기능
    • 로그인한 유저는 편의성을 누리고 포인트 혜택을 받기 위해서 네이버페이와 카카오페이를 통한 간편결제를 할 수 있다. 
    • As a: 로그인한 유저
    • I want: 네이버페이와 카카오페이를 통한 간편 결제
    • So that: 편의성을 누리고 포인트 혜택을 받기 위해서
  • 걸킨 문법
더보기
  • 걸킨 문법(Gherkin Syntax)은 유저의 행동에 중점을 맞추어 개발하는 행동 주도 개발(Behavior-Driven Development) 환경에서 널리 활용되는 특수한 문법
  • As a, I want, So that만으로는 기능 구현 여부를 명확히 판단하기 어려워서 테스트 케이스를 구체적으로 정의하기 위한 용도로 활용하기도 함
  • 걸킨 문법을 활용한 유저 스토리 구체화 요소
    • Given {주어진 상황}: 유저에게 주어진 상황
    • When {조건 및 행동}: 유저의 특정 액션 또는 이벤트
    • Then {결과}: 특정 결과나 상태
  • 걸킨 문법을 활용한 유저 스토리 예시
    • 유저의 추가 액션이 있을 경우 And와 Or을 활용하여 표현할 수 있다.
    • 한 유저 스토리에 대한 구현에 대한 기준은 여러 개가 될 수 있다. 
      (간편 결제 기능의 경우 결제 실패 케이스 등에 대한 내용도 포함될 수 있음)
출처: UX 기획 및 리서치(4-2)

 

 

4-3) UX 기획 구체화: 논리적인 흐름 설계

 

유저 플로우(User Flow)

  • 유저가 제품이나 서비스를 이용하는 과정을 유저의 행동 및 화면 간의 이동에 초점을 맞추어 시각화하는 단계
  • 유저가 최종 목표에 도달하기 위해 서비스 내에서 어떤 경로로 이동하며, 어떤 행동을 하는지 구체화하는 도구로 활용할 수 있음
  • ‘해피 패스’(유저가 제품이나 서비스에서 원하는 목적지까지 아무런 문제를 겪지 않고 도달했을 때의 경로)에 매몰되지 않고 다양한 경로를 고려해볼 수 있다는 장점이 있음
  • 유저 플로우와 와이어프레임은 상호보완적인 도구로 활용할 수 있으며, 작업에 정해진 순서가 있는 것은 아님
  • 유저 플로우 구성 요소
    • 원형: 시작/끝
    • 사각형: 동작/프로세스 (유저의 입력이나 액션 표현)
    • 마름모: 조건 (특정 조건이나 결정 지점 표현, 유저의 행동이나 시스템 상태에 따라 플로우가 여러 가지로 나뉠 수 있음)
    • 화살표: 플로우의 방향 (한 상태나 단계에서 다음 상태나 단계로의 흐름을 표현)
  • 유저 플로우 예시

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

 

 

와이어프레임(Wireframe)

  • 화면의 레이아웃과 플로우를 단순한 선과 도형으로 설계하는 과정
  • 로우 피델리티(Lo-fi)로 작업되어 작업자들이 부담 없이 아이디어에 자유롭게 참여하고 의사결정에 기여할 수 있도록 도와주는 도구로 활용할 수 있음
  • 그래픽 요소 및 기술적인 세부사항을 배제하고 신속하게 결과물을 생성하여 작업자 간 커뮤니케이션을 위한 초기 비주얼을 제공할 수 있다는 장점이 있음
  • 변경되는 요구 사항에 대응하여 빠르게 구조를 검토하고 수정하기가 용이함
  • 논의의 초점이 레이아웃과 플로우에 집중되도록 최소한의 색과 디자인을 사용하여 작업함
  • 와이어프레임에 화면 이동에 대한 정보를 추가했을 때는 ‘와이어 플로우(Wire Flow)’라고 부르기도 함
  • 와이어프레임 예시
    • 손으로 그린 와이어프레임: 아이디어 즉각적으로 공유하고 토론하기 용이함, 과정 중에 아이디어 발산하기 용이함
    • 디자인 툴로 작업한 와이어프레임: 피드백 받기 용이함, 물리적으로 함께 있지 않아도 실시간으로 함께 작업하는 것이 가능함

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

 

 

 

정보 구조도(Information Architecture)

  • 제품이나 서비스를 구성하는 요소들의 구조를 도식화하는 것으로, 유저가 길을 잃지 않고 원하는 정보를 쉽게 찾고 작업을 완료할 수 있도록 돕는 과정
  • 유저가 자신의 현재 위치와 다음 장소로 가기 위해 무엇을 해야할 지 인지할 수 있도록 설계할 때 활용
  • 정보 구조가 효과적으로 설계될 경우 유저의 접근성이 향상되지만, 부적절하게 설계될 경우 유저의 이탈과 오류를 발생시킬 수 있음
  • 상위와 하위 개념을 효과적으로 그룹핑하고 올바른 라벨링을 하는 것이 중요
  • 정보 구조도의 기반이 되는 구성 요소
    • Organization: 조직 및 구성 시스템
      목적: 정보를 체계적으로 정리하고 구성하기
      예시: 웹사이트의 메뉴 계층 구조, 콘텐츠 그룹화, 상위 및 하위 카테고리화
    • Labeling: 라벨링 시스템
      목적: 정보를 명확하고 이해하기 쉽게 표현하기
      예시: 메뉴 항목의 명칭, 버튼 레이블, 카테고리명
    • Navigation: 내비게이션 시스템
      목적: 유저가 정보를 찾고 이동함
      예시: 웹사이트의 메뉴 바, 내비게이션 바
    • Searching: 검색 시스템
      목적: 유저가 원하는 정보를 검색하여 찾기
      예시: 웹사이트의 검색 기능, 검색 결과 페이지, 필터 및 정렬 옵션
  • 정보 구조도 예시

출처: UX 기획 및 리서치(4-3)_Organization 예시

 

출처: UX 기획 및 리서치(4-3)_Labeling 예시

 

출처: UX 기획 및 리서치(4-3)_Navigation 예시

 

출처: UX 기획 및 리서치(4-3)_Searching 예시

 

 

4-4) UX 기획 문서화: 화면 설계서 및 QA 문서

 

화면 설계서

  • 와이어프레임과 기능 상세 정의를 합친 문서로, 화면에 존재하는 각 요소를 분리하여 설명
  • 변경된 내용은 작성일과 함께 기록하여 버전 관리

 

 

QA 문서

  • QA(Quality Assuarance)는 기능 배포 전에 기능을 테스트하는 과정으로, 크게 테크니컬 QA와 디자인 QA으로 나뉨
  • 테크니컬 QA는 의도대로 기능이 잘 동작하는지에 초점을 맞춰서 이루어짐
  • 디자인 QA는 의도대로 디자인이 잘 구현되었는지에 초점을 맞춰서 이루어짐
    AS-IS(구현된 화면)와 TO-BE(의도한 화면)를 명확하게 전달하는 것이 중요