KRDS 적용 기획

KRDS 적용 기획

목표

@my-lab/ui는 shadcn/Radix API를 유지하면서 KRDS의 토큰, 접근성, 레이아웃, 선명한 화면 모드 기준을 테마 레이어로 수용한다.

적용 원칙

• KRDS HTML Component Kit를 React로 그대로 복제하지 않는다.
• Radix의 접근성 동작과 shadcn의 작은 컴포넌트 API를 유지한다.
• KRDS token source는 KRDS-uiux/krds-uiux의 tokens/transformed_tokens.json로 둔다.
• Figma @krds는 시각 검수와 네이밍 확인에 사용한다.
• 컴포넌트 토큰은 KRDS 원칙에 따라 코드에서 정의한다.

참조 리소스

• KRDS 디자인 토큰: https://www.krds.go.kr/html/site/style/style_07.html
• KRDS 레이아웃: https://www.krds.go.kr/html/site/style/style_05.html
• KRDS 선명한 화면 모드: https://www.krds.go.kr/html/site/style/style_09.html
• KRDS GitHub: https://github.com/KRDS-uiux/krds-uiux
• KRDS Figma: https://www.figma.com/@krds

성공 기준

• Astro 문서에서 기획, 작업 계획, 토큰 매핑, 적용 현황을 확인할 수 있다.
• Storybook에서 KRDS 토큰과 적용 컴포넌트 상태를 확인할 수 있다.
• Button, Input, Select, Card, Dialog, Tooltip이 KRDS component token을 사용한다.
• high contrast 상태에서 텍스트, 경계선, 표면 계층이 별도 토큰으로 전환된다.