사용자 시나리오와 UX 전략

2024년 4월 12일 디자인 요약정리

 

4D

• Discover
• Define
• Develop
• Deliver

 

User Scenario(사용자 시나리오)

'Scenario(시나리오)'는 어떤 사건에 대해 구체적인 과정을 이야기 형식으로 기술한 것

 

'User Scenario(사용자 시나리오)'는 사용자가 다양한 맥락 속 서비스를 경험하며 목적을 달성하는 과정을 이야기 형식으로 기술한 것

 

Process

1. 대상이 되는 사용자에 대한 정의 (Persona 활용)
2. 사용자가 서비스를 접하게 되는 계기(목적)와 상황에 대한 정의
3. 사용자가 목적 달성을 위해 서비스와 만나는 지점들을 나열
4. 각 접점에서 수행하는 (인터렉션, 소통하는) Task를 나열
5. 각 접점을 이어주는 줄거리를 이야기 형태로 작성
6. 서비스로부터 얻게되는 가치(결론)가 무엇인지 정의

 

예시

"MZ세대 자유여행가를 위한, 독특한 여행지 정보를 제공하는 여행 커뮤니티서비스"

 

• Subjects: MZ 세대 자유여행가, 여행지 정보 탐색

 

Affinity Diagram

자유여행가들을 위한 여행지 추천 서비스를 만들기 위해 사용자 조사(IDI) 시행 후 수집된 주요 목소리들을 모델링한다면?

 

• 여행 장소와 시기, 나의 취향들을 고려해서 여행지를 추천해주길 원한다
• 여행지들을 목적에 맞게 정리, 분류해주는 기능을 원한다
• 여행지 정보를 구글이나 네이버 지도 등 기존 서비스에 연계해 보는 것을 원한다
• 여행지마다 목적에 따라 예상되는 소요시간을 알기를 원한다

 

UX Strategy

Affinity Diagram으로 요약된 주요 Needs를 해결하기 위한 방향성을 아이데이션한 화면은?

 

여행지 정보를 구글이나 네이버 지도 등 기존 서비스에 연계해 보는 것을 원한다
다른 서비스들에 저장 해돈 정보를 한 곳에 모아 보는 것을 원한다
                                                            ↓
                                                       Flexible
                    타 서비스와의 유연한 연계로 편리하게 이용할 수 있는

여행 장소와 시기, 나의 취향들을 고려해서 여행지를 추천해주길 원한다
여행지들을 목적에 맞게 정리, 분류해주는 기능을 원한다
                                                   ↓                                                 
                                                  Fit
          나의 취향, 목적에 꼭 맞는 여행지를 추천, 분류해주는

여행지마다 목적에 따라 예상되는 소요시간을 알기를 원한다
날씨에 따라 일정을 변경하거나, 추천을 원한다
                                           ↓
                                         Live
 상황에 따라 실시간으로 변경되는 정보를 손쉽게 파악할 수 있는

여행지들을 목적에 맞게 정리, 분류해주는 기능을 원한다
여행지 정보에 대한 신뢰 확보를 원한다
                                           ↓
                                      Trustful
     신뢰할 수 있는 정보만 모아서 정확하게 전달하는

 

요약

Project Goal

"MZ세대 자유여행가를 위한, 독특한 여행지 정보를 제공하는 여행 커뮤니티 서비스 구축"

 

Trustful

신뢰할 수 있는 정보만 모아서 정확하게 전달해주는

• 여행후기 작성자의 신뢰점수 제공
• 정확도 인증마크

 

Live

상황에 따라 실시간으로 변경되는 정보를 라이브로 확인할 수 있는

• 실시간 유튜브 방송 연계
• 최근 후기 기반으로 한 업데이트 정보 제공

 

Flexible

타 서비스와의 유연한 연계로 편리하게 이용할 수 있는

• 추천받은 여행경로의 구글 맵 전송 가능
• 여행스케줄의 카카오톡 공유 가능

 

User Scenario

• 대상이 되는 사용자 정의 → Persona
  • 예. 나만의 특별한 여행지를 추천받고 싶은 대학생
• 서비스를 접하게 되는 계기 → Trigger
  • 예. 여행지 정보 관련 정보를 찾던 중 지인을 통해 추천
• 목적 달성을 위해 서비스와 만나는 지점 → Touch Points
  • 예. 나와 유사한 성향을 가진 사람들의 여행후기를 보고 나의 여행 성향 분석 시도
• 수행하는 테스크(줄거리 - 이야기) → Plot
  • 예. 나의 여행 성향에 맞는 여행지를 추천받아 이를 기반으로 여행계획
• 서비스로부터 얻는 가치 정의 → Value
  • 예. 나의 니즈에 꼭 맞고 검증된 여행지들을 추천받을 수 있음에 만족

 

즉, 사용자 시나리오를 통해 사용자가 처해있는 상황, 목적, 행동, 결과에 대한 이야기를 통해 우리 서비스가 어떻게 목적 달성까지를 돕는지를 묘사

 

시도해보기

보편적인 범위 내에서 사용자의 행동을, 서비스의 사용 계기를 시작으로 여러 접점들을 통해 최종 목표 달성까지 도달하는 과정을 서술

 

사용자가 문제점을 어떻게 인지하고, 극복했는지 그리고 궁극적으로 어떠한 가치(결과)를 얻었는지, 서비스를 사용하고 싶은 마음이 들드록 작성 되었는지 확인

 

→ 이야기 작성이 완료되고 나서 다른 사람들과 크로스 체크 권장

 

시도하지 말 것

서비스의 기능, 스펙을 자세하게 기술하기 보다 사용자가 목적을 달성하기 위한 과정의 흐름을 묘사하는 과정인 점을 리마인드

 

D-School 5 Step

1. Empathize
2. Define
3. Edeate
   • HMW
   • Scamper
4. Prototype
5. Test

 

3i Model

1. Inspiration
2. Ideation
   • HMW
3. Implementiation

 

Google Sprint

1. Empathize
2. Define
3. Sketch
   • Crazy 8's Sketch
   • Crazy 8's Sharing and Voting

 

Crazy 8

Explain, 자신의 아이디어에 대해 사람들에게 설명하기

 

1. Notes
2. Ideas
3. Crazy 8s
4. Solution Sketch

 

Key Questions

• HMW 활용
  • 예. HMW 사용자들이 본인의 여행성향에 맞는 여행지 정보를 쉽고 빠르게 찾을 수 있을까?

 

Notes

아이데이션에 필요한 주요 정보들을 수집하여 메모

 

1. 타이머를 10분에서 20분으로 설정 → 시간은 유기적으로 조정 가능
2. 연관된 키워드 등으로 간단한 Desk Research를 수행하거나, 기 수집된 데이터들 모으기
3. 리서치를 통해 배운 것과 정보에 대해 이야기 → 보통 타사의 경우 어떻게 하고 있는지를 빠르게 벤치마킹
4. 중요한 사실, 참고해야 할 내용이 있다면 종이에 기록
5. 타이머가 울리면 종료

 

Doodle

아이데이션에 필요한 요소들을 벤치마킹하고 간단한 스케치로 정리

 

Crazy 8

8분 동안 8개의 칸에 문제를 해결하기 위한 각기 다른 아이디어 8개 그리기

 

8개의 아이디어를 빠르게 설명하고 가장 공감가는 아이디어에 투표

 

• Solution Sketch
  1. 자신 또는 다른 사람의 아이디어 중 최고라고 생각하는 아이디어 선택
  2. 선정된 아이디어를 여러 상태와 상황을 고려하여 어떻게 확장될 수 있는지 상세한 스케치
  3. 아이디어를 이해할 수 있도록 가능한 많은 세부 정보를 포함하여 그리기

 

Visual Concept

Concept & Moodboard

1. 해당 '가치'를 시각요소를 통해 전달할 수 있도록 전환하는 것에 목적
2. 시각 커뮤니케이션 요소인 '이미지', '컬러', '서체', '레이아웃', '도형 + 인터렉션' 등이 떠오를 수 있는 형태로 전환할 것을 추천
3. 간단한 스케치나 짧은 문장 등으로 표현 가능 (추후 키워드로 전환)
4. 키워드를 그룹핑하고 대표 키워드를 선언할 때에는 여러 시각 커뮤니케이션 요소를 아우를 수 있도록 고르게 선택

 

• Aggressive(적극적인), 시각적 요소에 대한 연상이 어렵거나 커뮤니케이션에서 혼선을 줄 수 있는 키워드
• Bold(선명한), 두꺼운 서체나 강렬한 색상 등을 연상할 수 있어 적합한 키워드 (무드보드를 통해 명확히 정의 필요)

 

Trustful, 신뢰할 수 있는

Color, Typography → 신뢰가 느껴지는 푸른빛 컬러, 반듯한 산세리프 서체

 

Live, 실시간 정보를 생생하게

Image, Iconography → 현장감이 느껴지는 이미지, 상태를 한 눈에 알 수 있는 아이콘

 

Flexible, 유연하게 연계되는

Layout, Grid → 정형화된 레이아웃이 아닌, 정보유형에 따라 유연한 모듈 구조

 

Keywords

Colorful, Vital, Various

 

채도가 높고 다양한 스펙트럼의 컬러를 활용하여 밝고 개방적이며 긍정적인 느낌 전달

 

Color Sheme

Primary

• 예시
  • Turquoise Mint (#2BD7D2)
    • 해당 컬러를 선택한 이유 (서비스 방향성, 시각 방향성에 맞추어)
    • 해당 컬러를 사용하고자 하는 요소 (플랜)

 

Secondary

• 예시
  • Bright Rose (#FF593D)
  • Raisin Black (#212121)
  • Bright Gray (#EEEEEE)
    • 해당 컬러를 선택한 이유 (서비스 방향성, 시각 방향성에 맞추어)
    • 해당 컬러를 사용하고자 하는 요소 (플랜)
    • Black&White는 필수 요소 X

 

Tip!

GUI Design 직군이라면 비쥬얼 컨셉 포함 필수

컬러와 타이포 그래피, 아이콘 스타일 정도만 포함하고 있어도 좋지만, 선정 이유가 분명하고 논리적 필요

 

포트폴리오의 경우, 용어 실수가 잦기 때문에 주의 필요 (예. Project → Projects)

 

Design System (TBD)

• 컴포넌트를 조합하여 스크린을 디자인
• 제작된 스크린 디자인의 프로토 타입 생성

 

Tip!

UI Design을 할 때에는 '적합한' 컴포넌트의 '일관된' 사용 필요

목적에 맞는 적합한 컴포넌트를 선택하여 알맞은 위치에 (상태값 등 고려) 사용할 것

주니어 때에는 레이어 명칭, Constraint 등 훈련하며 작업하는 것 추천

 

포트폴리오의 경우, Andriod OS, IOS에 따른 차이를 주의해서 사용 (특히, Selection Controls)

 

Prototyping을 할 때에는 '시나리오'에 맞는 Flow에 집중할 것

사용자 시나리오의 흐름이 잘 보여지도록 구성하며, 과도한 트랜지션이나 애니메이션은 지양할 것

 

포트폴리오의 경우, 과도하게 긴 프로토타입은 지양 (Task 별로 끊어서)

 

UX/UI Design (with AI)

+ Uizard

AI 기술로 빠르고 쉽게 UI Design, Wireframe을 만들어주는 도구

 

Tip!

UX/UI Design 포트폴리오에서 AI Tool 활용 능력을 보여주는 것도 Good!

But, 리서치에서는 '할루시네이션' 이슈가 있기 때문에 툴에 의존하는 것은 바람직하지 않으며, UX 분석 과정이나 UI Design 아이디어 부분에서 서포트 형태로 활용하는 것을 추천

 

포트폴리오의 경우, 어떤 AI 툴을 어떤 목적으로 어떻게 활용했다 기술 및 어필 필요

 

Apply/Appeal

Portfolio

나라는 사람에 대한 스킬과 경험, 지식, 태도를 전달

 

Project Review

프로젝트에 대한 배경, 내용, 전략 등을 전달

 

Story

말하고 싶은 것이 무엇인가

 

SKA

회사가 무엇을 듣고 싶은가

 

Visual

문서를 통한 시각적 커뮤니케이션

 

Verbal

발표를 통한 언어적 커뮤니케이션

 

SKA

Knowledge

• 디자인 기본원리: 해당 분야의 디자인 설계, 표현, 구현 단계에 필요한 기본적인 지식들을 두루 갖췄는가?
• 비즈니스 이해: 해당 도메인에 대한 이해 및 비즈니스 환경에 관한 지식을 갖췄는가?
• 사용자 행동 이해: 사용자의 행동을 깊이있게 이해(인지심리학, 행동경제학 등)하기 위한 기본적인 지식을 갖췄는가?
• 시스템 설계: 정보를 구조화하는 시스템 설계(IA, Design System 등)에 관한 지식을 갖췄는가?
• 프로젝트 관리: 프로젝트를 효과적으로 관리(일정/견적/자원/계약 등)하고 추진할 수 있는 기초지식을 갖췄는가?

 

Attitude

• 섬세한 사고(관찰): 사용자 행동 및 다양한 현상을 주의 깊게 관찰하고 생각하는 사고방식과 태도가 있는가?
• 수렴적 사고(논리): 다양한 현상을 명확한 이유와 합리적인 추론에 근거하여 판단하는 사고방식과 태도가 있는가?
• 발산적 사고(창의): 기존 것을 벗어나 전혀 새로운 생각을 도출하고자 하는 사고방식과 태도가 있는가?
• 구조적 사고(체계): 다양한 정보 및 해석한 결과를 체계적인 구조로 만드는 사고방식과 태도가 있는가?
• 개방적 사고(수용): 다른 배경을 가진 사람들의 다양한 생각을 유연하게 받아들이는 사고방식과 태도가 있는가?

 

Portfolio Preparation

• Collect - 프로젝트 수집
• Index - 세부 구성 확인
• Clean up - 정돈
• Quality up - 퀄리티 점검
• Collage - 콜라주 얹기

 

UX

• 문제해결 프로세스(Framework)
• 외부 조사 데이터의 공신력있는 출처 표기
• 정량/정성 데이터에 맞는 조사 및 분석 방법
• 리서치와 분석의 목적과 개묘, 결과의 표기
• 충분한 논리가 바탕이 되는 가설

 

UI

• 스키마와 구현 가능성을 고려한 시나리오
• UX 전략과 일치하여 일관성 있는 UI 전략
• 콘텐츠 및 정보 유형에 맞는 시각 요소의 활용
• OS 특성 및 상황에 맞는 UI 컴포넌트의 활용 (상태값 등)
• 사용성을 고려한 요소의 활용 (터치영역 등)

 

Design

포트폴리오 제작 단계 중 두 번째 단계인 '제작' 단계

 

프로젝트 순서

• 관련 도메인 (인하우스)
• 지원 직군 역량
• 라이브 (런칭)
• 팀 프로젝트
• 개인 프로젝트
• 기타 역량

 

Variation

• Format - 제출 방식 및 양식 확인
• Balance - 제출 규정에 맞춘 밸런스 조정
• Fit - 제출처에 맞게 디자인 수정
• Resume - 필요에 따른 간단 이력 추가
• Final Check - 최종 점검 및 제출

 

Job

Self Introduction

• 1, 3, 5분 버전 준비 (1 ~ 3분 버전을 가장 많이 사용)
• KSA에 의거하여 역량 어필
• 객관적인 사실에 의거하여 담백하게 전달
• 새로운 사실이 아닌 기존의 사실을 확인해 주는 과정

 

Portfolio Presentation

• 전체 발표시간 미리 확인해 리허설 필수
• 시작된 소요시간 고지
• 주요 프로젝트는 3개 정도로 조정 (기타 프로젝트는 차이점 위주로만 가볍게 기재)
• 프로젝트의 소재가 아닌 포트폴리오를 통한 나의 역량 소개
• 이야기의 기승전결 연출 필요

 

Experiences

• 하지 말아야 할 것들
  • 프로젝트 소개에 몰입
  • 사실이 아닌 근거없는 의견
  • 정확하지 않은 전문 용어 사용
  • 인터뷰와 무관한 부가설명

 

Interview

• 객관적 사실에 의거하여, 사례 위주로 설명
• 기업 유형 및 직군에 따른 KSA의 항목과 맵핑하여 설명
• 하고 싶은 말이 아닌 듣고싶어 하는 말
• 인터뷰라는 사용자 경험 설계

 

지원동기

• 개인의 니즈만 담고 있는 지원동기는 지양
• 회사의 니즈에 맞추어 발휘할 수 있는 역량을 함께 어필

 

장단점

• KSA 연관지어 (특히, Attitude) 구체적인 사례와 함께 설명
• 단점의 경우 해결하고 있는 방향에 대해서도 함께 언급

 

협업경험

• 구체적인 사례와 함께 설명하되, 개요와 상황의 설명부터 시작
• 맡은 역할 및 문제의 배경, 이슈사항, 해결방식에 대해 차례로 설명