바이브 코딩으로 AI 답변 비교 웹앱을 만들어봤습니다.
요즘 AI 도구를 이것저것 사용하다 보니 자연스럽게 이런 생각이 들었습니다.
ChatGPT, Claude, Gemini, Perplexity에게 같은 질문을 던지면 과연 어떤 AI가 가장 좋은 답변을 해줄까?
처음에는 그냥 느낌으로 비교했습니다. 어떤 답변은 글이 깔끔했고, 어떤 답변은 정보가 더 자세했고, 어떤 답변은 실용적인 예시가 많았습니다. 하지만 계속 사용하다 보니 단순히 "이게 더 좋은 것 같다"는 감각만으로는 비교가 어렵다는 생각이 들었습니다. 특히 블로그에 AI 사용 후기를 쓰려면 조금 더 정리된 기준이 필요했습니다.
제가 평소 답변을 비교하는 기준은 대략 이렇습니다.
- 답변이 정확한가
- 글의 흐름이 자연스러운가
- 실제로 써먹기 좋은가
- 읽기 편하게 정리되어 있는가
이런 항목을 기준으로 점수를 매기고, 어떤 AI가 가장 나은 답변을 했는지 기록해두면 나중에 비교할 때 훨씬 도움이 될 것 같았습니다. 그러다 문득 이런 생각이 들었습니다.
"이걸 직접 웹앱으로 만들어볼 수 있지 않을까?"
물론 저는 전문 개발자가 아닙니다. 코드를 직접 짜서 웹앱을 만드는 일은 아직 어렵게 느껴집니다. 하지만 요즘 자주 들리는 말이 있습니다. 바로 바이브 코딩입니다.
바이브 코딩은 코드를 한 줄씩 직접 작성하는 대신, 만들고 싶은 결과물을 자연어로 설명하면 AI가 그에 맞는 코드를 만들어주는 방식입니다. 2025년 초 AI 연구자 안드레이 카파시가 처음 제안한 개념으로, 지금은 비개발자도 아이디어를 빠르게 형태로 만들어볼 수 있는 입구로 주목받고 있습니다.
그래서 이번에는 바이브 코딩 방식으로 작은 웹앱을 하나 만들어보기로 했습니다. 거창한 서비스가 아닙니다. ChatGPT, Claude, Gemini, Perplexity의 답변을 같은 질문 기준으로 비교하고, 점수를 매긴 뒤 기록으로 남길 수 있는 간단한 웹앱입니다.
이번에 사용한 도구는 Lovable
이번 바이브 코딩 체험에는 Lovable을 사용했습니다.
Lovable은 만들고 싶은 앱을 말로 설명하면, AI가 그 내용을 바탕으로 웹앱을 만들어주는 도구입니다. 개발 환경을 따로 설치하지 않아도 브라우저에서 바로 시작할 수 있다는 점이 마음에 들었습니다. 전문 개발자가 아닌 입장에서는 "일단 한번 만들어볼까?" 하고 접근하기에 부담이 적었습니다.
처음부터 완성도 높은 서비스를 만들겠다는 목표는 아니었습니다. 오히려 목적은 단순했습니다.
"코딩을 잘 모르는 내가, 말로 설명하는 것만으로 실제 웹앱 형태의 결과물을 만들 수 있을까?"
이 질문을 확인해보기 위해 Lovable에 첫 프롬프트를 입력해봤습니다.
첫 번째 프롬프트 입력
처음부터 "멋진 앱 만들어줘"라고만 하면 결과물이 막연하게 나올 것 같았습니다. 그래서 앱의 목적, 화면 구성, 필요한 기능, 저장 방식, 디자인 방향까지 최대한 구체적으로 정리해서 전달했습니다. 핵심만 옮겨보면 이런 내용이었습니다.
실제 프롬프트는 이보다 조금 더 자세했지만, 핵심은 위와 같습니다.
이번에 프롬프트를 작성하면서 느낀 점은, 바이브 코딩에서는 단순히 "앱을 만들어줘"라고 말하는 것보다 원하는 결과물을 얼마나 구체적으로 설명하느냐가 훨씬 중요하다는 것입니다. 처음에는 기능만 적으면 될 줄 알았습니다. 하지만 막상 작성해보니 화면 구성, 데이터 저장 방식, 디자인 분위기까지 적어야 원하는 결과에 가까워질 수 있겠다는 생각이 들었습니다.
코드를 짜기 전에 계획을 먼저 볼 수 있습니다
프롬프트를 입력하자 Lovable은 바로 코드 작성에 들어가지 않았습니다.
Lovable에서는 두 가지 선택지가 있었습니다. 바로 결과물을 만들기 시작하는 Build와, 먼저 전체 구현 방향을 정리하는 Plan이었습니다.
저는 처음부터 바로 빌드하기보다는, AI가 제 요청을 어떻게 이해했는지 먼저 확인하고 싶었습니다. 그래서 Plan을 선택했습니다.
그러자 Lovable은 실제 코드를 작성하기 전에 전체 구현 계획을 먼저 정리해서 보여줬습니다. 단순히 "이런 앱을 만들겠습니다" 수준이 아니라, 화면 구조, 기능, 파일 구성, 데이터 저장 방식, 디자인 방향까지 나누어 설명했습니다. 계획을 확인한 뒤 사용자가 Build 버튼을 눌러야 실제 코드 작성과 구현이 시작되는 구조였습니다.
이 과정이 꽤 마음에 들었습니다. AI가 바로 결과물을 만들어버리는 것이 아니라, 먼저 "이런 방향으로 만들려고 하는데 괜찮나요?"라고 확인받는 느낌이었기 때문입니다.
처음에는 "AI가 코드를 대신 짜준다"는 이미지만 떠올렸는데, 실제로는 일을 시작하기 전에 "이렇게 만들 생각인데 괜찮을까요?" 하고 먼저 확인을 받는 흐름에 가까웠습니다. 사람과 협업할 때 처음에 기획안을 공유하고 방향을 맞춰보는 과정과 비슷하다는 생각이 들었습니다.
덕분에 계획 단계에서 방향이 마음에 들지 않으면 코드가 만들어지기 전에 미리 조정할 수 있고, 계획이 마음에 들면 그대로 빌드로 넘어가면 됩니다. 시간과 결과물을 모두 아낄 수 있는 방식이라는 생각이 들었습니다.
실제 구현 첫 화면을 보고 놀란 점
Lovable이 구현한 첫 화면은 생각보다 깔끔했습니다.
처음에는 간단한 테스트용 웹앱 정도라고 생각해서 큰 기대를 하지 않았습니다. 그런데 실제 결과물을 보니 질문 입력 영역, AI별 답변 카드, 평점 입력 영역, 승자 표시, 기록 저장 영역까지 전체 구성이 꽤 잘 잡혀 있었습니다.
특히 놀라웠던 부분은 화면이 단순히 만들어지기만 한 것이 아니라, 실제로 유연하게 동작했다는 점입니다. 답변을 입력하는 박스의 크기도 자연스럽게 조절됐고, 평점을 넣고 빼는 동작도 부드러웠습니다. 점수를 바꾸면 총점과 승자 표시도 바로 반영됐습니다.
첫 시도인데 이 정도 결과가 나온다는 점이 인상적이었습니다. 사실 바이브 코딩이라는 말을 처음 들었을 때는 조금 막연했습니다. AI가 코드를 만들어준다고 해도, 어느 정도까지 자연스럽게 작동할지는 감이 잘 오지 않았습니다. 그런데 실제 결과물을 보니 적어도 간단한 웹앱 수준에서는 꽤 빠르게 쓸 만한 형태가 만들어졌습니다.
Perplexity를 빼먹고 다시 수정 요청하다
처음에는 ChatGPT, Claude, Gemini 세 가지 AI만 비교 대상으로 넣었습니다. 그런데 만들고 나서 생각해보니 제가 실제로 자주 사용하는 AI는 네 가지였습니다. Perplexity를 빼먹은 것입니다.
그래서 Lovable에게 Perplexity도 비교 대상에 추가해달라고 다시 요청했습니다. 이 과정도 생각보다 매끄러웠습니다. 단순히 카드 하나를 억지로 끼워 넣는 느낌이 아니라, 기존 화면 구성에 맞춰 Perplexity 항목을 자연스럽게 추가해줬습니다.
그런데 이 과정에서 한 가지 흥미로운 사실을 알게 됐습니다.
Perplexity가 추가된 결과물을 보니, 따로 색상을 지정하지 않았는데도 Perplexity 특유의 청록색 계열이 자연스럽게 적용되어 있었습니다. 그제야 다시 처음 프롬프트를 들여다봤습니다. 생각해보니 ChatGPT, Claude, Gemini의 색상도 제가 직접 지정한 적이 없었습니다. 단지 "AI별로 포인트 컬러를 다르게 써줘" 정도로만 요청했을 뿐인데, Lovable이 알아서 각 서비스의 대표 색상에 가까운 톤을 골라 적용해둔 것이었습니다.
Perplexity를 추가하면서 비로소 이 사실을 알아챘는데, 꽤 능숙하고 센스 있는 처리 방식이라는 생각이 들었습니다.
이런 부분에서 바이브 코딩이 단순히 "코드를 대신 써주는 기능"이 아니라, 어느 정도는 함께 화면을 설계하고 다듬어가는 작업처럼 느껴졌습니다.
작동은 잘 되지만, 한계는 느껴졌습니다
솔직히 첫 결과물만 놓고 보면 크게 아쉬운 점은 없었습니다. 심플한 웹앱이기도 했고, 처음부터 엄청난 기능을 기대한 것도 아니었습니다. 그런데 생각보다 결과물이 깔끔했고, 기본 기능도 잘 작동해서 오히려 기대 이상이었습니다.
다만 바이브 코딩의 한계에 대해서는 짚고 넘어갈 부분이 있다는 생각이 들었습니다.
이런 비유가 떠올랐습니다. AI가 만든 코드는 겉으로 보기에는 의자처럼 보이고, 실제로 앉을 수도 있을지 모릅니다. 하지만 그 의자가 정말 효율적인 구조인지, 다리가 너무 많거나 이상한 방식으로 만들어진 것은 아닌지는 겉으로만 봐서는 알기 어렵습니다.
이번 웹앱도 마찬가지였습니다. 화면이 잘 작동하는지는 확인할 수 있었습니다. 하지만 내부 코드가 얼마나 깔끔한지, 효율적인지, 나중에 기능을 더 추가해도 문제가 없는지는 정확히 판단하기 어려웠습니다. 특히 앱이 복잡해질수록 이런 부분은 더 중요해질 것 같습니다.
| 구분 | 바이브 코딩의 강점 | 바이브 코딩의 한계 |
|---|---|---|
| 속도 | 아이디어를 빠르게 화면으로 | 정밀한 디버깅은 사람 몫 |
| 접근성 | 비개발자도 결과물 제작 가능 | 코드 구조·품질 평가는 어려움 |
| 용도 | 프로토타입, 개인용 도구 | 대규모 서비스 확장에는 부적합 |
저처럼 비전문가인 사람에게는 "일단 작동한다"는 점이 가장 먼저 보입니다. 하지만 숙련된 개발자 입장에서는 코드 구조, 유지보수성, 성능 같은 부분이 아쉽게 느껴질 수도 있겠다는 생각이 들었습니다.
그래서 바이브 코딩은 아이디어를 빠르게 화면으로 만들어보는 데는 정말 유용하지만, 실제 서비스로 키워가려면 결국 코드를 이해하고 검토할 수 있는 사람의 도움이 필요할 것 같다는 결론에 도달했습니다.
바이브 코딩을 직접 해보고 느낀 점
이번 체험을 통해 바이브 코딩이 왜 주목받는지 조금은 알 것 같았습니다.
코드를 몰라도 원하는 것을 말로 설명하면, 생각보다 빠르게 실제 화면과 기능이 만들어졌습니다. 특히 Lovable은 프롬프트를 입력하면 먼저 계획을 정리하고, 그 계획을 바탕으로 실제 결과물을 만들어준다는 점이 인상적이었습니다.
제 머릿속에 있던 출발점은 단순했습니다.
"AI 답변을 비교해서 기록하고 싶다."
이 아이디어를 화면으로 만들기 위해 프롬프트에 화면 구성, 기능, 디자인 방향까지 최대한 상세하게 적어 전달했습니다. 그러자 Lovable은 그 내용을 바탕으로 질문 입력 영역, AI별 답변 카드, 항목별 점수 평가, 총점 계산, 승자 표시, 기록 저장, 삭제 기능이 들어간 웹앱 구조를 빠르게 만들어줬습니다.
이 과정을 보면서 바이브 코딩의 진짜 핵심이 어디 있는지 조금 이해됐습니다. AI가 알아서 다 해주는 것이 아니라, 제가 원하는 결과물을 얼마나 구체적으로 설명하느냐에 따라 결과가 달라진다는 점입니다. 결국 바이브 코딩은 "코드 작성"의 부담은 줄여주지만 "무엇을 만들지 정리하는 능력"은 여전히 사람 몫이라는 생각이 들었습니다.
물론 이것이 개발을 완전히 대체한다고 보기는 어렵습니다. 특히 복잡한 서비스나 실제 사용자 데이터를 다루는 앱이라면 더 조심해야 할 것입니다. 하지만 비전문가가 아이디어를 빠르게 실험해보는 도구로는 충분히 매력적이었습니다.
이번에 만든 AI 답변 비교 웹앱도 마찬가지입니다. 완벽한 서비스라고 할 수는 없지만, 실제로 필요하다고 느꼈던 도구를 말로 설명해서 직접 만들어봤다는 점에서 꽤 신선한 경험이었습니다.
앞으로 ChatGPT, Claude, Gemini, Perplexity를 비교할 때 이 웹앱을 활용해볼 생각입니다. 그리고 다음에는 한 가지 더 욕심을 내볼까 합니다. 비교 기록이 쌓이면 어떤 AI가 어떤 유형의 질문에 강한지 통계로 보여주는 기능을 추가해보려고 합니다. 이 정도까지 바이브 코딩으로 어디까지 가능한지가 다음 체험의 주제가 될 것 같습니다.
아이디어를 실제 화면으로 만들어볼 수 있는
새로운 입구가 될 수 있습니다.
완벽하진 않지만, 시작하기에는 충분히 매력적이었습니다.
