[UXUI Design] UXUI 디자인 입문

Knowledge/UX | Interaction

윤종민 2024. 3. 4. 20:50

▼ 학습 목표

❑ 레퍼런스 분석이란?

❑ 레퍼런스 분석 방법

▹ 화면 구조 분석

* 화면이 각각 어떤 요소들로 구성되어 있는지 분석
- 파운데이션 : 더 이상 속성으로 쪼개지지 않는 가장 기본이 되는 요소
ex) 색상, 폰트, 아이콘 등

- 엘리먼트 : 파운데이션이 모여서 만드는 요소
ex) 버튼, 뱃지, 탭 등

- 모듈 : 엘리먼트가 모여서 만드는 요소
ex) 리스트, 캘러셀, 네비게이션 등

- 페이지 : 모듈이 모여서 만드는 최종 화면
ex) 마이페이지, 장바구니, 회원가입 등

* 쪼개본 UI 요소들 디자인 원칙에 대입해 보면서 사용성이 높은지, 심미적으로 아름다운지 등 다양한 관점에서 디자인 평가

▸ 핵심은 주장과 그에 알맞은 논리적인 근거를 찾는 것

❑ UX/UI 디자인 패턴이란?

디지털 제품, 주로 앱이나 웹에서 사용되는 디자인 요소를 뜻함
UX/UI 디자인 패턴은 보편적인 범위 내에서 디자인 할 것
☞ 사용자는 기존의 경험과 학습된 내용을 바탕으로 행동하기 때문
* UX/UI 패턴을 디자인 시스템으로 만들어 두면 반복해서 재사용할 수 있기 때문에 불필요한 에너지를 줄일 수 있다는 장점

❑ UX/UI 디자인 패턴 종류

온보딩
- 서비스를 처음 만나는 사용자가 기능을 잘 이해하고 가치를 느낄 수 있도록 돕는 과정
* 평균적으로 앱 설치 후 3일 이내의 DAU의 77%가 이탈 -> 사용자가 서비스에 메리트를 못 느끼면 떠난다는 뜻
로딩
- 화면이 그려지는 동안 사용자가 잠깐 기다려야 할 때 보여주는 화면
* 로딩 시간이 길면 기다리는 동안 볼 수 있는 내용을 제공하는 것이 좋음
1) 스피너 아이콘 : 연속적인 움직임을 통해 시스템이 정보를 처리하고 있음을 알림
2) 프로그레스 바 : 현재 상황을 시각적으로 파악할 수 있는 로딩 바
3) 스켈레톤 : 화면의 빈 버전으로, 화면에서 가장 먼저 노출되어 사용자가 실제 페이지를 예측할 수 있도록 하는 것
검색
- 사용자가 원하는 정보를 빠르게 찾을 수 있도록 키워드로 정보를 찾는 방법
* 서비스 컨셉에 따라 검색 위계 질서 또한 다르게 가질 것
회원가입
리스트
카드
캐로셀

❑ 도메인 분석

▹ 핀테크/금융

돈과 관련된 산업이다 보니 국가, 금융 기관의 법과 정책의 영향을 많이 받고, UI에 대한 구체적인 가이드라인 등 관려ㅛㄴ 기고나의 심의를 받는 경우가 많음

▹ 콘텐츠

▹ 커머스