CSS 변수 생성기
디자인 토큰에서 CSS 커스텀 속성을 생성하세요. 색상·타이포그래피·간격·테두리 반경을 시각적 에디터로 관리하고 :root 블록을 실시간 생성. 무료, 브라우저 기반.
사용 방법
- 변수 접두사를 설정합니다(기본값
—,—brand-등으로 변경 가능). - 각 그룹의 기본 토큰을 편집하거나 + 토큰 추가로 새 토큰을 추가합니다.
- 색상 토큰은 컬러 피커를 사용하거나 16진수 값을 직접 입력할 수 있습니다.
- 생성된 CSS 블록이 실시간으로 업데이트됩니다.
- 복사를 클릭해
:root { … }블록을 클립보드에 복사합니다.
디자인 토큰이란?
디자인 토큰은 색상 팔레트, 타입 스케일, 간격 리듬, 모서리 반경 등 디자인 결정의 유일한 진실의 원천입니다.
이를 :root 블록의 CSS 커스텀 속성으로 관리하면 전체 스타일시트에서 접근할 수 있게 됩니다.
토큰 하나를 변경하면 해당 토큰을 사용하는 모든 컴포넌트에 자동으로 반영됩니다.
토큰 그룹 설명
- 색상 — 브랜드 팔레트, 배경색, 텍스트 색상, 상태 색상, 컬러 피커 포함.
- 타이포그래피 — 폰트 패밀리 스택과 기본/스케일 폰트 크기.
- 간격 — 일관된 간격 스케일(4px, 8px, 16px 등).
- 테두리 반경 — 미묘한 둥글기부터 알약 형태까지 모서리 반경 값.
FAQ
CSS 커스텀 속성(CSS 변수)이란 무엇인가요?
CSS 커스텀 속성은 이중 하이픈 접두사를 가진 변수입니다(예: --primary-color: #3b82f6). :root 블록 안에 정의하고 스타일시트 어디서든 var(--primary-color)로 재사용할 수 있습니다. 전역 디자인 변경을 한 곳에서 빠르고 일관되게 처리할 수 있습니다.
변수 접두사란 무엇이며 어떻게 변경하나요?
접두사는 모든 변수명 앞에 붙는 문자열입니다. 기본값은 '--'로 표준 CSS 커스텀 속성 문법을 생성합니다. '--brand-'나 '--theme-' 등으로 변경하면 네임스페이스를 분리하여 이름 충돌을 방지할 수 있습니다.
새 디자인 토큰은 어떻게 추가하나요?
각 그룹(색상·타이포그래피·간격·테두리 반경) 내의 '+ 토큰 추가' 버튼을 클릭하고 변수명과 값을 입력합니다. 색상 토큰에는 컬러 피커도 제공됩니다. CSS 출력은 즉시 업데이트됩니다.
필요 없는 토큰을 삭제하려면 어떻게 하나요?
토큰 행 오른쪽의 × 버튼을 클릭하면 삭제됩니다. CSS 출력이 즉시 반영됩니다.
생성된 CSS를 프로젝트에 사용하려면 어떻게 하나요?
복사 버튼을 클릭해 :root 블록을 복사한 후 전역 스타일 파일(예: styles/global.css)에 붙여넣습니다. 컴포넌트 CSS에서 var(--token-name) 형식으로 토큰을 참조할 수 있습니다.