개요
이 글은 AI 웹 빌더 5종 비교 실험 중 Bolt 편입니다.
실험 배경:
평소 노션에 기록해둔 "친구와 만날 때 중간지점 찾기" 아이디어를 AI 웹 빌더들로 실제 구현해보며, 각 서비스의 역량을 비교해보는 실험을 진행했습니다.
선정 이유: 단순한 랜딩 페이지가 아닌, 외부 API 연동, 상태 관리, 모바일 최적화 등이 필요한 실제 웹 애플리케이션 수준의 프로젝트로 각 서비스의 한계를 명확히 파악하고자 했습니다.
실험 조건:
- 무료 플랜으로만 작업
- 직접 코드 수정 최소화
- Claude와 작성한 PRD 기반 단계별 구현
평가 라운드:
- Round 1: 기본 레이아웃 구현 (사이드바, 지도, 마커, 중간점 표현)
- Round 2: 장소 추천 시스템 (중간 지점에 있는 장소 bottom sheet로 제공)
- Round 3: 실시간 투표 (추천된 장소에서 투표 기능 구현)
- Round 3: 약속 확정 하기 (투표 결과에 대한 약속 정하기 및 벌칙 정하기)
Round 1: 기본 UI 구현
목표: 중간지점 찾기 기본 화면 구성
- 지도 영역 (또는 시뮬레이션)
- 2-5명 출발지 입력
- 중간지점 계산 및 표시
- 각자 거리 표시
먼저 첫번째 라운드 입니다. 기본 레이아웃을 잘 만들어주었으나, 눈에 띄는 부분이 하나있습니다. 참여인원 옆 현재 위치를 선택할 수 있는 버튼이, 주소 입력 컴포넌트를 벗어나서 구현이 되어 있습니다. 또한 상단 참여 인원 selectBox 우측 화살표의 padding이 좀 잘못 적용이 된거 같습니다.
지금까지 테스트 했던 다른 서비스에서는 볼 수 없던 모습이라 더 크게 느껴지는 거 같습니다.
하지만 기능 상으로는 구현의 문제는 없었습니다.또한 다른 서비스들과 마찬가지로 카카오 Map API를 연동시키려고 시도 해봤으나, 다른 서비스들과 마찬가지로 샌드박스 환경에서는 외부 스크립트를 불러오는 과정이 제한되었고, 동일하게 Mock 데이터로 처리했습니다. 이 또한 문제 없이 구현이 된 모습입니다. 조금 아쉽지만 1 round 통과입니다.
Round 2: 중간 지점 장소 추천 시스템
목표: 중간지점 근처 장소 추천 UI
- 카테고리 탭 (카페/음식점/술집)
- 장소 카드 디자인
- 평점, 거리, 태그 표시
- 필터/정렬 기능
2 라운드에서는 1 라운드에 비해 약간은 복잡한 컴포넌트 구현을 해야합니다. 중간 지점에 있는 mock 데이터를 보여주고, 장소 데이터를 필터링 해주는 게 목표 입니다. 이미지에 보이는 것처럼 필요한 기능들을 프롬프트 한번에 구현한 모습입니다.
사진은 별도로 생성을 요청하진 않았지만, 카페, 음식점, 술집 등 카테고리에 맞게 생성해준 모습입니다. v0와 비교했을때 차이점은 v0에서는 장소에 맞는 이미지들을 생성해준 것이 차이점이였습니다.
round 2도 통과입니다.
Round 3: 투표 기능 구현
목표: 5명이 함께 장소 결정하는 투표 시스템
- 후보 선택 단계
- 실시간 투표 UI
- 프로그레스 바와 애니메이션
- 결과 발표
3번째 라운드도 bolt는 잘 해냈습니다. 잘한건 한건데.... 왜 투표하기 버튼 영역을 저렇게 작게 잡고, 저 작은 곳에 여러가지를 우겨넣을까요... 이건 사실 제가 프롬프트를 제대로 작성하지 않은 제 탓인거 같습니다. 하지만 이전 lovable 과 비교 했을때는 완성도가 좀 떨어지게 보이는게 사실 입니다.
투표 결과의 디자인도 좀 어딘가 정신이 산만한 느낌이 들지만 기능은 잘 동작하기 때문에 넘어가겠습니다.
Round 4: 약속 확정까지의 플로우 구현
목표: 투표→약속→벌칙까지 연결된 UX
- 투표 후보 선정, 2개 이상 장소 선정시 투표 시작하기 버튼 활성화
- 투표에서 약속 정하기, 지각 벌칙 정하기까지 플로우 구현
- 지각 벌칙 설정
- 최종 확정 및 공유
마지막 4 라운드 입니다. 투표 기능을 좀 더 강화하고, 투표가 완료 됐을시, 약속 시간을 정하고 약속시간이 확정되면, 늦은 사람이 벌칙으로 커피 쏘기 기능입니다.
이 역시도 구현은 완벽하게 됐습니다. 다만 아쉬운건 역시 디자인
왜 좀 안이쁘고, 불안정할까 이 글을 쓰면서 고민 해봤을때 bolt는 lovable에 비해 영역을 잘 못쓴다는 생각이 들었습니다. 불필요하게 영역을 크게 잡거나, 필요한 영역을 작게 잡는 것, 그리고 padding 간격이 좀 어설프게 잡는다거나, font size가 좀 자기 멋대로이지 않나 이런 생각을 했습니다.
생각해보니... 제가 몇년 전 디자이너 없이 개발했을때 딱 이런 느낌이 났던거 같습니다. 뭘 해도 안예쁜....
결론
⭐⭐⭐ + ⭐½ (3.5/5)
bolt의 개인적인 평가는 별 3개 반입니다! 최소한의 기능 구현은 정말 잘해주었습니다.
하지만 별개로 완성된 제품으로서 릴리즈 하기 위해서는 별도로 추가 작업이 필요하다고 느꼈습니다.
사용하면서 느꼈던 점들은 기능 구현에 있어서는 다른 서비스와 마찬가지로 이 정도 규모의 프로젝트를 구현은 어렵지 않았습니다.
다만 유료 사용까지는 주저하게 되었습니다.
- 완성도
- 이 부분은 앞서 언급했기 때문에 넘어가겠습니다.
- preview 기능의 사용성
- chat 영역과, preview 영역을 슬라이더로 영역 조절이 불가능합니다. 이 때문에 가시성이 많이 떨어지는 느낌을 받았습니다.
- 물론 프리뷰 영역 안에서 간단하게 responsive mode와 Full Screen 모드를 지원하여 다양한 환경에서 테스트는 가능했지만 채팅창을 넓힐 수 없는게 많이 답답했습니다.
- inspector 모드는 기존 브라우져에서 지원하는 개발자 도구처럼 각 컴포넌트들의 스팩을 확인하고 수정을 직접적으로 수정할 수 있었으면 좋았을텐데, selector로서 기능만을 지원했습니다.
그 밖에 히스토리를 확인하거나, github에 통합시키는 과정, 릴리즈 시키는 과정 자체에서는 특별히 나무랄것은 없었습니다.
그러나 앞으로 기대되는 이유
2주 전 bolt에서 온 새로운 bolt V2에 관련된 mail인데 다양한 agent들을 도입하게 될 것이고 대기자 명단에 등록하라는 내용입니다. bolt는 V2 버전을 좀 더 기다려봐야겠습니다.
기능 구현은 낫 베드, 완성도는 쏘쏘
