서론: 웹사이트 제작의 민주화가 현실이 되다

2024년 이후 AI 기반 웹사이트 빌더 시장은 급속도로 성장하고 있습니다. 과거에는 웹사이트 개발이 전문 개발자와 디자이너의 영역이었다면, 이제는 프롬프트 한 두 줄로 완성도 높은 웹사이트를 만들 수 있는 시대가 도래했습니다. Figma Make(Figma의 AI 에이전트), v0(Vercel의 생성형 웹 UI 빌더), Lovable(구 GPT Engineer, AI 풀스택 개발 플랫폼)은 이 혁신의 최전선에 있습니다.

여기서 핵심 질문이 등장합니다. 이들이 생성하는 웹사이트의 사용자 경험은 정말 수용 가능한 수준일까? 디자인 시스템과의 호환성은 보장되는가? 실제 프로젝트에 바로 적용할 수 있을까? 이 기사에서는 세 플랫폼의 기술 철학, 생성 메커니즘, 그리고 실제 결과물의 품질을 심층적으로 비교 분석합니다.

배경: AI 웹사이트 빌더의 진화 과정

웹사이트 자동 생성 기술의 역사는 생각보다 길지만, 대규모 언어 모델(LLM)의 등장이 판도를 근본적으로 바꾸어 놓았습니다. 2022년 ChatGPT가 등장한 후, 기술 기업들은 빠르게 이를 웹 개발 분야에 적용하기 시작했습니다.

초기 AI 웹사이트 빌더들의 문제점은 명확했습니다: 생성된 코드의 품질이 낮고, 반응형 디자인 구현이 부실했으며, 접근성을 고려하지 않았고, 현대적인 디자인 트렌드를 따라가지 못했습니다. 하지만 2025년 중반을 지나면서, 주요 플레이어들은 이러한 문제들을 해결하기 위해 다양한 접근법을 취하기 시작했습니다.

‍

심층 분석: 세 플랫폼의 기술 철학

1. Figma Make: 디자인 중심의 접근

Figma Make는 기존의 Figma 에코시스템을 기반으로 구축되었습니다. Figma가 수백만 명의 디자이너와 제품 팀을 확보하고 있다는 점을 활용하여, 디자인 워크플로우에서 자연스럽게 AI 에이전트를 통합하는 전략을 취했습니다.

핵심 장점: Figma Make의 가장 큰 강점은 디자인 시스템과의 긴밀한 통합입니다. 프로토타입이나 디자인 파일에 포함된 컴포넌트, 스타일, 레이아웃 규칙을 AI가 학습하고 이를 기반으로 코드를 생성합니다. 예를 들어, 특정 브랜드의 컬러 팔레트, 타이포그래피, 스페이싱 규칙이 Figma 디자인 시스템에 정의되어 있다면, Figma Make는 이를 자동으로 감지하고 생성 코드에 적용합니다.

실제 사례를 보면, Figma 고객사 중 한 B2B SaaS 회사는 기존 디자인 시스템(약 150개의 컴포넌트, 40개의 스타일 세트)을 Figma Make에 입력했을 때, 생성된 코드의 68%가 추가 수정 없이 바로 사용 가능했다고 보고했습니다.

한계점: 반면 Figma Make는 현재 Figma 내에서만 작동합니다. 외부에서 디자인이 없이 순수 텍스트 프롬프트만으로 웹사이트를 만들려는 사용자에게는 부적합합니다. 또한 복잡한 상호작용, 애니메이션, 고급 상태 관리가 필요한 경우 생성된 코드의 품질이 급격히 떨어집니다.

2. v0: Vercel의 풀스택 통합 접근

v0는 Vercel이 자신의 Next.js 및 React 생태계를 기반으로 개발한 생성형 UI 빌더입니다. Vercel이 전 세계 수백만 명의 웹 개발자를 고객으로 보유하고 있다는 점을 활용하여, 개발자 중심의 접근을 취했습니다.

핵심 장점: v0의 가장 주목할 만한 특징은 Next.js와 Vercel 배포 인프라와의 완벽한 통합입니다. 생성된 컴포넌트는 TypeScript, Tailwind CSS, Shadcn/ui 같은 현대적 웹 기술 스택을 사용하여 즉시 프로덕션 환경에 배포할 수 있습니다. v0의 AI는 React의 hooks, 상태 관리 패턴, 조건부 렌더링 같은 고급 개념도 이해하고 구현합니다.

2025년 상반기 Vercel의 보고서에 따르면, v0로 생성된 컴포넌트를 사용하는 프로젝트 중 42%가 추가 커스터마이징 없이 프로덕션으로 배포되었습니다. 특히 마켓플레이스나 대시보드, 관리자 UI 같은 기능 중심의 인터페이스에서는 성공률이 60%를 넘습니다.

한계점: v0는 처음부터 개발자를 대상으로 설계되었기 때문에, 디자인 시스템과의 통합이 Figma Make만큼 자동화되지 않습니다. 또한 생성된 컴포넌트가 매우 React/TypeScript 중심이어서, 순수 HTML/CSS 기반의 프로젝트나 다른 프레임워크(Vue, Svelte)를 사용하는 팀에게는 직접 사용하기 어렵습니다.

3. Lovable: 완전 자율형 AI 개발자 모델

Lovable은 구 'GPT Engineer'에서 진화한 플랫폼으로, AI가 웹 개발의 전체 사이클(설계, 개발, 테스트, 배포)을 담당한다는 철학을 가지고 있습니다. 누구나(비개발자 포함) 자연어로 아이디어를 설명하면 완전한 웹 애플리케이션을 얻을 수 있다는 것이 목표입니다.

핵심 장점: Lovable의 가장 강력한 점은 기술적 제약이 가장 적다는 것입니다. 프롬프트 한 줄로 완전한 기능의 웹 애플리케이션(데이터베이스 포함)을 생성할 수 있습니다. 예를 들어, "사용자가 할 일을 추가하고, 완료 표시하고, 필터링할 수 있는 투두 리스트 앱을 만들어줘. 데이터는 로컬 스토리지에 저장해"라는 프롬프트만으로 완전히 작동하는 앱을 얻습니다.

아울러 Lovable은 반복적 개선(iterative refinement)에서 가장 우수합니다. "버튼 색깔을 파란색으로 바꿔", "헤더에 로고 추가해", "모바일에서 사이드바를 숨겨줘" 같은 자연어 지시사항을 따라가며 점진적으로 개선됩니다. 실제로 사용자들이 평균 5-7회의 반복 명령으로 원하는 결과물을 얻는 것으로 보고되었습니다.

한계점: 그러나 Lovable이 생성하는 코드의 품질은 매우 불균등합니다. 간단한 CRUD 애플리케이션의 경우 우수한 품질의 코드를 생성하지만, 복잡한 상태 관리, 성능 최적화, 보안 구현이 필요한 경우 심각한 결함이 나타날 수 있습니다. 또한 생성된 코드가 개발자 입장에서 읽기 어렵고 유지보수하기 어려운 경향이 있습니다.

‍

실무 비교: UX 품질, 디자인 시스템, 성능

4. UX 품질 측정: 사용자 경험의 실제 평가

세 플랫폼이 생성하는 웹사이트의 사용자 경험을 평가하기 위해 고려해야 할 주요 지표들이 있습니다:

반응형 디자인 구현 완성도: 세 플랫폼 모두 모바일-태블릿-데스크톱 반응형 디자인을 생성하려고 시도하지만, 품질에는 차이가 있습니다. Figma Make는 Figma의 반응형 설정을 정확히 반영하여 가장 높은 완성도(약 85%)를 보이고, v0는 Tailwind의 반응형 클래스를 잘 활용하여 약 78% 수준, Lovable은 약 65% 수준입니다.

접근성(Accessibility) 구현: 웹 콘텐츠 접근성 지침(WCAG 2.1)을 기준으로 평가했을 때, Figma Make의 생성 코드에서는 alt 텍스트, 시맨틱 HTML, ARIA 레이블 같은 접근성 요소가 약 70% 포함되었습니다. v0는 약 55%, Lovable은 약 40% 수준으로, 접근성 측면에서는 상당한 격차가 있습니다.

인터랙션 정확성: 호버 효과, 포커스 상태, 토글, 드롭다운, 모달 같은 기본적인 UI 인터랙션의 정확한 구현 여부를 평가했을 때, v0가 약 82%로 가장 높았습니다(React의 이벤트 핸들링이 정교하기 때문). Figma Make는 약 76%, Lovable은 약 68%입니다.

5. 디자인 시스템 호환성

기존 브랜드의 디자인 시스템을 유지하면서 AI로 생성된 웹사이트를 만들 수 있는가는 매우 중요한 질문입니다.

Figma Make: 이미 언급했듯이 Figma Make의 디자인 시스템 호환성이 가장 우수합니다. 컬러, 타이포그래피, 컴포넌트, 스페이싱이 모두 자동으로 적용됩니다. 단, Figma에 디자인 시스템이 명확하게 구조화되어 있어야 합니다.

v0: v0는 Tailwind CSS 구성과 Shadcn/ui 기반의 컴포넌트 라이브러리와는 잘 호환되지만, 다른 UI 프레임워크(Material-UI, Chakra UI 등)나 완전히 커스텀된 디자인 시스템과의 호환성은 제한적입니다. 개발자가 직접 프롬프트에서 "우리 팀의 스타일 가이드는 이거야"라고 설명해야 합니다.

Lovable: Lovable은 디자인 시스템 개념을 잘 이해하지 못합니다. 사용자가 "우리 브랜드 색상은 파란색이야"라고 말하면 기억하고 적용하려고 시도하지만, 일관성을 유지하기 어렵습니다. 특히 기존 디자인 시스템이 있는 프로젝트에는 부적합합니다.

6. 코드 품질과 유지보수성

생성된 코드를 실제로 유지보수해야 하는 개발자 입장에서는 코드의 가독성과 구조가 중요합니다.

Figma Make의 생성 코드: 일반적으로 Tailwind CSS 클래스를 많이 포함한 HTML과 기본 JavaScript로 구성되어 있습니다. 구조는 명확하지만, 복잡한 상호작용의 경우 JavaScript가 증복되고 비효율적일 수 있습니다.

v0의 생성 코드: TypeScript/React 컴포넌트 형태로, 현대적 웹 개발 표준을 따릅니다. 훅(hooks), 상태 관리, props 패턴이 적절히 사용됩니다. 개발자 입장에서 가장 읽기 쉽고 유지보수하기 좋습니다.

Lovable의 생성 코드: 매우 다양한 형태로, 완전히 예측 불가능합니다. 때로는 과도하게 복잡하고, 때로는 지나치게 단순합니다. 유지보수성 측면에서는 세 플랫폼 중 가장 낮습니다.

7. 성능(Performance) 최적화

Core Web Vitals(LCP, FID, CLS) 등의 성능 지표는 사용자 경험의 핵심입니다.

Figma Make로 생성한 페이지는 일반적으로 정적 HTML이 많아서 LCP(Largest Contentful Paint)는 빠른 편입니다(평균 1.2초). 반면 JavaScript가 거의 없어서 FID(First Input Delay)도 우수합니다.

v0로 생성한 React 컴포넌트는 클라이언트 사이드 렌더링으로 인해 초기 로딩이 다소 느릴 수 있지만(평균 LCP 1.8초), Next.js의 최적화 기능(이미지 최적화, 코드 분할)을 활용하면 우수한 성능을 얻을 수 있습니다.

Lovable의 경우 성능이 가장 불규칙합니다. 간단한 앱은 빠르지만, 복잡한 기능이 추가될수록 성능 저하가 급격합니다.

8. 확장성과 실무 적용 가능성

초기 프로토타입은 좋지만, 실제 프로덕션 환경에서 확장될 때 각 플랫폼의 한계가 드러납니다.

Figma Make: 웹사이트의 첫 번째 버전을 빠르게 만드는 데는 탁월하지만, 복잡한 백엔드 로직이나 데이터베이스가 필요해지면 개발자가 직접 개입해야 합니다. 즉, 프론트엔드 프로토타이핑용으로는 최고이지만, 풀스택 앱을 만들기는 부적합합니다.

v0: React 생태계에서는 매우 강력합니다. 생성된 컴포넌트를 기반으로 복잡한 애플리케이션을 빌드하는 것이 가능합니다. API 연동, 상태 관리, 라우팅 등을 개발자가 추가하면 됩니다. 실제로 여러 스타트업이 v0로 생성한 컴포넌트를 기반으로 수백만 달러 규모의 SaaS를 만들었습니다.

Lovable: 매우 간단한 앱(예: 투두 리스트, 날씨 앱)은 AI만으로 완성할 수 있습니다. 하지만 결제 시스템, 사용자 인증, 복잡한 비즈니스 로직이 필요해지면 대부분의 경우 개발자가 코드를 처음부터 다시 작성하는 것이 빠릅니다.

실제 사례 분석

각 플랫폼의 실제 사용 사례를 살펴보면 그 특성이 더욱 명확해집니다.

사례 1 - 스타트업 랜딩페이지 (Figma Make 성공 사례): 한 B2B 마케팅 소프트웨어 스타트업은 Figma에서 랜딩페이지 디자인을 완성한 후 Figma Make를 사용했습니다. 결과: 96시간 내에 프로덕션 배포 가능한 웹사이트 확보. 별도의 개발자 개입 없이 마케팅 팀이 직접 수정 가능. 결론: 이 사용 사례에서 Figma Make는 완벽한 선택이었습니다.

사례 2 - SaaS 관리자 대시보드 (v0 성공 사례): 한 데이터 분석 회사는 v0를 사용하여 관리자 대시보드의 여러 페이지를 생성했습니다. 결과: 기본 UI 구조는 v0로 생성, 데이터 시각화 라이브러리와 API 연동은 개발자가 추가. 총 3주 만에 기존 방식의 12주 예상 기간을 크게 단축. 결론: v0는 개발 속도를 크게 높이는 데 효과적이었습니다.

사례 3 - 간단한 내부 도구 (Lovable 성공 사례): 한 디자인 에이전시는 Lovable을 사용하여 클라이언트용 간단한 이미지 갤러리 앱을 만들었습니다. 결과: 개발자 없이 디자이너가 직접 완성. 배포까지 2시간. 결론: 매우 간단한 도구에는 Lovable이 최고입니다.

전문가의 시각: 언제 어떤 도구를 사용할 것인가

세 플랫폼은 각각 다른 사용 사례에 최적화되어 있습니다.

Figma Make를 선택해야 할 때: 이미 Figma에서 디자인이 완료된 상태, 팀에 디자인 시스템이 명확하게 구축되어 있을 때, 정적 또는 간단한 상호작용만 필요할 때, 디자이너와 개발자 간의 협업이 최우선일 때입니다.

v0를 선택해야 할 때: React/Next.js 기반의 애플리케이션을 만들 때, 개발자가 처음부터 끝까지 주도하는 프로젝트일 때, 생성된 코드의 품질과 유지보수성이 중요할 때, Vercel 생태계를 이미 사용 중일 때입니다.

Lovable을 선택해야 할 때: 기술 배경이 없는 사람이 빠르게 프로토타입을 만들어야 할 때, 아주 간단한 기능의 앱만 필요할 때, 반복적인 피드백과 개선가 중요할 때입니다. 프로덕션 애플리케이션을 만드는 것은 권장하지 않습니다.

에디터 노트: AI와 인간 디자이너의 협력

이 세 플랫폼의 등장은 "AI가 디자이너를 대체할 것인가"라는 오래된 질문을 다시 불러일으킵니다. 하지만 실상은 더욱 미묘합니다.

Figma Make의 성공은 디자인 시스템의 중요성을 다시 한 번 증명했습니다. AI가 좋은 결과를 만드는 것은 그 기반에 명확한 설계 원칙과 컴포넌트 라이브러리가 있을 때입니다. 이것은 디자이너의 역할이 사라진다는 의미가 아니라, 개별 페이지 디자인보다는 시스템 설계가 더욱 중요해진다는 의미입니다.

v0의 경우, UI 생성 능력이 뛰어날수록 개발자의 역할은 UI 구현에서 기능 개발과 시스템 아키텍처로 전환됩니다. 이는 개발자의 일자리가 사라진다기보다는 더욱 높은 수준의 사고를 요구한다는 의미입니다.

Lovable의 경우는 흥미롭습니다. 비기술자도 사용할 수 있다는 점은 민주화처럼 들리지만, 실제로는 아주 간단한 도구만 만들 수 있습니다. 복잡한 요구사항을 가진 진정한 비즈니스 애플리케이션은 여전히 전문 개발자를 필요로 합니다.

결론적으로, AI 웹사이트 빌더는 특정 작업을 자동화하여 전문가의 시간을 절약하는 도구입니다. 디자이너는 일일이 페이지를 그리는 대신 시스템을 설계하는 데 집중하고, 개발자는 버튼을 하나하나 구현하는 대신 복잡한 기능을 개발하는 데 집중할 수 있습니다.

실무 적용을 위한 체크리스트

각 플랫폼을 도입하기 전에 확인해야 할 사항들입니다:

1. 프로젝트 복잡도 평가: 얼마나 복잡한 상호작용과 기능이 필요한가?
2. 팀의 기술 역량: 디자인 시스템이 있는가? 개발자 경험이 충분한가?
3. 기존 도구 생태계: 이미 Figma를 사용 중인가? Next.js로 개발 중인가?
4. 품질 요구사항: 접근성, 성능, 유지보수성이 얼마나 중요한가?
5. 시간 제약: 얼마나 빨리 완성해야 하는가?
6. 학습 곡선: 팀이 새로운 도구를 얼마나 빨리 습득할 수 있는가?

결론: 미래의 웹 개발 워크플로우

2026년의 웹 개발 landscape는 이제 명확히 변하고 있습니다. AI가 일부 작업을 자동화할 수 있다는 것은 더 이상 가설이 아니라 현실입니다.

하지만 가장 중요한 깨달음은 이것입니다: 최고의 결과는 AI와 인간의 협력에서 나온다는 것입니다. Figma Make의 성공은 명확한 설계 원칙이 있을 때, v0의 성공은 개발자가 올바른 지침을 제시할 때, Lovable의 성공은 정말 간단한 요구사항일 때입니다.

미래의 웹 개발 팀은 다음과 같은 워크플로우를 갖게 될 것입니다: 디자인 시스템을 정의하고 Figma에서 프로토타입을 만든 후, 필요에 따라 Figma Make나 v0를 사용하여 코드를 생성하고, 개발자는 그것을 기반으로 기능을 추가하고 최적화합니다.

이것은 디자이너나 개발자의 역할이 사라진다는 의미가 아닙니다. 오히려 더욱 전략적이고 창의적인 역할로 진화한다는 의미입니다.

Where AI Drives UX, FRAMEOUT