디자인 시스템 개선 #2 – Typography 토큰 구조 정리 (with IBM Carbon)
YJ
Field Notes
카테고리
- 디자인시스템
- 실무
두번 째로 손을 댄 영역은 Typography 토큰 구조입니다.
기존 시스템은 잘 동작하고 있었지만, 의미와 표현이 섞여 있었고 Text style과 토큰의 역할 경계가 애매했으며
AI가 이해하기에는 다소 모호한 구조였습니다.
그래서 이번에는 "사람 · 코드 · AI가 동시에 이해할 수 있는 구조"를 목표로 타이포그래피 토큰을 다시 정리해보기로 했습니다.
기존 문제점
기존 디자인 시스템에서는 다음과 같은 고민이 있었습니다.
•
strong, secondary 같은 강조가 의미인지 표현인지 헷갈림
•
카드 타이틀, 섹션 타이틀이 Text style 이름으로만 구분
•
font-size, font-weight 같은 값이 직접 노출됨
"왜 이 텍스트가 이 크기인지" 설명하기 어려움
즉, 보이기는 하는데, 설명하기는 어려운 구조
IBM Carbon Typography 구조 참고
이 과정에서 IBM Carbon 디자인 시스템을 참고했습니다.
Carbon을 보면 타이포그래피가 다음과 같이 나뉘어 있었습니다.
Base (primitive)
font-size
line-height
font-weight
semantic layer
heading
body
labelhelper
font-size
line-height
font-weight
semantic layer
heading
body
labelhelper
Carbon은 텍스트 스타일을 UI에서의 역할(role) 중심으로 묶어 제공하고 있었습니다.
내가 선택한 방향
Carbon 구조를 그대로 복사하지는 않았지만, 개념은 최대한 비슷하게 가져가되 우리 제품에 맞게 단순화 시켰습니다.
1. base/font — 값만 관리
font-size/xs
font-size/sm
font-size/md
font-weight/thin
font-weight/regular
font-weight/medium
font-weight/bold
font-size/sm
font-size/md
font-weight/thin
font-weight/regular
font-weight/medium
font-weight/bold
•
px 값을 직접 쓰지 않음
•
base는 최대한 적게 유지
•
"재료" 역할만 수행
2.
semantic/typography — 의미만 정의
title/card
title/section
title/page
body/default
ui/label
ui/helper
title/section
title/page
body/default
ui/label
ui/helper
여기서 중요한 원칙은
semantic은 '텍스트가 무엇인지'를 설명하고 어떻게 보일지는 말하지 않음
3.
Text style은 semantic의 구현체
실제 Figma에서 사용하는 Text style은 이렇게 구성했습니다.
typography/title/card
├ font-size → font-size/sm
├ line-height → line-height/sm
└ font-weight → medium
그리고 이 Text style이 의미하는 바를 semantic/typography/title/card로 설명하는 구조입니다.
❔strong은 언제 쓰는가?
헷갈렸던 부분이 strong이었습니다. 기본을 medium으로 다 맞췄는데, 그럼 기존에 존재하던 strong은 언제 쓰는 건지 ?
결론은
medium = 기본 상태
strong = 같은 의미 + 일시적인 강조
즉, strong은 의미가 바뀐 게 아니라 중요도가 올라간 상태입니다.
그래서 title/card-strong 같은 semantic은 만들지 않고 강조는 component variant 또는 text style variant로 처리하기로 하였습니다.
이 방식이 의미의 방대함을 막고 AI 자동화 규칙을 만들기에도 훨씬 안정적이기도 할 것 같았습니다.
Text style vs Component variant 기준
이번 정리에서 명확히 한 기준은 다음과 같습니다.
•
Text style
- 텍스트 자체의 역할
- size / weight / line-height
- "이 문장이 무엇인가"
- 텍스트 자체의 역할
- size / weight / line-height
- "이 문장이 무엇인가"
•
Component variant
- 아이콘 유무
- 값(value) 존재 여부
- 강조 상태
- 정렬, 간격
- 아이콘 유무
- 값(value) 존재 여부
- 강조 상태
- 정렬, 간격
의미는 Text style, 맥락은 Component variant
🤖 AI 자동화 관점에서의 장점
이 구조의 가장 큰 장점은 AI가 px나 bold를 몰라도 화면을 구성할 수 있다는 점이라는 것입니다.
예를 들면:
{
"component": "Card",
"textRole": "title"
}
AI는 내부 규칙으로:
title + card → semantic/typography/title/card
을 선택하고, 그 semantic에 연결된 Text style을 적용합니다.
결과적으로 디자이너는 의미로 말하고 AI는 규칙으로 해석하고 구현은 일관되게 나온다 !
정리하며
이번 타이포그래피 토큰 정리는 디자인 시스템을 언어처럼 다시 설계한 작업에 가까웠습니다.
base는 단순하게, semantic은 명확하게, 표현은 컴포넌트에서 라는 내용을 명심하면서,,
IBM Carbon을 참고하되 우리 서비스와 AI 자동화 목표에 맞게 구조를 조정한 것이 이번 개선의 핵심이었습니다.
Subscribe to 'yj-archive'
Subscribe to my site to be the first to receive notifications and emails about the latest updates, including new posts.
Join Slashpage and subscribe to 'yj-archive'!
Join Slashpage and subscribe to 'yj-archive'!
