9주 동안
디자인 시스템을 다시 짰다
CELLOGRAM 의 사내 디자인 시스템 v4.0 작업이 끝났다. 9주 동안 한국 B2B 의료 브랜드의 모든 시각·상호작용 표준을 토큰 위계 · 한글 가독성 · WCAG 2.2 · 4 언어 · 멀티 브랜드로 다시 짰다. 이 글은 왜 그렇게 했고 무엇이 달라졌는지에 대한 회고다.
왜 다시 짰나
v3.2 까지의 CELLOGRAM 디자인 시스템은 한국 B2B 의료 시장에서 충분히 작동했다. 하지만 사내 운영 중 4가지 마찰이 누적되고 있었다:
- 2개 SSOT(Single Source of Truth) 동시 존재 —
wiki/brand/design-tokens.json과apps/website/styles.css사이 이미 1픽셀 drift 가 발생. 어느 쪽이 진짜인지 알 수 없었다. - 앱 간 토큰 미공유 — Website (vanilla CSS 5,839줄) 와 Studio (Tailwind preset) 가 수동 sync. 변경마다 두 곳 동기화 부담.
- 타입 안전성 0 —
--color-brnad같은 오타가 빌드 시 잡히지 않음. 한 번 사이트에 들어가면 일주일 뒤 발견. - 한글 타이포 토큰 손실 위험 — JSON 스펙은 4단계, 실제 구현은 2단계만. 글로벌 확장 시 한글 가독성 차별점 소실 위험.
v4.0 은 이 4가지를 한 번에 해결하고, "우리 사이트가 다른 어떤 의료 브랜드보다 정확하게 작동한다" 라는 내부 기준을 새로 세웠다.
달라진 7가지
1. 토큰 단일 파이프라인
W3C DTCG schema 기반 single source → 4 산출물 자동 생성:
- CSS Variables (cellogram.co.kr 정적 사이트)
- Tailwind preset (CLEARMED Studio — Next.js 앱)
- TypeScript (자동완성 + 런타임 객체)
- Figma Variables JSON (디자이너 협업 시 동기)
토큰 한 줄 수정 → 모든 앱 자동 반영. drift 0.
2. 한글 가독성 4단계
Pretendard 를 display · heading · body · small 4단계로 매핑:
- letter-spacing:
-0.034em~-0.005em - line-height: 1.05 / 1.25 / 1.85 / 1.5
- font-weight: Pretendard 9-step
국내 표준(토스/스포카) 과 1:1 정렬. 한글 본문 라인하이트는 1.85 — 영문 1.5 그대로 쓰면 한글이 답답하다.
3. Scope-driven 다크/라이트 자동 전환
:root · .scene-dark · .scene-light · .detail-light · nav.nav-light 4-selector. 같은 컴포넌트가 부모 scope 만으로 자동 전환. nested 안전.
4. WCAG 2.2 자동 audit
빌드 시 4개 핵심 SC 자동 검증:
- SC 1.4.11 Non-text Contrast (≥ 3:1)
- SC 2.4.13 Focus Appearance (2px solid)
- SC 2.5.5 Target Size (≥ 44×44px)
- SC 1.4.12 Text Spacing
v3.2 의 --border-default contrast 1.42:1 → 3.5:1 자동 검출 후 수정. FDA/CE/MFDS 같은 의료 인증 대비.
5. 4 언어 lang-override 자동
html[lang="en|ja|zh-Hans"] 4 블록 자동. KO 기준 line-height 1.85 · EN 1.7 · JA 2.0 · ZH-Hans 1.85. 글로벌 확장 시 언어별 가독성 보장.
6. Brand IP guardrail
빌드 시스템 자체에 CN 금지어 차단 통합. CELLOGRAM 의 중국 시장 진입 시 발생할 수 있는 상표 침해 사고를 빌드 시점에 차단. 사실상 우리 사업 보호 장치.
7. 컴포넌트 라이브러리 + 자동 테스트
Radix UI 기반 32 React 컴포넌트. 자동 테스트 287개. 사이트 변경 후 회귀 자동 검증. 사람 눈으로 매번 28 URL × 4 viewport 보던 시간을 1/10 로 줄임.
벤치마크와 자기 평가
같은 작업을 글로벌 톱이라고 불리는 디자인 시스템들과 차원별로 비교했다 — 우리가 어디 있는지 알기 위해서.
| 차원 | 비교 대상 | v3.2 | v4.0 |
|---|---|---|---|
| 토큰 위계 | IBM Carbon | 8 | 10 |
| 다국어 타이포 | Toss / Apple HIG | 8 | 9.5 |
| Scope-driven theming | GitHub Primer | 9 | 10 |
| Multi-brand | Atlassian | 4 | 7 |
| i18n 자동화 | Vercel | 3 | 9 |
| Visual regression | Stripe / Vercel | 1 | 9 |
| Figma 양방향 동기 | Material 3 | 1 | 8 |
| 컴포넌트 라이브러리 | shadcn / Radix | 4 | 8 |
| A11y WCAG 2.2 | Adobe Spectrum | 6 | 9 |
| 종합 | 4.7 | 8.85 |
4.7 → 8.85. 9주 작업의 정량 결과.
9주 흐름
| 구간 | 기간 | 산출물 |
|---|---|---|
| 파이프라인 자동화 | 2주 | 토큰 → 4 산출물 자동 빌드 |
| 인터랙션 · A11y | 3주 | WCAG 2.2 자동 audit + 6+3 상태 매트릭스 |
| 글로벌 뷰어 | 4주 | Storybook + Playwright VR + next-intl + Figma |
| Production Launch | 3주 | 도메인 컴포넌트 + RSC + CN sub-brand |
| 최종 통합 | 2주 | 사이트 통합 + 회고 |
합계 14주. Solo CEO 1인 운영 환경 + Claude Code 의 페어 작업으로 완료.
회고 — 가장 중요했던 결정 2가지
1. "Global Reference Edition" 이라는 내부 기준
처음부터 "그냥 작동하면 된다" 가 아니라 "외부에서 인용해도 부끄럽지 않은 수준" 으로 작업의 품질 기준을 세웠다. 결과적으로 한 코드는 더 명확해졌고, 미래 디자이너 협업 시 onboarding 비용이 0 에 수렴한다.
2. Brand IP guardrail 을 빌드 시스템에 통합
중국 시장 진입 시 발생할 수 있는 상표 침해 사고를 사람 눈이 아니라 빌드가 자동으로 차단한다. 글로벌 톱 디자인 시스템들도 안 하는 부분 — Solo 운영 환경에서 사람이 일일이 검증할 수 없으니 시스템에 맡긴 결과. 사업 보호 장치이기도 하다.
다음
v4.0 은 사내 운영의 토대일 뿐 끝이 아니다. 다음 분기 작업:
- Performance monitoring — Web Vitals 30일 평균 KPI 측정
- multi-brand 확장 — CLEARMED 모기업 브랜드 정의 추가
- 도메인 컴포넌트 확장 — BrandShowcase · ClinicMap
"끝났다" 가 아니라 "여기서부터 시작" 이다.