AI 웹사이트 빌더 Lovable 사용 시 구조 없는 vibe coding이 기술 부채를 초래함을 8개월간 경험했다

Context

기존 웹사이트 개발에서 AI 코드 생성 도구를 사용하면 빠른 프로토타입 생성이 가능하다. 그러나 Design System과 System Design을 사전 정의하지 않으면, 색상·폴더 구조·코딩 표준이 일관성 없이 분산되어 유지보수가 불가능한 코드가 축적된다. 이 문제로 인해 5번째 프롬프트 이후 리팩토링 비용이 급격히 증가한다.

Technical Solution

• Lovable 프롬프트 작성 전 Product, Design System, System Design 세 가지를 반드시 사전 정의한다
• Design System에서 HSL 토큰, 타이포그래피, 재사용 가능한 컴포넌트(variants)를 먼저 설정한다
• System Design에서 React 18 + Vite + Supabase 스택과 Feature 기반 아키텍처를 구성한다
• Feature 모듈 간 직접 import를 금지하고, typed Event Bus를 통해 통신하도록 설계한다
• 외부 연동(Supabase Storage, Cloudinary 등)은 Ports & Adapters 패턴으로 추상화한다
• SOLID 원칙 중 OCP를 CVA(variants) 방식으로, DIP를 인터페이스 의존성으로 구현한다

Impact

구조화된 vibe coding 적용 후 웹사이트 전체 리뉴 작업을 몇 시간 내에 완료했다

Key Takeaway

AI 도구의 생산성을 유지하려면 인간이 구조와 규칙을 먼저 설계해야 하며, 이는 '덜 아닌 AI 사용'이 아닌 '더 많은 맥락 제공'으로実現된다