요즘IT
위시켓
최근 검색어
전체 삭제
최근 검색어가 없습니다.

문자는 다른 시각 언어보다 구체적이고 정확하게 정보를 전달하는 언어입니다. 물체나 풍경 같은 것들은 아이콘이나 이미지로 알려주는 게 좋을 수 있지만, 행동이나 개념을 알려줄 때는 문자가 더 효율적입니다. 같은 문화권이라면 의미 전달이 확실하기 때문에 가장 많이 쓰이는 시각 요소입니다.

회원가입을 하면 원하는 문장을
저장할 수 있어요!

다음

회원가입을 하면
성장에 도움이 되는 콘텐츠를
스크랩할 수 있어요!

확인

디자인

UI 디자인 가이드: 타이포그래피

년차,
어떤 스킬
,
어떤 직무
독자들이 봤을까요?
어떤 독자들이 봤는지 궁금하다면?
로그인
타이포그래피

타이포그래피

문자는 다른 시각 언어보다 구체적이고 정확하게 정보를 전달하는 언어입니다. 물체나 풍경 같은 것들은 아이콘이나 이미지로 알려주는 게 좋을 수 있지만, 행동이나 개념을 알려줄 때는 문자가 더 효율적입니다. 같은 문화권이라면 의미 전달이 확실하기 때문에 가장 많이 쓰이는 시각 요소입니다.

 

디지털 디바이스에서 타이포그래피는 정보 전달과 행동 유도라는 큰 목적이 있습니다. 유저의 행동이 바로 비즈니스에 연결되는 디지털 프로덕트에서 전달력이 뛰어난 타이포그래피가 중요합니다. 이 글에서는 한글 타이포그래피를 중심으로 디지털 프로덕트에서의 쓰임새를 예시와 함께 정리했습니다.

 

글꼴 Font

글꼴은 일관된 규칙으로 디자인된 모둠으로 글씨체, 폰트 패밀리, 자족 등 다양한 언어로 불립니다. 글꼴은 종류에 따라 가독성과 판독성, 읽는 방식조차 다를 수 있기 때문에 불필요하게 주의력이 흩어지지 않도록 1가지 글꼴을 사용하는 것을 추천합니다.

글꼴 Font

뚜렷한 목적이 없다면 1가지 글꼴을 사용합니다.

 

 

굵기 Weight

다양한 시각적 위계를 표현하기 위해, 여러 굵기를 제공하는 글꼴을 사용합니다. Black, Bold, Semibold, Medium, Regular, Light 등이 있으며 서체의 무게를 이용해 표현하고자 하는 내용 중 읽는 이에게 가장 중요한 정보부터 중요하지 않은 정보까지, 중요도에 따라 계층을 표현합니다.

굵기 Weight

무게를 이용해 정보를 더 쉽게 구분할 수 있게 돕습니다.

 

 

색 Color

사용자가 텍스트를 빠르고 정확하게 이해할 수 있게 충분한 대비를 주어야 합니다. 서비스에서 텍스트는 흰색 바탕의 검은 글씨와 버튼 내부에 많이 쓰이는 편이며, 최소한 WCAG 권장 4.5:1 대비가 필요하며 가능한 대비를 크게 줍니다.

 

Color Contrast Checker

색 Color

하얀 배경에는 까만 글씨를, 어두운 버튼에는 하얀 글씨를 씁니다.

 

 

행간 Line height

행간은 글줄과 글줄 사이의 간격을 뜻합니다. 좁은 공간에 여러 정보가 섞여 있으면 사람의 눈이 정보를 식별하기 어렵기 때문에 가능한 여백을 주어야 합니다. 위아래 글줄이 서로 들러붙어 면처럼 보이지 않고 선으로 보이도록 충분한 여백을 줍니다. 보통 글자 크기 x 1.6을 권장하는 편입니다.

행간 Line height

특히 여러 줄이 되는 본문의 가독성을 위해 행간을 적용합니다.

 

 

자간 Letter Spacing

자간은 글자와 글자 사이의 간격을 뜻합니다. 행간과 마찬가지로 연관성이 있는 정보끼리 거리가 너무 멀거나 가까우면 정보를 식별하기 어렵기 때문에 적절한 자간을 설정해야 합니다. 글자 크기가 커질수록 자간이 멀어 보이기 때문에 자간을 줄여주어야 하며, 글자 크기가 작아질수록 식별이 어려워지기 때문에 자간을 늘려주는 편입니다. 일반적으로 16pt~17pt의 본문에는 -0.3 정도를 부여하는 편입니다.

자간 Letter Spacing

자간이 넓거나 좁으면 서비스 전체의 완성도가 떨어져 보입니다.

 

 

정렬 Alignment

글줄 정렬은 다섯 가지 종류가 있습니다. 가운데, 양끝, 오른끝, 왼끝, 엇갈리기가 있으면 그중 보통 왼끝과 가운데 정렬을 많이 사용하는 편입니다. 3~4줄 이하의 글에서는 가운데 정렬을 읽기 편하지만, 5줄 이상의 글줄은 왼끝 정렬로 표현하는 것이 더 읽기 편합니다.

정렬 Alignment

가운데 정렬로 된 긴 본문은 읽기 어렵습니다.

 

 

서체 시스템

글꼴의 속성을 이용한 다양한 시각 기법을 이용할 수 있지만, 매번 새로운 방법을 사용하면 전체를 관리하기 어려워집니다. 일관된 규칙으로 시각 기법을 유지하고 전체의 일관성을 유지하고 사용자가 균일한 리듬감을 가질 수 있도록 돕기 위해 필요한 것이 서체 디자인 시스템입니다.

 

명칭은 다르더라도 비슷한 개념으로 나누는 편이며, 보통 Display, Headline, Body, Caption 으로 나누는 편입니다. 서체 크기는 본문을 기준으로 하며 스마트폰, 태블릿, 노트북, PC, TV, 월 스크린 등 매체에 따라 본문의 크기가 달라집니다.

 

모바일 웹 기준 예시

  • Title: 29px ~ 40px (180%~220%)
  • Subtitle: 20px ~ 30px (130%~150%)
  • Body: 16px~20px
  • Caption: 11px ~ 16px (70–80%)
  • Minimal size: iOS-11pt . Android-12sp . Web-14px
서체 시스템

 

 

디지털 디바이스 글꼴

다양한 환경에 최적화된 한글 글꼴은 제한적입니다. 메이저 디지털 디바이스에서 제공하는 기본 글꼴을 사용하는 편이며, 한글은 크게 4가지를 사용합니다. iOS 환경의 한글 서체인 Apple SD gothic NEO, 삼성 갤럭시 디바이스에서 사용하는 Samsung One, 안드로이드 기반 디바이스에서 쓰이는 Source Sans, 대표적인 웹 서비스 네이버의 나눔 고딕이 있습니다.

디지털 디바이스 글꼴

좋아요

댓글

공유

공유

댓글 0
작가
6
명 알림 받는 중

작가 홈

작가
6
명 알림 받는 중
누구나 시각 언어를 이해하고 말할 수 있는 세상을 꿈꿉니다. 완벽한 이론과 정답을 알려주는 곳이 아닌, 스스로 생각하고 디자인할 수 있는 지침이 되는 나침반이 되길 바랍니다. 글을 중심으로 블로그, 브런치, 뉴스 레터를 운영하고 있습니다.
함께 스크랩한 콘텐츠
같은 분야를 다룬 콘텐츠
인기 있는 콘텐츠

좋아요

댓글

스크랩

공유

공유

지금 회원가입하고,
요즘IT가 PICK한 뉴스레터를 받아보세요!

회원가입하기
요즘IT의 멤버가 되어주세요! 요즘IT의 멤버가 되어주세요!
요즘IT의 멤버가 되어주세요!
모든 콘텐츠를 편하게 보고 스크랩할 수 있어요.
모든 콘텐츠를 편하게 보고 스크랩 하기
매주 PICK한 콘텐츠를 뉴스레터로 받을 수 있어요.
매주 PICK한 콘텐츠를 뉴스레터로 받기
로그인하고 무료로 사용하기