[가이드]디자인 기초--타이포그래피 디자인

타이포그래피 디자인은 서체, 크기, 굵기, 글자 사이와 줄 사이의 간격, 배치를 조정해 읽는 순서와 분위기를 만드는 작업입니다. 글자만으로 작품을 만드는 경우도 있지만 사진이나 아이콘과 함께 쓰는 본문과 버튼 역시 타이포그래피에 포함됩니다. 먼저 독자가 가장 먼저 알아야 할 정보를 정하고, 제목·본문·보조 정보의 차이를 만든 뒤 실제 문장을 넣어 읽어 보세요.

캘리그래피는 글씨를 쓰는 동작과 획의 표현에 초점을 두고, 레터링은 특정 글자나 문구의 형태를 그려 만드는 작업을 뜻합니다. 종이에 만든 결과를 스캔할 수도 있고 디지털 도구에서 직접 작업할 수도 있습니다. 스캔은 제작 과정의 선택지이지 캘리그래피의 정의가 아닙니다. Adobe의 타이포그래피 설명(영문)은 서체 선택과 간격, 텍스트 구성을 다루며, 레터링 안내(영문)는 종이와 디지털 작업을 함께 소개합니다.

Part1: 타이포그래피 표현 방식 5가지

1. 심플 세리프(Simple Serif)

심플 세리프는 글자 끝의 장식인 세리프를 비교적 절제해 쓰는 표현입니다. 웹 제목이나 잡지 레이아웃에서 차분한 인상을 줄 수 있지만, ‘세리프이므로 언제나 읽기 쉽다’고 판단할 수는 없습니다. 같은 서체도 크기와 획 대비, 배경에 따라 읽히는 정도가 달라집니다. 위 예시처럼 큰 영문 제목에서 본 특징을 작은 한글 본문에 그대로 적용하기보다 사용할 문자와 크기를 따로 비교하세요.

2. 핸드레터링 (hand-lettering)

핸드레터링은 시각 효과를 고려해 글자 형태를 직접 만드는 방식입니다. 펜, 붓펜, 물감처럼 다양한 도구로 개성을 표현할 수 있고, 태블릿과 디지털 펜으로도 작업할 수 있습니다. 아래처럼 획과 단어의 형태가 강한 표현은 로고나 짧은 표제에 활용하기 좋습니다. 다만 장문의 설명까지 같은 방식으로 장식하면 읽는 데 부담이 생기므로 정보의 역할에 따라 적용 범위를 나누세요.

3. 윤곽선 글꼴

윤곽선 글꼴은 글자의 내부를 채우기보다 외곽선을 드러내는 표현입니다. 채워진 글자와 함께 배치하면 제목 안에서도 강조의 차이를 만들 수 있습니다. 아래 두 예시에서는 선으로 된 글자와 면으로 된 글자의 대비를 살펴보세요. 작은 크기나 복잡한 배경에서는 선이 약해질 수 있으므로 긴 본문이나 중요한 상태 안내에 그대로 옮기지 않는 편이 좋습니다. 지속될 유행인지 예측하기보다 실제 크기에서 읽히는지를 기준으로 선택하세요.

4. 네오 레트로(Neo Retro)

네오 레트로는 과거의 시각 언어를 오늘의 구성으로 다시 해석하는 표현입니다. 굵고 둥근 글자나 제한된 색상, 장식적 선 등을 활용해 익숙한 분위기를 만들 수 있습니다. 아래 영문 로고에서는 글자와 그림의 균형을 보세요. 이것을 한글 서체의 예라고 볼 수는 없으므로, 한글에 적용할 때는 받침과 자소가 복잡한 글자에서도 형태가 구분되는지 따로 살펴봐야 합니다.

5. 브루탈리즘 디자인

브루탈리즘을 연상시키는 타이포그래피는 큰 글자, 강한 대비, 거친 배치 등으로 구조를 드러내기도 합니다. 아래 건축 사진은 덩어리와 반복, 재료의 질감을 살펴보는 참고 자료이며 글꼴 자체의 사례는 아닙니다. 포스터에서 이런 특성을 실험하더라도 예약 정보나 오류 문구의 읽는 순서까지 일부러 불편하게 만들 필요는 없습니다. 표현의 강도와 정보 전달을 분리해 판단하세요.

Part2: 타이포그래피를 살펴볼 사이트 4곳

1. Pixso 리소스 커뮤니티

Pixso 리소스 커뮤니티에서는 화면과 컴포넌트의 구성을 살펴보며 글자가 실제 디자인 안에 놓이는 방식을 참고할 수 있습니다. 폰트 이름만 고르기보다 제목과 본문이 어떤 크기와 간격으로 구분되는지 살펴보세요. 아래 화면은 리소스 목록의 예이며, 특정 자료가 모든 언어의 글꼴이나 모든 사용 조건을 제공한다는 뜻은 아닙니다.

Pixso 체험해보기  

Pixso에서는 텍스트 스타일과 컴포넌트를 재사용하고 같은 캔버스에서 팀과 수정 사항을 논의할 수 있습니다. 마음에 드는 화면 구성을 발견했다면 자신의 한글 문장으로 바꿔 적용해 보세요. 영문 제목만 있을 때 균형 잡힌 카드가 긴 한글 제목에서도 같은 결과를 내는지는 직접 비교해야 합니다.

2. 타이포그래피카(Typographica)

타이포그래피카(Typographica, 영문)는 서체와 타이포그래피 관련 서적을 다루는 리뷰 사이트입니다. 서체가 어떤 특징을 갖고 있는지, 어떤 맥락에서 평가되는지 읽을 때 도움이 됩니다. 현재 유행을 심사하는 순위표처럼 보기보다 글자 형태를 설명하는 어휘와 관점을 얻는 데 활용하세요.

3. 폰트 인 유스(Fonts In Use)

Fonts In Use(영문)는 실제 타이포그래피 사용 사례를 서체, 형식, 분야, 시대별로 정리한 공개 아카이브입니다. 포스터, 책, 웹 화면 등에서 제목과 본문이 어떻게 조합되는지 비교할 수 있습니다. 사례를 보고 서체를 알아보는 용도와 이미지나 폰트 파일을 내려받아 사용하는 일은 다르므로, 채택할 서체의 배포처와 사용 조건은 따로 확인하세요.

4. 타이포그래픽 포스터(Typographic Posters)

typo/graphic posters(영문)는 타이포그래피와 그래픽 포스터를 모은 참고 플랫폼입니다. 한 장의 면 안에서 글자, 여백, 이미지가 어떻게 관계를 맺는지 살펴보기에 좋습니다. 포스터의 강한 제목 구성을 UI에 응용할 때는 축소된 카드와 버튼에서도 같은 표현이 읽히는지 다시 판단하세요. 작품에 보이는 문자가 곧바로 내려받을 수 있는 한글 폰트라는 뜻은 아닙니다.

한글 UI에서는 긴 제목과 줄바꿈을 함께 설계하세요

문화센터 모바일 페이지에 ‘가족과 함께하는 주말 도자기 워크숍’ 카드를 만든다고 해 보겠습니다. 제목 아래에는 ‘토요일 오전 10시 · 90분’, 설명에는 ‘처음 만드는 분도 참여할 수 있습니다. 완성한 작품은 건조 후 수령합니다.’, 버튼에는 ‘참가 신청’을 넣습니다. 이 카드에서 먼저 찾아야 하는 것은 수업 이름과 일정이고, 장식적 서체는 그 흐름을 돕는 범위에서 쓰면 됩니다.

서체를 바꾸기 전에 정보의 차이를 정하기

첫 비교안에서는 제목을 24px, 줄 높이를 34px로 두고 본문은 16px, 줄 높이는 26px로 시작해 보세요. 이는 이 카드에서 비교할 출발값이지 모든 한글 UI의 정답은 아닙니다. 제목과 본문의 굵기, 여백까지 함께 조정해 어떤 문장이 먼저 보이는지 살펴봅니다. 가격이나 일정이 보조 정보라는 이유로 읽기 어려울 만큼 작거나 흐리게 되지 않도록 합니다.

같은 크기 표시라도 서체마다 글자가 차지하는 폭과 시각적 크기가 다릅니다. 후보마다 실제 제목을 넣고 받침이 있는 글자, 숫자 ‘10’, 가운데점 ‘·’와 영문을 함께 보세요. 한글이 없는 서체를 선택해 일부 글자만 대체 글꼴로 표시되면 굵기와 줄 높이도 달라질 수 있습니다. 영문 표본만 보고 선택하지 않는 이유입니다.

어절 단위와 글자 단위 줄바꿈의 차이 읽기

W3C 한국어 텍스트 레이아웃 요구사항은 한글 줄바꿈에서 글자 단위와 어절 단위를 구분합니다. 어절을 함께 두면 문장을 읽는 흐름이 자연스러울 수 있지만, 좁은 영역에서는 긴 어절 때문에 빈 공간이 커지거나 넘칠 수 있습니다. 글자 단위로 나누면 폭을 채우기 쉽지만 중요한 표현이 어색하게 갈라질 수 있습니다. 문구 길이와 사용 영역에 맞춰 결정하세요.

화면 폭 360px에서 좌우 여백을 각각 20px로 두면 카드가 쓸 수 있는 폭은 320px입니다. 화면이 320px로 줄면 같은 여백에서 280px가 됩니다. 두 폭에 같은 제목을 넣고 줄 수, 마지막 줄의 길이, 일정과 버튼의 위치를 비교하세요. 한 화면에 맞춰 강제로 넣은 줄바꿈은 다른 폭에서도 유지되어 불필요한 공백을 만들 수 있습니다.

이 카드에서는 제목이 길어지면 카드 높이가 늘어나도록 하고, 수업을 구분하는 단어를 임의로 말줄임하지 않습니다. 모든 카드를 같은 높이로 만들어야 한다면 표시할 제목 길이와 전체 제목을 확인하는 경로부터 정해야 합니다. 글자를 계속 줄여 틀에 맞추면 카드 높이는 같아져도 읽기 어려워질 수 있습니다.

줄바꿈은 화면 폭뿐 아니라 글꼴 로딩과 사용자 설정의 영향도 받습니다. WCAG 리플로 설명(영문)은 세로로 읽는 콘텐츠가 320 CSS px에 해당하는 폭에서 정보나 기능을 잃지 않고 재배치되어야 함을 설명하며, 의미상 이차원 배치가 필요한 부분의 예외도 구분합니다. 작은 프레임 하나를 만들었다고 웹페이지의 해당 기준을 검증한 것은 아닙니다. 실제 구현의 확대와 반응형 동작도 확인해야 합니다.

WCAG 텍스트 간격 설명(영문)은 사용자가 줄·문단·글자·단어 간격을 바꾸었을 때 내용과 기능이 사라지지 않아야 한다고 설명합니다. 권장 간격을 모든 디자인의 기본값으로 강제한다는 뜻은 아닙니다. 워크숍 카드에서는 간격을 늘렸을 때 수령 안내가 잘리거나 버튼 문구와 겹치지 않는지가 구체적인 확인 대상입니다.

Pixso에서 같은 한글 문장으로 두 폭을 비교하기

Pixso에서 360px와 320px 폭의 프레임을 만들고 동일한 워크숍 카드를 놓습니다. 제목·일정·본문·버튼의 텍스트 스타일을 나누어 재사용하고, 카드에는 Auto Layout을 적용해 제목이 한 줄 더 늘어나도 아래 정보와의 간격이 이어지게 합니다. 후보 서체를 비교할 때는 문장과 카드 폭을 같게 유지해야 무엇 때문에 차이가 생겼는지 알 수 있습니다.

Pixso의 텍스트 스타일과 오토 레이아웃을 사용해 긴 제목, 짧은 제목, 두 줄 설명을 각각 넣어 보세요. ‘가족과 함께하는 주말 도자기 워크숍’과 ‘주말 도자기’의 차이를 보고, 제목이 늘어난 카드 옆에는 ‘일정 아래 여백 유지’처럼 구체적인 코멘트를 남깁니다. 캔버스에서 합의한 줄바꿈 의도와 크기 조절 규칙은 구현 담당자가 확인할 수 있도록 기록하세요.

마지막으로 실제 브라우저나 앱에서 선택한 글꼴이 로드된 상태와 대체 글꼴 상태, 텍스트 확대와 간격 변경을 확인합니다. Pixso 프레임은 레이아웃 의도를 전달하지만 브라우저의 한글 줄바꿈 규칙을 자동으로 검증하지는 않습니다. 문제가 생기면 특정 화면에 강제 줄바꿈을 더하는 것보다 카드 폭, 텍스트 영역의 높이와 줄바꿈 규칙 중 원인을 찾아 수정하세요.

Part3: 읽히는 표현으로 마무리하기

웹과 인쇄물 모두에서 글자는 정보를 전달하는 중요한 수단입니다. 다섯 가지 표현 방식과 네 곳의 참고 사이트에서 얻은 아이디어를 실제 문장에 적용해 보세요. 한글 UI에서는 서체의 개성과 함께 긴 제목의 줄바꿈, 일정의 구분, 버튼의 읽기 쉬움을 판단해야 합니다. 유행을 따라 같은 서체를 고르는 것보다 독자가 필요한 내용을 찾고 행동할 수 있게 만드는 것이 선택의 기준입니다.