UXUI디자인심화_4주차 UX 기획 및 디자인 이해(유저에게 전달될 디자인 구체화하기)

[수업 목표]

- 문제를 정의하고 가설을 수립하는 방법에 대해 알아봅니다.
- 유저 사용 맥락을 반영할 수 있는 방법론에 대해 알아봅니다.
- 논리적인 흐름을 설계할 수 있는 방법론에 대해 알아봅니다.
- 협업을 위한 문서화 작업에 대해 알아봅니다.

---

01. 문제 정의 및 가설 수립(UX 기획 첫 단추) : 
(1) 문제 정의 : 
 - 해결해야 할 문제가 무엇인지
 - 문제의 크기를 정량화된 수치로 파악
 - 왜 문제로 정의했는지 충분한 근거가 있어야함
 - 문제 발생 원인에 대한 근거 데이터를 파악
 →문제 정의 예시
  • 문제: 유저의 40%가 회원가입을 완료하지 않고 중도에 이탈하는 문제
  • 문제로 정의한 이유: 유저 경험 관점- 회원가입은 제품의 초기 진입점 중 나라로, 유저가 제품을 처음 경험하는 단계.
비즈니스 관점- 많은 유저가 회원가입 중 이탈하면, 효과적인 유저 획득이 어려워져서 잠재적인 유저 손실로 이어짐
  • 근거 데이터:
①회원가입을 위해 한 번에 입력해야 하는 정보가 많아서 유저가 부담(이탈하는 유저 중 65%가 정보를 모두 입력하기 전에 이탈)
②약관 동의가 왜 필요한지에 대한 명확한 안내가 없어서 유저가 프라이버시 침해에 대한 불안감을 느낌(이탈하는 유저 중 20%가 정보 입력 후 약관 동의 전에 이탈. 인터뷰에 따르면 유저들은 약관 동의 시 개인정보가 수집되는데 그에 대한 설명이 불충분하다고 느낌)
③회원 가입을 위한 정보 입력과 약관 동의가 동시에 이루어져서 유저가 복잡하다고 느낌(인터뷰에 따르면 유저들은 해야할게 많아보여 귀찮다고 느낌)
(2) 가설 수립 : 
 - 가설 설정 : 작은 문제부터 큰 문제까지 모두 가설을 통해 검증. 다만, 문제를 하나의 아이디어로 한 번에 해결하는 것은 어려운 일임.가설은 개선을 시도하고자 하는 부분에 초점을 맞추어 1) 어떤 변경을 통해 2) 어떤 결과를 얻고자 하는지 담고 있어야 함
 - 가설 검증 : 가설을 어떻게 검증할 것인지 검증 방법을 선정. 가설을 검증할 수 있는 올바른 모니터링 지표를 설정해야함
→좋은 가설의 요건
•목표 지향 : 가설은 특정 목표를 달성하기 위한 것이어야 해요. 여기서 목표는 유저 경험 개선이나 유저가 가진 문제 해결과 관련 있어야 해요.
•구체성과 명확성 : 불확실한 용어나 추상적인 문구는 피해야 해요. 구체적인 결과물을 예측할 수 있도록 해야 해요.
•측정 가능성 : 가설은 검증 가능하고 측정 가능해야 해요. 지표를 통해 성공과 실패를 측정할 수 있어야 해요.
→가설 수립 예시
 • 가설: 회원 가입을 시도하는 유저가 한 번에 한 정보만 입력할 수 있도록 하면, 더 많은 유저가 회원 가입을 완료할 것이다.
 • 검증 방법: (A/B 테스트)A안 : 기존 안 노출 / B안 : 한 번에 한 정보만 입력할 수 있도록 하는 새로운 안 노출
 • 모니터링 지표: 성공 지표*(가설을 검증할 수 있는 지표)와 가드레일 지표*(조직 전체에서 중요하게 고려하는 지표, 해당 실험에서 부정적인 영향 받을 수 있는 지표)
*성공 지표(Success Metric):이탈률
- 이탈율이 B군에서 30% 이내일 경우 성공
*가드레일 지표(Guardrail Metric):구매 전환율, 소요 시간, 단계 완료율
- B군에서 구매 전환율이 5% 이상 낮을 경우 : 성공지표를 달성하더라도 전면 적용은 고민해 봐야함
- B군에서 소요 시간이 5% 이상 길 경우 : 성공지표를 달성하더라도 전면 적용은 고민해봐야함
- B군에서 단계 완료율이 10% 이상 낮을 경우 : 성공지표를 달성하더라도 전면 적용은 고민해봐야함

(3) 원페이저(1 Pager) 작성 : 정의한 문제와 가설을 중점으로 실험의 방향성과 목적을 한 눈에 파악할 수 있도록 정리하는 단계
 - 이 단계에서부터 다양한 이해관계자들과의 논의가 시작됨
 - 논의를 진행해나가면서 원페이저는 계속 수정/보완되고, 더 다양한 정보들을 담게 됨.
 - 회사에서 중요하게 생각하는 가치에 따라 원페이저에 담기는 내용이나 명칭은 조금씩 다름
→ 원페이저 초안 예시 : 해결해야 할 문제의 성격에 따라 포함되는 내용은 더 많아질 수 있으며, 논의 과정에서 디자인 솔루션, 실험 기간, 예상 일정 등에 대한 내용을 구체화

02. 유저 사용 맥락 반영(UX 기획 구체화) : 
(1) 유저 시나리오 (User Scenario) : 스토리텔링으로 기술하는 방법
디자인 초기 단계에서 유저에 대한 공감을 바탕으로 유저 중심의 솔루션을 찾을 때 활용해요.
유저 페르소나와 결합하여 작성하면 유저의 동기와 목표를 감성적으로 이해하는 데 도움이 돼요.
→유저 시나리오의 구성 요소
• 유저 : 유저 페르소나
• 목표 : 무엇을 달성하려고 하나요?
• 동기 : 왜 달성하려고 하나요?
• 외부 요소 : 어떤 것에 영향을 받나요? ex) 사용 상황, 사용 시간 등
(2) 고객 여정 지도 (Customer Journey Map) : 유저가 이용하는 흐름을 시각화하여 분석
타임라인에 따른 유저의 여정을 시각적으로 표현하여 특정 시점에서의 경험을 파악하고 개선점을 찾을 때 활용해요.
전체 유저 경험을 한눈에 파악할 수 있어요
→고객 여정 지도의 구성 요소
Zone A : 관점 - 1. 유저 페르소나 : 여정을 체험하는 유저/ 2. 유저 시나리오 : 여정 지도가 다루는 상황 묘사, 유저의 목표와 기대치와 연결
Zone B : 경험 - 3. 여정 단계 : 타임라인 기반으로 분류/ 4. 행동 : 유저가 특정 단계에서 취하는 행동/ 5. 생각 : 유저의 생각, 질문, 동기, 정보에 대한 니즈/ 6. 감정 : 단계에 걸쳐 단일 선으로 표현
Zone C : 인사이트 - 7. 기회 : 유저의 경험을 어떻게 최적화할 수 있는지에 대한 인사이트/ 8. 담당 팀이나 부서 : 해당 인사이트를 적용해볼 수 있는 협업자 코멘트
→고객 여정 지도 시각화 방법

 • 목적 설정
    - 어떤 유저의 여정을 시각화할 것인지 명확한 목적을 설정해요.
•유저 페르소나 정의
    - 어떤 유저를 대상으로 할 것인지 결정해요.
    - 유저 페르소나별로 각각의 유저 저니맵이 나올 수 있어요.
    - 유저가 여정을 통해 이루고자 하는 목표와 가지고 있는 기대를 작성해요.
•여정 단계 분류
    - 유저가 시간의 흐름에 따라 언제 어떤 행동을 하는지 분류해요.
•터치 포인트 파악
    - 유저가 제품 또는 서비스와 상호작용 하는 지점, 즉 터치 포인트를 파악해요.
    - 유저가 터치 포인트에서 어떤 페인 포인트를 가지고 있고,
    어떤 감정을 느끼고, 어떤 생각을 하는지 작성해요.
•기회 파악
    - 유저의 타임라인별에서 문제를 파악하고, 개선점을 찾아요.
→고객 여정 지도 예시

(3) 유저 스토리 (User Story) : 특정 기능을 실제 개발 구현 가능한 작은 단위로 기술
•주로 애자일(Agile) 방법론에서 사용돼요.
특히 엔지니어가 개발 작업 시 기능을 이해하고 구현하는 데 유용하게 활용돼요.
• 문서에서 일일이 모든 내용을 정의하기에는 한계가 있기 때문에 유저 스토리를 통해 구현할 사항에 대한 구성원 간 합의를 도출해요.
•실무에서는 협업 시 유저 시나리오, 유저 저니맵보다 빈번하게 활용돼요.
→유저 스토리의 구성요소
As a (user) : 유저
I want (goal) : 유저가 원하는 기능 또는 행동
So that (benefit) : 이를 통해 유저가 얻을 수 있는 이득
→유저 스토리 예시
•장바구니 기능
As a 로그인한 유저
I want 장바구니에 상품을 추가
So that 나중에 담긴 상품들을 확인하고 구매하기 위해서
•간편 결제 기능
As a 로그인한 유저
I want 네이버페이와 카카오페이를 통한 간편 결제
So that 편의성을 누리고 포인트 혜택을 받기 위해서

03. 논리적인 흐름 설계(UX 기획 구체화) : 
(1) 유저 플로우 (User Flow) : 제품이나 서비스를 이용하는 과정을 유저의 행동 및 화면 간의 이동에 초점을 맞추어 시각화하는 단계
•유저가 최종 목표에 도달하기 위해 서비스 내에서 어떤 경로로 이동하며, 어떤 행동을 하는지 구체화하는 도구로 활용할 수 있어요.
•해피 패스*에 매몰되지 않고 다양한 경로를 고려해볼 수 있다는 장점이 있어요.*해피 패스:유저가 제품이나 서비스에서 원하는 목적지까지 아무런 문제를 겪지 않고 도달했을 때의 경로       
•유저 플로우와 와이어프레임은 상호보완적인 도구로 활용할 수 있으며 작업에 정해진 순서가 있는 것은 아니예요.
→유저 플로우 구성 요소

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

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

04. 화면 설계서 및 QA 문서(UX 기획 문서화) : 
(1) 화면 설계서 : 프로젝트의 복잡도가 높고, 이해관계자가 많을 경우 원활한 히스토리 파악 및 유지 보수를 위해 화면 설계서를 작성하기도 해요.
•와이어프레임과 기능 상세 정의를 합친 문서로, 화면에 존재하는 각 요소를 분리하여 설명해요.
•변경된 내용은 작성일과 함께 기록하여 버전을 관리해요.
•회사나 프로젝트의 성격에 따라 화면 설계서를 작성하는 경우도 있고, 아닌 경우도 있어요.
•회사에 따라 화면 설계서를 작성하는 직군이 다르기도 해요.예를 들어, 사업기획부에서 작성하기도 하고, PO/PM이 작성하기도 하고, UX/UI 디자이너가 작성하기도 해요.
(2) QA 문서 : QA(Quality Assuarance)는 기능 배포 전에 기능을 테스트하는 과정으로, 크게 테크니컬 QA와 디자인 QA으로 나뉠 수 있어요.
•제품팀에서 오너십을 가지고 테크니컬 QA와 디자인 QA를 수행해요.
이 때, 보통 작업자가 직접 QA를 진행해요.
•별도의 QA 팀이 있는 경우, 협업을 통해
예상치 못했던 버그나 사이드 이펙트를 발견하여 보완하기도 해요.
•테크니컬 QA는 의도대로 기능이 잘 동작하는지에 초점을 맞춰서 이루어져요.
보통 테스트 케이스를 작성하고, 요구 사항을 충족하는지 확인해요.
→테스트 케이스 문서 작성 TIP
•디자인 QA는 의도대로 디자인이 잘 구현되었는지에 초점을 맞춰서 이루어져요. AS-IS(구현된 화면)와 TO-BE(의도한 화면)를 명확하게 전달하는 것이 중요해요
→디자인 QA 문서 작성 TIP