KT UX Design System

문제

프로덕트가 많을수록 브랜드 일관성과 디자이너–개발자 핸드오프 비용이 커집니다. 일반 UI와 에이전트(AI) UI의 테마 분기, Figma 스펙의 하드코딩 파편화, 버전드 라이브러리로 소비 가능한 배포 체계가 동시에 필요했습니다.

솔루션

웹 전용 디자인 시스템으로 범위를 고정하고, 디자이너 토큰 동기화와 엔지니 컴포넌트 릴리스를 하나의 파이프라인으로 묶었습니다.

• primitive / semantic을 SSOT로, component 레이어는 레거시 호환용으로 유지
• CSS Variables + CVA/BEM 기본, Tailwind v4 `@theme`는 옵션 산출
• light / dark / light-agent / dark-agent를 `data-theme`으로 전환
• AI UI(Prompt* 등)를 같은 토큰·테마 체계 안에 통합
• Storybook 중심 검증과 Chromatic 시각 회귀, 시맨틱 버전 릴리스

결정의 포인트

• component 토큰 신규 참조를 금지해 장기 드리프트·잘못된 참조 비용을 줄임
• 색은 semantic, spacing·radius는 primitive로 테마 적응을 분리
• 네이티브를 아카이브로 분리해 main의 웹 완성도에 집중

성과

• 버전드 웹 라이브러리로 배포·소비 가능한 DS 구축
• 4테마 + AI 컴포넌트로 일반/에이전트 UI를 한 체계에서 지원
• MYKT에서 소비하고 KDS에서 설계·운영하는 이중 역할로 핸드오프 비용 절감

토큰 SSOT와 4테마 파이프라인을 설계·운영하며, 레거시 공존과 AI UI 통합까지 시스템을 유지·진화시키는 의사결정을 책임졌습니다.

Stack