brunch

You can make anything
by writing

C.S.Lewis

by 마크 Jun 12. 2023

UXUI 디자인 폰트의 사용

사용 Tip

UXUI 디자인을 처음 접하고 폰트의 사용에 대해 애를 많이 먹었다. 폰트의 크기부터 행간, 자간, 배치 등등 때문에 계속 어떻게 써야 하는지 명확한 기준이 없었는데 마침 지난주 EEC 1기가 종료되었기 때문에 본래 전공이었던 실내디자인과 관련해 인테리어 커머스 사이트를 클론 디자인해보며 Pretendard 폰트를 이용해 내가 캠프를 진행하며 느끼고, 멘토 분들께 배웠던 내용을 토대로 내용 정리를 해볼까 한다.

1. 정보의 위계

작은 모바일 화면은 더더욱 중요하다. 담을 수 있는 정보의 한계가 있기 때문에, 적은 정보를 더욱 효과적으로 전달할 수 있어야 한다. 그러기 위해선 이 페이지에서 전달하고자 하는 내용을 사용자가 자연스레 인식할 수 있게끔 폰트의 계층을 나눠 주어야 한다. 폰트의 스타일이 될 수도 있고(Bold, Medium, Light...) 폰트의 색상, 사이즈 등이 될 수도 있다. 모든 내용이 동일한 위계를 가지고 있다면 사용자는 내용 파악에 어려움을 겪을 것이다.

2. 폰트의 통일성

좌측은 Pretendard(Thin, Light, Bold, Black), 그리고 서울 남산 폰트 5종류의 폰트를 사용했다.

너무 다양한 폰트를 사용하지 않는 것이 좋다. 디자인의 통일성과 가독성이 떨어지고, 개발 단계에서도 복잡함이 생긴다. 디자인 시스템을 구축하여 가이드를 설정하기도 어려워진다. 한가지 폰트의 2~3가지 두께를 사용하는 것이 좀 더 시스템적인 디자인을 하기 쉬울 것이다. 좌측은 5종류의 스타일을 사용한 반면 우측은 Pretendard(Bold, Medium) 2가지 종류를 사용했다.

3. 포인트 컬러

포인트를 주고 싶은 부분이 있을 수 있지만, 남발 해서는 안된다. 여기저기에 포인트 컬러를 사용하게 되면 사용자는 어떤 것이 중요한 내용인지 구분이 어려워 혼란을 느낀다. 꼭 포인트 컬러만이 아닌 폰트의 굵기, 크기, 색상을 이용해 강조가 가능하다. 특히나 CTA 버튼이 있을 경우에는 더욱 포인트 컬러 사용에 주의해야 한다. 여기 저기에 포인트 컬러를 사용한다면 시선을 분산시켜 버리기 때문에 가장 중요한 버튼이 눈에 들어오지 않는다.