바이브 코딩 도구의 디자인 일관성 문제 해결을 위한 Figtree 프로젝트

합의점 vs 논쟁점

합의점

AI 코딩 도구는 페이지가 늘어날수록 디자인 일관성을 유지하는 데 어려움을 겪는다.

논쟁점

Gemini와 같은 모델이 실제 데이터보다 학습된 패턴을 우선시하는 경향이 있어 정밀한 UI 추출 작업에 부적합할 수 있다는 우려가 있다.

실용적 조언

디자인 일관성을 위해 shadcn/ui 같은 표준 라이브러리를 기본으로 사용하면 초기 구축 속도를 높일 수 있다.
LLM을 이용한 UI 추출 시 실제 CSS 값을 강제하기 위해 엄격한 프롬프트 제어와 검증 로직이 필요하다.

섹션별 상세

Cursor나 Replit 같은 AI 코딩 도구가 프로젝트 규모가 커질수록 디자인 일관성을 잃는 문제를 제기했다. AI는 이전 페이지에서 결정한 버튼 스타일이나 여백 값을 완벽히 기억하지 못해 결과적으로 UI가 파편화되는 현상이 발생한다. 이는 개발자가 수동으로 스타일을 교정해야 하는 번거로움을 초래한다.

기존 웹사이트에서 디자인 언어를 추출하여 라이브러리화하는 Figtree의 작동 원리를 공개했다. Next.js 기반 환경에서 Playwright로 대상 사이트를 스크래핑하고 Gemini를 활용해 각 UI 요소의 속성을 분석하여 재사용 가능한 코드로 변환한다. 이를 통해 사용자는 검증된 디자인 시스템을 즉시 프로젝트에 이식할 수 있다.

LLM이 실제 추출된 값 대신 임의의 컴포넌트를 생성하려는 할루시네이션 문제를 주요 기술적 과제로 꼽았다. 작성자는 Gemini가 실제 페이지의 정확한 수치를 사용하도록 강제하는 프롬프트 제어의 어려움을 토로했다. 비용 문제로 Claude Opus 대신 Gemini를 사용하면서 발생하는 성능적 한계를 극복하는 과정이 논의됐다.

용어 해설

shadcn/ui: — Tailwind CSS와 Radix UI를 기반으로 한 오픈소스 컴포넌트 라이브러리이다. 코드를 직접 프로젝트에 복사해 사용하는 방식으로 커스터마이징이 매우 자유로워 최근 AI 코딩 도구에서 표준 UI 프레임워크로 널리 채택되고 있다.
디자인 시스템(Design System): — 제품의 디자인 일관성을 유지하기 위해 정의된 색상, 타이포그래피, 컴포넌트 등의 표준 가이드라인이다. AI가 페이지마다 서로 다른 스타일을 생성하는 문제를 방지하기 위해 코드 수준에서 엄격하게 정의된 디자인 시스템 주입이 필수적이다.
할루시네이션(Hallucination): — LLM이 사실이 아니거나 문맥에 어긋나는 정보를 그럴듯하게 생성하는 현상이다. 본문에서는 Gemini가 실제 웹사이트의 CSS 값을 무시하고 학습된 패턴에 따라 임의의 UI 구조를 만들어내는 문제로 언급되었다.

언급된 도구

Cursor추천

AI 기반 코드 에디터

Replit추천

클라우드 기반 개발 환경

Gemini중립

UI 요소 분석을 위한 LLM

Playwright추천

웹 페이지 스크래핑 및 렌더링 분석

Next.js추천

도구 구축을 위한 웹 프레임워크

언급된 리소스

DemoFigtree Landing Page