[UXUI 디자인 입문] Ch6: 레퍼런스 분석

2025. 7. 30. 19:45

 

6-1) 레퍼런스 분석

 

📌 레퍼런스 분석📌

· 여러가지 사례를 상세하게 분류해 생각해보고 도움이 될 만한 부분을 찾아보는 과정
· 얻고 싶은 정보를 기준으로 다양한 사레 수집하고 세부 요소들로 쪼개서 살펴보기
· 세부 요소들을 관찰하면서 좋은 점/나쁜 점, 그리고 그 이유를 찾고 생각해보기
· 분석을 통해 얻은 인사이트 정리하기

 

 

레퍼런스 분석을 왜 하는지?

  • 레퍼런스 분석을 통해 스스로 생각하는 힘을 기를 수 있음
  • UX/UI 디자이너는 시장과 사용자의 문제를 발견하고, 여러 고민을 통해 해결책을 제시하는 사람
  • 레퍼런스 분석하는 과정에서 디자인에 대한 영감을 얻고, 좋은 디자인을 구분하는 지식을 쌓을 수 있음

출처: UXUI 디자인 입문(챕터6-1)

 

 

레퍼런스 분석하는 방법

  • 화면 구조 분석
    • 화면을 구성하는 요소를 나누는 방법에는 여러가지가 존재함
      • 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 기능도 제공하기, 캐러셀 사용해서 자동으로 넘어가도록 구성하기, 직접 넘기지 않아도 되는 동영상으로 구성하는 것도 좋음
      • 개인화 설정하기: 개인 맞춤 정보를 제공할 수 있도록 몇 개의 카테고리와 선택지 주고 정보를 입력하게 하는 방법 ▶️ 개인화가 핵심 기능인 서비스에서 주로 사용되는 유형 (스포티파이, 듀오링고, ...)
  • 로딩
    • 가능한 한 빨리 콘텐츠를 표시하기
    • 콘텐츠를 로드 중이고 완료하는 데 얼마나 걸릴지 명확하게 전달하기
    • 로딩 시간이 불가피하게 길어지면, 사람이 기다리는 동안 볼 수 있는 내용을 제공하는 것이 좋음
    • 로딩의 종류
      • 스피너 아이콘 혹은 애니메이션 활용 
      • 프로그레스 :현재 상황을 시각적으로 파악할 수 있는 로딩 바, 진행 상황을 유저에게 알려줘야 하는 케이스에서 사용
      • 스켈레톤: 불러오는 화면의 빈버전으로 화면에서 가장 먼저 노출되서 사용자가 실제 페이지를 예측할 수 있도록 함

출처: UXUI 디자인 입문(챕터6-2)

  • 검색
    • 정보의 양이 많은 서비스에서 사용해 사용자의 빠른 정보 탐색을 도울 수 있음
    • 키워드에 대해 사용자가 원하는 결과를 보여줄 수 없을 때, 다른 행동을 할 수 있도록 유도하기 ▶️ 추천 컨텐츠 보여주기 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
  • 무신사
  • 크림
  • 퀸잇

 

BELATED ARTICLES

more