Handy 컴포넌트, 타이포, 간격 구축 과정
디자인시스템 구축기#6
컴포넌트 선정
Foundation 구축과정이 거의 다 마무리된 가운데, 디자인시스템에 적용할 공통 컴포넌트를 선정하는 시간을 가졌다. 최대한 기본적으로 필요한 컴포넌트만 선정했다. 보라색은 4명의 디자이너가 공통적으로 필요하다고 생각한 컴포넌트, 그리고 노란색은 논의를 통해 추가적으로 선정했다.
하지만 컴포넌트 구축과정에서 한 가지 문제점을 발견할 수 있었다. 디자이너마다 컴포넌트를 부르는 명칭이 다르다는 점이었다. 어떤 디자이너는 토글 버튼을 Toggle이라고 명칭 하기도 하고 또 다른 디자이너는 Switch라고 명칭 하기도 하였다. 이러한 문제를 해결하기 위해 우리는 세계적으로 대표되는 디자인시스템인 Material Guide의 네이밍을 따라서 각 컴포넌트마다 한 가지 명칭을 정립했다.
타이포 구축 과정
기존 디자인시스템은 웹, 안드로이드, iOS 모두 다른 폰트를 가지고 있어서 여러 가지 비효율이 발생했었다. 따라서 우리는 가장 대중적으로 사용되는 UI폰트인 Pretendard로 한 가지 타이포를 결정하게 되었다.
이제 문제는 네이밍과 굵기, 사이즈, 행간, 자간 등의 구축과정이었는데 결과적으로 아래와 같이 구축되었다.
계층
Display, Heading, Title, Body, Caption으로 사이즈별로 나눠주었다.
굵기
UI에 테스트를 진행해 본 결과 가장 굵은 폰트는 Semibold, 서브텍스트는 Regular으로 적용해 주는 것이 시각적으로 안정된 보였다. 추가적으로 Light는 Caption에 사용될 수 있도록 추가 정립해 두었다. 대부분의 UI에서는 Semibold, Regular 두 가지 굵기로 적용될 예정이다.
네이밍
네이밍은 디자이너들이 스타일창에서 폰트를 적용할 때 가장 찾기 쉽고 구분하기 쉬운 네이밍으로 정립했다. 예를 들어 디자이너들이 폰트를 찾을 때 보통은 폰트 사이즈를 생각하면서 스타일을 찾고는 하는데, 폰트 사이즈를 네이밍에 추가해놓지 않으면 항상 스크롤을 하면서 직접 내가 원하는 사이즈를 찾아야 하는 번거로움이 있었다. 하지만 네이밍에 사이즈를 입력해 놓으면 스타일 검색창에서 사이즈만 입력하면 내가 원하는 폰트를 바로 찾을 수 있기 때문에 효율적인 네이밍 방식이라고 생각했다.
텍스트 스타일 검색 과정 예시행간
행간은 큰 폰트 사이즈는 대략 1.3배 중간 폰트 사이즈는 1.4배 그리고 작은 폰트 사이즈는 1.5배로 직접 숫자를 입력해 행간을 적용해 주었다.
자간
국문은 텍스트의 가독성을 높이기 위해 -2%를 주었고 영문과 숫자는 따로 자간을 적용하지 않았다.
간격 구축 과정
4 point grid를 베이스로 구축했으며 다수의 디자이너들이 공통으로 작업하여도 최대한 통일성 있는 간격을 적용하기 위해 추가적으로 Variable에도 적용시켜 두었다.
다음은 variable 기능을 통해 오토레이아웃에 간격을 적용한 모습이다. 직접 수치를 입력할 필요 없이 variable을 선택만 하면 간격이 입력되기 때문에 최대한 통일성 있는 디자인을 제작할 수 있다.
