Properties
Date
주요 진행 내용
이번 주에는 Gemini API를 활용한 KRDS 프로토타입 생성기의 구조를 전면적으로 개선하는 작업을 진행했다. 기존 방식에서는 AI가 CSS와 HTML을 함께 생성하면서 KRDS CSS 파일 용량 문제로 토큰 한도를 초과해 코드 생성이 중단되는 이슈가 발생했는데, 이를 해결하기 위해 KRDS 디자인 토큰과 컴포넌트를 애플리케이션 내부 데이터로 직접 내장하는 방식으로 접근했다. AI의 역할은 전체 스타일 생성이 아닌 body HTML 생성으로 한정하고, 실제 스타일과 컴포넌트는 내부 리소스를 조합해 완성하는 구조로 전환했다.
진행 결과
- KRDS 컴포넌트 로더 모듈을 신규로 구현해 60개 이상의 HTML 컴포넌트를 매핑하고, 사용자 요청 문장에서 필요한 컴포넌트를 자동으로 추출할 수 있도록 구성했다. Gemini API 연동 로직은 기존 CSS 생성 방식에서 템플릿 조합 방식으로 변경해, 토큰 사용량을 크게 줄이면서도 일관된 결과물을 만들 수 있도록 개선했다. 또한 레이아웃 품질 향상을 위해 프롬프트에 간격 및 여백 관련 스타일 지시를 명시적으로 추가했다.
- 대용량 CSS 파일로 인한 토큰 초과 문제는 AI가 body HTML만 생성하도록 역할을 분리함으로써 해결되었고, fetch 방식으로 CSS를 불러오지 못하던 문제는 raw import 적용으로 안정화되었다. 그 결과 KRDS 컴포넌트를 정확히 참조한 HTML이 생성되었고, CSS가 완전히 적용된 상태의 미리보기를 제공할 수 있게 되었다. 레이아웃 정리 상태도 이전 대비 눈에 띄게 개선되었다.
인사이트 및 회고
대규모 디자인 시스템을 AI와 함께 다룰 때는 모든 것을 생성에 맡기기보다, 정적인 자산과 AI 생성 영역을 명확히 분리하는 것이 훨씬 안정적이라는 점을 확인했다. 특히 디자인 토큰과 컴포넌트를 데이터화해두면 AI의 결과물 품질을 일정 수준 이상으로 유지할 수 있다는 가능성을 확인할 수 있었다.
사용한 툴 및 기술
프론트엔드는 Vite 기반 React 환경에서 구성했으며, KRDS UI/UX 리소스를
src/data/krds 경로에 내장해 사용했다. Gemini API는 HTML 구조 생성 용도로 활용했고, 컴포넌트 자동 추출을 위해 한글 키워드 기반 매핑 로직을 직접 구현했다. CSS 로딩 문제를 해결하기 위해 Vite의 ?raw import 방식을 적용했으며, 다수의 HTML 컴포넌트를 동적으로 불러오기 위해 import.meta.glob 방식을 사용했다.다음 주 계획
차주에는 가이드라인 파일을 추가해 단순 컴포넌트 조합을 넘어선 가이드라인 기반 프로토타입 생성이 가능한지 검증할 계획이다.