디자인에서의 타이포그래피

Figma

모든 브랜드 전문가가 알다시피 첫인상은 중요합니다. 콘텐츠가 명확하고 매력적이지 않다면 대부분의 사용자는 웹 페이지를 빠르게 떠납니다. 여러분의 크리에이티브 팀은 브랜드 메시지를 매력적이고 이해하기 쉬운 언어로 전달하기 위해 노력하고 있습니다. 이제 그들은 더 나은 가독성과 브랜드 참여를 위해 여러분이 좋은 타이포그래피와 디자인 결정을 내리기를 기대하고 있습니다.

자세히 알아보려면 계속 읽어보세요.

타이포그래피란 무엇이며, 왜 중요한가
가장 인기 있는 5가지 서체 종류와 타이포그래피의 6가지 핵심 요소
Figma로 서체와 글꼴을 찾고 탐색하는 방법

타이포그래피란?

디자인에서 타이포그래피는 글자로 표현되는 내용을 전달하기 위해 글꼴과 서체 시스템을 만들거나 선택하는 것을 포함합니다. 이 창의적인 예술 형식은 브랜드의 개성을 표현하기 위해 시각적으로 매력적인 글자를 사용하고 글자를 배치하여 강한 감정을 불러일으킬 수 있습니다. 잘 만들어진 타이포그래피는 쉬운 판독성과 가독성으로 명확한 의사소통을 개선할 수 있습니다.

타이포그래피가 중요한 이유는?

타이포그래피는 웹사이트, 앱, 이메일, eBook 등 고품질의 콘텐츠를 만드는 데 중요한 역할을 합니다. 좋은 타이포그래피는 다음과 같은 도움을 줍니다.

사용자를 끌어들입니다. 읽기 시작하기 전에 시선을 사로잡는 서체와 타이포그래피 요소로 사용자를 끌어들입니다.
시각적 계층 구조를 설정합니다. 일관된 글꼴 크기, 굵기, serif 및/또는 sans serif 글꼴, 글꼴 조합, 서체 결합으로 시각적 계층 구조를 설정하여 사용자를 안내하고 가독성을 높입니다.
브랜드 인지도를 구축합니다. 일관되게 사용하면, 좋은 타이포그래피는 브랜드 콘텐츠에 사용된 서체와 글꼴 스타일을 통해 사용자가 브랜드를 식별하도록 돕습니다.
콘텐츠 목표를 지원합니다. 일관된 글자 간격, 행 길이, 대소문자 및 기타 타이포그래피 요소는 판독성을 높여주며, 그래픽 디자인 요소로 사용된 글꼴은 어조와 의미를 더욱 강조합니다.

타이포그래피의 간략한 역사

Johannes Gutenberg는 1400년대에 최초의 금속 활자 인쇄기를 발명하여 유럽 서체 혁명을 촉발하는 데 기여했습니다. Gutenberg는 필사본과 종교 서적의 긴 텍스트 줄을 조판하기 위해 고전적인 스타일의 블랙레터 캘리그래피 글자 형태(일명 고딕)를 사용했습니다. 이탈리아의 인쇄업자들은 곧 더 단순하고 컴팩트한 서체를 만들었는데, 원래는 Antiqua라고 불렸으나 지금은 Roman으로 더 잘 알려져 있습니다. 그 후 유럽의 인쇄업자들은 이탤릭체를 출시하여 페이지당 더 많은 단어를 조판했습니다.

1700년대 후반과 1800년대 초반으로 넘어가면, 최초의 현대 serif 서체가 시장에 등장했습니다. sans serif 서체가 그 뒤를 이어 20세기까지 유럽 인쇄계를 지배했습니다. 그때부터 Times New Roman, Futura, Helvetica, Arial과 같이 더 깔끔하고 가독성 높은 서체들이 주류를 차지하게 되었습니다. 오늘날 전 세계의 그래픽 및 웹 디자이너들은 방대한 서체와 글꼴 라이브러리에 접근할 수 있습니다.

가장 인기 있는 5가지 서체

현대 디자이너들은 일반적으로 serif, sans serif, 스크립트, 모노스페이스, 디스플레이 등 5가지 인기 있는 서체 종류 중에서 선택합니다. 각 서체에는 해당 서체의 다양한 스타일을 포괄하는 글꼴 패밀리가 포함되어 있습니다. 예를 들어, Helvetica는 서체(typeface)이고, Helvetica Light와 Helvetica Regular는 글꼴입니다.

세리프 글꼴: 이 격식 있고 전통적인 서체는 글자 형태의 상단과 하단 끝에서 뻗어 나온 짧은 선이나 획을 가지고 있습니다. New York Times, Sony, J.P. Morgan과 기성 브랜드들은 세리프 서체를 선택합니다. 예시로는 Times New Roman과 Garamond가 있습니다.
sans serif 글꼴: 이 간단하고 현대적인 서체는 serif 서체에 포함된 장식적인 요소를 포함하지 않습니다. 젊은 감각의 브랜드와 테크 스타트업 사이에서 인기 있는 선택입니다(Target, Airbnb, Doordash 등을 떠올려 보세요). sans serif 서체의 예로는 Helvetica, Arial, Calibri가 있습니다.
스크립트 글꼴: 이 유려한 필기체 서체는 우아한 캘리그래피부터 장난기 넘치는 손글씨 스타일까지 다양합니다. 본문 텍스트에는 적합하지 않으며, 스크립트 서체는 인용문, 서명 및 짧은 헤더에 가장 잘 어울립니다. 예로는 Snell Roundhand, Pacifico, Scriptina가 있습니다.
고정폭 글꼴: 이 레트로 타자기 스타일의 서체는 고정 폭 글자와 간격을 표시하여 각 단어의 문자가 같은 너비를 차지하도록 합니다. 소스 코드에서 가독성을 높이기 위해 사용되며, 고정폭 서체는 수많은 웹사이트와 그래픽 디자인에서도 나타납니다. 예로는 Courier, Bergen Mono, Source Code Pro가 있습니다.
디스플레이 글꼴: 장식용 서체로도 알려진 이 눈길을 끄는 서체는 로고, 배너 및 헤딩에 멋과 독창성을 더할 수 있습니다. 디스플레이 서체 예시로는 Clearview, Johnston, Skywalker가 있습니다.

타이포그래피의 주요 요소

하나 이상의 타이포그래피 요소를 조정하여 단어, 텍스트 줄, 또는 제품의 외관, 가독성, 분위기를 미세 조정할 수 있습니다.

정렬

균형을 이루고 사용자가 페이지를 쉽게 아래로 이동할 수 있도록, 로고, 이미지, 헤더, 본문 텍스트와 같은 디자인 요소를 정렬하세요. 각 디자인 요소를 균등하게 배치하고, 여백과 패딩을 일관되게 사용하세요. 프로젝트 필요에 따라 텍스트를 왼쪽, 오른쪽, 양쪽 또는 가운데로 정렬하세요. 예를 들어, 디자이너는 제목이나 짧은 인용문은 가운데 정렬을 하지만, 긴 형식의 카피는 왼쪽 정렬을 할 수 있습니다.

색상

브랜드에 일관되고 메시지를 명확하게 전달하는 색상 팔레트를 선택하세요. 텍스트 불투명도를 조정하고 서로 대비가 잘 되는 보색을 사용하여 가독성과 접근성을 확보하세요. 잘 균형 잡힌 색상 팔레트를 만들기 위해 색상환 생성기를 사용할 수 있습니다. 전문 팁: 이상적인 대비 비율에 대한 자세한 내용은 웹 콘텐츠 접근성 지침을 참조하세요. 더욱 대담하고 밝은 색상은 제목과 부제목에 더 잘 어울릴 수 있으며, 수수한 색상은 큰 텍스트 블록에 적합합니다.

색상이 충분히 대비되는지 확인하세요. 그렇지 않다면, 배경색을 더 밝거나 어두운 색으로 변경해 보세요.

계층 구조

타이포그래피에서 계층 구조를 개발하면 핵심 정보의 우선순위를 정하고 드러나게 하여 훑어보고 이해하기 쉬워집니다. 제목은 부제목보다 크고, 부제목은 본문 텍스트보다 크게 만드세요. 예를 들어 웹사이트 본문 텍스트는 보통 16픽셀이고, H1 헤더는 48픽셀로 설정합니다. 여백, 텍스트 정렬, 색상, 다양한 서체를 활용하여 시각적 계층 구조를 강화하세요.

커닝

거리가 일정하게 보이도록 개별 글자 사이의 간격을 조정하세요. 적절한 커닝은 텍스트의 시각적 매력을 높이고 가독성을 향상시키는 데 도움이 됩니다.

행간

리딩은 행간, 즉 한 텍스트 줄의 기준선과 그 위 텍스트 줄의 기준선 사이의 간격을 의미합니다. 일반적으로 글꼴 크기의 1.125배에서 1.200배(112.5%–120.0%)인 행간이 더 나은 가독성을 제공합니다. 그렇다고 해도, 모든 서체에는 특히 행간을 포함한 미세 조정이 필요합니다.

자간(Tracking)

단어나 텍스트 줄 안의 문자 사이 전체 간격을 다루는 자간(tracking, 또는 문자 간격)을 통해 가독성을 높일 수 있습니다. 공간을 늘리려면 자간을 늘리고, 줄이려면 자간을 줄이세요. 모두 대문자로 표시된 단어나 문구는 자간을 늘리면 더 읽기 쉬운 경우가 있습니다.

올바른 서체를 선택하는 방법

서체를 선택하는 과정은 다음의 주요 단계들로 나뉩니다.

프로젝트 범위, 요구 사항, 목표를 고려하세요. 팀에게 주요 콘텐츠 질문을 하세요. 콘텐츠를 어떻게 전달할까요(앱, 웹사이트, 이메일, 또는 인쇄 홍보물)? 우리의 대상 고객은 누구이며, 그들의 요구 사항은 무엇인가요? 경쟁자들은 어떤 서체와 글꼴을 사용하고 있나요? 어떤 서체는 메뉴 텍스트보다 헤더에 더 적합하다는 점을 명심하세요. 어떤 서체들은 국제 스크립트, 글리프 및 기타 특수 문자들을 포함한 대규모 글꼴 패밀리를 갖추고 있습니다.
무드보드를 제작하여 사용자 및 경쟁사 연구를 바탕으로 시각적 톤을 개발하세요. 시작하려면 FigJam의 무드보드 템플릿을 사용해 보세요. 전문가 팁: 유사한 솔루션을 살펴보면 유용한 패턴과 규범을 식별할 수 있습니다.
서체 옵션을 탐색하세요. 여러분의 컴퓨터나 Google Fonts같은 사이트를 탐색해 보세요. 여러분의 제품이나 브랜드가 전달하고자 하는 바를 반영하는 시각적 단서를 가진 서체를 찾으세요. 예를 들어 브랜드 톤이 가볍기보다는 전문적이라면, 장식이 거의 없는 진지한 서체를 선택하세요. 어떤 Figma 디자인 예시가 더 전문적으로 보이나요? 왼쪽 모듈을 선택했다면, 올바른 선택을 하신 겁니다. 그 모듈은 깔끔하고 읽기 쉬운 sans serif 서체인 Roboto를 사용했습니다. 오른쪽 모듈에는 어린이 도서에 자주 사용되는 캘리그래피 기반 서체인 Almendra를 포함하고 있습니다.

글꼴이 시각적으로 미치는 효과의 예 — 왼쪽은 sans serif 서체 Roboto입니다. 오른쪽은 장식용 서체 Almendra입니다.

브랜드에 어울리고 시선을 사로잡는 서체를 선택하여 프로젝트 목표를 지원하세요. 글자의 전반적인 구조(예: x-높이, 대문자 높이, 속공간, 어센더(Ascender), 디센더(Descender)), 확장성, 판독성, 개성, 장식 등을 고려하세요. 이러한 요소들은 서체의 전반적인 외관과 느낌에 영향을 미칩니다.
실제 관련 콘텐츠로 서체를 시험해 보세요. 사용자를 사로잡 서체를 선택하는 가장 좋은 방법입니다. 크고 작은 텍스트 모두에 적합한지 확인하기 위해 몇 가지 다른 크기의 서체를 시도해 보세요.
서체에 브랜드 색상을 테스트해 보세요. 흰색 배경에 검은색 텍스트, 검은색 배경에 흰색 텍스트를배치하는 것부터 시작하세요. 그런 다음 텍스트에 주요 브랜드 색상을 적용하고 흰색과 검은색 배경 모두에서 서체가 어떻게 보이는지 확인하세요. 색상을 반전시켜 주요 브랜드 색상 배경 위에 흰색과 검은색 텍스트가 어떻게 보이는지 확인하세요.

Lorem Designs - 배경 대비 텍스트 예시 — 브랜드 이름인 Lorem Designs는 Apercu 서체로 설정되어 있으며 검은색, 흰색, 그들의 브랜드 색상을 전경과 배경에 적용했습니다.

굵기와 스타일

예를 들어, Julieta Ulanovsky와 스튜디오가 만든 Montserrat 서체에는 Regular, Bold, Italic, Thin, Black 등 다양한 스타일과 굵기가 있으며 각각이 하나의 글꼴입니다. 글꼴은 특정 글꼴 굵기와 텍스트 스타일로 된 활자 세트를 설치하고 사용하기 위한 파일입니다. 여러 굵기를 가진 서체는 각 굵기마다 글꼴이 있으며, 이것들을 합쳐 글꼴 패밀리라고 부릅니다.

Montserrat 서체에는 18개의 글꼴 패밀리(Thin, Thin Italic, Extra-Light, Extra-Light Italic, Light, Light Italic, Regular, Regular Italic, Medium, Medium Italic, Semi-Bold, Semi-Bold Italic, Bold, Bold Italic, Extra-Bold, Extra-Bold Italic, Black, and Black Italic)가 있습니다.

굵기는 글자 획의 두께를 말합니다. 어떤 서체는 헤어라인(Hairline)부터 울트라 블랙(Ultra-Black)까지 다양한 굵기와 그 사이의 많은 글꼴을 가질 수 있는 반면, 어떤 서체는 단 하나의 굵기만 있을 수도 있습니다. 이러한 굵기에는 숫자 연관성도 있어 프로그래밍하거나 개발자와 협업할 때 이해하기에 유용합니다. Regular 400, Medium 500, Semi-Bold 600, Bold 700 등과 같이, 굵기는 일반적으로 100에서 900 사이의 수치에 대응하며, 100 단위로 구분됩니다.

글꼴 스타일은 이탤릭체나 대문자와 같이 문자나 대소문자를 조정하는 것입니다. 일부 서체에는 스타일 옵션이 없고, 종종 Regular 굵기만 제공하기도 합니다.

문자의 대소문자 구분은 간단히 '케이스(case)'라고도 하며, 소문자(lowercase)와 같은 작은 글자와 대문자(uppercase 또는 capital letters)와 같은 큰 글자 간의 구분을 말합니다. 대부분의 서체 세트에는 두 가지 문자가 모두 있지만, Bangers와 같은 글꼴은 대문자로만 설정되어 있습니다. 대문자 또는 소문자만으로 설정된 서체는 훨씬 드뭅니다.

영어에서는 상황에 따라 다양한 대소문자 스타일이 다르게 사용됩니다:

제목 대소문자(Title Case)는 관사, 짧은 전치사, 접속사를 제외한 문장 내 모든 단어의 첫 글자를 대문자로 쓰는 혼합 대소문자 스타일입니다. 이러한 예외는 다소 주관적입니다.
문장 대소문자는 이 문장을 포함하여 우리가 텍스트에서 흔히 보는 방식입니다.
모든 문자가 대문자인 올 캡스(ALL CAPS)는 일반적으로 제목, 워드마크, 버튼 텍스트 또는 기타 유형의 레이블에 사용됩니다. 어센더와 디센더가 없어 양이 많으면 읽기 어려운 긴 텍스트보다는 강조 목적으로 사용하는 것이 좋습니다. 전체 대문자는 온라인에서 소리 지르는 것과 같은 효과를 주기도 하니 채팅 및 대화 기반 인터페이스에서는 사용을 피하세요.
스몰 캡스(Small caps)는 형태는 대문자와 비슷하지만 높이는 서체의 x-하이트(x-height)만큼 작습니다. 스몰 캡스는 본문 텍스트 및 헤딩 텍스트와 구별하기 위해 사용되지만, 많은 서체에서 제공되지는 않습니다.
모든 텍스트를 소문자로 표기하는 것은 일부 제품 및 워드마크에서 심미적인 목적으로 사용되는 스타일적 선택입니다.

크기

활자의 크기를 설정하고 변경하는 것은 어려운 결정일 수 있습니다. 종이, 휴대전화, 빌보드 등 텍스트가 나타날 매체에 따라 크게 달라지며, 보는 사람의 기기나 디자인의 반응성에 따라 변할 수 있습니다.

크기를 강조 요소 중 하나로 사용하여 활자 선택에 있어 위계를 결정하는 것이 중요합니다.

웹 개발에서는 헤딩, 서브헤딩, 본문 텍스트, 메뉴 및 푸터 텍스트 등 몇 가지 주요 크기를 정의해야 합니다. 많은 디자이너가 H1이라고도 하는 헤딩 크기부터 시작하지만, 프론트엔드 개발자가 구현하는 방식인 본문 텍스트 크기부터 시작하는 것이 도움이 될 수 있습니다. 개발자가 배율 기반 측정 단위인 em으로 작업할 때, 본문 텍스트 크기는 1em이며 다른 모든 텍스트 크기는 그 배수 또는 분수입니다.

예를 들어, 웹의 일반적인 본문 텍스트 크기는 16px입니다. H1은 3em, 즉 본문 텍스트 크기의 3배인 48px로 설정될 수 있습니다. 웹페이지는 다양한 화면 크기에 맞춰 디자인되므로, 여러분이 만드는 디자인에는 고객의 기기에 따라 다른 글꼴 크기가 필요할 수 있습니다. 개발자는 고객의 브라우저 크기에 따라 본문 텍스트 크기가 변하도록 할 수 있으며, 다른 모든 텍스트도 그에 따라 조정됩니다.

세부 정보

타이포그래피의 많은 부분은 작은 디테일과 뉘앙스에 있습니다.

예를 들어, 텍스트를 배치할 때 살펴봐야 할 요소 중 하나는 랙(rag)입니다. 랙은 왼쪽 및 오른쪽 정렬된 텍스트의 고르지 않은(들쭉날쭉한) 가장자리를 말합니다. 텍스트 상자의 너비를 늘리거나 줄이거나, 전체 본문 텍스트의 자간을 변경하여 이를 조절할 수 있습니다.

한두 단어가 문단 끝에 남게 되면 보통 "위도우(Widow)"라고 부릅니다. 또는 다음 열의 시작 부분에 남으면 "오펀(Orphan)"이라고 합니다.

하지만 May-Li Khoe가 지적했듯이:

한 줄에 홀로 있는 텍스트 단어를 "과부(widow)"나 "고아(orphan)"라고 부르는 건 좀 별로예요. 특히 제가 고아였기 때문에 더 그렇고요. 저는 대신 "댕글리(dangly)," 즉 "대롱대롱 매달린 것"이라고 부르는 걸 선호합니다.

이제 대신 "댕글리(dangly)"라고 불러 보세요.

댕글리를 방지하기 위해 텍스트 상자를 조정하면 행 길이가 조정됩니다. 영어 본문 텍스트의 경우, 공백과 구두점을 포함하여 행 길이를 약 40~60자로 제한하는 것이 접근성과 가독성에 이상적입니다. 행 길이가 60자를 넘어야 한다면, 가독성을 위해 줄 간격을 늘리세요.

문서나 인터페이스가 잘 디자인된 것처럼 보이게 만드는 가장 쉬운 방법 중 하나는 공간 내 개체 배치의 일관성입니다.

앱 화면에 제목이 있고 프레임이나 화면 상단에서 100px 떨어져 있다고 가정해 보겠습니다. 비슷한 제목을 가진 다른 모든 앱 화면에서도 제목이 같은 위치에 있기를 원할 것입니다.

여기에서는 가이드와 측정 기능을 잘 활용해야 합니다. Figma의 눈금자에서 클릭하고 드래그하여 가이드를 만들고, 개체를 선택한 상태에서 Alt 키를 눌러 주변 개체와의 거리를 확인하세요.

로고, 이미지, 헤더, 본문 텍스트가 포함된 웹사이트, 포스터, 앱 화면, 인포그래픽 등의 왼쪽 측면 또는 왼쪽 세로 여백을 고려해 보세요. 이러한 요소를 서로 정렬하면 시선이 페이지 아래로 이동하기 쉬워질 뿐만 아니라, 콘텐츠 레이아웃이 신중하고 의도된 것처럼 보이게 합니다.

정렬은 텍스트 블록이나 줄에 특화된 정렬 개념입니다.

좌측 정렬은 각 텍스트 줄의 시작 부분이 왼쪽 여백을 따라 동일한 x값에서 시작합니다. 이는 좌측 정렬이라고도 하며 오른쪽에 랙을 유발합니다.
오른쪽 정렬은 각 텍스트 줄의 끝부분이 오른쪽 여백에 딱 맞게 정렬되는 것입니다. 이는 우측 정렬이라고도 하며 왼쪽에 랙을 유발합니다.
양쪽 정렬은 텍스트 줄의 왼쪽과 오른쪽 끝이 모두 텍스트 상자의 양쪽에 딱 맞게 정렬되는 것입니다. 각 텍스트 줄을 일관된 너비로 맞추기 위해 자간과 단어 간격이 조정됩니다. 양쪽 정렬 시에는 랙이 없습니다.
가운데 정렬 텍스트는 양쪽 정렬이 없는 상태입니다.