UI / UX란?
UI - User Interface
- 어떤 제품이나 소프트웨어를 사용하게 되는 소비자가 제품과 서비스를 이용할 때 처음 접하게 되는 매개물이다.
- 흔히 ui 디자인이라고 하면 아이콘, 색감, 타이포그래피 등으로 보여지는 시각 디자인을 의미한다.
UX - User eXperience
- 유저의 경험을 의미하며 유저가 서비스나 제품을 직접 사용하여 느끼는 것이다.
- ux 디자인은 이용을 하는 이용자가 편리하고 만족하게끔 ui를 디자인하는 것을 의미한다.
| UI 디자인 | UX 디자인 |
| 직관적이고 심미적으로 만족스러운 시각적/대화형 인터페이스를 구축한다. | 사용자의 문제를 식별하고 해결한다. |
| 제품 개발 프로세스를 뒤따른다. | 제품 개발 프로세스에 선행된다. |
| 시각적 대화형 요소를 디자인한다. | 사용자 여정의 뼈대를 그려낸다. |
| 디지털 제품 및 경험에 따라 달라진다. | 모든 제품의 종류, 서비스 또는 경험에 적용될 수 있다. |
UI / UX 프로세스
Discover, Develop 단계
- 사고의 확산 (Diverging)
Define, Deliver 단계
- 사고의 수렴 (Converging)
Discover 단계
- 어떤 제품 또는 서비스에서 문제점을 찾아내기 위해 생각들을 확산시키는 과정이다.
- 기본적으로 제품 또는 서비스에 대한 기본적인 자료조사, 시장조사, 경쟁사 분석, 사용자 조사 등이 있다.
정량적 조사
- 사용자 설문
- A/B 테스트
- 아이 트래킹
정성적 조사
- 인터뷰
- 현장조사
- 카드 소팅
Define 단계
- 앞에서 진행한 조사를 토대로 나온 문제점 등을 정의하고 시각화 하는 단계이다.
- 사용자들에 대한 새로운 서비스 아이디어를 제시, 실험하고 이해도를 높이기 위한 페르소나(퍼소나), 고객 여정 지도 등의 방법을 사용한다.
페르소나
- 서비스 또는 제품에 대한 경험이 동일한 사용자들을 묶은 후, 가상의 인물로 정의하는 작업이다.
고객 여정 지도
- 서비스에서의 목적을 달성하기 위한 고객의 동선을 예측하고, 각 단계마다 대응해야 할 과제들을 이해하는 방법론이다.
- 변수를 이해하고 이용할 시나리오를 그려보는 작업이다.
Develop 단계
- 앞서 발견하고 정의한 내용을 바탕으로 아이디어, 정보를 구체화하여 발전시키는 단계이다.
- 서비스와 제품에 대한 컨셉 등이 확정되며, 정해진 컨셉에 맞춰 아이디어 및 구조가 구체화되는 단계이다.
Deliver 단계
- Discover → Define → Develop 단계를 거친 뒤 도출된 결과를 보여주는 단계이다.
- 이때 Deliver의 방법으로는 시나리오 작성, 스토리보드 작성, 결과물을 제작하여 직접 보여주는 방법 등을 사용한다.
디자인 시스템
다양한 페이지와 채널을 걸쳐 공통의 언어와 시각적 일관성을 만들고 반복되는 작업을 줄임으로써, 규모에 맞게 디자인을 관리하기 위한 표준 집합이다.
디자인 시스템의 장점
- 효율성 확보 (Efficiency)
- 일관성 있는 사용자 경험 (UX Consistency)
- 다양한 제품에 대응(Design at Scale)
- 협업에 기여 (Collaboration)
디자인 시스템의 요소
컬러
컬러는 디자인 시스템의 기본 구성 요소이다.
- 접근성
- 충분한 대비
- 메인 컬러 정의
- 보조 컬러 정의
- 정보를 담은 색상
- 색채명 지정
타이포그래피
타이포그래피는 단단한 디자인 시스템을 위한 기본 구성 요소이다.
브랜드를 만들 때 중점을 두어야 할 시각적 요소이다.
- 서체
- 규모와 크기
- 글꼴 크기 / 두께 이름 정의
- 행간 / 자간
- 폰트스타일, REM과 픽셀, 색상, 접근성
아이콘
아이콘은 대상의 특징을 강조해 만드는 기호이다.
개성을 부여하기 쉽고 보편적으로 이해할 수 있다.
- 이해 용이성
- 파일 종류
- 스타일
- 그리드
- 디테일
컴포넌트
컴포넌트는 재사용이 가능한 독립된 조각을 의미한다.
독립된 컴포넌트들을 조합하여 하나의 페이지 구성이 가능하다.
- 아코디언
- 카드
- 뱃지
- 배너
- 버튼 등등
네이밍 규칙
컬러, 타이포그래피, 아이콘 등에 일정한 규칙을 정하여 상호 소통 시 헷갈리지 않고 정확한 작업이 가능하도록 한다.
- 통일성
- 범용성
- 사이즈 수정의 용이함
'기록 > 새싹x코딩온' 카테고리의 다른 글
| [새싹x코딩온] 웹 퍼블리싱 과정 6주차 - 2 | 포토샵 심화 (0) | 2023.07.20 |
|---|---|
| [새싹x코딩온] 웹 퍼블리싱 과정 6주차 - 1 | 포토샵 기초 (0) | 2023.07.18 |
| [새싹x코딩온] 웹 퍼블리싱 과정 5주차 - 2 | :root, 라이브러리 (0) | 2023.07.16 |
| [새싹x코딩온] 웹 퍼블리싱 과정 5주차 - 1 | jQuery - 메소드(2), Bootstrap(1) (0) | 2023.07.11 |
| [새싹x코딩온] 웹 퍼블리싱 과정 4주차 - 3 | JS - 이벤트, jQuery - 메소드(1) (0) | 2023.07.08 |