KRDS 디자인 토큰 Tailwind CSS 적용 방법 - 17px 폰트, 색상 시스템

공공기관 프로젝트에서 Tailwind CSS 쓰면서 KRDS 디자인 토큰 적용해본 적 있어요?

"어... 기본 폰트 사이즈가 다른데요?"

맞아요. Tailwind는 16px 기준인데, KRDS는 17px 기준이에요. 색상 체계도 다르고.

오늘은 HANUI에서 이걸 어떻게 처리했는지 얘기해볼게요.

문제: 16px vs 17px

Tailwind 기본:

KRDS 기본:

그냥 html { font-size: 17px; } 하면 되지 않냐고요?

안 돼요. Tailwind spacing 전체가 틀어져요. p-4가 16px이 아니라 17px이 되고, 전부 이상해져요.

해결: 분리

HANUI는 이렇게 처리했어요:

• spacing: 16px 기준 유지 (Tailwind 기본)
• font-size: px 고정값으로 KRDS 기준 적용

Tailwind preset에서:

사용할 때:

spacing은 그대로 p-4 = 16px, m-8 = 32px 유지돼요.

KRDS 색상 체계

KRDS 색상은 숫자 스케일이에요:

근데 매번 "primary-50이 뭐더라?" 찾기 귀찮잖아요.

해결: 시맨틱 토큰

HANUI는 두 가지 방식 다 지원해요:

1. 숫자 스케일 (정확한 색상)

2. 시맨틱 토큰 (용도별)

시맨틱 토큰 매핑:

토큰	라이트 모드	다크 모드
base	50	50
surface	5	95
text	60	20
border	20	80

다크 모드 할 때 편해요. krds-primary-text 쓰면 자동으로 모드에 맞는 색상 나와요.

구현 구조

1. CSS 변수 정의

2. Tailwind Preset

3. 사용

Gray 스케일

KRDS Gray는 0부터 100까지 있어요:

시맨틱 토큰도 있어요:

반응형 타이포그래피

KRDS는 모바일/PC 폰트 크기가 달라요:

토큰	모바일	PC (1024px+)
display-lg	44px	60px
display-md	32px	44px
heading-xl	28px	40px
heading-lg	24px	32px

HANUI는 CSS 변수 + 미디어쿼리로 처리했어요:

사용할 때:

lg:text-6xl 이런 거 안 써도 돼요.

설정 방법

이거 실행하면:

1. variables.css 복사됨 (CSS 변수)
2. tailwind.config에 preset 추가됨

끝.

커스터마이징

브랜드 색상 바꾸고 싶으면:

CSS 변수 방식이라 쉽게 바꿀 수 있어요.

마무리

정리하면:

• spacing: 16px 기준 유지 (Tailwind 기본)
• font-size: px 고정값으로 KRDS 17px 기준 적용
• 색상: 숫자 스케일 + 시맨틱 토큰 둘 다 지원
• 다크 모드: CSS 변수로 자동 처리
• 반응형 타이포: CSS 변수 + 미디어쿼리

이거 직접 세팅하면 반나절은 걸려요.

이거 한 줄이면 끝.