대한민국 디지털 정부 디자인 시스템 KRDS, AI Skill 이 없길래 직접 만들었습니다

This is the long-form blog cut of a note I originally posted on LinkedIn. The claims, numbers, and product names are the same; the formatting is for reading on the site.

Context

Original framing (translated in place for key technical posts; substance preserved):

KRDS 로 개발하시는 분이라면 저장해두세요. KRDS 는 Figma 템플릿과 HTML 컴포넌트 킷을 제공합니다. 사람을 위한 도구는 잘 갖춰져 있어요.

하지만 AI 코딩 에이전트가 바로 참조할 수 있는 Skill 은 없었습니다. Figma 는 사람이 보는 가이드고 Skill 은 에이전트가 읽는 가이드입니다.

그래서 만들었습니다. future-krds. 7가지로 정리합니다.

KRDS 는 대한민국 디지털 정부 표준 디자인 시스템입니다

KRDS: https://lnkd.in/gUiAQ4wf

KRDS 는 대한민국 공공 서비스 웹사이트와 앱에 일관된 UX/UI 를 적용하기 위해 만들어졌어요. 편의성과 접근성, 일관성과 사용성 이 4가지를 보장합니다.

Figma 템플릿은 있지만 AI native Skill 은 없었습니다

KRDS Figma: https://lnkd.in/g45MrxTc

KRDS 공식 사이트에서 피그마 디자인 라이브러리를 제공합니다. 디자이너가 참조하기엔 충분해요. 그런데 Codex 나 Claude Code 같은 AI 코딩 에이전트가 바로 읽고 적용할 수 있는 형태는 아니었습니다.

future-krds 는 3개 AI Skill 로 나눠서 쓰세요

future-krds: https://lnkd.in/gND4ctTb

krds-plan → 새 페이지 설계. 컴포넌트 매핑과 접근성 게이트를 정의합니다. krds-transform → 기존 사이트를 KRDS 규칙에 맞게 변환해요. 동작은 유지하고 구조와 테마만 바꿉니다. krds-improve → 구현 결과를 KRDS 규칙과 대조하고 통과할 때까지 반복합니다.

일단 skills 폴더에 복사하고 Codex 를 재시작하면 바로 쓸 수 있어요.

Codex 에 프롬프트 하나 던지면 KRDS 에 맞는 사이트가 나옵니다

아래 첨부한 이미지는 “KRDS 스킬로 openai.com/ko-KR 웹 페이지를 새롭게 디자인해줘” 라는 한 줄의 프롬프트로 만든 웹사이트입니다.이 전부였습니다. Codex 가 페이지를 생성하고 검증까지 돌렸어요. 74개 컴포넌트 전부 커버. similarity score 100. failed rules 0.

품질 검증은 에이전트가 자동으로 반복합니다

scan → score → prioritize → fix → verify. 이 루프를 KRDS 규칙 기준으로 점수 95 이상이고 실패 규칙 0이 될 때까지 반복해서 진행합니다. 그래서 대부분의 경우 수동 체크가 필요 없습니다.

Figma 로 옮기면 그대로 개발할 수 있습니다

AI 에이전트가 KRDS 규칙을 준수한 결과물을 만들면 Figma 로 옮기는 건 금방이에요. 디자인 시스템이 이미 잡혀 있으니까 컴포넌트 단위로 바로 매칭이 됩니다. Skill 이 사람 대신 규칙을 읽어주는 겁니다.

Figma 는 사람을 위한 가이드입니다. Skill 은 AI 를 위한 가이드예요. KRDS 개발하시는 분들은 에이전트한테 Skill 부터 세팅하세요.

Links

• https://lnkd.in/gUiAQ4wf
• https://lnkd.in/g45MrxTc
• https://lnkd.in/gND4ctTb