[제로베이스 UIUX 파트타임 스쿨] 학습일지 - 4

 

①  4주차 수강한 분량

3-1 사용자 여정 지도 (User Journey Map)

3-2 사용자 여정 지도의 활용

3-3 테스크 플로우 (Task Flow)

3-4 테스크 플로우 만들기

3-5 스토리 맵 User Story map

4-1 퍼소나 Persona

4-2 퍼소나의 제작과 활용

---

 

② 각 강의별 학습하며 새롭게 알게된 점

3-1 사용자 여정 지도 (User Journey Map)

사용자 여정 지도란?
사용자가 특정 과업을 수행하는 과정에서의 행동, 감정, 상호작용하는 접점 등을 시간의 흐름에 따라 시각화한 도구입니다.

사용자 여정 지도를 통해 알 수 있는 요소

• 사용 동기 (왜 시작하는가)
• 시작점 (어디서부터 시작하는가)
• 행동 (무엇을 하는가)
• 감정 (그 과정에서 어떤 감정을 느끼는가)
• 도구 (무엇을 사용하여 상호작용하는가)
• 시간 (각 단계에 소요되는 시간)

 

 

+) KPI(핵심 성과 지표)란?

KPI(Key Performance Indicator)는 특정 목표 달성 여부를 측정하고 평가하는 지표입니다. 예시로는 고객 만족도, 전환율, 이탈률 등이 있습니다.

 

고객 여정 지도 KPI의 예시

• 인지 단계: 웹사이트 방문자 수, 소셜 미디어 노출 횟수, 검색 광고 클릭률 등
• 고려 단계: 제품 페이지 조회수, 상품 비교 분석 페이지 조회수, 사용 후기 조회수 등
• 구매 단계: 구매 전환율, 평균 주문 금액, 구매 빈도 등
• 유지 단계: 재구매율, 고객 유지율, 추천율 등
• 옹호 단계: 고객 추천 지수 (NPS), 소셜 미디어 언급량 등 

사용자 여정 지도의 활용

• 팀원 및 이해관계자 간 공통된 사용자 이해 도출
• 디자인 및 서비스 개선을 위한 주요 의사결정 기준
• 문제점 및 기회요인을 시간의 흐름 안에서 파악
• 사용자 행동의 흐름과 감정의 기복을 통해 개선 방향 모색
• 타 부서(개발, 마케팅 등)와 협업 시 효과적인 커뮤니케이션 도구

 

User jouney map basic structure

 

User Journey Map 제작 단계

1. 범위 설정: 어떤 서비스 또는 기능에 대한 여정인지 명확히 함
2. 페르소나 정의: 주요 사용자 유형 설정
3. 항목 구성: 단계 / 감정 / 문제점 / 과업 / 기능 / 기회요인 / 접점 / 장소 / 협업자 등
4. 지도 작성: 실제 데이터를 바탕으로 프레임에 정보 입력
5. 검토 및 피드백: 시각적 일관성 및 사용자 중심 관점 유지 여부 확인

3-2 사용자 여정 지도의 활용

- 문제점의 구체화

사용자 조사 결과와 여정지도를 비교하여 기존에 파악된 문제점의 상세한 원인과 그 해결방안을 모색하는 자료로 활용될 수 있다.

 

- 물리적인 시간의 표현

사용자 여정 지도상에서는 연결되는 스텝으로 표현되어 있으나 실제로는 각 스텝이 다른 시간을 가질 수 있다.

이때 소요시간이 긴 스텝은 정보량이 많거나, 테스크가 많아서 일 수 있으므로 개선을 위한 기회요인이 될 수 있다.

 

- 전략적 사고

기존의 프로세스를 단축하거나 비즈니스적으로 효과적인 방안을 모색한다

회원가입율이 낮음 : 조사결과

회원가입 과정에서 불필요하게 많은 입력이 요구됨 : 원인 파악

추가정보는 이후 이벤트 발생 시 입력하도록 플로우 개선 : 개선방안 도출

더 많은 회원가입을 유도한다 : 기대효과

 

- 사용자별 특이점

동일한 테스트에 대해 여러 맵을 겹쳐서 특정 경우에 나타나는 행태(문제)와 공통적으로 발생되는 요인을 찾는다.

이때 문제의 중요도(priority)도 함께 정의될 수 있다.

 

- 리서치 주안점 도출

추가 리서치가 필요한 부분을 발견하고 추후 리서치 실행에 필요한 POV(point of view)도 함께 정의한다.

 

3-3 테스크 플로우 (Task Flow)

Task Flow란?
사용자가 특정 과업을 달성하기 위해 거치는 행동의 흐름을 단계적으로 정리한 것

→ User Journey Map이 큰 흐름을 보여준다면, Task Flow는 그 중 하나의 행동을 깊게 들여다봄

 

Task Flow의 장점

• UI 설계 시 가장 현실적이고 구체적인 접근 가능
• 시스템 관점 + 사용자 관점 모두 반영 가능
• 기능별 필요한 입력 항목 및 경로를 파악할 수 있음
• 예외 상황이나 오류 발생 루트도 사전에 고려 가능

3대 구성 요소

1. 페르소나 Personas (common으로 생략 가능)
2. 목표 (Goal)
3. 행동 단계 (Steps)

Task Flow 작성 단계

1. 목표 설정: 이번 플로우의 시작과 끝을 명확히 정의
2. 행동 나열: 사용자가 수행하는 모든 행동을 변수 없이 기술
3. 분기점 추가: 의사결정이 필요한 지점 설정 (e.g. 결제 수단 선택)
4. 리마커블 포인트 삽입: Pain Point 또는 기회요인 기록
5. 브랜치 정의: 다양한 경우를 가정한 흐름도 작성

 

유저 플로우 (User Flow)와 Task Flow의 차이

구분	User Flow	Task Flow
시작점	사용자 동기 (외부 가능)	시스템 내부
초점	사용자 전체 여정	특정 기능 또는 과업 단위
예시 시작점	인스타그램 → 상품 클릭	쇼핑몰 메인페이지 → 구매

 

※ 사용자가 과업을 완료하기 위한 행동의 연속 / 사용자가 해야하는 과업을 정의

퍼소나에 따라 동일한 테스크가 여러개로 정의될 수 있음 / 시나리오를 기반으로 가능한 모든 파생 루트를 표시

대략적인 콘텐츠/기능 설명을 포함할 수 있음 (주요기능, 필수 입력 항목 등)

 

Task Flow 정의하면 좋은 점

- UI를 가장 빨리, 저렴하게 현실적으로 바라보는 방법

- 시스템 개발 관점과 사용자 관점을 모두 포괄할 수 있다

- 발생할 수 있는 문제점을 미리 발견하고 대응할 수 있다

- 각 단계별로 어떤 정보/기능이 필요한 지 확인할 수 있다

- 발생 가능한 모든 경우의 수를 확인할 수 있다.

tast flow component

 

 

3-4 테스크 플로우 만들기(Task Flow)

테스크 플로우를 작성하기 앞서서

- 목적(신규 개발 or 기존 UI 분석을 위함 등)

- 시나리오 정의(누가, 어떤 목적으로, 언제, 어디서, 무엇으로 사용하는 가)

- 디테일 수준

- 작성 방법

 

step1. 테스크의 목표 정하기

시작과 끝

테스크의 시작의 기준과 끝은 경우에 따라 늘 달라질 수 있기 때문에

이번 플로우에서 정의할 범위의 시작과 끝의 기준(조건)을 정함

 

step2. 사용자의 모든 행동 기술하기 (가장 최단 거리의 변수 없이)

사용자가 과업을 수행하기 위해 하는 모든 행동

정보를 탐색하고, 버튼을 누르는 등 사용자가 과업을 완료하기 위해 하는 모든 행동을 작성한다.

 

작성할 '행동' 범위

디자인 목적에 따라 테스크 플로우에 사용자의 '행동'의 범위를 정합니다.

시스템 외부적으로 이루어지는 인터렉션은 경우에 따라 필수가 될 수도 옵션이 될 수도 있다.

※ 필수와 옵션 정보를 추려서 작성한다.

 

step3. 의사결정 요인 추가하기

분기(decision point)

사용자의 의도 또는 시스템의 목적에 따라 테스크 플로우가 나누어지는 시점을 추가

이 과정을 통해 플로우를 더욱 현실적으로 만들 수 있다.

 

Step4. 리마커블 remarkable 포인트 추가하기

Pain point 또는 Opportunity

좋거나/나쁜 발견점 추가. 여러사람이 함께 보는 문서이기 때문에 각자 추가하면 풍성해짐

 

Step5. 브랜치 Branch 플로우 정의

필연적이 아닐지라도, 발생할 가능성이 있거나, 단순히 다양한 가능성을 검토해보기 위한 목적으로

'만약'이라는 가정하에 다양한 브랜치 플로우를 작성(What if...)

 

User Flow(사용자 중심)

유저플로우는 테스트 플로우와 유사한 형태를 갖기만, 테스크의 시작점이 반드시 시스템이 아닐 수도 있다는 것이 가장 큰 차이점.

 

예시) 쇼핑앱에서 신발구입

테스크 플로우 : 애플리케이션의 랜딩페이지에서 시작

유저 플로우(사용자의 동기부터 시작) : 포털서비스에서 검색하기 또는 인스타그램에서 태그 검색하기 등 시스템 외부가 될 수 있다

 

3-5 UX 스토리맵 (User Stroy Map)

Backbone : 사용자에 관한 우리가 아는 모든 것(factors)

 

Step1. 이야기 만들기

Step2. 관점 나누기

Step3. 풍성하게

Step4. 액티비티 기준으로 그룹핑

Step5. 우선순위 슬라이스

 

✅ UX 스토리맵이란?

UX 스토리맵(User Story Map)은 사용자가 제품(웹/앱 등)을 사용하는 흐름을 시간순으로 정리하고, 각 흐름에서 사용자 행동과 기능 요구사항을 구조화하여 시각적으로 표현한 지도입니다.

원래는 애자일 개발 방법론에서 시작된 도구지만, UX 디자인에서도 사용자 중심 사고를 구조화하고 우선순위를 정할 때 매우 유용하게 쓰여요.

 

UX 스토리맵의 구성요소

 

1. 사용자 목표(User Goals)

• 사용자가 이루고 싶은 목적
• 맵의 상단에 위치함
• 예: ‘여행 예약하기’, ‘제품 구매하기’

2. 활동(Activity) / 단계(Stage)

• 목표를 이루기 위해 사용자가 거치는 큰 흐름 (Task Flow)
• 예: '검색', '선택', '결제', '확인'

3. 스토리(Stories) / 작업(Task)

• 각 단계에서 사용자가 실제로 하는 행동
• 예: ‘날짜 입력’, ‘필터 선택’, ‘장바구니 담기’, ‘카드 정보 입력’

4. 우선순위와 릴리즈 계획 (Optional)

• 작업들을 위/아래로 배치해 우선순위를 설정하고,
• MVP(최소 기능 제품) 릴리즈 범위를 정의할 수도 있음

스토리맵 만드는 법 (5단계)

1. 페르소나 또는 타겟 사용자 정의
2. 사용자의 주요 목표 정의
3. 전체 사용 흐름(행동 순서) 도출
4. 각 단계에서의 세부 행동 및 필요한 기능 나열
5. 우선순위 정하고 MVP 범위 지정

상황 스토리맵이 유용한 이유

기획 초기	전체 플로우를 빠르게 파악 가능
팀 협업	개발/디자인/기획자가 공통의 사용자 여정을 이해함
MVP 설정	어떤 기능을 먼저 출시할지 결정할 수 있음
사용자 테스트	어떤 단계가 UX의 허들이 되는지 파악 가능

 

 

🎯 예시: 중고거래 앱 (예: 당근마켓) UX 스토리맵

🧍‍♀️ 사용자 목표: "원하는 물건을 사고 싶다"

단계 (Stage) 작업 (User Task / Story) 우선순위

단계	작업	우선순위
1. 홈 화면 확인	- 현재 위치 기반의 물품 리스트 확인- 인기 상품 확인	상
2. 검색 및 탐색	- 검색창에 키워드 입력- 카테고리 선택- 거리/가격 필터 설정	상
3. 상품 상세보기	- 이미지 확인- 설명 읽기- 판매자 정보 확인- 찜하기	상
4. 판매자와 대화	- 채팅 기능으로 문의- 가격 제안- 거래 일정 조율	상
5. 거래 확정 및 후기	- 만남 장소 결정- 수령 후 후기 작성- 거래 완료 처리	중

 

📌 이 UX 스토리맵으로 알 수 있는 점:

• 사용자의 전체 여정이 한눈에 보여서 설계가 누락되지 않음
• MVP 기능은 '검색', '상품 보기', '채팅'까지만으로 구성 가능
• 후기 작성 등은 2차 릴리즈로 고려할 수 있음

사용자 목표 사용자 단계 스토리(행동) 필요한 기능/요구사항으로도 작성 가능

사용자 목표	사용자 단계	스토리(행동)	필요한 기능/요구사항
물건 구매	검색	키워드 입력	검색창, 자동완성
	필터	거리/가격 설정	필터 UI
	상세보기	이미지 클릭	슬라이드뷰, 확대
	채팅	메시지 입력	채팅방, 푸시 알림

 

4-1 퍼소나 (Persona)

퍼소나란?
서비스의 대표 사용자를 구체적으로 정의한 가상의 인물

 

퍼소나 제작 과정

사용자 조사를 기반으로 한 결과 자료 → 필터링 → 퍼소나 완성

 

퍼소나 = 대표사용자

 

1) 우리의 사용자가 누구인지 정의할 수 있다.

혹여 대상 사용자가 '전체'라 하더라도 우선순위는 반드시 존재

 

2) 선택과 집중의 기준

모든 사용자의 모든 니즈를 만족하는 mega service란 없다

 

3) 디자인 의사결정과 커뮤니케이션에 유용하다

'왜' 이러한 디자인 결정을 내려야 하는 지에 대한 기준이 된다.

 

4) 사용자의 마음과 시선에서 생각할 수 있다.

몰입연기 method acting, 의인화 기법 stanislavssky method 과 같이 사용자의 관점에서 바라보는 촉매제가 된다.

 

chunky persona(그룹 퍼소나)

4-2 퍼소나의 제작과 활용

4-2 퍼소나의 제작과 활용

 

step1. define a target user type

1. 주요 사용 시나리오 유즈케이스를 커버할 수 있는 ' 대표 퍼소나 타입'을 정한다.

2. 각 퍼소나마다의 핵심 니즈를 한 문장으로 작성한다.

 

예)

서비스 타입 : 배달 음식 중계 서비스

서비스 사용자 타입 : 주문자 / 음식점 운영자 / 서비스 운영자

 

핵심 니즈 한 문장

주문자 : 집이나 사무실, 때론 공원등 내가 있는 곳으로 언제든 원하는 음식을 주문해서 받고 싶어요.

 

step2. Bio

사용자 조사 결과를 기반으로 퍼소나를 이해할 수 있는 기본 정보를 작성한다.

이때 서비스 사용과 관계 없는 정보는 생략할 수 있다.

 

tip) 연예인 사진을 사용하지 않는 것을 추천, 캐릭커처 X

 

step3. Needs and frustrations

퍼소나의 주요 행동 패턴과 특성을 이해할 수 있는 '핵심 니즈 Core needs'와 '불편해 하는 것 Frustrations(욕구) '을 작성한다.

 

Step4. Repeated or missing fact check

중복되어 작성되었거나, 사용자의 행동특성 중 누락된 내용이 없는 지 확인한다.

 

Step5. Add personality

개인 선호도, 기술 사용 능력 등 개인의 특성이 표현되는 정보를 추가한다.

 

Step6. Additinal info

사용자 연상에 도움이 되는 예시 이미지나 우선순위는 낮으나 참고가 될 수 있는 정보를 추가한다.

Tech. familiarity / Behaviors / Experience / Personality / Snapshots

 

Branching : 퍼소나의 세분화

주문자  → 1. 재미로 주문족 / 2. 혼밥 주문족 / 3. 바빠서 주문족

 

10 elements for User Persona

 

1. profile

2. personality

3. referents & influences

4. archetype & quotes

5. technology expertise

6. user experience goals

7. used device and platforms

8. domain details

9. must do - must never

10. brand & product relationship

---

 

③ 수강하면서 흥미로웠던 부분

 

테스크 플로우 작성 단계에 대한 구체적인 컴포넌트 구성 원칙을 알게 된 점이 특히 인상 깊었습니다.
그동안 막연하게 이해하고 있었던 개념들을 이번 강의를 통해 체계적으로 정리할 수 있었고, 실제 실무에 어떻게 적용되는지도 함께 배울 수 있어 매우 유익했습니다.

 

④ 수강하면서 어려웠던 부분

 

유저 플로우와 테스크 플로우의 개념이 유사하게 느껴져 처음에는 구분이 쉽지 않았습니다.
두 개념 모두 사용자의 행동 흐름을 다룬다는 점에서 혼동이 있었지만, 강의를 반복 학습하면서 시작 지점과 목적, 관점의 차이를 중심으로 차이를 점차 이해하게 되었습니다.

 

⑤ 다음 학습 계획

 

다음 과제 주제인 ‘프로토타입’에 대해 보다 깊이 있게 학습할 계획입니다.
강의를 수강하며 핵심 내용을 노트로 정리하고, 실제 서비스에서 활용된 프로토타입 사례를 찾아보며 이론과 실무를 연결하는 연습을 해보겠습니다. 또한, 직접 간단한 프로토타입을 제작해보며 학습한 내용을 실습으로 이어갈 예정입니다.

 

 

※ 이 글은 제로베이스 UIUX 스쿨 주 3일반 강의 자료 일부를 발췌하여 작성되었습니다.