대한민국 공공 웹 표준인 KRDS 디자인 시스템을 다루다 보면 손이 많이 갑니다. 피그마 템플릿과 HTML 컴포넌트 킷은 훌륭하지만 사람이 직접 보고 작업해야 하므로 한계가 뚜렷합니다. AI가 직접 규격을 읽고 퍼블리싱을 처리하도록 에이전트 전용 스킬을 구성했습니다.

에이전트가 읽는 디자인 가이드라인

피그마는 사람이 눈으로 확인하는 안내섭니다. Codex나 Claude Code 같은 도구는 구조화된 규칙을 요구합니다. AI 네이티브 도구인 future-krds 를 빌드한 이유입니다. 차이가 큽니다.

이 시스템은 세 영역으로 작동합니다. 먼저 krds-plan 모듈이 컴포넌트를 매핑하고 접근성 가이드를 정의합니다. 이어서 krds-transform 이 기존 사이트 구조를 유지하며 테마와 마크업만 정부 표준에 맞춰 바꿉니다. 마지막으로 krds-improve 엔진이 구현 결과물과 규격을 대조해 오류를 바로잡습니다.

자동 스캔과 피드백 루프 구축

가이드를 적용하면 단 한 줄의 프롬프트로 표준에 맞는 마크업을 얻습니다. 실제로 특정 글로벌 포털 한국어 페이지를 프롬프트 하나로 변환해 보니 74개 컴포넌트가 오류 없이 매핑됐습니다. Codex가 페이지를 생성하고 검증을 끝내는 데 몇 초 걸리지 않습니다. 단순합니다.

시스템 내부에서 자동 루프가 작동하는 덕분입니다. 스캔하고 점수를 매긴 뒤 우선순위를 정해 코드를 고치고 재검증하는 루프입니다. 이 피드백 루프는 KRDS 규칙 기준으로 점수가 95점 이상이고 실패 규칙이 0개가 될 때까지 반복합니다. 신뢰도가 높습니다.

디자인 시스템이 이미 견고하므로 최종 마크업을 피그마로 역변환하기도 쉽습니다. 컴포넌트 단위 매칭이 확실해서 수동 작업이 대폭 줍니다. AI에게 규칙을 주입하고 검증을 위임해야 효율적입니다.

개발 생산성을 높이려면 AI에게 사람이 보던 문서 대신 전용 스킬을 쥐여줘야 합니다. 시스템이 스스로 코드를 완성하는 광경은 인상적입니다.

요약

  • 디자인 시스템을 사람이 아닌 AI 코딩 에이전트가 직접 읽고 해석할 수 있는 AI 네이티브 스킬 형태로 변환하여 자동화 효율을 극대화합니다.
  • krds-plan, krds-transform, krds-improve의 3단계 모듈 구조로 설계부터 변환, 자동 피드백 루프 검증까지 일관된 파이프라인 구축
  • 정부 표준 UI 컴포넌트 매핑과 접근성 규칙 검증을 AI 자동화 루프에 위임함으로써 수동 검토 공수를 대폭 절감하고 퍼블리싱 생산성을 높입니다.