[내일배움캠프 8일차(3)] UI 디자인의 모든 것 수강

저는 오늘 실습과 숙제 다 끝낼 줄 알았습니다,,

저 진짜 열심히 했거덩요?!

근데 다 못했으요

하면 다시 올리겠습니다,,

 

 

 

<UI 디자인의 모든 것 1-2>

수업 목표

1️⃣ 목적에 맞는 컬러를 사용할 수 있다.

2️⃣ 타이포그래피의 계층 구조를 이해하고 적용할 수 있다.

3️⃣ 일관된 스타일로 아이콘을 만들 수 있다.

 

 

 

UI 디자인 기본

컬러

가장 먼저 인지하는 요소이자 가장 오래 기억에 남는 요소이다.

 

컬러의 역할

중요한 정보 강조, 사용자의 행동 유도, 상태(State), 브랜드 아이덴티티

 

 

실습 1

(1) 컬러로 연상되는 브랜드 찾아보기

 

(2) 브랜드 이미지 연상하기

 

(3) 브랜드의 메세지 연상하기

쿠팡 : 친근하지만 온라인 쇼핑몰의 대표로 자리매김 하겠다는 강렬한 이미지 전달

당근 : 이웃과 함께하는 플랫폼으로 따뜻하고 정감가는 이미지 전달

카카오 : 가벼운 소통 창구로 발랄한 이미지 전달

네이버 : 포털사이트의 대표 주자로 깔끔하면서 신뢰가는 이미지 전달

토스 : 금융 플랫폼인만큼 깔끔하면서 정직한 이미지 전달

마켓컬리 : 쿠팡과 정반대로 고급스러운 느낌으로 차별화된 이미지 전달

 

 

 

컬러 비율

5% 주색(브랜드 컬러), 25% 보조색, 70% 배경색

 

 

UI 컬러 구성

(1) Primary color 

주색이라고도 불린다. UI에서 가장 강조해야 하는 영역, 사용자의 행동을 유도할 때 사용한다. 또한 브랜드를 대표하는 컬러로 브랜드의 인지도를 향상시키고 각인시키는 데 도움을 준다

 

(2) Secondary color

보조색이라고도 불린다. Primary color를 보완해 주면서 조화를 이루는 역할을 한다.

 

(3) Neutral color

중립의 컬러로 UI 디자인에서 지원 역할을 한다. 보통 텍스트와 배경에 사용한다.

 

(4) Semantic color

시스템 컬러라고도 한다. UI 디자인에서 현재 시스템의 상태를 사용자에게 알려주며 상호작용하고 있다는 것을 보여주는 역할을 한다.

 

 

배경과 컬러

컬러는 상대적이라 주변 환경(배경 색)에 따라 영향을 받는다.

 

 

 

형태와 컬러

컬러는 상대적이라 형태에 따라 영향을 받는다.

형태에 따라 색상 코드값을 알맞게 적용하여 가독성을 높여야 한다.

 

 

 

과도한 컬러 사용 피하기

한 화면에서 너무 많은 컬러를 사용하는 것은 사용자에게 혼란을 줄 수 있다.

 

 

 

타이포그래피

OS별 시스템 폰트

(1) IOS, Android 시스템 폰트

• 국문, 영문, 일문, 한자 등 다국어를 지원한다.
• 다양한 사이즈와 굵기를 제공한다.
• 폰트 경량화로 용량이 라이트하다.
• 무료로 사용할 수 있다.
• 상업용으로 사용 가능한다.

(2) 웹 폰트

대표적인 웹폰트로 프리텐다드, 스포카 한 산스, 슈트를 사용한다.

시스템 폰트와 동일한 장점을 가지고 있다.

 

 

 

Serif 와 Sans-Serif

(1) Serif

• 글자 획의 시작이나 끝부분이 도출된 형태로 한글에서 명조나 바탕체가 세리프체에 속한다.
• 글자 획의 굵기가 가로와 세로가 다르고, 책과 신문 같은 인쇄물에서 주로 사용하고 있다.

 

(2) Sans-Serif

• 글자 획의 끝부분이 돌출되지 않은 형태로 한글의 고딕체가 산세리프에 속한다.
• Sans-Serif는 Serif가 없다는 뜻이다. 글자 획의 굵기가 일정하고 끝부분에 삐침이나 도출 없이 반듯한 형태를 뜻한다.

 

 

 

폰트 사이즈

(1) 사용자 고려

(2) 디바이스 화면으로 보이는 실제 사이즈 고려

 

(3) 용도별 사이즈 

용도	폰트 사이즈
Title 제목	18-32
Body 본문	14-18
Caption, Label 캡션, 레이블	10-12
Minimal size 최소 사이즈	IOS:11 / Android:12 / Web:14

 

 

 

시각적 계층 구조

 

 

 

일관된 폰트 스타일

 

 

 

여백과 정렬

 

커닝(Kerning)이란?

• 글자 모양에 따라 간격을 조절한다는 뜻이에요. 글자의 간격을 시각적으로 균형 있게 조절한다는 뜻이다.
• 자간이랑 같은 거 아닌가요?라고 생각하실 수 있지만 자간은 모든 글자에 동일한 수치값을 적용하는 것이고, 커닝은 글자 모양에 따라 수치값을 다르게 적용하여 시각적으로 보정하는 것이다.

 

 

 

브랜드 아이덴티티

(1) 현대카드

 

(2) 배달의 민족

 

실습 2

목록 화면 리디자인

 

 

리디자인하기 전과 후

 

아이콘

아이콘은 복잡한 정보를 직관적이고 간결하게 표현하여 사용자의 상호작용을 돕는다.

 

 

일관된 아이콘

아이콘 스타일

 

Stroke 두께

 

Corner radius(곡률)

 

일관된 스타일

 

 

 

아이콘 시각 보정

 

 

 

 

아이콘 단순화

 

 

 

레이아웃과 키라인

(1) 아이콘 레이아웃

 

1. 트림 영역

• 일반적으로 24x24 사이즈를 사용하며, 아이콘 실제 사이즈를 나타낸다.
• 아이콘 형태는 트림 영역 밖으로 확장되지 않도록 주의해야 한다.

2. 라이브영역

• 패딩 영역을 제외한 실질적 작업 영역이다.
• 24x24 기준으로 20x20 사이즈로 사용한다.

3. 패딩

• 트림 영역 안쪽으로 상하좌우 2만큼의 영역을 나타낸다.
• 아이콘 리사이징 시 이미지가 잘려보이지 않게 하기 위해 2만큼의 여유를 두고 작업한다.

 

(2) 아이콘 형태

 

(3) 아이콘 키 라인

 

 

 

배율 설정

배수 설정하기

 

Scale 적용하기

 

 

 

숙제 1

Figma로 일관된 아이콘 세트 만들기

 

 

 

숙제 2

컬러, 타이포그래피, 아이콘을 활용하여 다이얼로그 UI 디자인하기