UI\UX 공부/UIUX강의정리

[ch6] 래퍼런스 분석

아노말로카리스 2025. 7. 18. 20:21

 

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

  • 래퍼런스 분석을 통해 스스로 생각하는 힘을 기를 수 있으며, 이를 통해 디자인 능력 향상이 가능하다.
  • UX/UI 디자이너는 시장과 사용자의 문제를 발견하고, 여러 고민을 통해 해결책을 제시하는 사람으로서, 래퍼런스 분석 과정에서 디자인에 대한 영감을 얻고 좋은 디자인을 구분하는 지식을 쌓고, 사고력을 기를 수 있다.
  • 이 과정에서 쌓은 영감과 지식을 디자인할 때 적용할 수 있고 결국엔 본인의 디자인 능력을 높이는 길이 된다.
래퍼런스 분석하기
  1. 화면 구조 분석 : 화면이 어떤 요소들고 각각 구성되어 있는지 분해해 보는 단계.
    구성 요소 나누기)
    파운데이션 : 더 이상 세부 속성으로 쪼개지지 않는 가장 기본이 되는 요소.
    엘리먼트 : 파운데이션이 모여서 만드는 요소.
    모듈 : 엘리먼트가 모여서 만드는 요소.


  2. 디자인 원칙 기반 분석 : UI 요소들을 디자인 원칙들을 기준으로 분석해 보는 단계.
    이 단계의 핵심은 주장과 그에 알맞은 논리적인 근거를 찾는 것으로, 쪼개본 UI 요소들을 디자인 원칙에 대입해 보면서 사용성이 높은지, 심미적으로 아름다운지 등 다양한 관점에서 디자인을 평가해본다.

  3. 인사이트 정리하기 : 분석한 내용들로 얻은 인사이트를 정리해 내 것으로 만드는 단계.
    본인 제품에 참고하거나 적용하면 좋을 만한 것들을 그훕화해서 정리하고, 제품의 아쉬운 점이나 나쁜 점에 대한 개선점을 생각해 볼 수 있다. 
UX/UI 디자인 패턴
  • 주로 앱이나 웹에서 자주 사용되는 디자인 요소.
  • 사용자는 기존의 경험과 학습 내용을 바탕으로 행동(제이콥 법칙)하기 때문에, 공통으로 볼 수 있는 UX/UI 디자인 패턴은 보편적인 범위 내에서 디자인하고 동작하도록 한다.
  • 자주 쓰는 UX/UI 디자인 패턴은 사용자에게 익숙하기 떄문에 쓰는 데 어려움이 없으며, 디자이너도 활용하기 쉽다.

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

    1. 온보딩 : 서비스를 처음 만나는 사용자가 기능을 잘 이해하고 가치를 느낄 수 있도록 돕는 과정. 
    온보딩은 사용자가 제품에 대한 첫인상을 긍정적으로 기억하고 계속 찾아 이탈률을 줄여 다시 찾도록 하기 위해서 잘 설계하는 것이 중요하다.

    -종류
  • 튜토리얼 : 제품이 복잡하거나 어려우면 조작법이나 설명을 넣거나 특정 기능 강조 시에 사용.
  • 가치 보여두기 : 제품 사용시 얻을 수 있는 가치를 몇 개의 화면으로 보여주는 방식.
  • 개인화 설정하기 : 개인화가 핵심인 서비스에서 주로 사용되는 유형이며, 개인 맞춤 정보를 제공할 수 있도록 몇 개의 카테고리와 선택지를 주고 정보를 입력하게 하는 방법.

    2. 로딩 : 앱이나 웹에서 화면이 그려지는 동안 사용자가 잠깐 기다려야 할 때 보여주는 화면.

    -종류
  • 스피너 아이콘 혹은 애니메이션 활용 : 데이터를 서버에서 불러오거나, 반대로 보낼 때 연속적인 움직임을 통해 시스템이 정보를 처리하고 있음을 알려줘서 앱과 사용자와의 상호 작용을 돕습니다.
  • 프로그레스 바 : 현재 상황을 시각적으로 파악할 수 있는 로딩 바.
  • 스켈레톤 : 화면에서 가장 먼저 노출되어 사용자가 실제 페이지를 예측할 수 있도록 불러오는 화면의 빈 버전.

    3. 검색 : 사용자가 원하는 정보를 빠르게 찾을 수 있도록 키워드로 정보를 찾는 방법.
    특히 정보 양이 많은 서비스라면 검색 기능 추가를 통해 사용자의 빠른 정보 탐색을 도울 수 있다.

    -종류
  • 기본 검색 화면 : 제품에서 차지하는 검색의 중요도에 따라 검색 기능의 위계가 다르며, 제품에 따라 돋보기 아이콘만 배치하거나 화면에서 크게 전면 표시하는 경우도 있다.
  • 연관 상품/검색어 : 키워드 검색 외에도 전반적인 정보의 탐색이 이뤄지는 공간이며,탐색을 돕기 위한 요소이다.
  • Empty view: 검색 결과가 없을 때 나오는 빈 화면.

    4. 회원가입 

    5. 리스트
     
    6. 카드
     
    7. 캐러
사업 별 래퍼런스 분석
  • 핀테크 금융
    돈과 관련된 사업이기에 국가, 금융 기관의 법과 정책의 영향을 많이 받는다. 이 중에는 UI에 대한 구체적인 가이드라인이 있다거나 화면에 대해서 관련 기관의 심의를 받아야 하는 경우도 있다.
    보통 금융자산 연결, 자산/소비 분석, 신용대출 비교와 같은 기능을 제공한다.


  • 콘텐츠
    콘텐츠의 종류에 따라 다양하게 나눠지고 각 종류의 특성에 따라서 제품의 차이가 크다. 콘텐츠 제품의 주요 지표는 체류 시간으로, 그렇기에 사용자를 오래 머무르게 만들고자 노력한다.
  • 커미스
    전자상거래인 이커머스를 의미하며, 온라인에서 판매 및 거래가 이루어지는 플랫폼을 의미한다. 전자상거래 답게 제품의 지표, UX/UI가 상품으로 인한 영향을 크게 받는 편이다. 커마스는 상품 탐색에서 구매로 이어지는 사용자 여정에 집중하며 이탈율를 줄이는 데 집중한다.

'UI\UX 공부 > UIUX강의정리' 카테고리의 다른 글

[ch1] 사용자 경험 향상  (0) 2025.07.22
[ch1] UI 디자인 핵심 원리  (2) 2025.07.22
[ch5] 디자인 원칙  (4) 2025.07.18
[ch4] 디자인 툴  (1) 2025.07.17
[ch3] 실무 프로세스  (3) 2025.07.16