CSS 토큰 추출

CSS Token Extractor

스타일시트에서 색·간격·모서리·글꼴 값을 뽑아 커스텀 속성 세트를 제안합니다.

스타일시트를 읽어 그 안의 색·길이·모서리·글꼴·그림자를 전부 세고, 많이 쓴 순서대로 `--변수`를 제안합니다. 그다음 그 변수를 쓰도록 스타일시트를 다시 쓸 수도 있습니다. CSS 정렬기의 토크나이저 위에 올린 선언 스캐너이지 완전한 파서도 린터도 아닙니다. 파일에 어떤 값이 들어 있는지를 알려 주는데, 그게 손으로 하면 지겨운 부분입니다.

🔒 브라우저 안에서만 처리csstokensdesign-systemrefactor

CSS 입력

.css 파일 놓기

이 탭 안에서만 읽습니다.

토큰 제안

접두사 (선택)

--app-color-1 처럼 앞에 붙습니다.

:root {
  /* 색 */
  --color-1: #6366f1;
  --color-2: #fff;
  --color-3: #1f2937;
  --color-4: rgba(0,0,0,.06);
  --color-5: rgba(0,0,0,.08);
  --color-6: #111827;
  --color-7: #4b5563;
  --color-8: #4f46e5;
  --color-9: #eef2ff;
  --color-10: #4338ca;
  --color-11: #e5e7eb;
  /* 글꼴 */
  --font-pretendard: "Pretendard", system-ui, sans-serif;
  /* 글자 크기 */
  --text-1: 12px;
  --text-2: 14px;
  --text-3: 20px;
  /* 행간 */
  --leading-1: 1.6;
  /* 간격 */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  /* 모서리 */
  --radius-1: 8px;
  --radius-2: 12px;
  --radius-3: 999px;
  /* 그림자 */
  --shadow-1: 0 1px 2px rgba(0,0,0,.06);
  --shadow-2: 0 8px 24px rgba(0,0,0,.08);
}

선언

색

간격 값

모서리

글꼴

이미 있는 변수

색 11

#6366f1×2
#fff×2
#1f2937×1
rgba(0,0,0,.06)×1
rgba(0,0,0,.08)×1
#111827×1
#4b5563×1
#4f46e5×1
#eef2ff×1
#4338ca×1
#e5e7eb×1

간격 5

4px×1
8px×3
16px×4
24px×3
32px×1

모서리 3

8px×1
12px×1
999px×1

글자 크기 3

12px×1
14px×2
20px×1

행간 1

1.6×1

글꼴 1

"Pretendard", system-ui, sans-serif×1

그림자 2

0 1px 2px rgba(0,0,0,.06)×1
0 8px 24px rgba(0,0,0,.08)×1

어떻게 뽑는지

· CSS 정렬기의 토크나이저로 읽으므로 url()이나 문자열 안의 #fff는 색으로 세지 않고, calc()는 통째로 둡니다.
· 색은 HEX로 정규화해 #FFF·white·rgb(255 255 255)를 하나로 합치고 쓰인 횟수를 셉니다. 이름은 많이 쓴 순서대로 번호를 붙이니 --color-1은 대개 브랜드색이나 본문색입니다. 이름은 직접 바꾸세요.
· 간격은 margin·padding·gap·inset 계열에서만, 모서리는 border-radius에서만 가져오고 크기순으로 번호를 붙입니다. width·height는 리듬이 아니라 치수라 빼놓습니다.
· JSON은 W3C Design Tokens(DTCG) 초안 형식($type·$value)입니다. "var()로 바꾼 CSS"는 값이 정확히 일치하는 자리만 바꾸고 나머지는 한 글자도 건드리지 않습니다.

뽑은 색으로 단계를 만들려면 색상 단계 생성, 다크 모드는 다크 모드 팔레트를 쓰세요.

사용 방법

스타일시트를 붙여넣거나 파일을 놓습니다
한 번에 한 파일입니다. 처음 들어 있는 예시는 자기 CSS를 가져오기 전에 결과가 어떤 모양인지 보라고 넣어 둔 것입니다.
토큰보다 개수를 먼저 봅니다
열두 개면 될 파일에 색이 마흔 개 있다는 것 자체가 발견입니다. 아래 묶음 목록은 값마다 쓰인 횟수를 함께 보여 주므로, 이름을 붙일 만한 것이 위에 오고 한 번만 쓰인 값 — 대개 실수이거나 죽은 규칙 — 이 아래에 남습니다.
프로젝트에 필요하면 접두사를 정합니다
비워 두면 `--color-1`이 되고, `app`을 넣으면 `--app-color-1`이 됩니다. 어느 쪽이든 번호는 사용 빈도 순위일 뿐 뜻이 아니므로, 각 값이 무엇에 쓰이는지 파악한 뒤에 이름을 바꾸세요.
변수·JSON·다시 쓴 파일 중에서 고릅니다
CSS 출력은 파일 맨 위에 붙일 `:root` 블록입니다. JSON은 W3C Design Tokens 초안 형식이라 빌드 단계나 디자인 도구에 넘길 수 있습니다. 다시 쓴 파일은 원본에서 값이 정확히 일치하는 자리만 `var()`로 바꾸고 나머지는 건드리지 않은 것입니다. 커밋 전에 diff를 보세요.

자주 묻는 질문

다시 쓴 CSS를 그대로 배포해도 되나요?

먼저 diff를 보세요. 치환은 텍스트 기준이고 정확히 일치할 때만 하므로 모르는 값을 망가뜨리지는 않습니다. 다만 똑같이 생긴 회색 둘이 서로 다른 뜻일 수 있다는 것은 알 수 없습니다. 테두리 색과 비활성 라벨이 우연히 같은 16진수라면 같은 변수를 받게 되고, 나중에 누군가 한쪽만 바꾸려다 문제가 생깁니다. 이걸 잡아내는 단계가 토큰 이름을 제대로 붙이는 일이고, 그건 사람이 해야 합니다.

간격 목록에 width와 height가 왜 없나요?

일부러 뺐습니다. 간격은 리듬입니다. margin·padding·gap·inset이 그렇고, 디자인 시스템이 토큰으로 만드는 것도 그쪽입니다. width와 height는 치수입니다. 240px 사이드바와 44px 터치 영역은 같은 스케일 위의 두 점이 아니고, 목록에 넣으면 정작 스케일에 해당하는 값들이 묻힙니다.