디자인카타

B 선택
57%의 사람이 선택
왜 해당 UI가 더 좋은지 작성합니다.
· B는 서비스 이용 데이터를 기반으로 사용자 중심의 개인 맞춤 추천을 제공하는 것이 목적.
· 전반적으로 레이아웃이 깔끔함
· 좋아하는 음악 위주로 반복해서 듣거나 뮤직스테이션을 돌려 비슷한 장르의 음악을 듣는 스타일이라 더 효율적임
나머지 하나의 UI는 왜 별로인지, 왜 선택하지 않았는지 작성합니다.
· A는 음악을 순위별로 보여줌으로써 사용자가 다양한 장르(트렌드)를 접할 수 있게 해줌
· 과거에 아이돌 팬으로서 팬덤 내에서는 순위(누가 1등할것인가)가 중요했기 때문에 A의 형태인 서비스를 자주 이용한 적이 있음.
· 현재는 누굴 경쟁시켜 순위를 따질 이유가 없고, 나만의 음악 취향이 확고하기 때문에 대중적인 트렌드를 따라갈 필요가 없음
내 의견을 뒷받침 할 수 있는 실 사례가 있는지 찾아봅니다. 도전



총평
A 인기차트 중심
- 모든 사용자에게 동일한 인기 차트 제공
- 탐색할 시간 줄여줌
B 데이터 중심
- 사용자 맞춤 서비스 제공
- 개인화 경험
- 앱 체류 시간과 충성도 증가 가능
아티클
2025.05.30 - [UXUI 아티클 분석] - [UXUI 아티클 분석 11] AI가 모든 걸 한다면, 디자이너는 왜 존재해야 할까?
UX 기획 및 리서치 4주차
UX 기획 첫 단추: 문제 정의 및 가설 수립
문제 정의
▷ 유저 리서치를 통해 도출한 제품의 문제점을 특정하는 단계
· 해결해야 할 문제가 무엇인지를 정의
· 문제의 크기를 정량화된 수치로 파악
· 왜 문제를 정의했는지 충분한 근거가 있어야 함
· 문제 발생 원인에 대한 근거 데이터 파악
▷ 문제를 풀고자 하는 목적
· 문제를 통해 무엇을 이루고자 하나요?
▷ 문제
· 목적을 이루기 위해 문제가 되는 것은 무엇인가요?
▷ 문제를 풀었을 때의 임팩트
· 문제를 해결하면 목적이 얼마나 달성되나요?
가설 수립
▷ 가설 설정
· 작은 문제부터 큰 문제까지 모두 가설을 통해 검증
다만, 문제를 하나의 아이디어로 한 번에 해결하는 것은 어려운 일
· 가설은 개선을 시도하고자 하는 부분에 초점을 맞추어
1) 어떤 변경을 통해 2) 어떤 결과를 얻고자 하는지 담고 있어야 함
▷ 가설 검증
· 가설을 어떻게 검증할 것인지 검증 방법 선정
· 가설을 검증할 수 있는 올바른 모니터링 지표 설정
모니터링 지표
성공지표 -> 가설을 검증할 수 있는 지표
(이탈율)
가드레일 지표-> 조직 전체에서 중요하게 고려하는 지표, 혹은 해당 실험으로 부정적인 영향을 받을 수 있는 지표
(구매 전환율, 소요 시간, 단계 완료율)
좋은 가설의 요건
▷ 목표 지향
· 가설은 특정 목표를 달성하기 위한 것이어야 함
· 여기서 목표는 유저 경험 개선이나 유저가 가진 문제 해결과 관련있어야 함
▷ 구체성과 명확성
· 불확실한 용어나 추상적인 문구는 피해야 함
· 구체적인 결과물을 예측할 수 있도록 해야 함
▷ 측정 가능성
· 가설은 검증 가능하고 측정 가능해야 함
· 지표를 통해 성공과 실패를 측정할 수 있어야 함
원페이저(1 Pager) 작성
▷ 정의한 문제와 가설을 중점으로 실험의 방향성과 목적을 한 눈에 파악할 수 있도록 정리하는 단계
· 다양한 이해관계들과의 커뮤니케이션 시작

UX 기획 구체화: 유저 사용 맥락 반영
유저 시나리오 (User Scenario)
제품 또는 서비스에 대한 유저 경험을 스토리텔링으로 기술하는 방법
▷ 디자인 초기 단계에서 유저에 대한 공감을 바탕으로 유저 중심의 솔루션을 찾을 때 활용
▷ 유저 페르소나와 결합하여 작성하면 유저의 동기와 목표를 감성적으로 이해하는 데 도움
유저 시나리오 구성 요소
· 유저: 유저 페르소나
· 목표: 무엇을 달성하려고 하나요?
· 동기: 왜 달성하려고 하나요?
· 외부 요소: 어떤 것에 영향을 받나요? (ex. 사용 상황, 사용 시간 등)
고객 여정 지도 (Customer Journey Map)
제품 또는 서비스를 유저가 이용하는 흐름을 시각화하여 분석하는 방법
▷ 타임라인에 따른 유저의 여정을 시각적으로 표현하여 특정 시점에서의 경험을 파악하고 개선점을 찾을 때 활용
▷ 전체 유저 경험을 한눈에 파악 가능

▷ Zone A: 관점
· 1 유저 페르소나: 여정을 체험하는 유저
· 2 유저 시나리오: 여정 지도가 다루는 상황 묘사, 유저의 목표와 기대치와 연결
▷ Zone B: 경험
· 3 여정 단계: 타임라인 기반으로 분류
· 4 행동: 유저가 특정 단계에서 취하는 행동
· 5 생각: 유저의 생각, 질문, 동기, 정보에 대한 니즈
· 6 감정: 단계에 걸쳐 단일 선으로 표현
▷ Zone C: 인사이트
· 7 기회: 유저의 경험을 어떻게 최적화할 수 있는지에 대한 인사이트
· 8 담당 팀이나 부서: 해당 인사이트를 적용해볼 수 있는 협업자 코멘트
고객 여정 지도 시각화 방법

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


유저 스토리 (User Story)
특정 기능을 실제 개발 구현 가능한 작은 단위로 기술하는 방법
▷ 주로 애자일(Agile) 방법론에서 사용됨
특히 엔지니어가 개발 작업 시 기능을 이해하고 구현하는 데 유용하게 활용
▷ 유저 스토리를 통해 구현할 사항에 대한 구성원 간 합의 도출
유저 스토리의 구성요소
· As a {user}: 유저
· I want {goal}: 유저가 원하는 기능 또는 행동
· So that {benefit}: 이를 통해 유저가 얻을 수 있는 이득
걸킨 문법 활용하여 유저 스토리 구체화
▷ 걸킨 문법(Gherkin Syntax) 유저의 행동에 중점을 맞추어 개발하는 행동 주도 개발 환경에서 널리 활용되는 특수한 문법
▷ As a, I want, So that만으로 기능 구현 여부를 명확히 판단하기 어려워서 테스트 케이스를 구체적으로 정의하기 위한 용도로 활용
· Given {주어진 상황}: 유저에게 주어진 상황
· When {조건 및 행동}: 유저의 특정 액션 또는 이벤트
· Then {결과}: 특정 결과나 상태

UX 기획 구체화: 논리적인 흐름 설계
유저 플로우(User Flow)
유저가 제품이나 서비스를 이용하는 과정을
유저의 행동 및 화면 간의 이동에 초점을 맞추어 시각화하는 단계
▷ '해피 패스'에 매몰되지 않고 다양한 경로를 고려해볼 수 있는 장점
해피 패스-> 유저가 제품이나 서비스에서 원하는 목적지까지 아무런 문제를 겪지 않고 도달했을 때의 경로
▷ 유저 플로우와 와이어프레임은 상호보완적인 도구

· 원형: 시작/끝
프로세스의 시작이나 끝을 표현하기 위해 사용
· 사각형: 동작/ 프로세스
유저의 입력이나 액션을 표현하기 위해 사용
· 마름모: 조건
특정한 조건이나 결정 지점을 표현하기 위해 사용하며, 여기서 유저의 행동이나 시스템의 상태에 따라 플로우가 여러 가지로 나뉨
· 화살표: 플로우의 방향
한 상태나 단계에서 다음 상태나 단계로의 흐름을 표현하기 위해 사용
! 화면, 유저 액션, 시스템 액션, 모달의 경우 색상으로 구분하여 이해를 높일 수 있음


와이어프레임 (Wireframe)
화면의 레이아웃과 플로우를 단순한 선과 도형으로 설계하는 과정 아이데이션
▷ 로우 피델리티(Lo-fi)로 작업되어 작업자들이 부담 없이 아이디어에 자유롭게 참여하고
의사결정에 기여할 수 있도록 도와주는 도구
▷ 변경되는 요구 사항에 대응하여 빠르게 구조를 검토하고 수정하기가 용이
▷ 논의의 초점이 레이아웃과 플로우에 집중되도록 최소한의 색과 디자인을 사용해 작업
정보 구조도 (Information Architecture)
제품이나 서비스를 구성하는 요소들의 구조를 도식화하는 것으로, 유저가 길을 잃디 않고 원하는 정보를 쉽게 찾고 작업을 완료할 수 있도록 돕는 과정
▷ 유저가 자신의 현재 위치와 다음 장소로 가기 위해 무엇을 해야할 지 인지할 수 있도록 설계할 때 활용
▷ 효과적으로 설계될 경우 유저의 접근성 향상,
부적절하게 설계될 경우 유저의 이탈과 오류 발생
▷ 상위와 하위 개념을 효과적으로 그룹핑하고 올바른 라벨링을 하는 것이 중요
구성 요소
· Organization: 조직 및 구성 시스템
정보를 체계적으로 정리하고 구성하기
· Labeling: 라벨링 시스템
정보를 명확하고 이해하기 쉽게 표현하기
· Navigation: 내비게이션 시스템
유저가 정보를 찾고 이동함
· Searching: 검색 시스템
유저가 원하는 정보를 검색하여 찾기








UX 기획 문서화: 화면 설계서 및 QA 문서
화면 설계서
프로젝트의 복잡도가 높고, 이해관계자가 많을 경우 원활한 히스토리 파악 및 유지 보수를 위해 화면 설계서를 작성하기도 함
▷ 와이어프레임과 기능 상세 정의를 합친 문서로, 화면에 존재하는 각 요소를 분리하여 설명
▷ 변경된 내용은 작성일과 함께 기록하여 버전 관리


QA 문서
QA(Quality Assuarance)는 기능 배포 전에 기능을 테스트하는 과정으로, 크게 테크니컬 QA와 디자인 QA로 나뉨
▷ 제품팀에서 오너십을 가지고, 보통 작업자가 직접 QA 진행
▷ 별도의 QA팀이 있는 경우, 협업을 통해 예상치 못했던 버그나 사이드 이펙트를 발견하여 보완하기도 함
▷ 테크니컬 QA는 의도대로 기능이 잘 동작하는지에 초점을 맞춰서 이루어짐
보통 테스트 케이스를 작성하고, 요구 사항을 충족하는지 확인
테스트 케이스 문서 작성 TIP
▷ 테스트 화면, 조건, 테스트 케이스, 기대하는 결과, 테스트 환경, 테스트 결과 (PASS/FAIL)
▷ 뎁스가 많은 화면일 경우 대분류/ 중분류로 구분하여 화면 그룹화하기도 함
▷ 디자인 QA는 의도대로 디자인이 잘 구현되었는지에 초점을 맞춰서 이루어짐
AS-IS(구현된 화면)와 TO-BE(의도한 화면)를 명확하게 전달하는 것이 중요
디자인 QA 문서 작성 TIP
개발 반영 여부와 최종 확인 여부를 구분해서 최종적으로 이슈가해결되었는지 명확하게 추적하는 걸 추천
우선순위, OS, 발생 화면, 이슈 내용, 개발 반영 여부 및 최종 확인 여부, 리뷰어 등
금민주 튜터님 리서치, 공신력있는 데이터란? 세션
"실무에서 끊임없이 설득과 협업을 하는 UX 디자이너
느낌이 아닌, 증거 기반 설계가 필요함!
데이터는 설계의 무기이자 소통의 언어"
데이터
-> 정량 데이터(수치, 비율)
-> 정성 데이터(감정,맥락,대화)
-> 행동 데이터(클릭 경로, 이탈 구간, 히트맵)
공신력 있는 데이터
-> 신뢰성(누구나 유사한 결과를 도출 가능)
-> 객관성(특정 의견에 치우치지 않음)
-> 맥락성(사용자 상황과 감정의 반영)
데스크리서치
배경/사례조사
-> 서비스가 구현될 시장 규모 파악
-> 시장 변화 요인 파악
-> 타겟 규모 및 트렌드 파악
-> 핵심 역량, 미충족 가치 분석, 경쟁사, 차별화 포인트
-> 디자인 트렌드
-> 기술적 트렌드
명확한 근거가 있어야 함, 쉽게 결론에 도달하지 말것
사용자/ 사용성 조사
사용자 설문조사
설문조사의 목표 설정, 대상 사용자 식별, 설문지 작성, 설문, 인사이트 정리
In-depth Interview
FGI 심층적, 경제적, 다양한 관점 (정말 필요할때만 실행하긴 함)
Card Sorting (별로 쓰지 않음)
디지털 에스노그라피
유트브 댓글/ 블로그 후기
-> 경험, 맥락, 감정 중심의 정성 인사이트 도출
A/B테스트
-> '어떤 표현이 맥락에 잘 맞고', '어떤 요소가 방해가 되는가'
행동 로그 분석
-> 이탈률, 클릭률, 페이지 체류시간, 전환율
'내일배움캠프 본캠프 > 5월' 카테고리의 다른 글
| [내일배움캠프 본캠] 5/29 TIL (0) | 2025.05.29 |
|---|---|
| [내일배움캠프 본캠] 5/28 TIL (0) | 2025.05.28 |
| [내일배움캠프 본캠] 5/27 TIL (0) | 2025.05.27 |
| [내일배움캠프 본캠] 5/22 TIL (0) | 2025.05.22 |