[UXUI 디자인 입문] Ch6: 레퍼런스 분석
2025. 7. 30. 19:45
6-1) 레퍼런스 분석
📌 레퍼런스 분석📌
· 여러가지 사례를 상세하게 분류해 생각해보고 도움이 될 만한 부분을 찾아보는 과정
· 얻고 싶은 정보를 기준으로 다양한 사레 수집하고 세부 요소들로 쪼개서 살펴보기
· 세부 요소들을 관찰하면서 좋은 점/나쁜 점, 그리고 그 이유를 찾고 생각해보기
· 분석을 통해 얻은 인사이트 정리하기
레퍼런스 분석을 왜 하는지?
- 레퍼런스 분석을 통해 스스로 생각하는 힘을 기를 수 있음
- UX/UI 디자이너는 시장과 사용자의 문제를 발견하고, 여러 고민을 통해 해결책을 제시하는 사람
- 레퍼런스 분석하는 과정에서 디자인에 대한 영감을 얻고, 좋은 디자인을 구분하는 지식을 쌓을 수 있음
레퍼런스 분석하는 방법
- 화면 구조 분석
- 화면을 구성하는 요소를 나누는 방법에는 여러가지가 존재함
- e.g. 파운데이션 -> 엘리먼트 -> 모듈 -> 페이지로 나눌 수 있음
- 파운데이션: 색상, 폰트, 아이콘
- 엘리먼트: 버튼, 뱃지, 탭
- 모듈: 리스트, 캐러셀, 네비게이션
- 페이지: 홈, 마이페이지, 장바구니, 회원가입 등
- e.g. 파운데이션 -> 엘리먼트 -> 모듈 -> 페이지로 나눌 수 있음
- 토스의 홈 화면 분석 예시
출처: UXUI 디자인 입문(챕터6-1)
- 화면을 구성하는 요소를 나누는 방법에는 여러가지가 존재함
- 디자인 원칙 기반 분석
- UI 요소들을 디자인 원칙에 대입해보면서 사용성이 높은지, 심미적으로 아름다운 지 다양한 관점에서 디자인을 평가하기
- 핵심: 주장과 그에 알맞는 논리적인 근거를 찾는 것
- ch5에서 배운 여러가지 디자인 원칙(게슈탈트 심리학, UX 비주얼 디자인 원칙, UX/UI 심리학 법칙, 기업의 디자인 원칙) 이론을 활용할 수 있음
- 인사이트 정리하기
- 본인의 제품에 참고하거나 적용하면 좋을 만한 것들을 그룹화해서 정리해보기
- 아쉬운 점이나 나쁜 사례를 어떻게 더 나아지게 할 수 있을지 개선점까지 생각해보기
6-2) UX/UI 디자인 패턴
📌 UX/UI 디자인 패턴📌
· 앱이나 웹에서 자주 사용되는 디자인 요소
· 다수의 제품에서 공통적으로 볼 수 있는 UX/UI 패턴은 보편적인 범위 내에서 디자인하고 동작하는 것이 좋음
· 사용자는 기존의 경험과 학습된 내용을 바탕으로 행동하기 때문
자주 사용되는 UX/UI 디자인 패턴
- 온보딩
- 사용자가 제품을 처음 만나는 과정의 경험
- 제품에서 온보딩은 서비스를 처음 만나는 사용자가 기능을 잘 이해하고 가치를 느낄 수 있도록 돕는 과정
- 온보딩이 중요한 이유?
- 사용자가 제품을 처음 사용하는 순간 계속 써야 할 이유를 느끼지 못하면 대부분 떠남 (앱 설치 후 평균 3일 이내 DAU의 77%가 이탈, DAU: 24시간 동안 앱 사용하는 순 유저 수)
- 사용자가 제품에 대한 첫인상을 긍정적으로 기억하고 계속해서 다시 찾도록 하려면 온보딩을 잘 설계하는 것이 중요
- 온보딩 종류
- 튜토리얼: 제품이 복잡하거나 어려운 경우 조작법이나 설명을 넣는 방식 ▶️ 사용성 측면에서 튜토리얼이 나오는 온보딩을 추천하지 않음
- 가치 보여주기: 제품을 사용하면 얻을 수 있는 가치를 몇 개의 화면으로 나눠서 보여주는 방식 ▶️ 팁: skip 기능도 제공하기, 캐러셀 사용해서 자동으로 넘어가도록 구성하기, 직접 넘기지 않아도 되는 동영상으로 구성하는 것도 좋음
- 개인화 설정하기: 개인 맞춤 정보를 제공할 수 있도록 몇 개의 카테고리와 선택지 주고 정보를 입력하게 하는 방법 ▶️ 개인화가 핵심 기능인 서비스에서 주로 사용되는 유형 (스포티파이, 듀오링고, ...)
- 로딩
- 가능한 한 빨리 콘텐츠를 표시하기
- 콘텐츠를 로드 중이고 완료하는 데 얼마나 걸릴지 명확하게 전달하기
- 로딩 시간이 불가피하게 길어지면, 사람이 기다리는 동안 볼 수 있는 내용을 제공하는 것이 좋음
- 로딩의 종류
- 스피너 아이콘 혹은 애니메이션 활용
- 프로그레스 바:현재 상황을 시각적으로 파악할 수 있는 로딩 바, 진행 상황을 유저에게 알려줘야 하는 케이스에서 사용
- 스켈레톤: 불러오는 화면의 빈버전으로 화면에서 가장 먼저 노출되서 사용자가 실제 페이지를 예측할 수 있도록 함
- 검색
- 정보의 양이 많은 서비스에서 사용해 사용자의 빠른 정보 탐색을 도울 수 있음
- 키워드에 대해 사용자가 원하는 결과를 보여줄 수 없을 때, 다른 행동을 할 수 있도록 유도하기 ▶️ 추천 컨텐츠 보여주기 or 다른 키워드로 검색 유도하기
- 자동 완성 기능을 사용해 오타를 방지하고, 연관된 내용을 함께 찾을 수 있도록 도와주기
- 검색 화면의 종류
- 기본 검색 화면: 제품에서 차지하는 검색의 중요도에 따라 검색 기능의 위계가 다름
(돋보기 모양의 아이콘으로만 배치한 제품고 있고, 화면에서 검색창을 크게 전면에 표시한 제품도 있음)출처: UXUI 디자인 입문(챕터6-2) - 연관 상품 추천 / 연관 검색어 노출
- 전반적인 정보의 탐색이 이뤄지는 공간탐색을 돕기 위한 요소에는 무엇이 있는지 주목하기
출처: UXUI 디자인 입문(챕터6-2)
- 전반적인 정보의 탐색이 이뤄지는 공간탐색을 돕기 위한 요소에는 무엇이 있는지 주목하기
- Empty view: 검색 결과가 없을 때
- 사용자에게 결과를 보여줄 수 없을 때, 추천 or 베스트 상품으로 이어지는 행동을 유하는 것도 방법임
- 기본 검색 화면: 제품에서 차지하는 검색의 중요도에 따라 검색 기능의 위계가 다름
- 회원가입
- 리스트
- 카드
- 캐러셀
6-3) 레퍼런스 분석_핀테크/금융
📌 핀테그/금융 제품의 특징📌
· 국가, 금융 기관의 법과 정책의 영향을 많이 받음
· UI 에 대한 구체적인 가이드라인이 있다거나 화면에 대해 관련 기관의 심의를 받아야 하는 경우도 있음
- 💡 핀테크/금융은 여러 앱을 동시에 비교해보는 걸 추천
- 도메인 특성상 제약 사항이 있는 경우가 많음
- 제한 조건을 각각의 앱에서 어떻게 풀어냈는 지 비교해보기
- 사용성을 높이기 위해 노력한 흔적 찾기
핀테크/금융 주요 레퍼런스
- 살펴볼 기능: 금융 자산 연결, 자산/소비 분석, 신용대출 비교
- 핀테크: 토스, 네이버페이, 카카오페이
- 금융기관 은행사: 신한은행, 카카오뱅크, OK 저축은행
- 금융기관 카드사/증권사/보험사: 현대카드, 나무증권, 삼성화재
6-4) 레퍼런스 분석_콘텐츠
📌 콘텐츠 제품의 특징📌
· 콘텐츠의 종류에 따라 영상, 오디오, 텍스트, 웹툰 등 다양하게 나눠지고 각 종류의 특성에 따라 제품의 차이가 큼
· e.g. 영상 콘텐츠: 디바이스 스크린을 계속 쳐다보고 있어야 함 / 오디오 콘텐츠: 그럴 필요 없음, 개인화된 재생 목록을 잘 구성하는 것이 더 중요 / 텍스트 콘텐츠: 폰트의 가독성이 사용성에 매우 큰 영향을 끼침
· 콘텐츠는 채류 시간을 늘리는 UX/UI 를 찾는데 집중해야 함
콘텐츠 주요 레퍼런스
- 채류시간을 늘리는 UX/UI
- 마음에 드는 콘텐츠가 많을수록 사용자는 더 오래 머무름
- 콘텐츠를 몰입해서 소비할 때도 오래 머무름
- 영상 콘텐츠: 유튜브, 넷플릭스, 티빙
- 오디오 콘텐츠: 스포티파이, 윌라, 유튜브 뮤직
- 웹툰 콘텐츠: 네이버/카카오 웹툰, 레진코믹스
- 텍스트 콘텐츠:리디, 밀리의 서재, 애플 도서
6-5) 레퍼런스 분석_커머스
📌 커머스 제품의 특징📌
· 주로 전자상 거래인 이커머스를 말하고, 온라인에서 판매 / 거래가 이뤄지는 플랫폼을 말함
· 제품의 지표, UX/UI 가 상품으로 인한 영향을 크게 받음
· 커머스는 상품 탐색 -> 구매로 이어지는 사용자 여정에 집중해야 함
- 어느 구간에서 가장 많이 구매를 포기하는지, 구매를 결심하게 만드는 요인은 무엇인지 집중하기
커머스 주요 레퍼런스
- 쿠팡
- 컬리
- 오늘의 집
- 지그재그
- 브랜디
- 29cm
- 무신사
- 크림
- 퀸잇
'UXUI > UXUI 디자인 입문_강의 정리' 카테고리의 다른 글
[UXUI 디자인 입문] Ch4: 디자인/프로토타이핑 툴 (3) | 2025.07.31 |
---|---|
[UXUI 디자인 입문] Ch3: 제품팀, UX/UI 실무 프로세스 (2) | 2025.07.31 |
[UXUI 디자인 입문] Ch5: 디자인 원칙 (4) | 2025.07.30 |
[UXUI 디자인 입문] Ch2: 디자인 씽킹 (4) | 2025.07.30 |
[UXUI 디자인 입문] Ch1: UX/UI, UX/UI 디자이너, UX/UI의 역사와 트렌드 (2) | 2025.07.14 |