Design Token

• Design Token은 디자인 결정을 플랫폼에 의존하지 않는 이름과 값으로 표현한 최소 단위
• 색상, 간격, 글꼴, 반경, 그림자 같은 시각 규칙을 코드와 디자인 도구 사이에서 공유하기 위한 공통 언어
• 특정 화면의 UI 구조가 아니라 여러 화면과 플랫폼에서 반복 사용되는 스타일 결정을 담는 디자인 시스템 데이터

해당 개념이 필요한 이유

• 디자이너가 정한 색상, spacing, typography를 Flutter, Web, iOS, Android에서 같은 의미로 쓰기 위해 필요하다.
• #ff8a65 같은 원시값을 코드 곳곳에 직접 쓰지 않고 color.background.brand 같은 의미 있는 이름으로 관리하기 위해 필요하다.
• light/dark mode, 브랜드 테마, 접근성 수정처럼 전역 디자인 변경이 생겼을 때 한 곳에서 갱신하기 위해 필요하다.

AS-IS

Container(
  color: const Color(0xffff8a65),
  padding: const EdgeInsets.all(16),
  child: Text(
    '로그인',
    style: TextStyle(
      color: Color(0xff222222),
      fontSize: 20,
    ),
  ),
)

TO-BE

Container(
  color: PencilTokensLight.colorBackgroundBrand,
  padding: EdgeInsets.all(PencilTokensLight.dimensionSpacingMd),
  child: Text(
    '로그인',
    style: TextStyle(
      color: PencilTokensLight.colorTextPrimary,
      fontSize: PencilTokensLight.dimensionFontTitle,
    ),
  ),
)

Design Token이 담는 것

Design Token은 “버튼을 어디에 둘지” 같은 화면 배치 자체보다, “브랜드 배경색은 무엇인지”, “카드 반경은 몇 px인지”, “본문 글꼴은 무엇인지” 같은 반복 가능한 디자인 결정을 담는다.

예시는 다음과 같다.

{
  "color.background.brand": "#ff8a65",
  "color.text.primary": "#222222",
  "dimension.card.radius": 12,
  "font.family.ui": "Pretendard"
}

이 값들은 그대로 앱에 들어가기보다, 보통 DTCG 같은 표준화 포맷으로 정규화된 뒤 플랫폼 코드로 변환된다.

현재 프로젝트에서의 Design Token

현재 프로젝트에서는 design/ohmybaby.pen 안의 variables가 디자인 토큰의 원본에 가깝다. extract-pencil-tokens.mjs가 Pencil variables를 읽고, color/number/string 값을 token JSON으로 변환한다.

이후 Style Dictionary가 그 token JSON을 읽어 Flutter에서 사용할 Dart 상수 파일을 만든다.

sequenceDiagram
    autonumber
    participant Pen as ohmybaby.pen variables
    participant Extractor as extract-pencil-tokens.mjs
    participant Json as DTCG token JSON
    participant SD as Style Dictionary
    participant Dart as Flutter Dart constants
    Pen->>Extractor: 디자인 변수 읽기
    Extractor->>Json: 토큰 JSON 생성
    Json->>SD: 플랫폼 변환 입력
    SD->>Dart: Dart 상수 생성

참고 문서

• Style Dictionary - Design Tokens
• Design Tokens Community Group