개요
이 글은 AI 웹 빌더 5종 비교 실험 중 lovable 편입니다.
실험 배경:
평소 노션에 기록해둔 "친구와 만날 때 중간지점 찾기" 아이디어를 AI 웹 빌더들로 실제 구현해보며, 각 서비스의 역량을 비교해보는 실험을 진행했습니다.
선정 이유: 단순한 랜딩 페이지가 아닌, 외부 API 연동, 상태 관리, 모바일 최적화 등이 필요한 실제 웹 애플리케이션 수준의 프로젝트로 각 서비스의 한계를 명확히 파악하고자 했습니다.
실험 조건:
- 무료 플랜으로만 작업
- 직접 코드 수정 최소화
- Claude와 작성한 PRD 기반 단계별 구현
평가 라운드:
- Round 1: 기본 레이아웃 구현 (사이드바, 지도, 마커, 중간점 표현)
- Round 2: 장소 추천 시스템 (중간 지점에 있는 장소 bottom sheet로 제공)
- Round 3: 실시간 투표 (추천된 장소에서 투표 기능 구현)
- Round 3: 약속 확정 하기 (투표 결과에 대한 약속 정하기 및 벌칙 정하기)
Round 1: 기본 UI 구현
목표: 중간지점 찾기 기본 화면 구성
- 지도 영역 (또는 시뮬레이션)
- 2-5명 출발지 입력
- 중간지점 계산 및 표시
- 각자 거리 표시
먼저 첫번째 라운드 입니다.
v0와 마찬가지로 너무나도 쉽고 간단하게 레이아웃을 구현해준 모습입니다. 다만 이 시점에서 초기화 버튼은 동작하지 않았습니다. 최초 의도는 카카오 Map API를 연동시키려고 시도 해봤으나, v0와 마찬가지로 샌드박스 환경에서는 외부 스크립트를 불러오는 과정이 제한되었습니다. 동일하게 Mock 데이터로 처리 했습니다.
요청시 배경에 격자와, 그라데이션을 포함시켜달라고 요청했으나 그걸 포함하지 않고는 모두 다 잘 동작했습니다. round 1 통과!
Round 2: 중간 지점 장소 추천 시스템
목표: 중간지점 근처 장소 추천 UI
- 카테고리 탭 (카페/음식점/술집)
- 장소 카드 디자인
- 평점, 거리, 태그 표시
- 필터/정렬 기능
역시 잘 구현된 모습입니다. 제가 평소에 러버블에 대한 오해가 있었던거 같습니다. 저는 랜딩 페이지 정도 구현이 가능하지 않을까 했었는데 제 기대 이상으로 잘 해줬습니다. 필터도 잘 동작하고 만족스럽습니다. 다만 dimmed 처리를 요청하지는 않았으나 구현을 해주었습니다.
round 2도 통과입니다.
Round 3: 투표 기능 구현
목표: 5명이 함께 장소 결정하는 투표 시스템
- 후보 선택 단계
- 실시간 투표 UI
- 프로그레스 바와 애니메이션
- 결과 발표
앞서 v0는 round 3에서 뻗었는데 lovable은 잘 구현이 된 모습입니다. 물론 이 과정에서 무료 플랜의 한계로 하루에 사용할 수 있는 토큰을 다 사용해서 다음날로 넘겨서 진행을 했습니다.
이 과정에서 상단에 투표 현황 컴포넌트가 추가되면서 하단에 있는 장소가 가려져서 보이지 않는 문제가 생겼고 bottom sheet의 높이를 전체의 70% 사용하고 사이드바를 가리지 말라고 추가 요청을 진행했습니다.
또한 장소를 복수로 선택할 수 있도록 수정해달라고 추가 요청 했습니다. 
round 3를 구현한 모습입니다. 제가 구체적으로 투표 기능에 관한 컴포넌트에 대한 명시를 하지 않았던 탓인지, 좁은 바텀 시트안에 여러가지 기능들을 우겨넣어서 보기 싫은 상태가 되었지만
결과적으로 투표 결과까지 보여주도록 구현이 완료 되었습니다. 일단 굿 라운드 4로 고고
Round 4: 전체 플로우
목표: 투표→약속→벌칙까지 연결된 UX
- 투표 후보 선정, 2개 이상 장소 선정시 투표 시작하기 버튼 활성화
- 투표에서 약속 정하기, 지각 벌칙 정하기까지 플로우 구현
- 지각 벌칙 설정
- 최종 확정 및 공유
최종장입니다!
의도한 기능이 모두 구현된 상태입니다. 특별히 버그도 발생하지 않았고, 기능도 잘 동작합니다!
그렇지만 기능이 잘 구현되니깐 이제 좀 아쉬운 부분들이 보이기 시작합니다. 초기에 메인 테마 컬러를 지정해줬는데, 잊고 있나.. 이건 왜 이렇게 크지? 아 바텀 시트가 안내려 간네? 이런 부분들입니다.
lovable의 경우는 supabase를 통해 간단한 백엔드 구현도 가능한데, 프론트단은 잘 구현된걸 확인 했으니 앞으로는 백엔드를 얼마만큼 잘 구현할 수 있을지 테스트 해봐야겠습니다.
결론
⭐⭐⭐⭐ (4/5)
lovable은 제가 생각했던 거보다 훨씬 더 괜찮은 서비스였습니다. 평가절하를 했었던 이유는 아무래도 대중적으로 인기가 많고, 다른 서비스들에 비해 허들이 낮다보니 개발자가 아닌 분들이 많이 쓰는 서비스라는 인식 때문인거 같습니다..!!! 이 부분 크게 반성합니다 🙏
제가 사용해보면서 느꼈던 점 입니다.
- 완성도
- 간단한 요청 뿐만 아니라 복잡한 요청을 안정적으로 작업 가능
- 사용성
- 기본적으로 구현을 잘하는 거 이외에도 좋았던 점은 사용성이였습니다. 자료 첨부도 잘되고, 음성모드도 지원되고(써보진 않음), view history 이 기능도 좋았습니다. 버전별로 요청을 확인할 수 도 있고 북마크도 가능하여 글 쓸때 도움이 많이 됐습니다.
- 깃헙 연동도 쉬웠습니다. 이건 사실 당연한거라고 생각했었는데, 그렇지 않은 서비스들도 있었습니다.
- 다양한 기기(pc, tablet, mobile)에서의 preview 모드 지원이 되고 상단에서 쉽게 변경 가능합니다. 직관적으로 알아볼 수 있어서 좋았습니다.
- 코드 작성
- 이 부분도 사실 이 글을 작성하는 시점에서 확인하게 되었는데, 나름 복잡한 요청들을 무리 없이 잘 수행했던 것도 이 덕이지 않을까 생각이 들었습니다. 나중에 이어서 구현하거나, 유지보수할때도 좋겠습니다
단점이라고 하기보단 아쉬운점
- v0를 사용할때와 비교했을때 아무래도 일일 사용할 수 있는 크레딧(이 정해져 있다보니 한 3일 동안 작업을 해야됐다는 점이 좀 아쉬웠습니다.
초보자 구세주는 맞다. 근데 개발자도 쓸만하다!
