토큰

디자이너가 디자인 토큰을 관리하지 않는 상태에서 개발자 주도로 토큰화를 시작하는 경우, 어떤 토큰을 언제, 어떻게, 어떤 수준까지 관리해야 하는지, 유지보수성과 협업 일관성을 확보하기 위한 전략적 판단 기준과 작성 가이드라인이 필요합니다. 특히 6년 이상 장기 프로젝트 또는 운영 시스템이라면, 초기 구조 설계의 깊이와 일관성이 전체 코드 품질에 결정적 영향을 줍니다.

아래는 해당 시나리오에 대한 전략 정리입니다.

⸻

📑 목차

1. 디자이너 미참여 상황: 토큰화 판단 기준
2. 디자인 토큰 범주별 작성 우선순위
3. Sass 기반 구현 가이드: @extend, @function 사용 전략
4. 토큰 가이드라인 예시 (컨벤션)
5. TL;DR

⸻

1. 디자이너 미참여 상황: 토큰화 판단 기준

상황 토큰 관리 여부 판단 기준 설명 단기 프로젝트 (≤6개월) ❌ 선택적 유지보수 부담 적음. 단순 CSS class 또는 utility 중심 구조 가능 중기/운영 프로젝트 (6개월~3년) ⚠️ 필수 요소만 토큰화 컬러, 타이포, 스페이싱, 브레이크포인트 우선 관리 장기/운영 시스템 (3년 이상 or 지속 운영 목적) ✅ 전 영역 토큰화 필수 디자인 변경 대응성 확보, 인수인계, 스케일 대응 위해 구조적 토큰화 필수

🧠 디자인 토큰은 개발자 혼자라도 초기에 작성해야 한다. 장기 프로젝트일수록 반드시 변수화를 통해 추상화된 디자인 시스템을 확보해야 함.

⸻

2. 디자인 토큰 범주별 작성 우선순위

토큰 범주 필요도 설명 색상(color) ✅ 필수 팔레트 정의, 역할 기반 변수($color-primary, $color-text-default) 타이포(type) ✅ 필수 $font-size-h1, $line-height-base, $font-weight-medium 등 정의 스페이싱(spacing) ✅ 필수 4px 계열: $space-1: 4px, $space-2: 8px, … 반응형(bp) ✅ 필수 $bp-sm: 576px, $bp-md: 768px, $bp-lg: 1024px 컴포넌트 상태(state) ⚠️ 권장 $state-hover, $state-focus-ring-color, $opacity-disabled 등 z-index, radius 등 ⚠️ 선택적 $z-modal, $radius-sm, $shadow-card 등은 확장 고려해 작성

⸻

3. Sass 기반 구현 가이드: @extend, @function 사용 전략

항목 전략 @extend 사용 ⚠️ 제한적으로 사용– 유틸리티 클래스 재사용(ex: %visually-hidden, %btn-base)에 적합– 구조 오염 위험 존재 (특히 중첩된 선택자 @extend 시) @mixin 사용 ✅ 적극 활용– 반복되는 스타일 그룹화(ex: focus ring, media query)– 인자 기반 커스터마이징 가능 @function 사용 ✅ 유틸리티 기반 사용– px → rem, fluid() 등 계산 처리 목적에 사용– 컴포넌트 논리 흐름에는 과도하게 사용하지 않도록 주의

💡 @extend는 semantic한 base class 추상화에만 사용, 공통 레이아웃/스타일에는 mixin을 중심으로 사용하는 것이 유지보수에 안전합니다.

⸻

4. 토큰 가이드라인 예시 (컨벤션)

토큰 종류 명명 규칙 예시 설명 색상 $color-surface-primary, $color-text-secondary 역할 기반 명명 사용. HEX 값이 아닌 의미로 정의 타이포 $font-size-h1, $line-height-body, $font-weight-semibold 시멘틱 용도 중심 명명 스페이싱 $space-1 = 4px, $space-3 = 12px 4px 계열로 통일. padding/margin에 모두 사용 반응형 $bp-sm = 576px, $bp-lg = 1280px media query mixin 내에서 사용 상태값 $state-hover-bg, $state-focus-ring 상태 스타일 전용 토큰 정의

예시: SCSS 설계 구조

// _tokens.scss $color-primary: #005fcc; $font-size-base: 1rem; $space-1: 4px;

// _mixin.scss @mixin focus-ring { outline: 2px solid $color-primary; outline-offset: 2px; }

@mixin respond($bp) { @if $bp == sm { @media (max-width: 576px) { @content; } } }

// components/_button.scss .btn { padding: $space-2 $space-3; font-size: $font-size-base; @include focus-ring; }

⸻

5. TL;DR • 디자이너가 토큰을 관리하지 않더라도 개발단에서 반드시 토큰화를 시작해야 한다, 특히 운영형/장기 프로젝트라면 필수. • 색상, 타이포, 스페이싱, 반응형 단위는 최소한으로 토큰화되어야 하며, 상태값도 컨벤션에 따라 추상화 필요. • Sass 환경에서는 @function, @mixin 중심 사용, @extend는 제한적으로 base class에만 활용. • 토큰 명명은 ‘역할 기반(Semantic)’ 방식을 따르고, 추후 Figma/디자인 연계가 가능하도록 설계.

⸻

필요하시다면, 해당 전략을 공통 스타일 가이드 문서, SCSS 템플릿, 또는 팀 내 토큰 관리 플로우 예시 (Notion/Figma 연동 기반) 형태로 정리해드릴 수 있습니다. 추가 요청 주세요!