레퍼런스 분석

✒️ 레퍼런스 분석
여러 가지 사례를 상세하게 분류해 생각해 보고 도움이 될 만한 부분들을 찾아보는 과정
- 얻고 싶은 정보를 기준으로 다양한 사례를 수집하고 세부 요소들로 쪼개어 살펴보기
- 세부 요소들을 관찰하면서 좋은 사례와 나쁜 사례, 그리고 그 이유에 대해 생각해 보기
- 분석을 통해 얻은 인사이트를 정리하기
💫 레퍼런스 분석을 하는 이유
UXUI 디자이너는 시장과 사용자의 문제를 발견하고, 여러 고민을 통해 해결책을 제시하는 사람이다.
레퍼런스를 분석하는 과정에서 디자인에 대한 영감을 얻고 좋은 디자인과 나쁜 디자인을 구분하는 지식을 쌓을 수 있다.
이 과정에서 쌓은 영감과 지식을 디자인할 때 적용할 수 있고, 본인의 디자인 능력을 높이는 길이 된다.
💫 레퍼런스 분석 방법
1. 화면 구조 분석
화면이 각각 어떤 요소들로 구성되어 있는지 분해해 보는 단계
파운데이션 → 엘리먼트 → 모듈 → 페이지
- 파운데이션: 더 이상 세부 속성으로 쪼개지지 않는 가장 기본이 되는 요소
- 예) 색상, 폰트, 아이콘 등
- 엘리먼트: 파운데이션이 모여서 만드는 요소
- 예) 버튼, 배지, 탭 등
- 모듈: 엘리먼트가 모여서 만드는 요소
- 예) 리스트, 캐러셀, 내비게이션 등
- 페이지: 모듈이 모여서 만드는 최종 화면
- 예) 홈, 마이페이지, 장바구니, 회원가입 등
2. 디자인 원칙 기반 분석
UI 요소들을 여러 디자인 원칙들을 기준으로 분석해 보는 단계
- 화면 구성 요소들을 디자인 원칙에 대입해 보며 다양한 관점에서 디자인 평가해 보기
- 자신의 주장에 알맞은 논리적인 근거가 꼭 필요!!
3. 인사이트 정리하기
분석한 내용들로 얻은 인사이트를 정리해 나의 지식으로 만드는 단계
- 본인의 제품에 참고하거나 적용하면 좋을 만한 것들을 그룹화하여 정리해 보기
- 찾은 나쁜 사례를 어떻게 개선할 수 있을지 생각해 보기
💫 UXUI 디자인 패턴
디지털 제품, 주로 앱이나 웹에서 자주 사용되는 디자인 요소들
사용자의 경험을 개선하고 인터페이스의 일관성을 유지하는 데 중요한 역할을 한다.
1. 온보딩
새로운 사용자가 제품을 쉽게 이해하고 사용할 수 있도록 도와주는 과정
새로운 기능을 소개하거나 계정을 설정하는 등의 경험을 포함한다.
ex) 튜토리얼, 인터랙티브 가이드(가치 보여주기), 개인화 설정하기 등
2. 로딩
사용자가 콘텐츠를 기다리는 동안 불편함을 최소화하는 디자인 패턴
ex) 로딩 애니메이션, 스켈레톤 스크린, 프로그래스 바 등
3. 검색
사용자가 원하는 정보를 빠르게 찾을 수 있도록 도와주는 UI 패턴
ex) 연관 상품 추천/연관 검색어, 필터 및 정렬, 검색 결과가 없을 때 등
4. 로그인 / 회원가입
사용자가 새로운 계정을 만들 때 불편함을 최소화하는 UI 패턴
ex) 소셜 로그인, 단계별 회원가입, 게스트 로그인, 즉시 피드백 등
5. 리스트
많은 데이터를 한 화면에서 효과적으로 정리하여 제공하는 UI 패턴
ex) 무한 스크롤, 페이지네이션, 카드형, 압축형 등
6. 카드
정보를 블록 형태로 정리하여 한눈에 보기 쉽게 만드는 UI 패턴
ex) 이미지 중심 카드, 텍스트 중심 카드, 인터랙티브 카드, 카테고리별 카드 등
7. 캐러셀
가로로 스크롤 가능한 콘텐츠를 슬라이드 형태로 제공하는 UI 패턴
ex) 자동 재생 캐러셀, 사용자 제어 캐러셀, 카드 기반 캐러셀, 썸네일 기반 캐러셀 등
💫 레퍼런스 분석 해보기
레퍼런스 참고 사이트 윗에서 밀리의 서재 홈 화면을 찾아 분석해 보기로 했다.
현재와는 조금 다른 디자인이었지만 분석에는 문제가 없기에 그대로 진행해 보았다.


🔗 레퍼런스 참고 사이트
Lifeplus
한국의 UI/UX 모바일 패턴을 수집합니다.
wwit.design
디자이너스, https://designus.io/reference
레퍼런스 | 디자이너스
모바일 UX UI 디자인 레퍼런스, 디자인 할 때 유용한 모든 앱 화면 모음을 지금 디자이너스(Designus)에서 확인하고 참고해보세요. 디자인 패턴, 디자인 시스템, 컴포넌트, 산업 별로 손쉽게 모아 볼
designus.io
유아이볼, https://uibowl.io/
유아이볼 | 매일 하루에 한개씩 업데이트 되는 패턴과 친해져요!
국내 UI/UX 패턴을 담은 공간, 유아이볼
uibowl.io