디자인 시스템

Rails + Inertia.js + Svelte 5 기반으로 여러 프로젝트를 운영하다 보면 하나의 고질적 문제가 생긴다. 각 프로젝트마다 색상, 타이포그래피, 간격 등의 디자인 기준이 제각각이라는 점이다. 어떤 프로젝트는 tailwind.config.js에 체계적으로 정리되어 있고, 어떤 프로젝트는 bg-[#3182F6] 같은 하드코딩이 넘쳐난다. 이번에 전체 프로젝트를 대상으로 디자인 토큰 감사(audit)를 하고, 미적용 프로젝트에 체계를 잡은 과정을 기록한다. 1. 현황 감사: 8개 프로젝트 디자인 시스템 점검 먼저 모든 Svelte + Inertia.js 프로젝트를 대상으로 4가지 기준을 확인했다. 기준 확인 항목 UI 컴포넌트 components/ui/ 디렉토리 존재 여부와 컴포넌트 수 디자인 토큰 tokens.css 또는 CSS 변수 정의 파일 존재 테마 시스템 theme.ts, tailwind.config.js의 색상/타이포 확장 Storybook .storybook/ 디렉토리와 stories 파일 감사 결과 프로젝트 A ✅ 토큰 + Storybook + 카테고리별 컴포넌트 → 완전 적용 프로젝트 B ⚠️ 18개 UI + design-system 문서 있으나 토큰 파일 없음 프로젝트 C ⚠️ 22개 UI + theme.ts 있으나 토큰 체계 없음 프로젝트 D ❌ 15개 UI 있으나 토큰/테마 없음 (보일러플레이트) 프로젝트 E ❌ 5개 UI만, 토큰/테마 없음 프로젝트 F ❌ 도메인별 컴포넌트만, 공통 UI 없음 프로젝트 G ❌ 1개 UI만, 사실상 디자인 시스템 없음 프로젝트 H ❌ 프론트엔드 구조 자체 미완성 8개 중 완전 적용 1개, 부분 적용 2개, 미적용 5개. 예상보다 심각했다. ...

디자인 시스템이 어느 정도 잡힌 프로젝트에서 레퍼런스 앱을 받았을 때, “완전히 똑같이"가 아니라 “구성(composition)만 동일하게” 적용하고 싶었다. 이 글은 그 과정을 정리한 기록이다. 배경 기존 프로젝트에는 이미 다음이 갖춰져 있었다: 23개 공유 컴포넌트 (8개 카테고리: layout, navigation, input, overlay, card, data-display, social, feedback) CSS Custom Properties 기반 디자인 토큰 (colors, typography, spacing, radius, shadows, glassmorphism) Storybook 10 + Svelte 5 환경 (51개 story variants) 다크 테마 글래스모피즘 디자인 여기에 디자이너가 참조용으로 보내준 레퍼런스 앱 이미지를 분석해서, 기존 디자인을 깨지 않으면서 구조적 패턴만 흡수하는 작업을 진행했다. ...