2. 여러 상황에 대응할 수 있는 텍스트 스타일 시스템

타이포그래피는 화면의 대부분을 구성하는 매우 중요한 요소로, 견고한 디자인 시스템을 반드시 갖춰야 합니다. 그러나 시스템 구축 초기 단계에서는 놓치기 쉬운 부분이기도 하죠. 피엑스디(pxd) 내부에서도 대규모 프로젝트를 진행하면서 텍스트 스타일 체계를 적용하는 과정에서 여러 어려움을 겪었습니다. 이러한 어려움을 어떻게 해결해 나갔는지 소개하겠습니다. 

 

 

효율을 떨어뜨리는 요인들

 

확장성이 떨어지는 이름 규칙

 

기존에는 본문(body) 스타일의 이름을 가장 큰 사이즈를 기준으로 본문1, 본문2 처럼 내림차순으로 지었습니다. 이런 방식이 프로젝트 초기에는 별다른 문제가 되지 않았지만, 운영하다 보면 다음과 같은 요청이 들어왔습니다. 

 

글자 크기가 더 큰 제목을 사용해야 해서, 본문의 글자 크기도 더 커야 해요. 18px정도면 좋을 것 같아요.
본문의 글자 크기가 더 큰 게 필요해요. 20px 정도요.

 

이런 요청을 받으면 디자인 시스템 관리자는 다음과 같은 고민에 빠집니다. 

 

새롭게 추가한 18px을 제목(Heading)으로 분류해야 할까?
18px가 본문 텍스트 스타일에서 가장 큰 사이즈인 본문 1이 되도록 전체 이름을 바꿔야 할까?

 

18px는 기존 제목 스타일에 사용된 사이즈입니다. 따라서 본문용으로 추가한 18px을 제목으로 분류하면 기존 제목 스타일과 자간 및 행간 설정이 달라져 혼선이 생깁니다. 반면, 18px을 본문 스타일에 추가하면 기존 본문 스타일에서 가장 큰 사이즈가 되어 전체 이름을 18px을 기준으로 다시 정리해야 합니다. 이후 변경된 이름을 개발 언어에도 전부 반영해야 하기 때문에 이 방법은 디자인과 개발팀 모두에게 부담이 되죠.

 

이러한 상황은 제목 스타일에서도 발생했습니다. 랜딩페이지를 제작할 때 기존에 설정한 가장 큰 글자 크기보다 보다 큰 글자가 필요할 때, 본문 스타일에서 겪었던 것과 같은 딜레마에 빠지게 됩니다. 

 

상황마다 다른 행간 처리

 

아티클, 문서같이 줄글에 들어갈 때는 가독성을 위해 행간을 넓게 설정합니다. 위의 예시 이미지를 보면 행간이 130%인 것보다 160%일 때 더 편하게 읽힐 겁니다. 이 때문에 대게 출판 도서와 브런치, 미디엄같이 아티클 기반 플랫폼의 행간은 넓게 설정합니다.
 

 

이와 반대로 UI 요소로 사용되는 텍스트 스타일은 행간이 넓으면 되레 어색해지는 경우가 많습니다. 해상도에 따라 달라지는 반응형이나, 다국어 대응을 하다 보면 흔히 위의 이미지같은 경우가 생겼죠. 이렇게 반대의 상황을 하나의 스타일로 대응하려다 보니 필연적으로 어느 한쪽은 어색하게 되는 상황들이 종종 생기곤 했습니다.

 

 

효율을 높이는 해결 방안

 

본문, 양방향으로 확장이 가능한 티셔츠 사이즈

 

디자인 작업 시 대게 본문 텍스트 스타일은 가장 많이 쓰는 크기를 기준 사이즈로 잡는데요. 스타일에 따라 글자의 크기를 자유롭게 키우고, 줄일 수 있는 확장이 필요한 경우가 많았습니다. 상황에 따라 새로운 글자 크기가 추가돼도 기존 스타일 체계에 영향을 주지 않는 명명 규칙이 필요했고, Chakra UI 라이브러리를 참고해 본문 텍스트 스타일에 의류 사이즈 표기법을 차용했습니다. md(medium)을 기준으로 큰 사이즈는 lg(large), 작은 사이즈는 sm(small) 나타내기로 했습니다. 사이즈 확장이 더 필요한 경우 ‘xxl’이 아닌 숫자를 사용해 ‘2xl’로 표기하며 직관적으로 단위를 인지할 수 있도록 했습니다. 기준은 md이며 언제든지 원하는 사이즈로 바꿀 수 있습니다.

 

 

타이틀, 오름차순 사이즈

 

프로젝트를 운영하다 보면 제목의 글자 크기가 기존의 최대보다 큰 것이 필요한 경우가 종종 생깁니다. 제목 텍스트 스타일의 이름 규칙도 본문처럼 의류 사이즈 표기법을 따를 수 있었지만, 일반적으로 제목은 본문과 크기가 같거나 크기 때문에 최소 사이즈가 정해져 있어서 한계가 있었습니다.

 

IBM Carbon Design System의 규칙을 제목 스타일의 이름 규칙은 본문 사이즈를 기준으로 본문 텍스트의 크기가 커져갈 때마다 제목에도 1, 2 오름차순으로 숫자를 더해가는 방식을 채택했습니다. 이에 따라 본문 사이즈를 기준으로 제목 스타일의 시작점을 쉽게 잡을 수 있게 됐고, 더 큰 사이즈의 제목이 생겨도 유연하게 대응할 수 있게 됐습니다. 

 

 

행간에 따라 두 가지 본문 스타일

 

처음에는 라벨, 버튼, 테이블 등 용도에 따라 텍스트 스타일을 정하는 방향으로 체계를 잡았습니다. 하지만  이 방법은 컴포넌트마다 스타일이 늘어나 관리도, 사용도 어려웠습니다. 그래서 UI 요소에 맞도록 행간이 좁은 스타일인 Compact와, 줄글을 위해 행간이 넓은 스타일인 Body 두 가지로 본문 스타일을 나눴습니다. 

 

Body와 Compact의 글자 크기는 동일하지만, Line heights 값을 다르게 발행해 행간에 차이를 뒀습니다. UI와 줄글 각각에 알맞게 대응할 수 있으면서, 관리 및 유지보수도 수월해졌죠. 이 외에 피그마 배리어블(Figma variable)을 활용해 기기의 해상도별 텍스트의 반응형 처리를 손쉽게 만드는 등 "어떻게 하면 디자인 시스템을 더욱 효율적으로 활용할 수 있을까?"라는 질문에 답하기 위해 여러 각도로 고민했습니다. 

 

 

마치며

 

이렇게 프로젝트 초기의 다양한 시행착오를 토대로 활용도 높은 텍스트 스타일 체계를 구축했습니다. 정답이 있는 과정이 아니기에 앞으로도 더 나은 방향을 고민하며 스캐폴드 디자인 시스템을 발전시켜 나가려 합니다. 디자인 시스템 구축에 정답은 없지만, 우리의 고민이 더 나은 시스템을 만드는 데 도움이 된다면 좋겠습니다.