KRDS 디자인 시스템 · md 파일 하나

대한민국 정부 디지털서비스 디자인 시스템 KRDS의 디자인 토큰, 컴포넌트 마크업, CSS, JS를 외부 파일 의존 없이 md 파일 하나로 정리했습니다. 복사하거나 다운로드해서 AI 어시스턴트에게 넘겨 쓸 수 있습니다.

정부 디자인 시스템 · 단일 MD 파일

대한민국 정부 디지털서비스 디자인 시스템 KRDS의 디자인 토큰과 74개 컴포넌트, 그리고 실제로 동작하는 CSS·JS(아이콘·폰트까지 내장)를 외부 파일 하나 없이 이 문서 한 장에 담았습니다. 복사하거나 다운로드해서 AI 어시스턴트에게 그대로 넘기세요.

2.4MB 단일 파일 74종 컴포넌트 1,800+ 디자인 토큰 외부 의존 0개

복사에는 파일 용량 때문에 몇 초 걸릴 수 있습니다.

LIVE PREVIEW

적용하면 이런 느낌입니다

md 파일 안의 CSS·JS·마크업을 그대로 붙여 렌더링한 실제 화면입니다. 아래는 아이프레임이라 이 사이트 스타일과 완전히 분리되어 있고, 탭·아코디언은 직접 눌러볼 수 있습니다.

KRDS는 이미 krds.go.kr 웹사이트와 npm 패키지(krds-uiux)로 공개되어 있습니다. 다만 이 형태는 "사람이 문서를 읽고 손으로 코드에 옮기거나", "패키지를 설치해 빌드 파이프라인에 끼워 넣는" 것을 전제로 합니다.

AI 시대엔 병목이 다른 곳에 생깁니다. Claude나 Cursor 같은 AI 어시스턴트에게 "이 디자인 시스템대로 화면을 만들어줘"라고 시키려면, 여러 페이지와 여러 파일에 흩어진 문서보다 컨텍스트 창에 통째로 넣을 수 있는 파일 하나가 훨씬 잘 통합니다.

그래서 토큰·컴포넌트 마크업·CSS·JS를 한 파일로 합치고, 아이콘 91종과 폰트까지 base64로 인라인해서 "이 파일 하나만 프로젝트에 넣으면 끝"나도록 재구성했습니다.

복사 또는 다운로드위 버튼으로 md 파일 전체를 가져옵니다.

프로젝트에 저장예: DESIGN.md 또는 docs/krds.md로 저장합니다.

AI에게 요청"이 문서 기준으로 UI 만들어줘"라고 시키면 끝입니다.

이 문서에 담긴 디자인 토큰·컴포넌트 마크업·아이콘·폰트의 원본은 대한민국 행정안전부(Ministry of the Interior and Safety)가 만든 KRDS(Korea Design System)입니다.

이 페이지와 md 파일은 BellRiver Lab이 개발 편의를 위해 비공식으로 재구성한 2차 자료입니다. 대한민국 정부·행정안전부가 제작하거나 공식 승인한 자료가 아니며, 정부 기관과 아무 관련이 없습니다.