UIUX 디자인 입문 레퍼런스 분석 6-1

디자인씽킹 실무프로세스 디자인원칙 등등~ 배웠었다.

 

[수업 목표] 레퍼런스 분석이 무엇인지 알고 필요한 상황에서 해볼 수 있습니다.

UX/UI 디자인 패턴을 이해하고 활용할 수 있습니다.

도메인별 특징을 파악하고 레퍼런스 분석을 할 수 있습니다.

 

[목차] 

01. 레퍼런스 분석

02. UX/UI 디자인 패턴

03. [레퍼런스 분석 1] 핀테크/금융

04. [레퍼런스 분석 2] 콘텐츠

05. [레퍼런스 분석 3] 커머스 HW. 레퍼런스 분석하기: 카카오톡

 

레퍼런스 분석 알아보자!

 

레퍼런스 분석은

 

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

 

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

레퍼런스 분석은 왜 하나요?

레퍼런스 분석을 통해 스스로 생각하는 힘을 기를 수 있습니다

• UX/UI 디자이너는 시장과 사용자의 문제를 발견하고, 여러 고민을 통해 해결책을 제시하는 사람입니다.
• 레퍼런스를 분석하는 과정에서 디자인에 대한 영감을 얻고 좋은 디자인을 구분하는 지식을 쌓을 수 있습니다.
• 좋은 사용성을 가진 디자인과 나쁜 UX 패턴을 가진 디자인을 고민해 보면서 사고력을 기를 수 있어요.
• 이 과정에서 쌓은 영감과 지식을 디자인할 때 적용할 수 있고 결국엔 본인의 디자인 능력을 높이는 길이 됩니다.

우리는 레퍼런스 분석을 통해서 끊임없이 생각하는 과정

 

레퍼런스 분석하는 방법

레퍼런스분석은 다음과 같이 3가지 단계로 구분된다.

1) 화면 구조 분석

2) 디자인 원칙 기반 분석

3) 인사이트 정리하기

 

화면 구조분석

화면이 각각 어떤 요소들로 되어있는지 분해해보는 단계

 

일반적으로 우리가 보는 앱 화면은 이렇게 구성되어 있어요

 

 👩‍💻 화면을 구성하는 요소를 나누는 방법에는 여러 가지가 있어요 (사람마다 회사마다 다르게 나눌수있어요! 쌤왈)

예를 들어, 파운데이션 → 엘리먼트 → 모듈 → 페이지로 나눌 수도 있어요.

• 파운데이션: 더 이상 세부 속성으로 쪼개지지 않는 가장 기본이 되는 요소
  • 예) 색상, 폰트, 아이콘 등
• 엘리먼트: 파운데이션이 모여서 만드는 요소
  • 예) 버튼, 뱃지, 탭 등
• 모듈: 엘리먼트가 모여서 만드는 요소
  • 예) 리스트, 캐러셀, 네비게이션 등
• 페이지: 모듈이 모여서 만드는 최종 화면
  • 예) 홈, 마이페이지, 장바구니, 회원가입 등

하지만, UX/UI 디자인 입문 강의에서는 구성을 나누는 방법보다는

각각의 요소를 어떻게 분석하는지에 집중하기 위해 가장 단순한 방법으로 화면의 구조를 나눠볼게요.

• UI 요소 → 화면

화면을 해부한다고 생각하고 요소들을 자세하게 나눠보세요.

UI 요소의 이름을 잘 모르겠다면

1주 차에 배운 애플의 Human Interface Guidelines, 구글의 Material Design을 참고해 보세요.

 

화면을 단순한 UI로 분석해본다.

 

토스의 화면 구조 분석 예시

토스의 화면이다.

나눠본다. 1~ 6 , 섹션(모듈)

이렇게 나눠보는 단계가 화면구조분석 1단계

 

디자인 원칙 기반 분석

UI 요소들을 디자인 원칙들을 기준으로 분석해 보는 단계입니다.

• 쪼개본 UI 요소들을 디자인 원칙에 대입해 보면서 사용성이 높은지, 심미적으로 아름다운지 등 다양한 관점에서 디자인을 평가해 보세요.
• 나쁜 점도 타산지석의 사례로 삼을 수 있으니 좋은 점과 나쁜 점 모두 다양하게 찾아보세요.
• 이 단계의 핵심은 주장과 그에 알맞은 논리적인 근거를 찾는 것이에요.

👩‍💻 지난 강의에서 배운 여러 가지 이론을 활용할 수 있어요.

5주 차에 배운 여러 가지 디자인 원칙들 잘 기억하고 계시죠?

게슈탈트 심리학
UX 비주얼 디자인 원칙
UX/UI 심리학 법칙
기업의 디자인 원칙

 

인사이트 정리하기

 

분석한 내용들로 얻은 인사이트를 정리해 내 것으로 만드는 단계예요.

• 본인의 제품에 참고하거나 적용하면 좋을 만한 것들을 그룹화해서 정리해 보세요.
• 한 단계 더 나아가 아쉬운 점이나 나쁜 사례를 어떻게 더 나아지게 할 수 있을지 개선점까지 생각해 보시면 훨씬 도움이 될 거예요.

 

 

+ 정리

 

레퍼런스 분석

 

다양한 사례를 찾고 분류해보고 도움이될만한것을 찾는 과정이고,

레퍼런스 분석에는 화면구조분석, 디자인원칙분석, 인사이트 정리하기.

화면구조분석은 현재는 간단하게 어떤부분으로 되어있는지 정도만 분석하고,

디자인원칙은 지난시간에 배웠던 디자인 원칙 종류 다섯가지 게슈탈트,UIUX 심리학, 비주얼 디자인, 기업의디자인를 적용해 다양한 관점에서 디자인을 평가해본다.

그리고 인사이트 분석 내용을 정리해 내꺼로 만들고, 제품에 적용할만 것을 그룹화해서 또 정리. 

 

어여듣자~ 6주차 강의여 힘들구나 몸살이온당!! ㅜ_ㅜ

본캠시작한지 3주차이다!!