[UXUI 입문 6주차] 레퍼런스 분석

🔎 레퍼런스 분석

▶얻고 싶은 정보를 기준으로 사례를 수집, 세부 요소를 나누어 분석

1. 화면 구조 분석 
   • 파운데이션 ➡ 엘리먼트 ➡ 모듈 ➡ 페이지 단계로 나우어 분석
2. 디자인 원칙 기반 분석
   • 게슈탈트 심리학
   • UX비주얼 디자인 원칙
   • UX/UI 심리학 법칙
   • 기업의 디자인 원칙
3. 인사이트 정리하기
   • 본인의 제품에 참고하거나 적용하면 좋을 만한 것을 그룹화

---

🔎 UX/UI 디자인 패턴

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

▶ 온보딩

📌 서비스를 처음 시작한 사용자에게 기능과 가치를 이해하도록 도와주는 과정

1. 튜토리얼 

• 사용성 측면에선 튜토리얼은 추천하지않음
• 제한적으로 사용

2. 가치 보여주기

• 제품을 사용하면서 얻는 가치를 몇개의 화면으로 보여주는
• 온보딩 과정의 SKIP 기능을 제공
• 캐러셀을 이용해 자동으로 화면이 넘어가도록
• 동영상으로 구성

3. 개인화 설정

• 개인 맞춤 정보를 제공할 수 있도록 카테고리와 선택지를 주고 정보를 입력
• 개인화 서비스중인 제품 스포티파이, 듀오링고

▶ 로딩

📌 좋은 로딩 화면이란?

> 가능한 빨리 콘텐츠를 표시
> 로드하는데 걸리는 시간을 명확하게 표시
> 로딩이 길어지면 볼 수 있는 컨텐츠를 제공

1. 스피너 아이콘 혹은 애니메이션 활용
2. 프로그레스 바
3. 스켈레톤

▶ 검색

📌 좋은 검색 화면이란?

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

(추천 콘텐츠, 다른 키워드)

1. 기본 검색 화면 : 제품마다 차지하는 검색 중요도에 따라 배치(유튜브, 네이버, 구글) 
2. 연관 상품 추천/연관 검색어 노출 : 커머스
3. Empty view : 검색 결과가 없을 떄의 빈 화면을 어떻게 채우는지 고민하기

🔽 참고하여 찾아보기

▶ 회원가입
▶ 리스트 
▶ 카드 
▶ 캐러셀 UI 디자인 

---

레퍼런스 분석 #1 : 핀테크/금융

※ 돈과 관련함 산업이기에 국가와 금융 기관의 법과 정책의 영향을 받음
※ UI에 대한 구체적인 가이드라인이 있거나 관련 기관의 심의를 받아야 한다
※ 핀테크/금융의 여러 앱을 동시에 비교하는걸 추천

▶ 핀테크 : 토스, 네이버페이, 카카오페이
▶ 금융기관(은행사) : 신한은행, 카카오뱅크, OK 저축은행
▶ 금융기관(카드사, 증권사, 보험사) : 현대카드, 나무증권, 삼성화재

방법 1. 화면 구조 분석 : 홈 화면, 탭 화면, 소비/수입 화면
방법 2. 디자인 원칙 기반 분석 : 소비/수입 화면 > 소비 상세 섹션, 고정비 분석 섹션

레퍼런스 분석 #2 : 콘텐츠

※ 콘텐츠 종류에 따라 영상, 오디오, 텍스트, 웹툰 등으로 나뉨
※ 각 콘텐츠의 종류에 따라 제품의 특성이 다르다
※ 체류시간을 늘리는 UXUI를 찾는 것에 집중

▶ 영상 콘텐츠 : 유튜브, 넷플릭스, 티빙
▶ 오디오 콘텐츠 : 스포티파이, 유튜브 뮤직, 오디오클립
▶ 웹툰 콘텐츠 : 네이버 웹툰, 카카오 웹툰, 레진코믹스
▶ 텍스트 콘텐츠 : 리디, 밀리의 서재, 애플 도서

방법 1. 화면 구조 분석 : 홈(탭) 화면
방법 2. 디자인 원칙 기반 분석 : 홈(탭) 화면 > 강조 콘텐츠 섹션(모듈), 일반 콘텐츠 섹션

레퍼런스 분석 #3 : 커머스

※ 전자상거래인 이커머스를 말한다
※ 제품의 지표, UXUI가 상품의 영향을 크게 받는다

▶ 커머스 : 쿠팡, 컬리, 오늘의 집, 지그재그, 브랜디, 무신사