[본캠프] d+32.

박예지·2025년 3월 10일

[UIUX] TIL 📑

목록 보기
48/100
post-thumbnail

모르겠는디요

📌
1. UX 기획 첫 단추 : 문제 정의 및 가설 수립
2. UX 기획 구체화 1️⃣ : 유저 사용 맥락 반영
3. UX 기획 구체화 2️⃣ : 논리적인 흐름 설계
4. UX 기획 문서화 : 화면 설계서 및 QA 문서

1. UX 기획 첫 단추 : 문제 정의 및 가설 수립

문제 정의

유저 리서치를 통해 도출한 제품의 현재 문제점을 특정하는 단계

  • 해결해야 할 문제가 무엇인지 정의
  • 문제의 크기를 정량화된 수치로 파악
  • 왜 문제로 정의했는지 충분한 근거 확보
  • 문제 발생 원인에 대한 근거 데이터 파악

가설 수립

특정 문제에 대한 가정을 명확하게 정의하고 검증 가능한 형태로 제시하는 단계

가설 설정

  • 작은 문제부터 큰 문제까지 모두 가설을 통해 검증할 수 있지만 문제를 하나의 아이디어로 한 번에 해결하는 것을 어렵다.
  • 개선을 시도하고자 하는 부분에 초점을 맞추어 1) 어떤 변경을 통해 2) 어떤 결과를 얻고자 하는지 담고있어야한다.

가설 검증

  • 가설을 어떻게 검증할 것인지 검증 방법 선정
  • 가설을 검증할 수 있는 올바른 모니터링 지표 설정

필수 요건

목표 지향

  • 특정 목표를 달성하기 위한 것
  • 여기서 목표는 유저 경험 개선이나 유저가 가진 문제 해결과 관련

구체성과 명확성

  • 불확실한 용어나 추상적인 문구 지양
  • 구체적인 결과들을 예측할 수 있도록 한다.

측정 가능성

  • 가설은 검증 가능하고 측정 가능 해야한다.
  • 지표를 통해 성공과 실패를 측정할 수 있어야 한다.

모니터링 지표

성공지표

가설을 검증할 수 있는 지표
ex. 이탈률이 B군에서 30% 이내일 경우 → 성공

가드레일 지표

  • 조직 전체가 중요하게 고려하는 지표
  • 해당 실험으로 부정적인 영향을 받을 수 있는 지
    ex. B군에서 구매 전환율이 5% 이상 낮을 경우 성공 지표를 달성하더라도 전면 작용은 고려해야한다. (구매 전환율이 조직 전체가 중요하게 고려하는 지표)

📄 원페이저 (1 Pager) 작성

정의한 문제와 가설을 중점으로 실험의 방향성과 목적을 한 눈에 파악할 수 있도록 정리하는 단계

  • 이 단계에서부터 다양한 이해관계자들과의 논의가 시작
  • 논의를 진행해나가면서 원페이저는 계속 수정/보완되고, 더 다양한 정보를 담는다.
  • 회사에서 중요하게 생각하는 가치에 따라 원페이저에 담기는 내용이나 명칭은 조금씩 다를 수 있다.

2. UX 기획 구체화 1️⃣ : 유저 사용 맥락 반영

유저 시나리오

유저 경험을 스토리텔링으로 기술하는 방법

  • 디자인 초기 단계에서 유저에 대한 공감을 바탕으로 유저 중심의 솔루션을 찾을 때 활용
  • 유저 페르소나와 결합하여 작성하면 유저의 동기와 목표를 감성적으로 이해하는 데 도움

구성 요소

  • 유저 : 유저 페르소나
  • 목표 : 유저가 무엇을 달성하려고 하나요?
  • 동기 : 왜 달성하려고 하나요?
  • 외부 요소 : 어떤 것에 영향을 받나요? (ex. 사용 상황, 사용 시간, 사용 장소 등)

📐 버티컬 커머스

특정 카테고리를 중점적으로 다루는 온라인 쇼핑 전문몰 ex. 무신사

고객 여정 지도

유저가 제품 또는 서비스를 이용하는 흐름을 시각화하여 분석하는 방법

  • 타임라인에 따른 유저의 여정을 시각적으로 표현하여 특정 시점에서 의 경험을 파악하고 개선점을 찾을 때 활용
  • 전체 유저 경험을 한눈에 파악

구성 요소

Zone A : 관점

  • 유저 페르소나 : 여정을 체험하는 유저
  • 유저 시나리오 : 여정 지도가 다루는 상황 묘사, 유저의 목표와 기대치 연결

Zone B : 경험

  • 여정 단계 : 타임라인 기반으로 분류
  • 행동 : 유저가 특정 단계에서 취하는 행동
  • 생각 : 유저의 생각, 질문, 동기, 정보에 대한 니즈
  • 감정 : 단계에 걸쳐 단일 선으로 표현

Zone C : 인사이트

  • 기회 : 유저의 경험을 어떻게 최적화할 수 있는지에 대한 인사이트
  • 담장 팀이나 부서 : 해당 인사이트를 적용해볼 수 있는 협업자 코멘트

시각화 방법

목적 설정

어떤 유저의 여정을 시각화할 것인지 명확한 목적 설정

유저 페르소나 정의

  • 어떤 유저를 대상으로 할 것인지 결정
  • 유저 페르소나별로 각각의 유저 저니맵이 나올 수 있다.
  • 유저가 여정을 통해 이루고자 하는 목표와 가지고 있는 기대 작성

여정 단계 분류

유저가 시간의 흐름에 따라 언제 어떤 행동을 하는지 분류

터치 포인트 파악

  • 유저가 제품 또는 서비스와 상호작용 하는 지점, 즉 터치 포인트 파악
  • 유저가 터치 포인트에서 어떤 페인 포인트를 가지고 있고, 어떤 감정을 느끼고, 어떤 생각을 하는지 작성

기회 파악

유저의 타임라인별로 문제를 파악하고 개선점 탐

유저 스토리

특정 기능을 실제 개발 구현 가능한 작은 단위로 기술하는 방법
주로 애자일 방법론에서 사용

  • 엔지니어가 개발 작업 시 기능을 이해하고 구현하는데 유용하게 활용
  • 문서에서 일일이 모든 내용을 정의하기에는 한계가 있기 때문에 유저 스토리를 통해 구현할 사항에 대한 구성원 간 합의 도출
  • 실무에서는 협업 시 유저 시나리오, 유저 저니맵보다 빈번하게 활용

구성 요소

  • As a (User) : 유저
  • I want (goal) : 유저가 원하는 기능 또는 행동
  • So that (benefit) : 이를 통해 유저가 얻을 수 있는 이득

🥒 걸킨 문법 (Gherkin Syntax)

  • 유저의 행동에 중점을 맞추어 개발하는 행동 주도 개발 (Behavior - Driven Development) 환경에서 널리 활용되는 특수한 문법
  • 테스트 케이스를 구체적으로 정의하기 위한 용도로 활용

구성요소

  • Given (주어진 상황) : 유저에게 주어진 상황
  • When (조건 및 행동) : 유저의 특정 액션 또는 이벤트
  • Then (결과) : 특정 결과나 상태

3. UX 기획 구체화 2️⃣ : 논리적인 흐름 설계

유저 플로우

  • 유저의 행동 및 화면 간의 이동에 초점을 맞추어 시각화하는 단계
  • 유저가 최종 목표에 도달하기 위해 서비스 내에서 어떤 경로로 이동하여, 어떤 행동을 하는지 구체화하는 도구로 활용
  • 해피패스에 매몰되지 않고 다양한 경로를 고려해볼 수 있다는 점이 장점
  • 유저 플로우와 와이어프레임은 상호보완적인 도구로 활요할 수 있으며, 작업에 정해진 순서가 있는 것은 아니다.

☺️ 해피패스

유저가 제품이나 서비스에서 원하는 목적지까지 아무런 문제를 겪지 않고 도달했을 때의 경로

구성요소

  • 원형 : 프로세스의 시작과 끝 표현
  • 사각형 : 유저의 입력이나 액션 표현
  • 마름모 : 특정한 조건이나 결정 지점 표현, 행동이나 시스템의 상태에 따라 플로우가 여러가지로 나뉠 수 있
  • 화살표 : 플로우의 방향, 어디로 가고있는지 방향성 표현

💡 화면, 유저 액션, 시스템 액션, 모달의 경우 색상으로 구분하여 이해를 높일 수 있다.

  • 화면 : 유저와 시스템의 상호작용이 발생하는 공간
  • 유저 액션 : 유저가 화면에서 수행하는 행동 또는 입력
  • 시스템 액션 : 유저의 행동에 의한 응답, 시스템이 수행하는 동작
  • 모달 : 특정 상황이나 유저의 행동에 대한 부가 정보나 선택지 제공

와이어프레임

레이아웃과 플로우를 단순한 선과 도형으로 설계하는 과정

  • Lo-Fi로 작업되어 작업자들이 부담없이 아이데이션에 자유롭게 참여 → 의사결정을 돕는 역할 수행
  • 디테일을 배제하여 신속하게 결과물 생성, 작업자 간 커뮤니케이션을 위한 초기 비주얼 제공
  • 변경되는 요구 사항에 대응하여 빠르게 구조를 검토하고 수정하기에 용이
  • 논의의 초점이 레이아웃과 플로우에 집중되도록 최소한의 색과 디자인 사용
  • 화면 이동에 대한 정보를 추가했을 때는 와이어 플로우라고 부름

정보구조도

제품이나 서비스를 구성하는 요소들의 구조를 도식화하는 것
유저가 길을 잃지 않고 원하는 정보를 쉽게 찾고 작업을 완료할 수 있도록 돕는 과정

  • 유저가 자신의 현재 위치와 다음 장소로 가기 위해 무엇을 해야할 지 인지할 수 있도록 설계할 때 활용
  • 정보 구조가 효과적으로 설계될 경우 유저의 접근성이 향상되지만, 부적절하게 설계될 경우 유저의 이탈과 오류를 발생시킬 수 있다.
  • 상위와 하위 개념을 효과적으로 그룹핑하고 올바른 라벨링을 하는 것이 중요

구성 요소

조직 및 구성 시스템 Organization

정보를 체계적으로 정리하고 구성하는 것이 목적

라벨링 시스템 Labeling

정보를 명확하고 이해하기 쉽게 표현하는 것이 목적

네비게이션 시스템 Navigation

유저가 정보를 찾고 이동할 수 있도록 돕는 것이 목적

검색 시스템 Searching

유저가 원하는 정보를 검색하여 찾도록 돕는 것이 목적

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

화면 설계서

프로젝트의 복잡도가 높고, 이해관계자가 많을 경우 원할한 히스토리 파악 및 유지 보수를 위해 화면 설계서 작성

  • 와이어프레임과 기능 상세 정의를 합친 문서, 화면에 존재하는 각 요소를 분리하여 설명
  • 변경된 내용은 작성일과 함께 기록하여 버전 관리
  • 회사나 프로젝트의 성격에 따라 화면 설계서를 작성할 수도 있고 그렇지 않을 수도 있다,
  • 회사에 따라 작성하는 직군의 차이가 있다.

QA 문서

기능 배포 전에 기능을 테스트하는 과정
크게 테크니컬 QA와 디자인 QA로 나뉜다.

테크니컬 QA

  • 의도한 대로 기능이 잘 동작하는지 초점
  • 보통 테스트 케이스 작성 → 요구 사항을 충족하는지 확인
  • 테스트 화면, 조건, 테스트 케이스, 기대하는 결과, 테스트 환경, 테스트 결과 (성공 / 실패) 등 포함
  • 뎁스가 많은 화면일 경우 대분류/중분류로 구분하여 화면 그룹화

디자인 QA

  • 의도한 대로 디자인이 잘 구현되었는지 초점
  • AS-IS(구현된 화면)와 TO-BE(의도한 화면)을 명확하게 전달하는 것이 중요
  • 우선 순위, OS, 발생화면, 이슈 내용, 개발 반영 여부 및 최종 확인 여부, 리뷰어 등의 정보 포함

🎙️느낀점

솔직히 오늘 들은 강의 내용이 많아서 그런지 100% 소화한 것 같지는 않다.
그리고 내가 직접 해보지 않아서 더 그런 것 같기도 하다.
내일부터 개인과제가 시작을 하는데 시작하기 전에 배운 내용들을 다시 한 번 읽어보고 시작을 해야겠다.

profile
Life is pain au chocolat 🍞

0개의 댓글