“UI 어떻게 만들어요?” 요즘 이 질문을 정말 많이 받아요. 저도 코딩 모르는 비개발자인데, 지금은 AI 툴 덕분에 그냥 말로 설명하면 화면이 뚝딱 나와요. 근데 막상 써보면 툴마다 성격이 완전 달라서 뭘 써야 할지 헷갈리거든요. 오늘은 제가 직접 써본 또 앞으로 써볼예정인 AI 디자인 & 프론트엔드 개발 툴 5가지를 비교해드릴게요. 특히 Claude 계열 툴인 Artifacts와 Claude Design의 차이도 이 글에서 확실하게 정리할게요. 🙌
개발을 모르는 분들을 위해 자주 나오는 단어들을 먼저 정리했어요. 읽다가 헷갈리면 여기 다시 올라오세요!
용어
쉬운 설명
UI (User Interface)
사용자가 보는 화면. 버튼, 메뉴, 입력창 같은 모든 시각적 요소를 말해요.
프롬프트 (Prompt)
AI에게 주는 명령어 또는 요청 문장. “로그인 화면 만들어줘”처럼요.
프론트엔드 (Frontend)
사용자 눈에 보이는 화면 영역. 반대말은 백엔드(서버·데이터 처리 쪽).
풀스택 (Full-stack)
프론트엔드(화면)와 백엔드(서버·DB)를 모두 다룰 수 있다는 뜻.
컴포넌트 (Component)
버튼, 카드, 네비게이션 바처럼 화면을 구성하는 재사용 가능한 조각.
React
Meta(페이스북)가 만든 웹 화면 제작 도구. 요즘 웹 개발의 표준처럼 쓰여요.
Next.js
React 기반으로 웹사이트를 더 빠르고 쉽게 만들게 해주는 프레임워크.
Vercel
Next.js를 만든 회사이자 웹사이트를 간편하게 배포·호스팅해주는 플랫폼.
Tailwind CSS
미리 만들어진 스타일 재료 모음. “bg-blue-500″처럼 짧은 클래스명으로 디자인을 입혀요.
Shadcn UI
자주 쓰는 UI 컴포넌트(버튼, 모달, 폼 등)를 모아둔 오픈소스 라이브러리. v0의 기본 스타일 재료예요.
Figma
디자이너들이 쓰는 UI 디자인 툴. 개발 전 시각적 시안을 만드는 데 쓰여요.
MVP (Minimum Viable Product)
핵심 기능만 담은 최소한의 제품. “일단 돌아가는 버전”이라고 생각하면 돼요.
API (Application Programming Interface)
서로 다른 서비스끼리 데이터를 주고받는 연결 통로.
Supabase
데이터베이스(DB)를 쉽게 만들고 관리할 수 있는 오픈소스 백엔드 플랫폼.
GitHub
코드를 저장·관리하고 버전 이력을 추적하는 플랫폼. 코드의 ‘구글 드라이브’라고 보면 돼요.
CRUD
데이터의 4가지 기본 동작: Create(생성), Read(조회), Update(수정), Delete(삭제).
MCP (Model Context Protocol)
AI 모델이 외부 툴(Cursor, Figma 등)과 연동되도록 해주는 표준 통신 방식.
SVG
벡터 방식의 이미지 포맷. 크기를 늘려도 깨지지 않아서 아이콘·일러스트에 많이 써요.
토큰 (Token)
AI가 텍스트를 처리하는 단위. 글자 수와 비슷하게 생각하면 돼요. 토큰이 많을수록 비용이 올라가요.
바이브코딩 (Vibe Coding)
코드를 직접 짜지 않고, AI에게 말로 설명해서 앱을 만드는 방식.
마이크로 인터랙션
버튼 클릭 시 살짝 눌리는 효과, 호버 시 색상 변화 같은 아주 작은 UI 반응들.
Material Design
구글이 만든 디자인 철학·가이드라인. Android나 구글 앱에서 보이는 그 스타일이에요.
디자인 시스템
서비스 전체에서 일관되게 쓰이는 색상, 폰트, 컴포넌트 규칙 모음. 브랜드 가이드라인의 디지털 버전이에요.
피치덱 (Pitch Deck)
투자자나 파트너에게 사업을 소개하는 프레젠테이션 슬라이드.
원페이저 (One-pager)
서비스나 제품의 핵심을 한 페이지에 담은 소개 문서.
PPTX
Microsoft PowerPoint 파일 형식. 프레젠테이션 파일이에요.
프로토타이핑
실제 개발 전에 화면 흐름과 기능을 미리 시뮬레이션해보는 과정.
🤔 AI 디자인 툴, 왜 이렇게 많아졌을까?
불과 2년 전만 해도 UI를 만들려면 Figma를 배우든, 디자이너를 쓰든, 아니면 템플릿을 가져다 쓰는 수밖에 없었어요. 그런데 지금은 텍스트 프롬프트* 한 줄이면 그럴듯한 화면이 나옵니다.
저처럼 비개발자로 서비스를 만드는 분들한테는 정말 판이 바뀐 거예요. 문제는 이 툴들이 각자 지향하는 바가 달라서, 잘못 골랐다가 시간이랑 돈이 낭비될 수 있다는 거죠. 또 직접 웹디자인 해본 경험이 없다면 AI로 만든 티가 나는 프로그램, 네온과 퍼플이 범벅된 디자인의 프로그램을 개발하고 추후 디자인을 수정하는건 쉽지 않아요.
그래서 오늘은 v0 by Vercel, Google Stitch, Claude Artifacts, Claude Design, Lovable 이 다섯 가지 툴을 가격, 특징, 추천 대상 기준으로 꼼꼼하게 비교해볼게요. Claude 계열 두 툴의 차이도 이 글에서 확실히 짚어드릴테니 끝까지 읽어 주세요.
1️⃣ v0 by Vercel — 코드 퀄리티가 깡패인 프론트엔드 전문가
이게 뭔데요?
배포할때 많이 이용하시는 Vercel이 만든 React 기반 UI 생성 도구예요. 요즘 비개발자 바이브코딩* 씬에서 가장 많이 언급되는 툴 중 하나죠. 프롬프트를 입력하면Shadcn UI + Tailwind CSS 기반의 컴포넌트*를 뚝딱 만들어줘요.
✅ 강점
코드 퀄리티가 진짜 좋아요. 다른 툴들이 얼기설기 코드를 뱉는다면, v0는 실제 개발자가 짠 것 같은 정제된 코드를 줘요.
Vercel 생태계와의 궁합이 최고. 만든 컴포넌트를 Next.js* 프로젝트에 복붙만 해도 바로 동작해요. Vercel로 배포까지 연결하면 워크플로우가 아주 매끄러워요.
Figma 임포트 (Pro 이상)도 돼서 기존 디자인을 코드로 바꾸는 것도 가능해요.
⚠️ 단점
Shadcn 스타일이 기본이라서 커스텀을 세밀하게 안 하면 “v0로 만든 티”가 확 나요. 어느 정도 쓰다 보면 다들 비슷한 생김새의 사이트가 돼요.
풀스택* 개발(DB 연동 등)은 지원 안 해요. 순수 프론트엔드 전용* 툴이에요.
사용해본 제 느낌은 ” v0 by Vercel 은 디자인이라곤 해도 그림요소보다는 컬러와 타이포 위주로 레이아웃을 잡아주는 정도” 라는 생각이 들었어요. 아무래도 그래픽 요소를 디자인 한다기 보다는 컬러 팔레트·타이포그래피를 적용하고 버튼이나 레이아웃을 잡아서 서비스를 정돈되게 보여지도록 하는 퍼블리싱에 가깝다는 느낌이었거든요. 바이브 코딩 초기 남자친구의 블로그 작성을 돕기 위해 만들었던 서비스가 이해 하기 좋은 적절한 예가 될 것 같아요.
💡 크레딧은 매달 초기화되고 이월이 안 돼요. 긴 프롬프트나 복잡한 생성일수록 토큰을 더 많이 써요.
🙋 이런 분께 추천
Next.js / React 생태계에 이미 발을 걸치고 있는 분
깔끔한 프론트엔드 컴포넌트가 필요한 프리랜서, 개발자
Vercel로 배포 중인 서비스를 운영 중인 분
2️⃣ Google Stitch — 무료인데 이 정도라고? 구글의 깜짝 카드
이게 뭔데요?
2025년 Google I/O에서 공개된 AI UI 디자인 툴이에요. 원래는 Galileo AI라는 스타트업이었는데, 구글이 인수해서 Stitch로 리브랜딩했어요. Gemini 모델 기반으로 텍스트 프롬프트나 이미지를 넣으면 UI를 만들어줘요.
원고 작성 시점 기준으로 Stitch 2.0까지 나왔고, 여전히 베타로 완전 무료 운영 중이에요. (향후 유료 전환 가능성은 있어요.)
✅ 강점
무료인데 퀄리티가 좋아요. 신용카드 정보도 필요 없고, 구글 계정만 있으면 바로 시작해요.
*FigmaEXPORT (내보내기) 가 돼요. Standard 모드에서 생성한 디자인을 Figma로 바로 붙여넣기 할 수 있어요.
*React 코드 EXPORT (내보내기) 가능해서 디자인에서 개발까지 연결이 돼요.
Stitch MCP* 서버를 통해 Cursor 같은 코딩 에이전트와 연동도 되고, AI Studio로 프로토타입*을 바로 테스트할 수 있어요.
프로토타이핑* 기능으로 여러 화면을 이어 붙여 인터랙티브 앱 플로우를 미리 볼 수 있어요.
⚠️ 단점
Material Design 철학에서 완전히 자유롭지는 않아요.* 결과물이 구글 스타일 느낌이 나는 경우가 많아요.
아직 베타라 일관성이 떨어질 수 있어요. 복잡한 화면 여러 개를 한꺼번에 수정하면 가끔 에러가 나요.
크레딧이 떨어지면 추가 구매가 안 돼요. 당일 한도 초과하면 자정(UTC)에 리셋될 때까지 기다려야 해요.
하랑의 사용감상어떤 서비스를 만들어 달라고 했을 때 디자인 가이드 부터 프로토 타입까지 피그마 처럼 구성해서 아웃풋을 주는게 신기하고 재미있어요. 그래픽요소를 과감하게 사용한 디자인을 해줍니다. 레퍼런스를 넣지 않아도 AI가 만들어 주는 다양한 제안을 볼수 있는 것 같아요. 아래는 스티치에 빈티지 시계와 관련한 블로그 원고를 작성하기위한 서비스 제작을 의뢰 했을떄 나온 결과 에요. 제작 하고자하는 서비스에 맞는 디자인 가이드를 제안해 줍니다.
💰 비용 (2026년 5월 기준)
현재는 완전 무료 베타 운영 중이에요.
항목
내용
가격
무료 (베타)
일일 한도
디자인 크레딧 400개 + 리디자인 15개
크레딧 추가 구매
불가 (자정 UTC 리셋)
유료 플랜
현재 없음 (향후 변경 가능)
⚠️ 구글이 공식적으로 유료 전환 일정을 밝힌 건 없지만, 베타가 1년 가까이 지속된 만큼 변화 가능성은 있어요. 지금이 무료로 최대한 활용할 타이밍!
🙋 이런 분께 추천
비용 부담 없이 AI 디자인 툴을 처음 경험해보고 싶은 분
빠른 아이디어 시각화, 프로토타이핑이 필요한 PM이나 창업자
구글 AI Studio / Gemini 생태계에서 일하는 분
3️⃣ Claude Artifacts — 맥락 이해력 최강, 대화하듯 만드는 UI
이게 뭔데요?
Anthropic의 Claude가 Artifacts 기능을 통해 UI를 실시간으로 만들어주는 방식이에요. 별도 툴을 설치하는 게 아니라, Claude와 대화하면서 채팅창 옆에 바로 화면이 렌더링돼요. 저도 지금 이 방식으로 많은 컴포넌트*를 만들고 있어요.
✅ 강점
맥락 이해력이 압도적이에요. “아까 만든 거랑 비슷한 스타일로, 근데 모바일 버전으로 바꿔줘” 이런 자연스러운 대화가 가능해요.
디자인 + 로직을 동시에. 단순 UI 생성을 넘어 React* 코드, 내부 상태 관리, API* 연동 로직까지 한 번에 구현해줘요. MVP* 개발 속도가 정말 빨라요.
추상적인 요구사항 구현 능력이 좋아요. “카카오 느낌으로 따뜻하게” 같은 모호한 요청도 꽤 잘 해석해요.
HTML, SVG*, React 등 다양한 포맷 지원해요.
⚠️ 단점
특정 디자인 시스템에 고정돼 있지 않아서 결과물의 일관성이 떨어질 수 있어요. 매번 스타일 가이드를 주지 않으면 톤이 달라지기도 해요.
프로젝트 파일 관리 기능이 약해요. 여러 파일을 관리하거나 버전 관리를 하는 복잡한 프로젝트에는 한계가 있어요.
무료 플랜은 일일 사용량 제한이 있어요.
💰 비용
플랜
월 비용
특이사항
Free
무료
일일 사용량 제한
Pro
$20/월
더 많은 사용량, 최신 모델 접근
🙋 이런 분께 추천
*빠른 MVP 프로토타이핑이 필요한 창업자, 기획자
“이런 느낌으로 만들어줘” 같은 자연어 요청을 잘 활용하는 분
코딩 모르는 비개발자로 서비스를 만들고 싶은 분 (저 같은 사람!)
Cursor, Windsurf 같은 코딩 툴과 함께 쓸 컴포넌트 레퍼런스가 필요한 분
4️⃣ Claude Design — 전용 디자인 작업실이 생겼다! Anthropic의 최신 카드
이게 뭔데요?
2026년 4월, Anthropic Labs가 새로 출시한 전용 디자인 워크스페이스예요. Claude Artifacts가 “대화하다 옆에 뜨는 기능”이라면, Claude Design은 아예 디자인만을 위한 독립 공간이에요. 피그마처럼 캔버스가 있고, 왼쪽 채팅으로 대화하면서 오른쪽 캔버스에 디자인이 실시간으로 만들어지는 구조예요.
Anthropic의 최신 모델인 Claude Opus 4.7 기반으로 동작하고, Pro/Max/Team/Enterprise 구독자에게 리서치 프리뷰로 제공 중이에요.
💡 Claude Artifacts vs Claude Design, 한 줄 차이
Artifacts = 채팅하다가 “어, 이거 화면에 보여줘” → 대화 안에 자연스럽게 툭 튀어나오는 기능
Claude Design = “디자인만 제대로 하러 들어가는 전용 작업실” → 별도 공간, 훨씬 강력한 편집 도구
✅ 강점
브랜드 디자인 시스템 자동 적용.* 회사 코드베이스나 디자인 파일을 연결해두면, 이후 모든 작업에 우리 브랜드 컬러·폰트·컴포넌트*가 자동으로 반영돼요. 매번 스타일을 설명할 필요가 없어요.
인라인 코멘트 편집. 화면의 특정 요소를 클릭해서 바로 코멘트를 달면 Claude가 그 부분만 수정해줘요. “이 버튼 색상 바꿔줘”라고 위치를 설명하지 않아도 돼요.
커스텀 슬라이더. 여백, 폰트 크기, 컬러 같은 수치를 슬라이더로 실시간 조절 가능해요. Claude가 상황에 맞게 슬라이더를 직접 만들어줘요.
다양한 익스포트. Canva, PDF, PPTX*, HTML 파일로 내보낼 수 있어요. Canva로 보내면 바로 편집 가능한 상태로 열려요.
Claude Code 핸드오프. 디자인이 완성되면 Claude Code(개발 에이전트)에게 한 번에 넘겨서 실제 코드로 구현까지 연결돼요.
팀 협업. 조직 내부 URL로 공유하거나, 동료에게 편집 권한을 줄 수 있어요.
⚠️ 단점
아직 리서치 프리뷰 단계예요. 인라인 코멘트가 가끔 사라지는 버그가 있고, 대용량 코드베이스 연결 시 느려질 수 있어요.
Pro 이상 구독자 전용이에요. 무료 플랜에서는 쓸 수 없어요. ( 월 22$ 를 결제 했어요. 테스트 해보고 좀더 리뷰해 볼께요)
Artifacts보다 무거운 느낌. 간단한 컴포넌트 하나 만들 때는 Artifacts가 오히려 더 빠르고 편해요.
Figma처럼 정밀한 레이어 단위 편집은 아직 안 돼요.
💰 비용
Claude Design은 별도 비용 없이 기존 Claude 구독에 포함돼요. (vat 별도)
플랜
월 비용
Claude Design 사용 가능 여부
Free
무료
❌ 사용 불가
Pro
$20/월
✅ 리서치 프리뷰
Max
$100/월~
✅ 리서치 프리뷰
Team
$30/인/월
✅ 리서치 프리뷰
Enterprise
문의
✅ (관리자 설정 필요)
💡 Enterprise 플랜은 기본적으로 꺼져 있어서, 조직 관리자가 설정에서 별도로 켜줘야 해요.
🙋 이런 분께 추천
팀과 함께 디자인을 만들고 공유해야 하는 PM, 디자이너
브랜드 디자인 시스템이 있고, 매번 스타일 설명하기 귀찮은 분
피치덱*, 원페이저*, 프로토타입*을 빠르게 만들어야 하는 창업자, AE
Claude Code와 연결해 디자인 → 개발까지 한 흐름으로 가고 싶은 분
5️⃣ Lovable — “디자인 툴”이 아니라 “개발 파트너”
이게 뭔데요?
원래 GPT Engineer라는 이름이었다가 Lovable로 바뀐 툴이에요. 단순한 UI 생성기가 아니라 풀스택 AI 엔지니어를 표방해요. Supabase(DB), GitHub* 연동을 통해 실제로 배포 가능한 웹 앱을 만드는 데 최적화돼 있어요.
2025년에 $330M 투자를 받으며 기업가치 $6.6B를 달성할 만큼 요즘 가장 핫한 AI 개발 툴 중 하나예요.
✅ 강점
DB 연동까지 한 번에. Supabase 백엔드 셋업, 인증 기능, CRUD* 로직까지 프롬프트 하나로 처리돼요. 진짜 작동하는 앱이 나와요.
*GitHub 연동으로 버전 관리도 돼요.
배포까지 자동. 도메인 연결, 호스팅까지 플랫폼 안에서 해결 가능해요.
약 800만 명의 바이브코더*가 사용 중일 만큼 커뮤니티와 레퍼런스가 많아요.
⚠️ 단점
크레딧 소모가 불투명해요. 복잡한 기능 하나 만들면 크레딧이 생각보다 빠르게 닳아요.
다른 툴보다 학습 곡선이 조금 있어요. 처음 쓸 때 어디서 뭘 눌러야 할지 막막할 수 있어요.
앱이 커질수록 비용이 올라가요. Supabase 유료 플랜이 따로 필요해질 수 있어요.
하랑의 사용감상확실히 V0에 비해 디자인이 유려하게 나오는 것 같아요 하지만 크레딧 소모가 무료 크레딧으로 서비스 제작은 거의 불가능 하다고 보시면 되요. 간단한 컨셉이나 아이디어 얻기 위해서만 사용하신다면 무료로 가끔 사용가능, 본격 서비스 제작을 위해서는 무조건 유료 사용이 필요하다는 점. 하지만 디자인 퀄이 잘나오기 때문에 체험 해보시는걸 추천드립니다.
💰 비용 (2026년 5월 기준)
Lovable은 크레딧 기반 시스템을 써요. 플랜에 따라 받는 크레딧이 다르고, 작업 복잡도에 따라 소모량이 달라요.
플랜
월 비용
크레딧
특이사항
Free
무료
일 5크레딧 (월 최대 30)
커스텀 도메인 불가
Pro
$25/월~
월 100크레딧~ (+ 일 5크레딧)
커스텀 도메인, 배지 제거, Code 모드
Business
$50/월~
월 100크레딧~ (+ 일 5크레딧)
SSO, 학습 데이터 제외, 디자인 템플릿
Enterprise
문의
커스텀
커스텀
💡 간단한 버튼 색상 변경은 0.5 크레딧, 인증 기능 추가 같은 복잡한 작업은 1.5 크레딧 이상 소모돼요.
🙋 이런 분께 추천
MVP*를 빠르게 완성하고 싶은 창업자
백엔드(DB) 연동까지 포함한 풀스택 앱이 필요한 분
코딩 없이 실제 서비스를 론칭하고 싶은 비개발자
📊 한눈에 보는 비교표
구분
v0
Stitch
Claude Artifacts
Claude Design
Lovable
주요 기반
React, Tailwind, Shadcn
Gemini 모델
React, HTML 등 다양
Claude Opus 4.7
React + Supabase
핵심 강점
코드 퀄리티, Vercel 연동
무료, Figma 익스포트
맥락 이해, 빠른 프로토타이핑
브랜드 시스템, 팀 협업, 익스포트
풀스택 앱, DB 연동
단점
v0 티 남, 프론트만
베타 불안정, 구글 스타일
일관성 약함
프리뷰 단계, Pro 이상 전용
크레딧 소모 빠름
추천 대상
프론트 개발자, Vercel 유저
비용 0원으로 시작하고 싶은 분
비개발자, 빠른 MVP
팀 협업·브랜드 시스템 필요한 분
MVP 완성 목표 창업자
무료 플랜
$5 크레딧/월
완전 무료 (베타)
일일 한도 있음
❌ 불가
일 5크레딧
유료 시작가
$20/월
없음 (현재)
$20/월
$20/월 (Pro 포함)
$20/월
💡 AI 디자인 ‘천편일률’ 탈출하는 실전 팁
솔직히 말하면, 어떤 툴을 써도 처음 결과물은 비슷비슷하게 느껴질 수 있어요. “AI가 만든 느낌” 말이죠. 여기서 차별화가 시작돼요.
① 프롬프트에 브랜드를 구체적으로 넣어라
“대시보드 만들어줘”가 아니라, “배경은 #1A1A2E, 포인트 컬러는 #E94560, Pretendard 폰트, Shadcn 기본 스타일 쓰지 말고, 스타트업스럽게 bold한 느낌으로”라고 줘야 해요. 구체적일수록 결과가 달라져요.
② 80/20 법칙 — AI가 80, 내가 20
AI가 큰 틀을 만들면, 여백, 그림자, 마이크로 인터랙션* 같은 디테일은 직접 손봐야 해요. 이 20%가 “AI 냄새”를 지워줘요.
③ 이미지 에셋을 직접 교체해라
AI가 만든 UI에 들어가는 플레이스홀더 이미지를 내 브랜드 이미지나 직접 촬영한 사진으로 바꾸는 것만으로도 퀄리티가 확 올라가요.
④ 툴을 섞어 써라
저는 Claude로 초안을 잡고 → v0로 컴포넌트를 다듬고 → Lovable로 백엔드를 연동하는 식으로 써요. 각 툴의 강점을 조합하면 시너지가 생겨요.
🎯 결론 — 나한테 맞는 툴은?
상황
추천 툴
비용 0원으로 시작하고 싶다
Google Stitch
말로 설명해서 빠르게 프로토타입 만들고 싶다
Claude Artifacts
깔끔한 React 컴포넌트 코드가 필요하다
v0
팀과 협업하며 브랜드 일관성 있는 디자인이 필요하다
Claude Design
DB까지 연동된 진짜 앱을 만들고 싶다
Lovable
AI 디자인 툴은 이제 선택이 아니라 필수예요. 비개발자인 저도 이 툴들 덕분에 실제 서비스를 런칭하고 운영하고 있거든요. 뭘 써야 할지 모르겠다면 Google Stitch로 무료로 감을 잡고 → Claude Artifacts로 빠른 프로토타입 → 브랜드·팀 작업이 필요해지면 Claude Design → 실제 앱 완성은 Lovable로 이어가는 흐름을 추천해요!
이 글이 도움이 됐다면 북마크 해두고, 궁금한 거 있으면 댓글로 남겨주세요! 😊
📌 이 글에 나온 가격 정보는 2025년 5월 기준이에요. AI 툴 가격은 수시로 바뀌니 각 서비스 공식 페이지에서 최신 정보를 확인하세요.
