[AI 웹빌더 5종 테스트 #4] Replit - 지갑을 열게 될수도?!

황자립·2025년 9월 23일

AI builder 비교

목록 보기

6/7

개요

이 글은 AI 웹 빌더 5종 비교 실험 중 replit 편입니다.

실험 배경:
평소 노션에 기록해둔 "친구와 만날 때 중간지점 찾기" 아이디어를 AI 웹 빌더들로 실제 구현해보며, 각 서비스의 역량을 비교해보는 실험을 진행했습니다.
선정 이유: 단순한 랜딩 페이지가 아닌, 외부 API 연동, 상태 관리, 모바일 최적화 등이 필요한 실제 웹 애플리케이션 수준의 프로젝트로 각 서비스의 한계를 명확히 파악하고자 했습니다.

실험 조건:

무료 플랜으로만 작업
직접 코드 수정 최소화
Claude와 작성한 PRD 기반 단계별 구현

평가 라운드:

Round 1: 기본 레이아웃 구현 (사이드바, 지도, 마커, 중간점 표현)
Round 2: 장소 추천 시스템 (중간 지점에 있는 장소 bottom sheet로 제공)
Round 3: 실시간 투표 (추천된 장소에서 투표 기능 구현)
Round 3: 약속 확정 하기 (투표 결과에 대한 약속 정하기 및 벌칙 정하기)

Round 1: 기본 UI 구현

목표: 중간지점 찾기 기본 화면 구성

지도 영역 (또는 시뮬레이션)

2-5명 출발지 입력

중간지점 계산 및 표시

각자 거리 표시

먼저 replit의 첫번째 라운드 입니다. replit의 경우 요구사항을 먼저 분석을 하고, 전체 앱을 구현할건지, 프로토타입 디자인을 할건지 먼저 물어봅니다. 좀 낯선 느낌이긴 하지만 전체 앱을 구현해보기로 합니다.

여기서 놀라웠던 점을 하나 소개하고 싶습니다. Replit은 Agent를 지원합니다. 단순히 LLM이 코드를 구현하는 것이 아니라 코드를 구현하고 스스로 에러를 감지하고 자동 수정하여 재실행까지 해준다는 점인데 이를 사용자에게 시각적으로 제공하고, 작업 완료까지 몇분이 걸렸고 작업 결과까지 보여줍니다.

기능을 잘 구현되었고, 여기서 하루에 사용할 수 있는 크레딧이 끝나버렸습니다. 너무 아쉽기도 하고, 뭔가 잘만 하면 큰일을 해낼 수 있겠다 싶어서 아주... 예외적으로...
Replit은 딱 한달만 결제 해보기로 결정했습니다. 사용하는 모델은 동일하고 사용량만 늘어나는 거라면 이 부분은 감안하고 비교를 해봐도 좋을거 같습니다.

Round 2: 중간 지점 장소 추천 시스템

목표: 중간지점 근처 장소 추천 UI

카테고리 탭 (카페/음식점/술집)

장소 카드 디자인

평점, 거리, 태그 표시

필터/정렬 기능

2 라운드에서는 1 라운드에 비해 약간은 복잡한 컴포넌트 구현을 잘해주었습니다. 시간은 다른 서비스들에 비해서 조금 더 오래 걸리는 느낌은 있지만 확실하게 동작합니다. 또 하나 소소하게 놀라웠던 포인트들은 이모지지들을 장소에 맞게 넣어줬다는 점인데, 예를 들어 "명동교자" 의 경우 만두 이모지를 넣어준 케이스 입니다. 정말 깜짝 놀랐습니다.

Round 3: 투표 기능 구현

목표: 5명이 함께 장소 결정하는 투표 시스템

후보 선택 단계

실시간 투표 UI

프로그레스 바와 애니메이션

결과 발표

작업을 하다가 불의의 사고로 중간 스크린샷을 남길 수 없어서 Round 4에 통합하여 작성하겠습니다....

역시나 간단하게 작업을 완료해주었습니다.

Round 4: 약속 확정까지의 플로우 구현

목표: 투표→약속→벌칙까지 연결된 UX

투표 후보 선정, 2개 이상 장소 선정시 투표 시작하기 버튼 활성화
투표에서 약속 정하기, 지각 벌칙 정하기까지 플로우 구현
지각 벌칙 설정
최종 확정 및 공유

마지막 최종 단계입니다! 프롬프트에 게임처럼 보여라 라고 했던 부분이 저렇게 투표 결과 발표 애니메이션으로 구현해준 부분이 매우 인상적입니다!

사실 결과물만 놓고 본다면 bolt, lovable과 같이 모두 동일한 결과를 보여주었지만, 이 과정에서 Agent가 자체적으로 테스트를 한번해서 줬다는 이유만으로 신뢰가 간다는 느낌을 받았습니다. 이 부분의 단점은 좀 더 테스트를 덜 하게된다는 점?

결론

⭐⭐⭐⭐ + ⭐½ (4.5/5)

Replit은 제가 생각했던 AI Web 빌더들을 한 차원 넘어서는 결과물을 보여줬습니다!
같은 프롬프트를 제공함에도 불구하고 결과가 이렇게 다를 수 있구나 하고 놀랐습니다.
결과물을 단적으로 비교를 한다고 하면, cursor와 ClaudeCode와 비교할 수 있을거 같습니다.

사용 경험을 비교 했을땐 cursor.ai로 개발했을때랑 좀 더 가깝다는 생각이 들었습니다.
웹에서 사용이 가능하고, 바로 결과물을 프리뷰가 옆에 붙어있는.

생각해보면 Replit은 시작을 AI Builder로 시작한게 아니라 Web IDE로 출발했고, Agent 기능이 추가된거라 당연하게도 비슷하게 느껴지는게 맞다는 생각도 들었습니다.
그렇기에 cursor와의 사용 경험을 비교해보고 싶다는 생각이 들었습니다.

장점으로 느껴지는 부분입니다.

결과물의 완성도
Agent 작업 과정을 시각적으로 제공
작업 결과에 대한 변경 사항을 Changes 버튼으로 제공하여 확인하기 쉬움
프리뷰부터 채팅창까지, Replit 안에서 지원하는 모든 기능이 Tab 형태로 제공되어 원하는 사이즈로 배치가 가능
이 테스트에서 직접적으로 진행되진 않았으나, DB 구축을 비롯한 백엔드 개발도 가능하다는 점

아쉽다고 느꼈던 부분은

버전 관리의 불편함
이 글을 작성하는 시점이 처음 개발한 버전으로 부터 1주일이 지난 시점이였는데 이전에 구현 되었던 버전을 프리뷰로 더 이상 확인할 수는 없었습니다.

이전 버전을 확인하기 위해서는 Rollback 기능을 사용해야되는데 빌드를 다시 하는 과정을 거쳐야되서 약간은 버거로운 느낌이 있었습니다. 그리고 이떄 대화 내용을 View chat 기능으로 제공했으나 오류가 발생하며 확인할 수 없는 경우가 있었습니다.

배포 과정의 복잡함
또한 깃허브 연동하는 과정과 배포하는 과정이 약간은 까다로워, 아래 블로그 방법을 보고 진행할 수 있었습니다.
https://zest1923.tistory.com/25
예상치 못한 추가 요금의 함정
Pro 플랜($25/월)d을 사용시에 다 쓰면 알아서 막힐 줄 알았는데 큰 착각이었습니다.
한 달 후 청구서를 확인해보니 $50의 추가 요금이 발생했습니다. 😱
알고 보니 월 $25는 기본 크레딧이고, 그 이상 사용하면 추가 과금되는 구조였습니다.
"Usage budget"을 반드시 설정하세요!
설정하지 않으면 저처럼 예상치 못한 요금 폭탄을 맞을 수 있습니다. 특히 Agent가 자동으로 여러 번 재시도하면서 크레딧을 빠르게 소모하는 경우가 있어 주의가 필요합니다.