디자인 시스템 만들기-2 타이포그래피

Foundation - 타이포그래피

들어가며

여러 디자인 시스템을 리서치하다 보면 'Foundation'과 'Components'로 크게 카테고리가 나뉘어 있는 것을 볼 수 있다.

여기서 Foundation에 속해 있는 것은 보통 Color, Typography, Grid, Iconography, Spacing 정도인데 Foundation이라는 것은 말 그대로 디자인 시스템에 근간이 되는 것을 말한다.

즉 Components라는 디자인 시스템을 만들기 위해서도 반드시 필요한 기본이 되는 요소들이다.

그래서 Foundation을 정하는 데에도 상당한 시간이 소요된다.

컬러와 타이포는 그 브랜드를 나타내는 가장 중요한 부분이기 때문이다.

이번 디자인 시스템 만들기-2편에서는 Foundation 영역 중 우리 팀이 어떻게 합의된 타이포를 시스템화하였는지 공유하려 한다.

---

Typography (타이포그래피)

Typography는 쉽게 '글꼴'이다. 우리 프로덕트에 1가지 폰트만을 사용할 것인지 아니면 영문과 한글의 폰트를 따로 가져갈 것인지, 아니면 각 기능에 따라 폰트를 가져갈 것인지는 각 팀이 결정하기 나름이다.

RIDI의 타이포 정의

우리 팀은 폰트를 'Spoqa Han Sans' 한 가지로 가져가기로 했다.

이전에는 Urbanist를 사용했는데 가독성이 떨어지는 이슈들이 발생하여 디자인 시스템을 새로 구축하면서 폰트 자체를 바꾸기로 결정했다.

우리 팀이 하고 맡은 프로덕트는 글로벌 서비스이기 때문에 한글을 사용하는 일이 없어 국영 문의 폰트를 두는 것이 무의미하였고, 숫자가 많이 사용되어 숫자를 보기에 편한 스포카체를 선택하였다.

(실제로 스포카는 숫자 폰트가 예뻐서 토스, 신세계몰 등에서 사용되고 있다.)

피그마 타이포 스타일 네이밍 규칙

메인 폰트를 설정하고 나서는 피그마에 스타일로 지정할 폰트 네이밍 규칙을 정하였다.

첫 부분은 폰트의 카테고리, 그리고 그 다음은 디자인 폰트 토큰, 그리고 '|'표시를 활용하여 폰트 크기를 표기하였다. 

이전에 설정해 놓은 폰트 스타일

 

사실 피그마에서는 폰트 사이즈와 행간의 크기가 나오기는 하지만 폰트 스타일 클릭 전에도 바로 크기를 확인할 수 있도록 사이즈를 표기하였다. 

자간, 행간, 굵기, 크기를 정하여 타이포 디자인 시스템을 완성하였다.

디자인 토큰 네이밍은 이전에 합의한 것과 같이(1탄을 참고) 풀네임의 스네이크 형식으로 작성하였다.

행간의 간격은 150%로 통일하였고 안드로이드 대응 이슈로 px단위도 함께 기재하였다.

소수점이 나오는 px은 합의하여 버림 처리하였고, 자간은 0px로 별도로 간격을 설정하지 않았다.

나는 개인적으로 자간 사이를 -0.3~-0.5로 줄이는 것을 좋아하는데 다른 디자이너의 경험으로는 자간을 따로 설정하지 않는 것이 추후에 이슈 발생이 적다 하여 0으로 결정하였다.

행간 같은 경우에도 나는 퍼센트로만 주는 것이 익숙했는데, IOS와 Web에서는 퍼센트로 주는 것이 괜찮으나 안드로이드에서는 다르게 보이는 경우가 있어 px로 고정값을 주는 게 좋다는 피드백을 받았다.

디자이너 각자의 경험들이 모여 더 나은 방향으로 시스템을 정립해 나가는 것이 좋았다.�

이렇게 타이포의 대한 정의를 끝내고 피그마에 디자인 토큰과 같이 동일하게 적용하였다.

다만 피그마는 '/'로 단위가 구별되기 때문에 '_'대신 '/'로 구분하여 컴포넌트화 하였다.

이렇게 타이포의 정의는 나름 깔끔하게 정리가 되었다.

p.s.

디자인 시스템 정립 3편에서는 컬러 편으로 찾아옵니다 ^^!