UXUI

레퍼런스 분석

Euijung 2025. 1. 30. 22:44

✒️ 레퍼런스 분석

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

  • 얻고 싶은 정보를 기준으로 다양한 사례를 수집하고 세부 요소들로 쪼개어 살펴보기
  • 세부 요소들을 관찰하면서 좋은 사례와 나쁜 사례, 그리고 그 이유에 대해 생각해 보기
  • 분석을 통해 얻은 인사이트를 정리하기

 


💫 레퍼런스 분석을 하는 이유

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) 자동 재생 캐러셀, 사용자 제어 캐러셀, 카드 기반 캐러셀, 썸네일 기반 캐러셀 등

 


💫 레퍼런스 분석 해보기

레퍼런스 참고 사이트 윗에서 밀리의 서재 홈 화면을 찾아 분석해 보기로 했다.

현재와는 조금 다른 디자인이었지만 분석에는 문제가 없기에 그대로 진행해 보았다.

 


🔗 레퍼런스 참고 사이트

윗, https://wwit.design/

 

Lifeplus

한국의 UI/UX 모바일 패턴을 수집합니다.

wwit.design

디자이너스, https://designus.io/reference

 

레퍼런스 | 디자이너스

모바일 UX UI 디자인 레퍼런스, 디자인 할 때 유용한 모든 앱 화면 모음을 지금 디자이너스(Designus)에서 확인하고 참고해보세요. 디자인 패턴, 디자인 시스템, 컴포넌트, 산업 별로 손쉽게 모아 볼

designus.io

유아이볼, https://uibowl.io/

 

유아이볼 | 매일 하루에 한개씩 업데이트 되는 패턴과 친해져요!

국내 UI/UX 패턴을 담은 공간, 유아이볼

uibowl.io