📌 먼치 POINT

1. 비개발자의 실전 도전, 바이브 코딩 입문기

• 장피엠은 개인 생산성 향상을 위해 바이브 코딩을 시작했고, 이를 영상 시리즈로 제작하기로 했다.

• 첫 프로젝트는 기업 강의 준비의 번거로움을 해결할 ‘프롬프트 아카이빙 툴’.

• 기능 기획부터 사용자 역할 구분까지, 실사용자 관점에서 프로젝트를 설계했다.

2. AI 도구 활용한 프로토타이핑과 빌드 경험

• 구글 AI 스튜디오를 활용해 PRD 문서 작성부터 프로토타입 제작까지 진행.

• 제미니 API, 자동 파일 구성, TODO 정리 등 AI의 작업 보조 기능이 인상 깊었다.

• 러버블(Lovable)로 넘어가 더 세련된 UI와 데이터베이스 연동까지 구현하며 완성도를 높였다.

3. 성공 팁과 다음 단계 예고

• 복잡한 프로젝트는 세 단계로 쪼개고, AI가 스스로 할 일을 기록하게 만드는 방식이 유효했다.

• 슈퍼베이스 연동, 로그인 기능, LLM 필터링 등을 추가하면 실서비스로 확장 가능성을 확인.

• 다음 영상에서는 개선된 ‘프롬프트 마스터’ 결과물을 소개할 예정이라 기대감을 모은다.

들어가며

안녕하세요. 장피엠입니다. 지금부터 시리즈 영상으로 제가 직접 바이브 코딩을 해보면서 비개발자 입장에서 궁금한 점이나 겪게 되는 시행착오들을 알려드려 보겠습니다. 현재 제가 바이브 코딩을 하고 있는 결과물을 보여드리면, 왼쪽에 명령어를 입력해서 오른쪽과 같은 결과물을 만들고 있습니다.

아직 완성품을 만들지는 못했지만, 저는 바이브 코딩으로 사업을 하거나 돈을 벌 생각은 없고 저만을 위한 도구를 직접 개발해 보고 있습니다. 일하는 데 자동화해야 하거나 번거로움을 해결하기 위해서 나만의 서비스를 만들어 쓸 수 있는 게 소기업 대표님들이나 직장인 분들이 공감할 수 있는 바이브 코딩의 가치라고 생각합니다.

사실 이 영상은 시리즈화 할 생각이 없었는데, 제가 바이브 코딩을 직접 해보니까 처음 노코드를 접했을 때와 같은 두근거림을 느꼈습니다. 생각보다 너무 쓸 만한 결과가 나와서 완성을 해보고 싶어서 시리즈로 제가 바이브 코딩을 통해 저만을 위한 서비스를 만드는 과정을 공유하기로 했습니다.

프롬프트 아카이빙 툴 프로젝트 기획

오늘은 제가 아는 지인 중에서 바이브 코딩을 가장 잘한다고 생각하는 배휘동 개발자님과 함께 바이브 코딩을 해보려고 합니다. 참고로 저는 바이브 코딩을 해보지 않았기 때문에 정말 라이브로 처음 바이브 코딩을 하는 사람 입장에서 여러 가지 시행착오를 겪으면서 하나의 프로젝트를 만들어 보겠습니다.

오늘 만들어 보려고 하는 제품은 프롬프트 아카이빙 툴입니다. 제가 기업 교육 강사로서 워낙 많은 기업을 가르치고 있다 보니까 기업마다 프롬프트가 다 나눠져 있는 게 강사 입장에서 강의 준비할 때 불편했습니다. 그래서 그것을 하나로 모아서 잘 아카이빙하고 AI가 알아서 필터링해 줄 수 있으면 다시 쓸 때 편리하지 않을까 해서 오늘 그런 아이디어를 제품화해 보려고 합니다.

기존에 나왔던 프롬프트 아카이빙 도구들은 많지만 저는 남들이 거기에 올리는 거 싫고, 오직 제가 작성한 것만 아카이빙하고 다시 꺼내 보는 데에 목적이 있습니다. 사용자가 크게 두 분류로 나뉘는데, 관리자로서 프롬프트를 등록하는 사이드가 있고, 기업 교육에 들어온 참여자들이 클릭하면 복사해서 쓸 수 있는 사용자 사이드가 있습니다.

AI 스튜디오로 PRD 문서 생성하기

배휘동 님이 미리 만든 바이브 코딩용 아이디어 구체화 도구를 사용해서 프로젝트를 시작했습니다. 이 도구는 제품을 구체화된 아이디어로 만들 수 있게 도와주고 바이브 코딩을 잘 할 수 있게 도와주는 앱입니다. 몇 개 항목을 채우면 강점 약점을 분석해 주고, 내가 안 채워놓은 걸 알아서 채워주며, 단계별로 세 단계에 걸쳐서 만든다면 어떻게 쪼갤지 그리고 그거에 따라서 입력, 처리, 출력, 행동, 검수를 어떻게 할지를 다 제안해 줍니다.

구글에서 만든 AI 스튜디오는 거의 모든 걸 무료로 할 수 있고 제미니 2.0 플래시라는 굉장히 좋은 모델을 공짜로 쓸 수가 있어서 많은 분들에게 추천하는 툴입니다. 공짜인데 심지어 개발도 잘한다니까 바이브 코더들한테는 오히려 챗GPT보다 더 추천할 수 있고, 바이브 코딩 툴로 가기 전에 이 툴에서 많이 시행착오를 겪으면 돈을 아낄 수 있다는 꿀팁이 있었습니다.

결과가 나온 PRD 문서를 보면 아이디어 강점에 대해서도 잘 분석해 주었고, 기존 솔루션의 한계에 대해서도 잘 정리해 주었습니다. 3번의 이터레이션(Iteration)으로 나누어 진행하는 부분도 흥미로웠는데, 특히 옛날에는 AI가 한 번에 복잡한 걸 잘 처리를 못 했기 때문에 너무 큰 걸 하면 내가 어차피 테스트하기 힘드니까 한 3개 정도로 쪼개서 진행하는 방식입니다.

AI 스튜디오 빌드 기능으로 첫 프로토타입 제작

AI 스튜디오의 빌드 기능을 사용해서 실제 프로토타입을 만들어보았습니다. 이 빌드 앱스 위드 제미니라는 기능이 나온 지 한 달도 안 됐는데, 무료로 사용할 수 있고 더 좋은 점은 이 안에서 제미니 API를 공짜로 호출할 수가 있다는 것입니다. 물론 이걸 배포를 하게 되면 그때부터는 내가 가진 API 키로 호출을 해야 되지만 지금 여기서 프리뷰로 보이는 거는 그냥 공짜로 다 호출할 수 있습니다.

코딩 과정에서 React라는 가장 많이 사용되는 프론트엔드 개발 언어를 가지고 알아서 어떤 파일을 만들 것까지 기획해서 혼자 파일을 만들어 주는 걸 볼 수 있었습니다. 이 파일들의 집합이 우리가 만들려고 하는 프로그램이 됩니다. 비개발자 입장에서는 파일 구조 같은 것도 어떻게 만들기 시작해야 되는지 어려운데 알아서 해주니까 정말 좋았습니다.

첫 번째 턴이 지나고 나서 AI가 해야 되는 일들을 관리하기 위해 TODO 관리를 시켰습니다. 우리가 준 PRD와 구현된 결과를 비교해서 아직 구현이 안 된 거랑 구현된 거 둘 다 TODOs.md라는 마크다운 파일 안에 집어넣어 달라고 하면 정리를 해 줍니다. 그럼 거기서부터 얘를 다운받아서 딴 데서 구현을 하든 뭘 하든 그런 것도 하기가 쉽고 얘가 스스로 관리하기도 편해집니다.

AI 스튜디오 프로토타입 테스트 결과

프로토타입이 완성되어 테스트해 본 결과, 프롬프트를 추가하고 미리보기를 할 수 있었고, 마크다운 적용도 어느 정도 되어 있었습니다. 카드 형태로 만들어졌고 수정 기능도 작동했지만, 태그 선택과 삭제 기능에서 문제가 있었습니다. 태그를 추가한 후 수정 버튼을 이용해서 태그를 선택하면 색깔도 들어가고, 필터 기능도 제가 원하는 조건대로 잘 작동했습니다.

하나라도 관련 있는 게 있으면 나오고 최소한 하나만 선택되더라도 표시되도록 하는 것까지 좋았습니다. 그렇게 오래 걸리지 않았고 디테일하게 지시한 것도 별로 없었는데 이 정도 결과가 나온 게 기대 이상이었습니다. 본문 복사 기능도 잘 작동해서 복사한 결과물도 깔끔하게 들어왔습니다.

바이브 코딩의 장점은 이렇게 만들어진 건 얼마든지 버려도 된다는 것입니다. 아깝지가 않고 어차피 PRD만 있으면 다른 데도 비슷한 수준으로 만들어줄 수 있기 때문에 언제나 처음부터 할 수 있다는 게 굉장히 좋은 장점입니다.

러버블로 더 완성도 높은 버전 제작

AI 스튜디오를 이용해서 무료로 프로토타입을 만들어 봤지만, 실제로 사용할 만한 제품을 만들려고 하면 다른 바이브 코딩 툴을 이용하는 게 더 좋아서 이번에는 러버블(Lovable)로 비슷한 과정을 해보았습니다. 러버블은 약간의 비용이 들지만 그래도 하루에 5번 정도 채팅을 써서 만들 수도 있고, UI를 훨씬 예쁘게 만들어 주기도 하며, UI 수정도 쉽고 무엇보다 슈퍼베이스 같은 DB나 결제 모듈 인테그레이션을 붙이기가 훨씬 쉽습니다.

러버블의 좋은 점은 제안을 해준다는 것입니다. 슈퍼베이스 붙일까요? 이런 걸 제안을 해줘서 뭘 해야 되는지 모르는 비개발자 입장에서는 편했습니다. 커서가 바이브 코딩 툴로 유명한데 커서 대비해서 바이브이 더 쉽게 시작할 수 있는 게 러버블이라고 할 수 있습니다. 하지만 아무래도 커서가 훨씬 더 통제하기 쉽고 더 기능이 풍부하기 때문에 커서로 하는 분도 많습니다.

첫 번째 시도에서 문제가 있어서 다시 요청했더니 훨씬 더 나은 결과가 나왔습니다. 태그도 훨씬 많이 만들어졌고 프롬프트도 만들어 줬으며, 미니멀한 디자인도 좋았습니다. 수정 버튼과 삭제 버튼도 모두 제대로 작동했습니다.

태그 관리 기능 추가와 상세 페이지 구현

태그와 카테고리를 관리할 수 있는 기능을 요청했는데, 여기서 배휘동 님이 중요한 팁을 주었습니다. 갈수록 AI가 똑똑해져서 내가 말을 덜 하는 게 오히려 좋을 때가 있다는 것입니다. 알아서 "맞아 나도 이런 것도 필요했는데"라는 것도 해주게 하려면 오히려 약간 큰 목적을 얘기하고 어떻게 구현해야 되는지는 의도적으로 말하지 않는 게 좋을 때도 있다고 했습니다.

결과적으로 태그 관리 페이지가 예쁘게 만들어졌고, 돌아가기 버튼과 상세 페이지도 구현되었습니다. 복사, 편집, 삭제 기능까지 모두 포함되어 있어서 제가 원하는 거를 꽤 훌륭하게 해줬습니다. AI 스튜디오에서 한번 어떤 느낌인지 경험을 해봤기 때문에 그 베이스라인이 생겨서 더 좋아 보이는 것도 있었습니다.

슈퍼베이스 데이터베이스 연동

러버블에서 슈퍼베이스 데이터베이스를 연동하는 과정이 놀라울 정도로 간단했습니다. 버튼 하나만 누르면 연동이 되고, 단순하게 랜딩 페이지처럼 내가 전달하고 싶은 바만 일방적으로 전달하는 게 아니라 유저와 상호작용하는 기능을 만들고 싶으면 데이터베이스를 추가하면 됩니다.

슈퍼베이스 프로젝트를 "프롬프트 마스터"라고 만들고 러버블과 연결했습니다. 데이터베이스에 대한 구조에 대한 이해 없이도 할 수 있다는 게 정말 놀라웠습니다. 노코드로 했을 때는 에어테이블을 어떻게 설계해야 되는지가 진짜 골치 아픈데, 이 부분을 커서나 러버블 같은 도구들은 인테그레이션을 통해서 해결해 줍니다.

프롬프트를 추가해보고 데이터베이스에 정말 추가되는지 확인해본 결과, 완벽하게 들어왔고 태그가 어디에 매핑이 됐는지도 확인할 수 있었습니다. 이거 정말 노코드로 만들려고 하면 힘든 일인데 이렇게 쉽게 된다는 게 너무나 놀라웠습니다.

퍼블리시를 해보니 "프롬프트 마스터"라는 이름으로 웹사이트가 생성되었고, 데이터베이스가 붙었으니까 누구나 등록된 프롬프트를 볼 수 있게 되었습니다. 기본적인 기능은 아주 훌륭하게 수행하는 결과가 나왔습니다.

여기서 로그인을 붙여서 나만 등록할 수 있게 하는 기능을 추가할 수 있고, 그러면 유저 테이블도 추가해 줄 것입니다. 로그인 기능 붙이고 LLM 기능 붙여서 알아서 필터링하고, 몇 개만 선택해서 공유하는 기능까지 3개만 있으면 완성도 높은 서비스가 될 것 같습니다.

바이브 코딩 경험 소감과 성공 팁

바이브 코딩이라는 걸 가지고 내가 가지고 있는 아이디어를 제품화할 수 있다는 거에 대해서 직접 경험해 보니까 정말 신기했습니다. 사람들이 말했을 때는 이 정도 될 거라는 걸 이미 들었기 때문에 당연하겠다고 생각했지만, 막상 해보니까 정말 감동이 있었습니다. 노코드 도구로 이런 기본적인 디렉토리 페이지를 많이 만들어 봤는데 꽤 힘든 일이었는데, 이 과정이 이렇게 쉽게 된다는 게 너무나 놀라웠습니다.

복잡한 제품을 AI가 잘 내가 원하는 수준까지 만들어 주려면 결국 한 번에 하기 어려우니까 나눠서 하게 하는 것과, AI가 그 과정에서도 실수를 하기 때문에 어떤 걸 해야 되고 지금까지 무엇을 했는지를 스스로 기록하게 하는 것이 핵심 팁입니다. 이 두 가지는 어떤 툴을 사용하든 적용될 수 있는 팁이어서 바이브 코딩을 하시는 분들이 꼭 적용하셨으면 좋겠습니다.

나가며

오늘 영상에서 배운 점을 정리하면, 첫째는 복잡한 프로젝트를 3단계로 나누어 진행하는 이터레이션 방식이고, 둘째는 AI가 스스로 작업을 관리할 수 있도록 TODO 리스트를 만들게 하는 것입니다. 다음 영상에서는 제가 숙제를 한 다음에 더 개선된 장피엠의 프롬프트 마스터 바이브 코딩 결과물을 보여드려 보겠습니다.

Created by 일잘러 장피엠
교정 SENTENCIFY | 에디터 이유진