v0 by Vercel 3개월 써봤는데, 프론트엔드 개발자는 이거 꼭 봅니다

이거 한 번 써보면 진짜 옛날로 못 돌아갑니다. Next.js 만든 Vercel에서 만든 AI UI 빌더인데, 진짜 미친 수준이에요.

저는 3개월 전부터 회사 사이드 프로젝트에 v0 쓰고 있어요. 솔직한 후기 적어볼게요.

v0가 뭐냐

한 줄로 — "프롬프트 적으면 React + Tailwind 컴포넌트를 만들어주는 AI". 비슷한 도구가 많은데 v0는 결과 코드 품질이 진짜 다릅니다. shadcn/ui 기반으로 만들어줘서 그대로 프로덕션에 갖다 써도 돼요.

예시 — "사용자 프로필 카드, 아바타, 이름, 직책, 팔로우 버튼" 이거 한 줄 적으면 React 컴포넌트가 5초 만에 나옵니다. 디자인도 진짜 깔끔하고요.

3개월 써본 솔직 후기

가장 좋은 점 — 프로토타입 속도가 진짜 미쳤어요. 예전에는 디자이너한테 시안 요청하고, 받고, 컴포넌트로 옮기는 데 일주일 걸렸거든요. 이제 30분 만에 첫 버전 나옵니다.

아쉬운 점 — 복잡한 인터랙션은 잘 못해요. "드래그 앤 드롭으로 카드 순서 바꾸기" 이런 거 시키면 결과가 좀 어색합니다. 단순한 UI까지가 한계예요.

그리고 한 번 만든 컴포넌트 수정 요청할 때 가끔 처음부터 다시 만들어요. 이게 좀 답답합니다. (수정 두 번째에서 진짜 어이없어서 욕 나왔던 적 있음)

경쟁자랑 비교

• v0 — shadcn/ui 기반. React + Tailwind. 코드 품질 톱급
• Lovable — 풀스택. DB까지 자동 생성. 하지만 코드 품질은 살짝 못함
• Bolt.new — 전체 앱 한 번에 생성. 빠른데 디테일 약함
• Claude Artifacts — 무료. 단순 컴포넌트는 충분

저는 v0랑 Claude를 같이 써요. 디자인 뽑을 땐 v0, 비즈니스 로직 짤 땐 Claude. 이 조합이 진짜 좋습니다.

가격

월 20달러부터. 무료 티어는 일 5번 한정인데 진짜 빨리 소진돼요. 시간 좀 쓰시는 분이면 Pro 가시는 게 맞습니다.

Vercel 호스팅 같이 쓰면 통합이 진짜 매끄러워요. 만든 컴포넌트 바로 배포 가능하고. 단점은 Vercel 생태계에 묶이게 된다는 거.

실제 프로젝트에 어떻게 적용했나

회사 어드민 대시보드 만들 때 진짜 도움 됐어요. 차트 컴포넌트, 테이블, 모달 같은 거 v0로 다 뽑고, 데이터 연결만 직접 하는 식으로. 일주일 걸릴 작업이 이틀 만에 끝났습니다.

참고로 결과물 그대로 쓰지 마세요. 항상 사람이 한 번 리뷰해야 해요. AI가 만든 거라 접근성(a11y) 빠지는 경우가 종종 있어요. aria-label 같은 거 직접 추가해야 합니다.

그래서 살까 말까

프론트엔드 개발자면 무조건. 사이드 프로젝트 많이 하시는 분이면 더더욱. Cursor랑 같이 쓰면 1인 풀스택 개발이 진짜 가능해져요.

디자이너가 React 배우고 싶다면 이거 강력 추천. 만들어진 코드 보면서 React 익히는 데 진짜 좋아요. (제가 디자이너 친구한테 추천했더니 한 달 만에 컴포넌트 짜기 시작했음)

여러분도 무료 티어로 한 번 써보시고 결과 댓글로 남겨주세요. 다음 편에서는 v0랑 Cursor 같이 쓰는 워크플로 다뤄볼게요.