개요
AI 웹 빌더 5종 비교 실험 중 v0.app 편입니다.
실험 배경:
평소 노션에 기록해둔 "친구와 만날 때 중간지점 찾기" 아이디어를 AI 웹 빌더들로 실제 구현해보며, 각 서비스의 역량을 비교해보는 실험을 진행했습니다.
선정 이유: 단순한 랜딩 페이지가 아닌, 외부 API 연동, 상태 관리, 모바일 최적화 등이 필요한 실제 웹 애플리케이션 수준의 프로젝트로 각 서비스의 한계를 명확히 파악하고자 했습니다.
실험 조건:
- 무료 플랜으로만 작업
- 직접 코드 수정 최소화
- Claude와 작성한 PRD 기반 단계별 구현
평가 라운드:
Round 1: 기본 레이아웃 구현 (사이드바, 지도, 마커, 중간점 표현)
Round 2: 장소 추천 시스템 (중간 지점에 있는 장소 bottom sheet로 제공)
Round 3: 실시간 투표 (추천된 장소에서 투표 기능 구현)
Round 3: 약속 확정 하기 (투표 결과에 대한 약속 정하기 및 벌칙 정하기)
Round 1: 기본 UI 구현
목표: 중간지점 찾기 기본 화면 구성
- 지도 영역 (또는 시뮬레이션)
- 2-5명 출발지 입력
- 중간지점 계산 및 표시
- 각자 거리 표시
먼저 첫번째 라운드 입니다.
너무도 쉽게 제가 생각했었던 UI를 구현해준 모습입니다. 의도대로 인원수를 입력 받고 인원수에 따라 동적으로 출발 위치를 입력 받을 수 있는 input 컴포넌트가 늘어난 상태입니다. 초기화 버튼도 잘 동작했습니다. 다만 카카오 Map API는 여러가지 방법을 시도했으나, 외부 스크립트를 불러오는 과정에서 문제가 있는 듯 하여 mock 데이터를 넣는 방법으로 대체했습니다.
별도 프롬프트를 제공하고 구현된 모습입니다. 원하는 모습대로 결과가 잘 구현이 되었습니다.
다만, 약간중간 중간 이렇게 초기화 되기 전 검색 로직이 타는지 valid 경고창이 발생했고, 카카오 Map API 관련된 로그가 루프가 타는 모습을 보였습니다.
이 부분은 몇차례 수정을 요청을 했으나, 해결이 안되는 모습이였습니다. 우선은 필수 구현에 필요한 핵심 컴포넌트들은 구현이 되었기에 round 2로 넘어가겠습니다.
Round 2: 중간 지점 장소 추천 시스템
목표: 중간지점 근처 장소 추천 UI
- 카테고리 탭 (카페/음식점/술집)
- 장소 카드 디자인
- 평점, 거리, 태그 표시
- 필터/정렬 기능
두번째 라운드도 크게 어려움 없이 구현됐습니다. 인상적인 점은 별도로 요청한적은 없으나
목업 데이터를 참고하여 이미지를 생성해주었습니다. 이런 부분은 간단한 MVP 만들때 도움이 되겠다 라는 생각을 했습니다. 지금까지 만족입니다!
Round 3: 투표 기능 구현
목표: 5명이 함께 장소 결정하는 투표 시스템
- 후보 선택 단계
- 실시간 투표 UI
- 프로그레스 바와 애니메이션
- 결과 발표
다음은 실시간 투표 기능입니다. 중간 지점을 찾고 중간 지점에 있는 장소 중 투표를 할 수 있는 기능입니다. 실제로 실시간 투표를 받을 수 있으면 좋겠지만 그건 지금 테스트와 취지가 맞지 않는 거 같아서 테스트 시나리오를 제공했습니다.
[테스트 시나리오]
페이지 로드시:
1. 5명 참가자 자동 설정
2. 본인은 A로 표시
3. 다른 참가자들 랜덤 투표 시뮬레이션
4. 3초마다 한 명씩 투표하는 애니메이션
데모 데이터:
- 5개 장소 표시
- 각 장소마다 0-5표 랜덤
- 실시간처럼 보이는 가짜 업데이트
문제는 여기서부터 시작이 되었습니다. 1 round에서 해결이 되지 않았던 문제가 계속 발목을 잡았습니다. 이후에도 몇차례 수정을 요청하였으나, v9에서 시작됐던 요청이 v18이 될때까지 구현이 안된 모습입니다.
최종 모습입니다.
무슨 일인지 alert 창은 더 이상 나오지 않으나, 이전의 컴포넌트들은 어디로 가고 중간 지점 계산 하기만 출력된 모습입니다. 18 버전에서 크레딧을 모두 사용하여 더 이상 진행할 수는 없었습니다. 다른 서비스들은 사실 한 작업이 끝나기도 전 크레딧을 다 사용하여 하루를 기다렸다가 사용했어야 했고 이 부분에서 v0의 장점이 크구나 여겼는데, 오히려 한 달에 사용할 수 있는 크레딧을 다 사용해버리니깐 더 이상 작업을 할 수 없다니 이것 또한 크게 아쉬움이였습니다.
평소에 v0를 즐겨썼던 터라 좀 아쉬움이 많이 남은 결과였습니다. 평소에 작업했을떄는 어느정도 레이아웃 잡힌 다음 제가 직접 구현했었던 터라 이런 부분을 몰랐던거 같습니다.
결론
⭐⭐⭐ (3/5)
v0.dev는 제가 평소에 즐겨 쓰던 서비스라 기대가 컸는데, 버그 픽스를 하는 부분, 별도의 요청이 없을 시 하나의 컴포넌트에 모든 로직들이 구현되어 있는 점이 아쉽게 느껴졌습니다, 앞으로도 사용하게 된다면 간단한 layout 구현시에만 사용하게 될거 같습니다.
제가 사용해보면서 느꼈던 점입니다.
장점
- 압도적인 UI 품질: shadcn/ui 기반으로 괜찮은 컴포넌트 생성
- 빠른 프로토타이핑: Round 1-2까지는 완벽한 구현
- 이미지 자동 생성: 목업 데이터까지 알아서 채워주는 센스
- 효율적인 크레딧 사용: 다른 서비스 대비 적은 크레딧으로 많은 작업 가능
단점
- 외부 API 연동 불가: Kakao Map 같은 외부 스크립트 완전 실패
- 버그 수정 무능: v9→v18까지 같은 에러 반복 (크레딧만 날림)
- 상태 관리 미흡: Round 3에서 완전히 무너짐
- 코드 구조화 부재: 모든 로직이 하나의 컴포넌트에 때려박힘
전반적으로 아쉬웠고, 다음 업데이트 전까지는 다른 서비스를 한번 찾아봐야겠습니다.
