피드로 돌아가기
Dev.toFrontend
원문 읽기
Design System Grounding 기반의 Screenshot-to-Code 자동화 및 A11y 최적화 구현
My AI Tool Generated Garbage JSX. So I Grounded It in shadcn/ui and Finally Shipped It.
AI 요약
Context
기존의 Screenshot-to-Code 도구들이 단순 코드 생성을 넘어 컴파일 오류와 디자인 일관성 결여 문제를 야기함. 특히 외부 Credential 의존성과 불필요한 인프라 복잡도로 인해 사용자 접근성이 낮았던 한계를 분석함.
Technical Solution
- Prompt 내 shadcn/ui 컴포넌트 카탈로그를 직접 주입하는 Grounding 기법을 통한 무분별한 Markup 생성 억제
- Vector Database 없이 MAX_CATALOG = 40 제약을 설정하여 Token 비용 최적화 및 인프라 단순화 달성
- Sandpack Sandbox를 통합하여 생성된 코드의 실시간 컴파일 체크 및 자동 Repair Pass 루프 구축
- axe-core 엔진을 렌더링 결과물에 연결하여 Accessibility Score 측정 및 자동 수정 프롬프트 체인 설계
- Bounding Box와 Rendered Component 간의 1:1 매핑을 위한 Trace Line 시각화 로직 구현
실천 포인트
- LLM의 환각을 줄이기 위해 RAG 대신 Prompt 내 소규모 화이트리스트(Grounding) 적용 검토 - 생성형 UI 도구 설계 시 '생성-검증(Compile Check)-수정'의 피드백 루프 자동화 여부 확인 - Accessibility 도구(axe-core 등)를 파이프라인에 통합하여 정량적 품질 지표 확보