뭐? 9일이 더 늘어나?

📌
1. 컬러
2. 타이포그래피
3. 아이콘

1. 컬러

정보 강조

정보의 중요도에 따라 채도나 명도를 다르게 적용한다.

- 계층구조

요소의 중요도에 따라 컬러를 다르게 적용하여 계층을 표현할 수 있다.
글자 크기, 굵기 등 타이포그래피 요소를 함께 활용하면 더 효과적

- 강조

채도, 명도를 활용하여 원하는 정보를 강조할 수 있다.
강조 영역은 화면에서 최소한으로 사용해야 더 강조가 된다.

사용자 행동 유도

버튼이나 링크에 컬러를 적용하여 사용자의 행동을 유도한다.

- CTA

강조하고 싶은 요소에 브랜드 컬러를 적용하여 사용자의 행동을 유도한다.

보조 요소에는 비교적 채도가 낮은 그레이 컬러를 사용하여 상대적으로 중요도를 낮춰 표현한다.

- 의미 전달

각각의 색상이 다른 여러가지의 의미들을 갖고 있어 색상을 통해 같은 요소라도 다른 의미를 전달할 수 있다.
(ex. 녹색 - 허용, 출발 / 빨간색 - 도착, 금지)

상태

사용자와 상호작용하며 즉각적인 피드백을 전달한다.

비활성 영역에는 채도가 낮은 색상을 적용하고 활성 영역에는 비교적 채도가 높은 색상을 적용한다.

ex. 텍스트 필드를 클릭했을 때 테두리의 색상이 진해진다. → 사용자가 입력 필드에 입력할 수 있다는 것을 알게 된다.

브랜드 아이덴티티

브랜드의 이미지를 연상시키는 강력한 시각적 전달 요소

브랜드 컬러는 브랜드의 이미지, 가치관, 성향을 담을 수 있는 컬러로 선정한다.

지속적으로 사용자에게 전달하여 브랜드 이미지를 형성해간다.

💡 실습

• 보라색 - 마켓 컬리 : 고급스러운, 세련된 - 식료품 업계에서의 차별화된 프리미엄 서비스
• 짙은 초록색 - 스타벅스 : 고급스러운, 편안한 - 누구나 편하게 쉬어갈 수 있는 고급스러운 카페
• 파란색 - 토스 : 혁신적인, 신뢰있는, 새로운 - 신뢰도가 높고 항상 혁신하는 핀테크

컬러 비율

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

제품이나 서비스의 성격, 컨셉에 따라 적절한 비율을 찾아야한다.

UI 컬러 구성

- Primary Color

주(조)색, 가장 강조해야하는 영역, 사용자의 행동을 유도할 때 사용

브랜드를 대표하는 컬러로 브랜드의 인지도를 향상시키고 각인시키는데 사용

• 브랜드 로고, 앱 아이콘(런쳐 아이콘), 스플래시 (앱을 켜고 가장 처음 보여지는 화면)
• CTA 버튼으로 행동 유도, 로그인, 회원가입 유도
• 중요한 정보 강조 (검색 결과)

- Secondary Color

보조색, 주조색을 보완해주며 조화를 이루는 역할

• 보색
• 유사색
• 브랜드 로고

- Neutral Color

중립 컬러, 보통 텍스트와 배경에 사용

흰색에서 검은색까지 회색의 음영 (경우에따라 10단계로 나눠 사용)

UI 디자인에서 70%를 차지할 만큼 많이 사용

- Semantic Color

시스템 컬러, 현재 시스템의 상태와 상호작용을 사용자에게 알려주는역할

UNESCO 도로 표지판 기준으로 표준화된 컬러를 도입

공공장소, 신호등, 표지판 등에 사용

UI 디자인에서도 동일하게 활용되어 시스템의 상태를 알려준다.

ex.

• 빨간색 - 에러, 오류, 금지, 정지, 위험
• 노란색 - 경고, 주의
• 초록색 - 성공, 안전, 진행
• 파란색 - 정보, 지시

배경과 컬러

색은 상대적인 요소이므로 주변 환경 (배경색)에 영향을 받는다.

다크/라이트 모드에 맞춰 컬러 사용

형태와 컬러

색은 상대적인 요소이므로 형태에 영향을 받는다,

면적에 따라 동일한 컬러라도 다르게 인식된다.

넓은 면적은 가독성이 높고 좁은 면적은 가독성이 낮다 → 면적에 따라 컬러를 다르게 설정

과도한 컬러 사용 피하기

UI 내 사용자가 집중할 수 있도록 불필요한 컬러 사용은 지양한다.

텍스트와 배경 컬러의 대비를 높여 가독성을 높인다.

2. 타이포그래피

사용자의 경험 향상에 중요한 역할

OS별 시스템 폰트

OS별 최적화된 폰트가 다르다.

- 시스템 폰트의 장점

1. 다국어 지원
2. 다양한 사이즈와 굵기 제공
3. 폰트 경량화로 용량이 작다
4. 무료, 상업용 사용 가능

- 웹폰트

웹 페이지에서 사용 가능한 폰트

해당 폰트를 로컬 피씨에 설치하지 않아도 사용 가능

모든 플랫폼과 브라우저에서 일관된 디자인 제공

시스템 폰트와 동일한 장점을 가진다.

ex. 프리텐다드, 슈트 등

Serif 와 Sans - Serif

🖌️ Serif

글자의 끝부분에 돌출된 장식적인 획

- 세리프체

글자 획의 시작이나 끝이 돌출된 형태의 글꼴
책이나 신문 등 인쇄물에 주로 사용

- 산세리프체 (Sans - Serif)

세리프가 없는 즉, 돌출된 획이 없는 형태의 글
웹이나 모바일에서 가독성이 높은 글꼴

폰트 사이즈

모바일 스크린 화면은 사이즈가 작기때문에 사용자의 움직임, 조명과 같은 주변 요소들이 가독성에 영향을 끼칠 수 있다.

사용자의 상황, 환경 등을 고려하여 폰트 사이즈를 설정해야한다.

모든 디자인은 해당 디바이스 화면에서 확인해야한다. (ex. TV, Watch, 태블릿 등)

모바일 환경에서 가독성을 고려하여 10이하의 사이즈는 사용하지 않는다.

🏷️ 레이블 Label

사용자가 UI를 쉽게 이해하고 사용할 수 있도록 돕는 요소
(ex. 입력 필드 헬퍼 메세지, 아이콘 밑에서 내용 설명)

시각적 계층 구조

텍스트의 사이즈, 두께, 컬러, 위치, 여백 등 다양한 요소를 사용하여 시각적 계층 구조를 구성한다.

• 사이즈 : 중요한 정보에 더 큰 텍스트 사용
• 두께 : 헤딩, 제목, 핵심 정보에 굵은 텍스트 사용
• 컬러 : 특정 내용을 강조하기 위해 대비되는 컬러
• 자간과 행간 : 텍스트의 위치와 용도에 맞게 자간과 행간 사용

🪜 명확한 계층 구조

계층 구조를 명확히 구성하여 텍스트의 가독성을 높이고 시선의 흐름을 정의한다.
타이틀 > 서브 타이틀 > 본문

- 타이틀 (제목)

폰트 사이즈, 두께, 컬러를 활용하여 강조
위에서 아래로 시선이 흐르게 하기 위해 서브 타이틀과 본문의 상단에 위치\

- 서브 타이틀 (소제목)

타이틀보다는 작은 사이즈, 본문보다는 큰 사이즈
타이틀과 본문 사이에 위치하므로 위아래 여백을 적절하게 설정하여 계층 구조를 만든다.

- 본문

타이틀, 서브 타이틀 보다 작은 사이즈, 덜 강조되지 않아야한다.

일관된 폰트 스타일

제품과 서비스 내에서 일관된 폰트 스타일을 사용하는 것이 좋다

폰트 종류

• 브랜드 이미지와 의미를 효과적으로 전달할 수 있는 폰트 선택
• 폰트 종류가 적을 수록 일관된 디자인이 가능하고 유지보수가 용이하다.
• 폰트의 사이즈와 두께를 적절히 활용하여 차이를 둔다.

폰트 사이즈

• 가독성을 고려하여 적절하게 크기 설정
• 한 화면에서 폰트 크기의 갯수는 목적에 맞게 최소화

폰트 컬러

• 목적에 맞는 적절한 컬러 사용
• 제품 UI 디자인 가이드 기준과 동일한 폰트 컬러를 적용하여 일관성 유지

여백과 정렬

- 자간 Letter Spacing

글자간의 간격
(꼭 필요한 경우에만 적용)

글자가 커질수록 자간이 멀어져 보이기 때문에 자간을 줄여주는 것이 좋고, 글자가 작아질수록 자간이 좁혀지기 때문에 자간을 늘려주는 것이 좋다.

웹에서는 커닝 작업을 하지 않는다

🅰️ 커닝 (Kerning)

글자 모양에따라 간격을 조절하는 것
글자의 간격을 시각적으로 균형있게 보정하는 것

- 행간 Line Height

글줄간의 간격
줄의 길이에 따라 행간을 적절하게 적용하면 가독성을 높일 수 있다.

용도에 따라 행간도 달라진다.
(타이틀, 서브 타이틀 : 1.2 - 1.5 / 본문 : 1.6 - 2.0)

브랜드 아이덴티티

타이포그래피를 통해서 브랜드 아이덴티티를 확립시킨 브랜드들이 있다.
ex. 현대카드, 배달의 민족

브랜드 고유의 폰트가 잘 만들어졌다 하여도 여기저기 사용하지 않고 제목 등 강조하는 부분에만 사용한다.

3. 아이콘

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

명확한 의미 전달

문화, 나이, 배경 등의 제한 없이 누구에게나 일관된 의미 전달

텍스트가 없이도 쉽게 의미를 전달할 수 있다,

좁은 공간, 짧은 시간 내 의미를 전달할 수 있다.

시각적 매력을 더해 디자인을 더 풍부하게 만들기도 한다.

브랜드의 성격, 이미지, 의미 등을 반영하여 아이콘은 사용자의 기억에 오래 남는다.

일관된 아이콘

- 아이콘 스타일

Outlined, Filled, Colored, Image 등의 다양한 스타일이 있다.

Outlined와 Filled는 주로 사용자의 행동에 피드백을 제공하고 행동을 유도한다.

Image는 높은 주목도를 가진다.

- 두께

얇은 두께의 아이콘은 가볍고 현대적인 느낌을 준다.
두꺼운 두께의 아이콘은 무겁고 신뢰를 준다.

전체 컨셉에 영향을 미치기 때문에 동일한 두께로 디자인해야한다.

두께가 두꺼워질 수록 표현에 제한이 생기기 때문에 세밀한 작업이 필요한 경우 얇은 두께를 사용한다.

- 곡률

모서리의 굴림 정도

곡률이 적을 경우 단단하고 심플한 느낌을 주고 곡률이 높아질 수록 부드럽고 친근한 느낌을 준다.

컨셉에 맞춰 곡률을 정하고 모든 아이콘에 일관되게 사용하는 것이 중요

- 시각 보정

착시현상으로 인해 글자나 도형이 불균형하게 보일 수도 있다.

시각보정을 통해 균형과 정렬을 맞춘다.

- 아이콘 단순화

모바일 스크린은 작기 때문에 아이콘이 디테일하게 표현될수록 무엇을 나타내는지 이해하기가 어렵다.

너무 단순화하여 이해가 어려우면 안 된다.

- 레이아웃과 키라인

• 트림영역 : - 24x24 사이즈의 아이콘 실제 사이즈, 트림 영역 밖으로 나가면 안 됨
• 라이브 영역 : 패딩 영역을 제외한 실질적 작업 영역. 20x20
• 패딩 : 트림 영역 안쪽으로 상하좌우 2만큼의 영역, 리사이징 될 경우 잘려보이지 않기위해 여유를 두는 것

정사각형, 원형, 직사각형(가로로 긴 / 세로로 긴) 의 4가지 형태로 나눌 수 있다.

- 배율 설정

아이콘은 해상도에 따라 리사이징되기 때문에 소수점이 발생하지 않도록 작업하는 것이 좋다.
4,8의 배수를 적용하여 사용

- 스케일 적용

리사이징 할 경우 컨스트레인츠 스케일을 적용해야 사이즈에 맞는 이미지를 추출할 수 있다.