타이포그래피에 대하여 _ Class Review

글 개요

오즈코딩스쿨의 프로덕트 디자이너 부트캠프를 수강하면서, 배운 내용을 남기고자 블로그 글을 작성해보고자 한다.

첫날은 OT였기 때문에, 오늘부터 수업과 나의 과제 수행 내용을 담은 리뷰를 적어보려 한다.

1일차에는 OT와 함께 가볍게 프로덕트 디자이너에 대해 알아보는 시간을 가졌다. 2일차에는 타이포그래피에 대한 이론들을 배우면서 행간, 자간, 폰트, 그리고 색 배합의 정의와 실무적인 활용에 대해 이론을 2시간 정도 배운 뒤, 포스터 제작을 통해 배운 이론들을 직접 적용해보는 시간을 가졌다.

 

 

1. 타이포그라피 7가지 공식

폰트의 종류

• 산세리프(San Serif) / 고딕체 : IT 서비스에서 많이 쓰이는 것으로 장식이 없는 깔끔한 폰트
• 세리프(Serif) / 명조체 : 글자 끝에 장식이 있는 폰트 (Times new roman, Georgia), 고급스러움을 표방하는 브랜드에서 부분적으로 사용

 

 1 — 최소한으로 폰트를 사용하자.

요소마다 다른 폰트 사용을 할 경우, 공간이 비좁게 느껴지며 시각적으로 불안정하다.
폰트 두께로 전달하려는 내용을 잘 보여줄 수 있기 때문에, 서체 변경 대신 Font-Family를 사용하자.

 

2 — 실무에서 행간은 주로 1.5 ~ 1.75x로 사용한다.

출저: 웹 콘텐츠 접근성 가이드 *WCAG 2.1
단, 필기체 폰트나 꾸밈 요소가 많은 폰트는 고딕체와 달리 폰트에 따른 편차가 존재함으로 디자인의 눈을 기르는 것도 중요하다.

 

3 — 실무에서 자간은 주로 -1/-2%로 사용한다.

일반적으로 폰트가 클수록 자간을 좁히고, 작을수록 자간을 넓힌다.

-2%로 통일해서 많이 사용하기도 한다. (최대 -5%까지도)
한글은 받침이 있어 영어보다 글자가 빽빽하게 보이는 경우가 있기 때문에 자간을 좁히며,

영문은 자간 조정이 필요 없는 경우도 있다.

 

참고: Google material design guide

구글의 메테리얼 디자인과, 앱 스토어의 디자인 가이드라인 중에서 맞다고 생각하는 것을 선택하면 되는 것 같다. 아무래도 더 디자인 규격에 유한 것이 구글이라는 점이 가장 큰 장점이지만!

 

4 — 한 줄에 적당한 글자수는 20~40자, 긴 줄은 60자가 이상적이다.

한글 본문 짧은 줄은 20~40자, 긴글은 60자를 넘지 않는 것이 좋다.

영어 본문 텍스트의 이상적인 한 줄 글자수는 40~60자, 짧은 영어 텍스트의 경우 20~40자이다.

단, 모바일 화면에서는 가로폭이 좁은 편이기 때문에 폰트 크기 / 줄간 단어 넘김으로 조절을 하며, 웹 화면은 가로폭이 매우 크기 때문에 눈으로 확인하면서 작업하는 게 중요하다.

 

참고하기 좋은 사이트: 토스의 메인 홈 / f12로 폰트 사이즈 확인하기 / figma의 유료 플러그인 html to design

 

5 — 배경색과 글자색은 대비가 충분해야 정보를 구분하기 쉽다.

W3C에서는 4.5:1의 명암비를 권장한다. 글자는 최소 4.5, 큰 글자는 3 이상의 명암비를 가져야 한다.
명암비 확인하기: https://app.contrast-finder.org/?lang=ko

 

6 — 두께, 색상, 간격으로 계층 구조를 만든다.

계층구조 — 제목, 부제목, 본문, 인용문 … (material design guide 확인)
계층구조는 최대 3단계에서 4단계를 넣는 게 좋다.

 

7 — 브랜드의 성격에 맞는 폰트를 선택한다.

10대가 타겟인 제품/서비스에 명조나 선이 곧은 폰트로 화면을 구성하면 고루해보일 수 있다. 반면, 엄숙한 디자인과 신뢰도가 필요한 서비스에 통통튀는 서체를 제공하는 것도 지양해야 한다.

 

웹 폰트의 정의 / OTF , TTF의 특징과 차이

웹폰트(Web Font)란, 사용자의 기기에 설치한 여부와 관계없이 웹에서 동일한 글꼴을 보여주기 위해 서버에서 불러와 사용하는 폰트이다. 실무에서는 모든 사용자에게 동일한 타이포 경험을 제공하고, 브랜드 톤과 가독성을 일관성 있게 유지하며 / 디자인 시안과 실제 화면의 차이를 최소화하기 위해서 사용한다.

 

++) TTF (True Type Font)

대부분의 OS와 환경에서 문제없이 사용 가능하며, 문서 작업에 많이 쓰인다.
로딩 속도가 빠르며 용량이 적다. 

 

++) OTF (Open Type Font)

디자인 표현력이 높은 폰트 포맷으로, 디자인 작업과 브랜딩 등의 그래픽 디자인에 쓰인다.
파일 용량이 크지만, 고급 타이포그라피나 곡선 등의 정교함이 높다.

 

++) WOFF (Web Open Font Format)

웹에서 빠르게 보여주기 위해 만든 전용 폰트 포맷으로, 용량이 가장 가볍고 로딩 속도가 빠르다.
WOFF2 처럼 기본으로 배포하는 형태도 있다.

 

그렇다면 웹을 위한 작업에서는 WOFF이 지원되지 않는다면 일반적으로 TTF를 쓰는 게 로딩 및 최적화에 도움이 될 것 같다.

 

---

 

영문폰트 사이트

Google Fonts — 웹폰트 (woff2 지원) 최적화. 상업 사용 가능 폰트. 가장 많이 사용된다.

https://fonts.google.com/

Da Font — 장식 디스플레이용 서체 다수. 상업 사용 제한이 많아 라이선스 개별 확인 필수.

https://www.dafont.com/

 

 

한글폰트 사이트

눈누 — 상업 사용 가능한 무료 폰트 모음 사이트. 실무 활용도가 가장 높음.
https://noonnu.cc/

산돌구름 — 산돌 서체 제공 플랫폼. 브랜드용 / 전문용 서체 다수. 유무료 폰트를 포함하며 구독 서비스 운용
https://www.sandollcloud.com/

네이버 한글한글 아름답게 — 상업 사용 가능한 네이버 제작 무료 한글 폰트. 나눔스퀘어 / 마루부리 등
https://hangeul.naver.com/

공유마당 — 공공저작물 무료 폰트 제공. 라이선스 조건 확인 필수
https://gongu.copyright.or.kr/gongu/main/main.do

 

 

+) 국문 서체 추천

Pretendard — 가장 범용적으로 많이 쓰인다. 본문 다수.

IBM Plex Sans — 휴머니즘과 기술 발전. 꾸밈 요소 있음.

나눔스퀘어 Neo — 안정적인 글줄과 직선적인 형태. 꾸밈 요소 있음.

G마켓 산스 — G마켓 브랜드 이미지. 꾸밈 요소 많음.

 

 

+) 영문 서체 추천

Montserrat(몬세라트) - 위아래로 눌린듯한 느낌이라 모던한 서체, 헤드라인 용으로 다수, 9단계의 Variation

Lato(라토) — 깔끔한 고딕계열, 본문 사용, 단정한 인상

Open Sans(오픈산스) — 가독성이 좋으며, 모바일 화면의 본문이나 캡션 사용, 안정성이 높음.

Poppins — 원 형태 기반의 서체, 독특한 인상 (순수하고 사랑스러운 인상), 헤드라인 용 다수\

 

 

폰트에 대한 개인적인 생각
예전에 AIESEC에서 활동을 했을 당시 (국제기구에서 만든 단체의 일환으로 대학 동아리 형태로 한국에는 존재) , 영문 글시체를 Lato로 고정하여 모든 결과물을 만들었던 기억이 난다.
한국어 폰트는 전공 결과물을 했을 때에도 Pretendard를 거의 무조건적으로 채택했었는데, 이제는 폰트에 대한 다양성이 조금씩 올라오고 있는 것 같다.

 

 

---

 

2. 컬러, 브랜드와 시스템의 언어

가장 먼저 눈에 들어오는 요소가 컬러이다.

 

명도는 사용자가 받는 인상에 직접적인 인상을 준다.

— 높을 때: 가벼운, 부드러운, 깨끗한 … 카드뉴스 / sns 콘텐츠
— 낮을 때: 무거운, 진중한, 강한 … 고급 브랜드 / 금융 서비스

 

채도

— 높을 때: CTA 버튼, 알림 경고 상태(시스템 컬러), 사용자의 action을 이끌어내는 버튼
— 낮을 때: 배경, 비활성 상태

 

색 트렌트, 매년 대표컬러를 발표하는 PANTONE

— 올해의 대표 컬러는 Cloud Dancer
— 오프라인 제작물에서도 많이 활용한다.

 

 

브랜드와 색의 활용 

넷플릭스 유튜브 핀터레스트	카카오 빽다방 컴포즈	네이버 시리즈 런드리고
빨간색	노란색	초록색
강하고 활기찬 느낌 주목도가 높으며, 즉각적인 행동 유발 엔터테인먼트/플랫폼/미디어	밝고 긍정적인 느낌 친근함, 가벼우며, 진입장벽 낮춤 일상/커뮤니케이션/F&B 브랜드	자연스럽고 건강한 느낌 안정감, 건강함 구독/라이프스타일/웰니스 서비스

 

 

토스 신한은행 기업은행	컬리 퀸잇 숨고	애플 나이키 아디다스
파란색	보라색	검은색
신뢰할 수 있고 차분한 느낌 신뢰, 전문성, 합리성 IT/금융/플랫폼	고급스럽고 감성적인 느낌 차별화, 창의성, 프리미엄 콘텐츠/문화/크리에이티브 서비스	급스럽고 강한 느낌 권위, 절체, 프리미엄 패션, 스초프, 하이엔드 브랜드

 

색 배합

보색 배합

— 주목성을 끌어올려야 할 때, 강렬한 대비
— 잘못 쓸 때 촌스러워 보일 때 있으므로 포인트 컬러나 명채도 구분으로 사용하기
— 눈에 피로도 유발 (서비스 사용 시 유의)

 

유사색 배합

— 색상환에서 인접한 2~3색으로 조화롭고 안정적이며 자연스럽다
— 배너 / 배경톤

 

삼각색 배합

— 색사환에서 120도 간격의 3색, 균형감 + 활기 / 다채로운 인상
— 포스터, 캠페인 디자인

 

색의 활용

 

색으로 유도하기

 

시스템컬러 (System - Color)

— 에러 색상 (Red)
— 성공 색상 (Green)
— 정보 색상 (Blue)

 

핀터레스트에서 이미지 레퍼런스를 찾아 컬러 테마 미 그라디언트 추출을 진행할 수 있다.

어도비 컬러로 컬러 추출

3. 시각적 위계를 만드는 4가지 방법

조형 (점 선 면)

UI에서는 면을 사용해 영역과 그룹을 형성한다. (ex. 카드 UI)

 

1 — 크기를 이용한 강조

요소 간 크기 차이가 크면 시선에 우선순위가 생긴다.
헤드라인 ↔ 본문 / CTA 버튼 ↔ 보조 버튼

 

2 — 색을 이용한 강조

사람 눈이 가장 먼저 잡아내는 것이 색 대비 (크기보다 빠르게 인식)
회원가입, 로그인, 주요 CTA 버튼에 색을 사용한다.
구분은 필요하지만 강조가 목적이 아닐 때는 색 대비를 줄인다. (대비가 너무 크면 기능 차이가 과도하게 느껴질 수 있다)

 

3 — 공간감을 이용한 강조

원근감은 요소 간의 거리와 크기 차이를 통해 어떤 요소가 사용장게 더 가까운지 인식하게 만든다.
그림자 효과로 공간감을 주면서, 요소와 요소 사이 / 배경 사이에 공간감을 준다.
FAB(Floating Action Button)이나, 카드 UI처럼 눌러야 하거나 강조가 필요한 요소에 주로 사용된다.

 

4 — 형태를 이용한 강조

시각적 자극이 높아지는 조형 : 선 → 면 → 그림자 → 스큐어 모픽
스큐어 모픽) 실제 사물처럼 입체감을 주는 방식

 

참고) 아이폰이 디자인 트렌드를 선두하는데, 지금은 글라스 모피즘이 또 대세이다.

디자이너들이 주로 아이폰을 쓰는 이유는 iOS의 디자인 트렌드를 따라하는 곳이 대체로 많기 때문이다.

 

 

 

후기 

초기 과제	수정본

 

포스터에 대한 조형적인 고민은 가급적 덜어내고 이론들을 복기해보라고 하셨는데 디자인 욕심이 있어서인지 쉽게 되지는 않았다. 비록 자랑스러운 결과물은 아니지만 열심히 만든 만큼, 앞으로의 디자인 감각을 기르는 데에 조금이나마 보탬이 되었으면 하는 마음이다. 이전에 내가 디자인 학원을 다니면서 배웠던 내용이 새록새록 기억나기도 하고, 교육 시간이 길다보니 조금 더 기초적인 내용부터 차근차근 복습해나가는 것도 괜찮았다. 오늘의 내용들은 내가 알고 있던 것과, 오늘 배운 교육들을 종합해 핵심을 추린 내용이다.