이번주 작업 목표는 두 가지이다.
UI개선, KRDS 표준에서 벗어나지 않는 정확한 예시 만들기
지난주에 작업된 결과물은 UI상으로도 아쉬운 면이 있었고, 코드만 생성할 뿐 프로토타입을 미리 볼 수 있는 기능을 제공하지 않아 어떻게 결과물이 나오는지도 알 수 없었다. 해서 이번주에는 이 두 아쉬운 점을 보강해보기로 했다.
UI 개선은 쉽게 완료되었다. 설치해 바로 쓸 수 있는 shadcn 라이브러리를 활용해 로컬 앱처럼 쓸 수 있는 화면을 완성했다.
어려운 부분은 프로토타입 구현이었다. 처음에는 외부에 있는 krds-uiux 폴더를 참조하도록 연결했는데, 일일이 참조 폴더를 선택하는 과정도 번거로웠고 Gemini가 생각보다 정해진 모양대로 만들어주지를 못했다.
외부에 있는 참조 파일을 앱 내부로 가져와 로드하도록 설정하자, 이제야 내가 아는 KRDS 컴포넌트의 모습이 나오기 시작했다.
레이아웃 스타일을 개선하도록 추가 설정해 겨우 마음에 드는 결과물을 얻을 수 있었다.
KRDS 프로토타입 생성기 개발 로그
📅 2026-02-01
🎯 목표
Gemini API를 활용한 KRDS 프로토타입 생성기에서 KRDS 토큰과 컴포넌트를 정확하게 참조하여 일관된 결과물을 생성하도록 개선
🔧 작업 내용
1. KRDS 데이터 내장화
src/data/krds/폴더 생성krds-uiux폴더 복사 (241개 파일)- 60+ 컴포넌트 파일 매핑 테이블
- 한글 키워드 → 컴포넌트 매핑 (예: "버튼" →
button) extractComponents()함수로 사용자 요청에서 필요 컴포넌트 자동 추출- 방식 변경: CSS 생성 → 템플릿 조합
- AI가 body HTML만 생성 (CSS 제외로 토큰 절약)
- 레이아웃 스타일 지시 추가 (gap, margin, padding)
- Vite
?rawimport로 CSS 파일 로드 import.meta.glob으로 HTML 컴포넌트 동적 로드- AI 응답(body HTML) + CSS 조합하여 완전한 HTML 생성
- CSS 토큰: krds_tokens.css (791줄)
- 번들 CSS: krds.min.css (593KB)
- HTML 컴포넌트: 60+ 개 (html/code/*.html)
- JSON 토큰: transformed_tokens.json
2. 템플릿 기반 조합 시스템 구현
#### src/data/krdsLoader.js (신규)
#### src/api/gemini.js (수정)
#### src/components/KRDSAgent.jsx (수정)
🐛 해결한 문제
| 문제 | 원인 | 해결 |
|------|------|------|
| 코드가 생성되다 중단 | CSS 593KB가 토큰 한도 초과 | AI는 body만 생성, CSS는 앱에서 조합 |
| 스타일 미적용 | fetch로 CSS 로드 실패 | Vite ?raw import 사용 |
| 레이아웃 정리 안됨 | AI가 gap/margin 미적용 | 프롬프트에 레이아웃 스타일 지시 추가 |
📁 변경된 파일
src/
├── data/
│ ├── krdsLoader.js # 신규 - 컴포넌트 매핑 모듈
│ └── krds/
│ └── krds-uiux/ # 신규 - KRDS 데이터 폴더
├── api/
│ └── gemini.js # 수정 - 템플릿 조합 방식
└── components/
└── KRDSAgent.jsx # 수정 - CSS raw import, 조합 로직
✅ 최종 결과
금주 작업사항을 위 문서로 정리했다.
일단 KRDS에서 배포한 파일(HTML, CSS)을 그대로 가져다 끼워맞추는 정도로만 세팅해두었다. 차주에는 PDF로 배포된 가이드라인까지 읽고 가이드라인대로 제작할 수 있도록 만들어볼 생각이다. 그 이후에 다운로드 받을 수 있는 .exe 파일로 만들어 배포하는 것이 최종 목표이다.