디자인 시스템 실무! 타이포그래피 시스템 구축하기

안녕하세요, 게으른 사부작이입니다!

 

오늘은 디자인 시스템의 중요한 요소 중 하나인 타이포그래피 시스템을 어떻게 구축하는지 알아보려고 해요. 타이포그래피, 즉 글씨체는 디자인에서 정보를 전달하는 데 정말 큰 역할을 하죠. 저도 처음엔 글씨체의 중요성을 잘 몰랐는데, 한 번 경험해보고 나니 완전히 달라지더라고요. 그럼 저와 함께 타이포그래피 시스템을 구축하는 법을 배워볼까요?

 

ChatGPT 생성 이미지

폰트 하나 바꿨을 뿐인데 디자인이 달라 보이더라고요

제가 디자인 공부를 시작하고 처음 개인 프로젝트를 할 때의 일이에요. 앱 UI를 만들면서 기본 폰트를 Arial로 설정했는데, 뭔가 밋밋한 느낌이 들더라고요. 그래서 "폰트를 바꿔볼까?" 하고 무료 폰트인 Noto Sans로 바꿨더니, 와! 디자인이 완전히 달라 보였어요. 같은 내용인데도 더 깔끔하고 세련된 느낌이 나더라고요. 그때 깨달았죠. 타이포그래피는 단순히 글씨체를 고르는 게 아니라, 디자인 전체의 분위기와 사용자 경험을 좌우하는 중요한 요소라는 걸요. 여러분도 폰트 하나 바꿨을 때 느낌이 달라진 적 있나요? 저는 그 이후로 타이포그래피 시스템을 체계적으로 구축하는 법을 배우게 됐어요.

폰트 선택 기준: 가독성과 브랜드 느낌

타이포그래피 시스템을 구축하려면 먼저 폰트를 선택하는 기준을 세워야 해요. 폰트를 고를 때 가장 중요한 두 가지는 가독성과 브랜드 느낌이에요.

• 가독성: 사용자가 글씨를 쉽게 읽을 수 있어야 해요. 예를 들어, 너무 얇거나 장식이 많은 폰트는 예쁘더라도 작은 크기에서 읽기 어려울 수 있어요. 저는 처음에 손글씨 스타일 폰트를 썼다가 "이게 뭐라고 썼지?"라는 피드백을 받고 충격받았어요. 그래서 가독성이 좋은 폰트를 선택하는 게 중요하다는 걸 배웠죠. 예를 들어, Noto Sans나 Roboto 같은 폰트는 선이 깔끔해서 작은 크기에서도 잘 보이더라고요.
• 브랜드 느낌: 폰트는 브랜드의 성격을 전달하는 도구예요. 예를 들어, 고급스러운 브랜드라면 세리프 폰트(예: Times New Roman)처럼 전통적인 느낌의 폰트를, 현대적이고 캐주얼한 브랜드라면 산세리프 폰트(예: Noto Sans)처럼 깔끔한 폰트를 선택할 수 있어요. 제가 본 카페 앱은 둥글둥글한 폰트를 써서 친근한 느낌을 주더라고요. 브랜드의 정체성을 고려하면서 폰트를 고르는 게 중요해요.

폰트를 선택할 때는 너무 많은 종류를 쓰지 않는 것도 팁이에요. 디자인 시스템에서는 보통 1~2개의 폰트만 사용하는 걸 추천해요. 예를 들어, 제목과 본문에 다른 폰트를 쓰고 싶다면, 한 폰트는 두꺼운 스타일로, 다른 폰트는 얇은 스타일로 조합하면 조화롭죠.

크기 계층: 제목 24px, 본문 16px 등

폰트를 선택했다면, 다음은 크기 계층을 설정하는 거예요. 크기 계층은 글씨의 크기와 간격을 체계적으로 정리해서 정보의 중요도를 보여주는 역할을 해요. 예를 들어, 제목은 크고 두껍게, 본문은 작고 가볍게 설정하면 사용자가 "이게 중요한 정보구나!" 하고 직관적으로 알 수 있죠.

일반적인 크기 계층 예시를 들어볼게요:

• 제목 (H1): 24px, 두꺼운 굵기 (Bold).
  • 예: 앱의 메인 제목이나 페이지 제목.
• 부제목 (H2): 20px, 중간 굵기 (Medium).
  • 예: 섹션 제목.
• 본문: 16px, 보통 굵기 (Regular).
  • 예: 일반 텍스트.
• 보조 텍스트: 14px, 얇은 굵기 (Light).
  • 예: 각주나 캡션.

저는 처음에 크기 계층 없이 제멋대로 글씨 크기를 정했다가 UI가 어수선해 보였어요. 하지만 이런 계층을 설정하고 나니 정보가 훨씬 체계적으로 보이더라고요. 예를 들어, 인스타그램을 보면 게시물 제목은 크고 굵게, 댓글은 작고 가볍게 설정돼 있어서 읽기 편하죠. 크기뿐 아니라 **줄 간격(Line Spacing)**도 중요해요. 보통 본문은 글씨 크기의 1.5배 정도 간격을 주면 가독성이 좋아요. 예를 들어, 본문이 16px라면 줄 간격은 24px 정도로 설정하면 딱 적당해요.

실습: 무료 폰트 추천 (예: Noto Sans)

이제 실습으로 넘어가 볼게요! 타이포그래피 시스템을 구축할 때 초보자도 쉽게 사용할 수 있는 무료 폰트를 추천드릴게요. 제가 가장 좋아하는 폰트는 Noto Sans예요. Noto Sans는 구글에서 제공하는 무료 폰트로, 가독성이 뛰어나고 다양한 굵기(Thin, Regular, Bold 등)를 지원해서 활용도가 높아요. 게다가 한글도 지원해서 한국어 UI 작업에 딱이죠.

Noto Sans를 사용한 예시를 들어볼게요. 제가 만든 앱 UI에서 제목은 "Noto Sans Bold, 24px", 본문은 "Noto Sans Regular, 16px"로 설정했어요. 이렇게 하니 깔끔하면서도 정보가 잘 전달되더라고요. Noto Sans 외에도 Roboto나 Open Sans 같은 무료 폰트도 추천드려요. 이 폰트들은 다운로드 사이트(예: Google Fonts)에서 쉽게 찾을 수 있어요. 무료 폰트를 활용하면 비용 걱정 없이 멋진 타이포그래피 시스템을 구축할 수 있답니다.

실무 팁: 일관성 유지하기

타이포그래피 시스템을 구축할 때 중요한 팁 하나 더 드릴게요. 바로 일관성이에요. 예를 들어, 제목은 항상 24px로, 본문은 항상 16px로 유지하는 거예요. 중간에 "이건 18px로 해볼까?" 하고 바꾸면 UI가 어수선해질 수 있거든요. 저는 처음에 이런 실수를 많이 했는데, Figma 같은 툴에서 스타일을 미리 저장해 놓고 쓰니까 훨씬 편해졌어요. Figma에서는 텍스트 스타일을 "H1", "Body" 같은 이름으로 저장할 수 있어서, 나중에 수정할 때도 일관성을 유지하기 쉬웠어요.

글씨가 정리됐으니, 버튼도 다뤄볼게요!

타이포그래피 시스템을 구축하는 법을 알아보니, 글씨체가 디자인에서 얼마나 중요한지 새삼 느껴졌어요. 폰트를 선택하고, 크기 계층을 설정하면 UI가 훨씬 깔끔하고 직관적이 되죠. 이제 글씨는 정리됐으니, 다음 포스트에서는 디자인 시스템의 또 다른 핵심 요소인 버튼을 어떻게 설계하는지 알아볼게요. 여러분은 어떤 폰트를 써보셨나요? 저는 Noto Sans 덕분에 UI가 훨씬 좋아졌어요. 댓글로 여러분의 경험도 공유해 주세요!