타이포그래피 시스템을 다시 세우는 과정

디자인 시스템 재정비 기록

Nov 20. 2025

디자인 시스템은 시간이 지나면 스타일이 누적되고, 여러 디자이너의 작업 방식이 뒤섞이면서 일관성이 흐트러지기 쉽다. 이번 작업은 그동안 쌓여 있던 텍스트 스타일을 분석하고, 역할 기반의 구조로 재정비한 과정과 결과를 기록한 것이다.

정리 과정에서는 커서(CURSOR)와 Gemini를 함께 사용해 사용 패턴을 분석하고, 기존 스타일의 문제점을 효율적으로 찾아내는 데 도움을 받았다.

커서를 통해 현재 문제점을 분석했다

첫 번째 문제는 필요 이상으로 많은 텍스트 스타일이었다. Regular, Medium, Bold 섹션 안에 중복 정의가 많았고, 스타일 이름과 실제 굵기가 불일치하는 경우도 있었다. 이름만 보고 용도를 판단하기 어려운 구조였다.

두 번째는 Figma에서 표시된 라벨과 실제 스타일 속성이 일치하지 않는 항목들이 다수 존재했다는 점이다. 여러 번의 수정·복사가 반복되면서 라벨은 남고 속성만 바뀐 스타일들이 누적된 결과였다.

세 번째는 속성은 같은데 이름만 다르게 존재하는 중복 스타일이었다. 유지보수와 디자인 교육 과정 모두에서 혼란을 만드는 요소였다.

커서와 Gemini를 활용해 스타일 속성값을 비교하고 라벨 불일치 여부를 확인하는 과정을 자동화하면서, 사람이 직접 하나씩 검토하던 시간의 대부분을 줄일 수 있었다.

디자이너 여러 명의 시안을 비교해 사용 패턴을 정리했는데, 각자 선호하는 방식을 사용했음에도 공통된 원칙 하나가 도출되었다.

텍스트의 역할과 상태가 굵기를 결정한다는 점이었다.

강조해야 하는 정보는 Bold

핵심 정보는 Medium

부가 설명이나 관련 맥락은 Regular

이 패턴은 전체 시안에서 일관되게 나타났다. 커서에서 화면별 텍스트 레이어를 추출하여 Gemini로 패턴을 비교한 과정이 정리 속도를 높여주었다. 결국 굵기 자체보다는 텍스트의 역할이 기준이 되어야 한다는 결론에 이르렀다.

정리된 시스템은 역할 기반으로 다시 구성했다.

불필요한 스타일을 제거하고 제목, 본문, 설명처럼 기본적인 레벨 중심으로 재구조화했다.

Large Title

Title 1

Title 2

Title 3

Headline

Body

Callout

Subhead

Footnote

Caption 1

Caption 2

Overline

각 스타일은 크기, 굵기, 줄간, 자간을 명확하게 정의하고 디자인 툴에서도 동일한 구조로 관리할 수 있도록 했다. 역할 기준으로 선택할 수 있도록 구조를 재정돈한 것이 핵심이다.

기본 스타일을 기준으로 하되, 특정 상황에서 굵기를 조정할 수 있도록 했다.

예를 들어 Title 3는 Medium이 기본값이지만, 화면의 특성상 강조가 필요하다면 Bold로 변경할 수 있다. 단, 이러한 값 변경이 반복되면 새로운 공식 스타일 추가를 고려한다.

이 규칙은 시스템을 단단하게 유지하면서도 실제 작업에서 유연하게 대응할 수 있는 장치다.

스타일은 type scale 파일로 정리했고, 개발자는 해당 토큰만 불러와 동일한 스타일을 사용할 수 있도록 구성했다.

문서, 디자인 툴, 코드가 같은 구조를 공유하도록 만드는 것이 시스템 일관성 유지의 핵심이다.

다음 단계는 Tokens Studio를 활용해 타이포그래피 속성을 토큰으로 관리하는 작업이며, 이를 통해 유지보수 안정성과 확장성을 더 높일 예정이다.

디자인 시스템의 목적은 스타일을 늘리는 것이 아니라 팀 전체가 같은 기준으로 일할 수 있도록 판단 비용을 줄여주는 구조를 세우는 데 있다.

이번 타이포그래피 시스템 재정비는 그 구조를 다시 만드는 과정이었다.

AI 도구를 활용해 분석 속도를 높이고 불일치 지점을 자동으로 탐색할 수 있었던 점도 큰 도움이 됐다.

비슷한 고민을 가진 디자이너들에게 이 기록이 작은 참고가 되길 바란다.

keyword