UXUI 디자인 입문 6주차 - 강의 복습 (래퍼런스 분석)

래퍼런스 분석 

여러 가지 사례를 상세하게 분류해 생각해보고 도움이 될 만한 부분을 찾아보는 과정을 의미함 

- 얻고 싶은 정보를 기준으로 다양한 사례를 수집하고, 세부 요소들로 쪼개어 살펴봄

- 세부 요소들을 관찰하면서 좋은 점과 나쁜 점, 그리그 그 이유를 찾고 생각해 보자

- 분석을 통해 얻은 인사이트도 정리하기 

 

래퍼런스 분석을 하는 이유 

래퍼런스를 분석하는 과정에서 디자인에 대한 영감을 얻고 좋은 디자인을 구분하는 지식을 쌓을 수 있기 때문

 

래퍼런스 분석하는 방법

1) 화면 구조 분석 

화면이 각각 어떤 요소들로 구성되어 있는지 분해해보는 단계 

 

아토믹 디자인 시스템에서는 화면을 구성하는 요소를 '파운데이션' -> '엘리먼트' -> '모듈' -> '페이지'로 나누고 있음 

 

파운데이션: 더 이상 세부 속성으로 쪼개지지 않는 기장 기본이 되는 요소

i.e) 색상, 폰트, 아이콘 등 

 

엘리먼트: 파운데이션이 모여서 만드는 요소

i.e) 버튼, 뱃지, 탭 등

 

모듈: 엘리먼트가 모여서 만드는 요소 

i.e) 리스트, 캐러셀, 네비게이션 등 

 

페이지: 모듈이 모여서 만드는 최종 화면 

i.e) 홈, 마이페이지, 장바구니, 회원가입 등 

 

이런 식으로 분석

 

2) 디자인 원칙 기반 분석

앞서 쪼갠 UI 요소들을 디자인 원칙에 대입해 보면서 사용성이 높은지, 심미적으로 아름다운지 등 다양한 관점에서 분석하는 단계

좋은 점과 나쁜 점 모두 다양하게 찾아보기

이 단계의 핵심은 주장과 그에 알맞는 논리적인 근거를 찾는 것임 

 

- 게슈탈트 심리학

- UX 비주얼 디자인 원칙

- UX/UI 심리학 법칙

- 기업의 디자인 원칙 등을 활용할 수 있을 것 

 

3) 인사이트 정리

분석한 내용들로 얻은 인사이트를 정리하는 단계

- 본인의 제품에 참고하거나 적용하면 좋을 만한 것들을 그룹화해서 정리해보면 좋음 

- 개선점도 생각해보면 도움이 될 것 

 

UX/UI 디자인 패턴 

디지털 제품, 주로 앱이나 웹에서 '자주' 사용되는 디자인 요소를 말함

다수의 제품에서 공통으로 볼 수 있는 UX/UI 디자인 패턴은 보편적인 범위 내에서 디자인하고 동작하는 것이 좋다.

- 제이콥의 법칙 (사용자는 새로운 제품을 사용할 때 자신이 이미 알고 있는 익숙한 방식으로 동작하기를 원함) 때문.

 

또한, UX/UI 패턴을 디자인 시스템으로 만들어 두면 디자이너도 반복해서 재사용할 수 있으니, 디자이너의 불필요한 에너지도 줄여줄 수 있음. 

 

자주 사용되는 UX/UI 디자인 패턴

1. 온보딩

2. 로딩

3. 검색 

4. 회원가입

5. 리스트

6. 카드

7. 캐러샐 : 인스타그램처럼 옆으로 슬라이드하는 형식의 카드 

 

1. 온보딩

사용자가 제품을 처음 만나는 과정의 경험을 의미함 

- 서비스를 처음 만나는 사용자가 기능을 잘 이해하고 가치를 느낄 수 있도록 돕는 과정을 뜻함 

 

**온보딩이 중요한 이유

시장에 나와 있는 앱은 평균적으로 앱 설치 후 3일 이내에 DAU의 77%가 이탈한다고 함.

사용자가 제품을 처음 사용하는 순간에 계속 써야 할 이유를 느끼지 못하면 대부분은 떠난다는 것

따라서 온보딩을 잘 설계하는 것이 매우 중요 

 

*DAU: 24시간 동안 앱을 사용하는 순 유저 수

 

1.1 온보딩의 종류

1.1.1 튜토리얼 

제품이 매우 복잡하거나 어려운 경우에 조작법이나 설명을 넣는 방식 

이런 식으로

사용자의 행동을 제한하고 흥미를 떨어뜨리는 측면이 있기에 추천하는 방법은 아님 

 

1.1.2 가치 보여주기 

제품을 사용하면서 얻을 수 있는 가치를 몇 개의 화면으로 보여주는 방식 

 

- 온보딩 과정을 보고 싶지 않아하는 사용자를 위해 바로 제품의 홈으로 이동할 수 있는 skip 기능도 제공하기

- 캐러셀을 이용하여 사용자가 화면을 넘기지 않아도 자동으로 넘어가도록 구성하는 것도 좋음

- 사용자가 화면을 직접 넘기지 않아도 되는 동영상으로 구성하는 것도 좋음 

 

1.1.3 개인화 설정하기 

개인 맞춤 정보를 제공할 수 있도록 몇 개의 카테고리와 선택지를 주고 정보를 입력하게 하는 방법

인화가 핵심 기능인 서비스에서 주로 사용되는 유형

 

2. 로딩

앱이나 웹에서 화면이 그려지는 동안 사용자가 잠시 기다려야 할 때 보여주는 화면을 의미함

 

좋은 로딩 화면이란?

- 가능한 빨리 콘텐츠를 표시하기

- 콘텐츠를 로드 중이고 완료하는데 시간이 얼마나 걸릴지 명확하기 전달하기

- 로딩 시간이 불가피하게 길어지면 사용자들이 기다리는 동안 볼 수 있는 내용을 제공하는 것도 좋음 

 

2.1 로딩의 종류 

 

2.1.1 스피너 아이콘 혹은 애니메이션 활용 

요즘에는 단순한 스피너 아이콘 보다는 제품의 브랜드 이미지에 맞춘 움직이는 모션이나 애니메이션을 띄움으로써 사용자에게 즐거움을 제공함 

 

2.1.2 프로그레스 바 

현재 상황을 시각적으로 파악할 수 있는 로딩 바

진행 상황을 유저에게 알려 주어야 하는 케이스에서 사용함 

 

2.1.3 스켈레톤 

불러오는 화면의 빈 버전으로, 화면에서 가장 먼저 노출되어 사용자가 실제 페이지를 예측할 수 있도록 함 

단, 스켈레톤이 실제 화면의 로드를 방해하는 주객전도의 상황이 생기지 않도록 주의해야함 

- 가능한 가장 단순한 모습의 회색 박스를 사용하여 불러오는 페이지를 예측할 수 있는 형태로 표현하는 것이 좋음 

 

3. 검색 

사용자가 원하는 정보를 빠르게 찾을 수 있도록 키워드로 정보를 찾는 방법 

 

좋은 검색 화면이란?

키워드에 대해 사용자가 원하는 결과를 보여줄 수 없을 때는 다른 행동을 할 수 있도록 유도하기

i.e) 추천 콘텐츠를 보여주기, 다른 키워드로 검색 유도하기

 

자동 완성 기능을 사용해 오타를 방지하고 연관된 내용을 함께 찾을 수 있도록 도와주는 것도 중요함 

 

3.1 검색 화면의 종류

 

3.1.1 기본 검색 화면

제품에서 차지하는 검색의 중요도에 따라 검색 기능의 위계가 다른 것을 주목해 보기

유튜브에서는 상대적으로 검색보다는 추천해주는 컨텐츠를 사용자가 누리는 것에 방점을 맞추고 있어 돋보기 모양의 아이콘으로만 배치했지만, 구글과 네이버는 '포털 사이트'이기 때문에 검색이 중요한 기능이라 화면에서 크게 표시하기도 함. 이마트몰의 경우 검색을 통해 제품을 찾는 것도 중요하지만 추천 상품을 통해 제품을 보는 것도 그 못지 않게 중요하기에 30% 정도만 강조하며 표시함. 

 

 

3.1.2 연관 상품 추천 / 연관 검색어 노출 

검색 화면에서는 키워드 검색을 넘어 전반적인 정보의 탐색이 이뤄지는 공간이기도 함 

 

상단의 이미지를 보면 단순히 검색창만을 띄우는 것이 아닌, 추천 상품을 제공함으로써 사용자가 자연스럽게 정보를 습득할 수 있도록 도움을 줌 

 

3.1.3 Empty view: 검색 결과가 없을 때

사용자에게 결과를 보여줄 수 없을 때 빈 화면을 어떻게 채울지 고민하는 것도 중요함

추천 혹은 베스트 상품으로 이어지는 행동을 유도하는 것도 좋은 방법임 

 

무신사나 지그재그의 경우 추천 상품을 보여줌으로써 사용자에게 대안을 제시하고 있으며, 배달의 민족은 유머러스한 이미지를 띄움으로써 자사의 브랜드 아이덴티티를 형성하고 있음. 

 

 

다음 차수부터는 래퍼런스 분석들만 진행할 예정이라 개념은 이 곳에 넣어놓음.