디자인 시스템 : 타이포그래피

타이포그래피를 만들 때 고민해야 하는 것들

Apr 7. 2025

pretendard 위주로 알아보는

타이포그래피 (Typography)란?

타이포그래피(Typography)는 정보를 효과적으로 전달하고 일관된 경험을 제공하는 핵심 요소입니다. 타이포그래피의 구성 요소는 ① 폰트 패밀리, ② 스타일, ③ 굵기, ④ 크기, ⑤ 행간, ⑥ 자간으로 나눌 수 있습니다. 이 요소들을 적절히 조합하면 텍스트의 가독성을 높이고, 위계를 명확히 하며, 사용자가 빠르게 정보를 인식하도록 도울 수 있습니다.

타이포그래피는 왜 중요할까?

타이포그래피를 잘 다루면 디자인의 완성도가 급격히 올라갑니다.

반대로, 타이포그래피가 어색하면 디자인이 투박하고 정리가 안 된 느낌을 줍니다.

실제 사례를 통해 타이포그래피의 차이가 디자인에 어떤 영향을 주는지 살펴보겠습니다.

모바일에서 18px bold라니.. 보기 쉬워졌습니다.

타이포그래피의 수준에 따라 사용자 경험이 달라집니다. 예를 들어, 반복되는 피드에서 타이틀을 Bold체로 설정하면 시각적 피로도가 높아집니다. 특히 모바일에서는 짧은 시간 내에 많은 정보를 소비해야 하기 때문에, 가독성이 더 중요한 요소가 됩니다. 글을 읽어야하는 커뮤니티, 뉴스와 같은 가독성이 중요한 플랫폼들을 돌아보세요. bold체를 남용하지 않습니다. 짧은 제목, 키워드, 숫자에 씁니다.

after 단계에서 now단계로 지나며 폰트의 굵기를 줄이고 복잡한 이미지를 빼서 간결함을 넣었습니다. 그래도 복잡하면 폰트 굵기를 medium사이즈로 쓰기도 합니다. 이제 좀 정돈돼 보입니다.

정보성 글 중 뉴스는 세부내용까지 노출시키지 않습니다. 제목이 중요하죠. 제목에 어그로를 끕니다. 그래서 뉴스 프로필 이미지를 제거하고, 바디카피를 제거하고 제목만 노출해도 됩니다. 빠르게 정보를 탐색하는데 바디 텍스트는 방해됩니다. 복잡함에서 간결함으로 바뀌었습니다. 타이포그래피는 위계질서와 정리는 기본입니다. 그래서 중요합니다.

차이를 보면 쉽게 알 수 있습니다. 폰트의 계층과 위계질서를 잘 세우면 유저는 훑어보기 쉬워집니다. 시각적 피로감이 없습니다. 군더더기가 없습니다. 그렇다면 나쁜 것과 좋은 것에는 어떤 차이점이 있는 걸까요?

좋은 타이포그래피는

✔ 위계질서가 명확하며 단순합니다.

✔ 스타일은 적게 사용합니다.

✔ 당연하게도 위계질서마다 행간과 자간이 다릅니다.

타이포그래피 (Typography)의 구성

타이포그래피는 어떻게 구성됐을까요? 종류가 많습니다. 여섯 가지만 기억하면 됩니다.

폰트의 위계질서를 나누는 큰 줄기는 굵기입니다. 보통 스타일가이드에 등록된 H1은 bold를 쓰고 body01는 regular를 씁니다. title01은 semibold를 쓰거나 medium을 씁니다. 그래서 폰트의 위계질서를 알려면 폰트의 굵기별로 어떻게 쓰고 있는지 알아야 합니다.

그래야 bold 체를 타이틀에 쓰지 않고 목적에 맞게 heading에 쓸 겁니다. 또는 bold 체는 가장 강조되어야할 디스플레이 영역에 쓰거나 숫자에 쓸겁니다. 폰트의 굵기마다 각자의 자리가 있습니다. 각자의 자리에 맞게 배치해 주어야 자연스럽고 투박하지 않습니다. 그럼 폰트의 굵기를 위주로 위계질서를 좀 더 파봅시다.

알아두셔야 할 건 회사마다 다릅니다. heading을 regular로 쓰는 곳도 있습니다. 글쓰기 플랫폼 브런치 같은 경우에는 간결하고 감성적인 분위기를 연출하고자 합니다. 그래서 bold 체는 그들에게 너무 무겁습니다. 브랜드적인 이유로 heading이 꼭 bold체일 필요는 없습니다. 또는 Line은 bold체과 regular 두가지 서체만을 사용합니다.

다만 보편적인 기준에서 예시일 뿐입니다.

Bold 체는 언제 자주 쓸까요?

강한 강조가 필요한 경우에만 사용해야 합니다.
반복되는 긴 텍스트에 Bold를 적용하면 눈의 피로도가 증가하고 가독성이 떨어질 수 있습니다.
따라서 가장 중요한 핵심 정보에만 선택적으로 활용합니다.

✔ 가격, 숫자

이유는 가격과 숫자가 해당 정보에서 가장 중요하기 때문입니다.

✔ 단락을 구분하는 헤드라인 (섹션 제목, 강조할 문구)

이유는 명확한 구분을 위해서 bold 체를 씁니다.

✔ 광고 문구 (배너, 프로모션)

광고 문구의 판독성을 위해 bold 체를 씁니다.

semibold 체는 언제 자주 쓸까요

semibold 체는 주로 콘텐츠 타이틀이나 버튼 UI, 리스트 목록에 씁니다.

타이틀을 mobile에선 semibold를 쓰지만 desktop에서는 medium으로 사용하기도 합니다. 그래서 semibold가 없는 디자인가이드라면 medium을 쓰면 됩니다.

✔ 콘텐츠의 타이틀

bold보단 가볍고 medium보단 무거운 semibold입니다. 주로 모바일에서 타이틀로 많이 활용됩니다. desktop은 medium을 쓸 때도 많습니다. 정답은 없습니다.

✔ UI 라벨 텍스트 (button, badge, tabs)

두 번째 이미지에 있는 (관심 있는)과 같은 배지, CTA 버튼에 사용됩니다. 이런 류의 UI는 텍스트가 작습니다. 작은데 regular 사이즈를 쓰면 정말 안보입니다. 정말 작은 경우는 11~12px로 14px로 쓰는 경우가 많은데 최소 medium이나 semibold를 써야 눈에 보이고 뱃지느낌이나 버튼으로 누르고 싶은 느낌이 물씬 납니다.

medium 체는 언제 자주 쓸까요

콘텐츠 타이틀과 리스트에서 가장 많이 사용되는 기본 폰트입니다. Semibold보다 가벼우면서도 Regular보다 강조된 느낌이 있어, 일반적인 타이틀과 UI에서 자주 활용됩니다.

✔ 콘텐츠의 타이틀

✔ 리스트 항목 (카테고리, 채팅방 제목, 주요 서비스 목록)

✔ UI 라벨 (버튼 텍스트, 키워드, 안내 문구)

네이버 스토어의 경우 폰트가 다르기도 해서 다소 예시가 적절하지 않을 수 있지만 대비를 위해 상품명은 regular를 씁니다. 상품 명보다 가격이 더 중요하기 때문입니다. 본문과 일반적인 리스트 텍스트에 가장 적합한 폰트입니다. 가독성이 높고 피로도가 적어 긴 텍스트나 반복적으로 읽어야 하는 정보에 적합합니다.

✔ 본문 텍스트 (뉴스 기사, 게시글 본문, 상세 설명)

✔ 일반 리스트 목록 (상품명, 메뉴 리스트)

✔ 보조 정보 (날짜, 시간, 부가 정보)

폰트 굵기에 따른 쓰임새를 알았다면,
그럼 이제 폰트의 위계질서를 만들어봅시다.

먼저 다양한 레퍼런스를 참고해서 위계질서를 만들어봅시다. 이미지는 머테리얼디자인과 애플만 첨부하겠습니다. 머테리얼, 애플, Line, G마켓, KRDS

머테리얼 디자인 가이드

애플 디자인 가이드

폰트위계의 종류는 다양합니다.

display : 강조해야 하는 핵심 메시지, PR 문구
heading : 페이지 또는 섹션의 제목 역할, 문서의 계층 구조를 형성
title : 게시글 제목, 리스트 항목, 서비스 명
subtitle : 타이틀의 보조텍스트, 부가설명이 필요한 UI
Body : 본문 및 설명 텍스트, 댓글, 안내문구
label : 버튼 텍스트, 뱃지, 필터 라벨, 입력 필드, 도움말 등
caption&Footnote : 부가정인 정보, 툴팁, 게시글 작성 시간, 안내사항, 인용문
Callout : 캡션과 동일, 요약정보나 안내사항

이름은 정하기 나름입니다. 저는 heading, title, body, label로 선정했습니다.

heading은 bold체로 헤드라인과 display에 들어갈만한 강조된 문구를 쓸 겁니다.

title은 semibold체로 보통의 타이틀에 사용할 겁니다.

body는 regular로 보통 바디카피에 사용합니다.

label은 UI상 semibold, medium을 넣어서 UI상 스타일을 정의합니다.

*subtitle, subheading은 없습니다. 최대한 단순하게 제작했습니다.

✔ 근데 왜 애플은 홀수지?

머테리얼을 보면 2의 배수로 떨어집니다. 그래서 16px 18px로 떨어지죠 하지만 애플은 다릅니다. 15px 17px로 홀수인 경우가 많습니다. 애플은 Retina 디스플레이에 최적화된 가독성을 우선으로 고려합니다. 그래서 폰트 크기를 15px, 17px처럼 홀수 단위로 설정하는 경우가 많습니다. 이는 픽셀 정렬을 고려한 최적화된 방식으로, 가독성을 높이는 데 도움이 됩니다.

✔ 애플의 자간

애플의 자간은 Tracking(트래킹) 값으로 제공되며, em 단위를 사용하여 폰트 크기에 비례하여 조정됩니다.

일반적으로 0.011em ~ 0.019em 범위에서 설정되며, 폰트 크기가 클수록 자간이 좁아집니다.

큰 폰트(Title, Large Title 등) → 자간이 좁거나 없음 (- 또는 0.019em)

중간 크기 폰트(Body, Headline 등) → 보통 수준의 자간 (0.012 ~ 0.015em)

작은 폰트(Caption, Footnote 등) → 더 넓은 자간 (0.011 ~ 0.013em)

✔ 애플의 행간

애플의 행간은 머티리얼 디자인처럼 고정된 비율(125~150%)을 따르지 않고, 개별 최적화된 값을 적용하는 것이 특징입니다. 애플의 행간 비율은 평균적으로 120~150% 범위에서 조정됩니다.

✔ 머테리얼의 자간

머티리얼 디자인(Material Design)은 픽셀(px) 단위의 고정된 자간 값을 사용하며, 스타일별로 명확한 값을 지정합니다. 머티리얼 디자인은 2의 배수로 떨어지는 픽셀 단위(px) 기반 자간 설정을 따르며, 특정 폰트 크기에 맞춰 일정한 자간을 유지합니다.

✔ 머테리얼의 행간

머티리얼 디자인의 행간은 일관된 비율로 설정되며, 폰트 크기 대비 일정한 퍼센트(125~150%)를 적용하는 특징이 있습니다.

해당 특성들을 잘 가미해서 폰트스타일을 정의 내렸습니다.

제가 쓰는 폰트는 프리텐다드입니다. 프리텐다드는 애플의 SF Pro를 기반으로 설계된 한글 폰트입니다. 애플의 가이드를 따를겁니다. 그래서 15px이나 17px과 홀수크기의 폰트 크기를 쓸 겁니다. 행간과 자간은 머테리얼과 프리텐다드의 특성을 고려해 고정값으로 들어갑니다. 앞서 좋은 폰트위계질서는 복잡하지 않고 개수가 많지도 않습니다. 그래서 최대 24개를 넘어가지 않도록 잡았습니다.

티셔츠 사이즈로 정의 내리지 않고 숫자로 한 이유입니다. 타이틀 XXL 보다 01이 더 이해하기 쉽습니다. 숫자가 더 직관적이고 관리하기 편합니다. (초안이며 오타가 있을 수 있습니다. 폰트사이즈 조절중입니다)

정리

다른 서비스들이 폰트 스타일을 어떻게 위계질서를 잡고 있는지 분석했습니다.
이를 통해 폰트의 굵기에 따라 목적에 맞는 폰트를 적용해야 한다는 점을 확인할 수 있었습니다. 폰트 굵기별 레퍼런스를 알아봤습니다.

좋은 폰트 시스템의 특징
① 복잡하지 않고 단순할 것

다양한 위계 중에 네 가지를 뽑았습니다. 기준은 가장 단순하며 필수적인 형태였습니다. heading, title, body, label이었습니다.
② 목적에 맞는 폰트를 사용할 것

이 원칙을 바탕으로, 머테리얼 디자인, 애플, 라인, G마켓, 한국디자인 시스템(KDS) 등 다양한 서비스의 폰트 스타일을 비교 분석했습니다.
그 결과, 행간과 자간은 각 스타일마다 조금씩 다르다는 점을 확인하고 이를 적절히 적용했습니다.

프리텐다드 폰트 적용 방식

프리텐다드는 애플 SF Pro 기반으로 설계되었기 때문에, 16px보다 홀수 크기(15px, 17px 등)가 더 적합한 경우가 많습니다.

폰트 크기는 애플의 시스템을 따르고, 자간과 행간은 머테리얼 디자인과 프리텐다드 공식 문서를 참고하여 적용했습니다.

이러한 원칙을 기반으로 폰트 스타일을 정의하여 일관된 타이포그래피 시스템을 구축했습니다.

폰트 디자인 시스템 적용기와 후일담

시스템을 처음부터 구축하는 건 오히려 쉽습니다. 하지만 기존 폰트가 발목을 잡았습니다. 하하

전체 폰트를 교체하려 했지만, 기존 구조는 의미론적으로 잘 묶여 있지 않았습니다. 그래서 단순한 교체가 아닌, 전면적인 구조 개편이 필요한 상황이었죠. 엄청난 규모의 작업이 예상됐고, 솔직히 말해 머리가 아팠습니다. 디자인 시스템이 중요하다는 건 알지만, 이럴 땐 ‘배보다 배꼽이 더 큰’ 상황이 되기 쉽습니다. 디자인 시스템 없이 구축된 기존 구조가 원망스러웠고, 결국 우리는 타협점을 찾아야 했습니다.

우선, 레거시 폰트의 행간과 자간은 손대지 않기로 했습니다. 이유는 간단합니다. 건드리자마자, 사이트 곳곳에서 사이드 이펙트가 발생했기 때문입니다.

그리고 기존 폰트 체계 중에서 가장 애매했던 건 [subtitle] 스타일이었습니다. 이름은 ‘서브타이틀’이지만, 실제로는 그 역할을 하지 못하고 있었죠. medium 크기의 글자가 애매하게 본문과 버튼 곳곳에 쓰이고 있었고, 결국 의미만 혼란스럽게 만들었습니다.

그래서 [subtitle] 스타일은 없애기로 했습니다. 대신 그 역할은 body-prominent 가 이어받았습니다. 강조된 본문 텍스트로 사용하자는 거죠. 그리고 버튼에 쓰이던 텍스트는 [label] 스타일로 의미부여했습니다. 이렇게 역할을 명확히 나누니, 유지보수도 쉬워지고 스타일 분류도 깔끔해졌습니다.