토큰 참조
구현 기준자료형·alias·테마 매핑·변환 출력
검증 시나리오순환 참조·누락 토큰·테마 전환 검사
↗SI / ENGINEERING
여러 제품을 하나의 언어로
확장 가능한 디자인 시스템
디자인 토큰의 참조 구조와 컴포넌트 API를 함께 설계합니다. Figma 변수·테마·코드 패키지·접근성·버전 운영이 실제 제품에서 같은 규칙으로 작동하는 디자인 시스템을 구축합니다.
- DTCG tokens
- Figma variables
- Component contracts
- Accessibility / Visual regression
01INSIDE THE SYSTEM
핵심 동작을 구조로 설명합니다
원시 색상값에서 의미 토큰, 컴포넌트 토큰으로 이어지는 참조 그래프입니다. 테마는 의미 계층에서 바꾸고 컴포넌트는 역할 기반 토큰을 소비하도록 구성합니다.
구성도를 좌우로 이동해 상세 경로를 확인할 수 있습니다
02DESIGN & VALIDATION
구현 기준과 검증 조건을
같은 문서에 둡니다
프로젝트에서 합의할 구체적인 설계 항목과 검수 시나리오입니다.
컴포넌트 계약
구현 기준Figma variant ↔ props·상태·이벤트
검증 시나리오loading·error·긴 콘텐츠·키보드 동작
제품 적용
구현 기준버전·폐기 예고·이관 가이드
검증 시나리오대표 제품의 실제 화면으로 통합 검수
기술 구성과 검수 기준은 진단 결과·연동 환경·합의 범위에 따라 정합니다. 운영 환경에서 재현할 수 있는 검수 시나리오와 인수 자료를 함께 정의합니다.
03ENGINEERING APPROACH
구현에서 다루는
기술적 쟁점
화면에 보이는 기능부터 보이지 않는 실패 조건까지,
구축 단계에서 함께 검토합니다.
토큰을 값의 목록이 아닌 참조 그래프로 설계합니다
primitive → semantic → component 계층을 구분하고 색상·간격·타입·모션의 자료형과 별칭을 정의합니다. DTCG 형식을 검토해 도구 간 교환과 코드 변환을 구성하며, 순환 참조·누락 토큰·잘못된 타입을 빌드 단계에서 검사합니다. 브랜드·다크 모드 전환은 개별 화면 색상 덮어쓰기 대신 의미 토큰의 매핑으로 다룹니다.
Figma 속성과 코드 API를 같은 상태 모델에 맞춥니다
크기·변형·강조도·disabled·loading·error 상태를 컴포넌트 계약으로 정리합니다. Figma variant와 코드 props의 대응표를 두고 과도한 조합은 composition으로 분리합니다. Storybook 등 문서 환경에는 사용 예제뿐 아니라 제한 조건, 이벤트 계약, 콘텐츠 길이와 반응형 동작을 함께 기록합니다.
접근성과 회귀 검수를 컴포넌트 수준에 둡니다
키보드 순서, 포커스 이동, 이름·역할·상태와 오류 연결을 패턴별로 명시합니다. 자동 검사로 찾을 수 없는 대화상자 포커스 복귀나 콤보박스 키보드 동작은 시나리오로 검수합니다. 주요 상태·뷰포트·테마를 시각 회귀 기준으로 관리하되 의도된 변경과 결함을 구분하는 리뷰 절차를 둡니다.
제품 도입과 변경 비용까지 운영 규칙으로 만듭니다
패키지 버전, 변경 로그, 폐기 예고와 migration guide를 운영합니다. 토큰 이름 변경과 컴포넌트 API 변경의 영향 범위를 나누고, 기존 제품은 사용량이 높은 패턴부터 단계적으로 교체합니다. 변경 제안·디자인 검토·코드 검수·릴리스 책임을 정해 제품별 임의 복제가 다시 늘어나지 않도록 합니다.
04DELIVERY & HANDOVER
결과물은 명확하게
- 디자인 원칙, 토큰 정의와 테마·이름 규칙
- Figma 라이브러리, 합의한 코드 컴포넌트와 문서
- 대표 적용 화면, 상태·접근성 검수와 운영·전환 가이드
05BEFORE WE BEGIN
이 질문에서 시작합니다
- 적용할 제품군, 기존 Figma·프런트엔드 자산
- 지원 프레임워크, 브랜드·테마·언어의 수
- 처음 공통화할 화면과 라이브러리 운영 담당자
06HOW WE WORK
이해
목표와 현재 업무, 운영 환경을 살펴봅니다.
설계
기능과 우선순위, 연동 범위를 정리합니다.
구현
합의한 범위를 구현하고 중간 결과를 함께 확인합니다.
전환
검수, 배포, 운영 인수인계까지 준비합니다.
↗YOUR NEXT CHAPTER
다음 가능성의 기반을,
함께 만듭니다
완성된 기획서가 없어도 괜찮습니다.
지금 해결하고 싶은 문제부터 들려주세요.