디자인 시스템
디자인 토큰 버전 관리: 팀 협업에서 토큰 충돌을 방지하는 워크플로우
디자인 토큰 Git 기반 버전 관리, 시맨틱 버저닝 적용, 브레이킹 체인지 처리, Figma-코드 토큰 싱크, 팀 규모별 거버넌스 구조를 실무 관점에서 다룹니다.
디자인 토큰버전 관리디자인 시스템팀 협업거버넌스
블로그
주제별로 묶은 디자인 프로세스·도구·원칙 글입니다. 입문부터 운영까지 참고용으로 열람할 수 있습니다.
디자인 시스템 · 7건
디자인 시스템
디자인 시스템 마이그레이션: 레거시 CSS를 토큰 기반 시스템으로 전환하는 전략
하드코딩된 CSS 값을 디자인 토큰으로 전환하는 단계별 전략, 마이그레이션 우선순위 결정 방법, 팀 저항 최소화, 점진적 전환 패턴을 실무 관점에서 다룹니다.
디자인 시스템 마이그레이션디자인 토큰CSS 리팩토링레거시 전환프론트엔드
디자인 시스템
아이콘 시스템 설계 — SVG 스프라이트·컴포넌트·Figma 토큰 연동 전략
SVG 스프라이트 vs 인라인 컴포넌트 방식 비교, Figma에서 아이콘 토큰 관리, 빌드 자동화 파이프라인, 접근성 처리까지 확장 가능한 아이콘 시스템 실무 설계를 정리합니다.
아이콘 시스템SVG 스프라이트Figma디자인 토큰접근성
디자인 시스템
컴포넌트 문서화 전략 — Storybook으로 디자인 시스템 살아있게 만들기
컴포넌트 문서가 코드와 따로 노는 이유와 Storybook을 중심으로 문서, 테스트, 디자인 검증을 통합하는 실전 전략을 정리합니다.
Storybook컴포넌트 문서화디자인 시스템협업
디자인 시스템
타이포그래피 스케일 시스템 — 가독성과 위계를 동시에 잡는 설계
모듈러 스케일, 유체 타이포그래피, 줄 높이·자간 설정, 다국어 대응까지 팀이 일관되게 사용할 수 있는 타이포그래피 시스템 설계 원칙을 정리합니다.
타이포그래피디자인 시스템폰트스케일
디자인 시스템
다크모드 컬러 시스템 — Semantic Token으로 테마 분기 없애기
Primitive → Semantic 토큰 계층으로 다크모드를 구현하면 컴포넌트에 테마 분기 코드가 사라집니다. CSS Custom Property 바인딩과 Figma Variables 연동 전략을 정리합니다.
다크모드컬러 시스템디자인 토큰Figma VariablesCSS Custom Properties
디자인 시스템
디자인 토큰 네이밍과 테마 전략 — 확장 가능한 스케일
색·간격·타이포 토큰의 계층, 시맨틱 vs 프리미티브, 다크 모드·브랜드 변주를 코드와 Figma에 맞추는 방법을 정리합니다.
디자인 토큰테마Figma