본캠프 6일차_강의 정리, 숙제

🦠 UXUI 디자인 입문 - 1주차

 

 

[강의 정리]

1.UX? UI?

UX(좌) UI(우)

 

- UX는 User eXperience. 제품을 사용하며 사용자가 어떠한 감정이나 경험을 할 수 있도록 이끄는 것을 말함. 이때 제품은 무형의 서비스부터 브랜드 경험까지 모든 것이 될 수 있음.

- UI는 User Interface. 제품과 사용자 사이에서 소통할 수 있도록 하는 매개체. UI 디자인은 주로 화면의 시각적인 요소를 디자인하는 것

 

1-1. 그 밖에

- HCI: 컴퓨터를 더 쉽게 사용하고, 더 잘 활용할 수 있도록 개선하는 것

- CX: 고객 여정의 모든 측면에서 고객이 경험하는 느낌이나 인상

- BX: 고객이 브랜드를 생각했을 때 떠오르는 감정 등을 의미. Brand Identity라고 부르는 것들 이름, 로고, 컬러, 슬로건 등이 포함

 

2. UX UI 디자이너의 역할

 

- UI 디자이너: 시각적인 요소를 활용하여 화면 간의 관계와 인터페이스의 구성을 디자인

- UX 디자이너: 사용자를 분석한 데이터를 토대로 편리한 경험을 이끌어냄. 주 업무는 유저 리서치와 테스트, 정보 구조 설계, 페르소나와 유저 시나리오 작성 등 조사와 분석

- 프로덕트 디자이너: UX+UI 디자이너. 사용자가 경험하는 제품의 시작과 끝 모두를 담당. 주 업무는 문제 정의, 가설 설정, 솔루션 도출, 테스트 등이 있음

 

2-1. 기업 JD 분석

 

a) Toss 💳

 - 정량, 정성적 데이터 수집, 분석 / 데이터를 통해 디자인 평가 및 개

 - UX 설계, UI 디자인, 프로토타입을 통해 고객에게 가치를 전달하는 모든 설계과정에 참여

 - 논리적인 커뮤니케이션 능력 / Figma 툴 

 

b) 당근 🥕

- 정량, 정성적 데이터 수집, 가설 수립 및 검증 

- 논리적으로 표현하고 설득

- 제품 설계 과정 전반에 걸쳐 사용자 경험을 책임

 

c) 현대 자동차 🏎️

- 모빌리티에 대한 이해를 기반으로 한 UI 디자인 개선

- 프로덕트 user flow 디자인 / 프로토타이핑 / 공통 디자인 시스템 구축 / UI 컴포넌트화 

- Figma, Protopie

- 다양하고, 도전적인 테스트 빠르게 실행 / 외국어 의사 소통 능력

 

3. 애플의 Human Interface Guidelines, 구글의 Material Design

 

디자인 가이드라인?

- 디자인 시스템, 스타일 가이드 등으로 부르기도 함

- 일관된 디자인을 하기 위한 지침서로 디자인 원칙과 규칙 제안

- 브랜드 아이덴티티 유지 / 불필요하게 반복되는 업무 줄일 수 있음 / 일관된 사용자 경험

- 오픈소스로 공개한 애플의 Human Interface Guidelines과 구글의 Material Design

 

https://developer.apple.com/design/human-interface-guidelines

Human Interface Guidelines | Apple Developer Documentation

https://m3.material.io/

Material Design

 

⁉️ 잠깐, 왜 디자인 가이드라인을 읽어야 할까요? ⁉️ 

이 두 가이드라인이 UX/UI의 근간이 되기 때문 

사용자 경험을 위해 인터페이스를 설계하는 기본 원칙을 배울 수 있음

 

3-1. 애플 Human interace guidelines 에서 살펴보는 좋은 페이지

a)  Icon

https://developer.apple.com/design/human-interface-guidelines/app-icons

App icons | Apple Developer Documentation

단순함 추구 / 두 개 이상의 플랫폼에서 실행되는 경우, 모든 아이콘에 비슷한 이미지와 색상 팔레트 사용 / 경험이나 브랜드의 필수적인 부분일 때만 텍스트 포함/ 사진보다 그래픽 이미지 / 앱 아이콘에 실제 물체를 묘사할 때, 물리적인 재료로 만들어지고, 실제 질량이 있는 것처럼 보이게 

 

b) button

https://developer.apple.com/design/human-interface-guidelines/buttons

Buttons | Apple Developer Documentation

 

버튼에는 최소 44x44pt의 히트 영역 / 버튼에는 항상 텍스트 레이블이나 심볼이 포함되어 각 버튼이 그 목적을 명확하게 전달하는지 확인 /

가장 가능성이 높은 액션은 시각적으로 가장 눈에 띄게 / 눈에 띄는 버튼의 수를 보기당 1~2개로 유지 / 선택을 시각적으로 구분하려면 크기가 아닌 스타일 사용 / 즉시 완료도지 않은 작업에 대한 피드백을 제공해야 할 때 활동 표시

 

3-2. 구글 Material Design에서 살펴보는 좋은 페이지

a)  shape

https://m3.material.io/styles/shape/overview

Shape - Material Design 3

 

컨테인의 상단, 하단, 시작, 끝 모서리마다 모양을 사용자 정의할 수 있음 / 원형 및 알약 모양은 용기 높이 값의 ½ 로 정의 / 확장된 M3 모양 시스템은 7가지 스타일이 있는 스케일 사용 / 모서리가 정사각형인 모양은 None , 약간 둥근 모서리는 extra-small , 완전히 원형은 full

M2: 구성 컨테이너의 크기에 따른 3단계 스케일 척도 M3: 형태 모서리의 둥글음을 기반으로 한 7단계 스케일 척도

 

 

b) Elevation

https://m3.material.io/styles/elevation/overview

Elevation – Material Design 3

 

 

4. UXUI의 역사와 트렌드

 

 

a) 리얼 메타포

- 90년대에 등장

- 초보자들도 컴퓨터를 쉽게 이용할 수 있도록 실제 물건을 모방해 디자인

- 대표적으로 IBM의 Real Thing 프로젝트가 있음

 

 

b) 스큐어모피즘

- 2007년 등장

- 실제 물건의 특징을 최대한 반영한 디자인 (ex. 나무 질감을 살린 책꽂이, 카메라 조리개를 그대로 옮긴 카메라 등)

- 구현하기 위해 많은 시간 필요

 

c) 플랫 디자인 

- 사용자들의 인터페이스 조작 능력 증가 + 스크린 크기가 다양해짐 => 세세한 디자인보다는 효율적인 디자인 필요

- 그라데이션이나 그림자와 같은 입체적인 효과를 줄이고 최대한 단순하게 표현

https://www.etoday.co.kr/news/view/745579

iOS 7, 6년만에 ‘스큐어모피즘’ 버리다?

 

d) 뉴모피즘

- 스큐어모피즘 + 플랫 디자인

- 단순한 디자인이지만 그림자를 사용해 대상을 구분하고, 볼륨감 부여

 

 

 

---

 

 

[숙제]

HW. 내가 자주 쓰는 서비스 뜯어보기

 

STARBUCKS ☕

홈 - 메뉴 - 메뉴 설명 - 장바구니 - 결제

 

- 분석하고 싶은 것

하단의 '주문하기' 버튼 / 검색창 / 목록 위계 순서

 

- 관련 가이드 찾아보기

https://developer.apple.com/design/human-interface-guidelines/search-fields

Search fields | Apple Developer Documentation

- 검색할 수 있는 정보 유형을 설명하는 플레이스홀더 텍스트 표시

- 검색 환경을 개선하기 위한 제안 제공

- 검색 필드 근처에서 관련 항목에 대한 액세스 제공

- 최근 검색이나 제안하는 용어 등을 표시

- 지우기 버튼 포함

 

좋은 점 ⭕

- 플레이스홀더 텍스트 '검색' 표시하고 있음

- 지우기 버튼인 '취소'가 있어서 검색을 중지하고, 이전 화면으로 바로 돌아갈 수 있음

- 최근 검색어를 보여줌

 

아쉬운 점✔️

- 제안하는 용어가 표시되지 않음. 그래서 오타나 일부 단어로 원하는 메뉴를 바로 입력할 수 없음.