요즘 AI 코딩, 특히 **바이브 코딩(Vibe Coding)**에 대한 관심이 높아지고 있다. 바이브 코딩은 개발자가 직접 코드를 짜기보다, AI에게 프롬프트(지시문)를 주고 코드를 생성하는 방식이다. 이 글에서는 실제로 내가 진행한 쇼핑리스트 앱 개발 사례를 기반으로 실제 사용한 프롬프트 와 함께 바이브 코딩의 흐름을 생생하게 보여주고자 한다. 🔧 개발 환경 및 진행 상황 개발 언어 및 프레임워크 : Flutter (안드로이드 앱) 백엔드 연동 : Firebase (기본 기능 구현 완료) IDE : Visual Studio Code + Cline Coding Agent AI 도구 : Google Gemini (무료 플랜) 문서화 : 전체 기획서, 요구사항, DB 설계 등은 ChatGPT로 작성 현재까지 전체 앱 기능의 절반 정도가 구현된 상태이며, Git으로 버전 관리 하고 있다. 기능 별 오류 없이 안정적으로 동작하는 수준까지 완료한 뒤, 로컬 데이터베이스 기능 을 추가로 구현하는 작업을 진행했다. 🧩 실제 사용한 바이브 코딩 프롬프트 예시 이 앱의 home_screen에서 쇼핑리스트를 작성할 때, 쇼핑 아이템을 카테고리별로 찾아서 쇼핑 아이템명의 버튼을 클릭해서 쇼핑리스트에 추가하는 기능의 UI가 정의되어 있어. 이 카테고리별 제품을 앱 내의 데이터베이스에 저장해서 아이템을 로컬 DB에서 찾고 보여주는 기능이 필요해. 로컬데이터 베이스를 위해서 floor 패키지를 추가해 주고, 다음의 기능들을 순서대로 구현해 줘: 앱이 처음 설치될 때 데이타베이스를 구축하고 초기데이타를 넣는 기능. 데이타베이스 구축은 초기데이타 파일인 supermarket_products.json의 내용을 참고해서 구축하고 초기데이타 json파일로부터 데이타를 입력하기 home_screen에 구현된 UI를 유지해서 Select 탭이 선택된 경우 카테고리 선택하는 하는 것은 dropdown으로 floor db에서 카테고리 리스트를 가져와서...
요즘 AI 코딩, 특히 **바이브 코딩(Vibe Coding)**에 대한 관심이 높아지고 있다. 바이브 코딩은 개발자가 직접 코드를 짜기보다, AI에게 프롬프트(지시문)를 주고 코드를 생성하는 방식이다. 이 글에서는 실제로 내가 진행한 쇼핑리스트 앱 개발 사례를 기반으로 실제 사용한 프롬프트와 함께 바이브 코딩의 흐름을 생생하게 보여주고자 한다.
🔧 개발 환경 및 진행 상황
- 개발 언어 및 프레임워크: Flutter (안드로이드 앱)
- 백엔드 연동: Firebase (기본 기능 구현 완료)
- IDE: Visual Studio Code + Cline Coding Agent
- AI 도구: Google Gemini (무료 플랜)
- 문서화: 전체 기획서, 요구사항, DB 설계 등은 ChatGPT로 작성
현재까지 전체 앱 기능의 절반 정도가 구현된 상태이며, Git으로 버전 관리하고 있다. 기능 별 오류 없이 안정적으로 동작하는 수준까지 완료한 뒤, 로컬 데이터베이스 기능을 추가로 구현하는 작업을 진행했다.
🧩 실제 사용한 바이브 코딩 프롬프트 예시
이 앱의 home_screen에서 쇼핑리스트를 작성할 때, 쇼핑 아이템을 카테고리별로 찾아서 쇼핑 아이템명의 버튼을 클릭해서 쇼핑리스트에 추가하는 기능의 UI가 정의되어 있어. 이 카테고리별 제품을 앱 내의 데이터베이스에 저장해서 아이템을 로컬 DB에서 찾고 보여주는 기능이 필요해. 로컬데이터 베이스를 위해서 floor 패키지를 추가해 주고, 다음의 기능들을 순서대로 구현해 줘:
- 앱이 처음 설치될 때 데이타베이스를 구축하고 초기데이타를 넣는 기능. 데이타베이스 구축은 초기데이타 파일인 supermarket_products.json의 내용을 참고해서 구축하고 초기데이타 json파일로부터 데이타를 입력하기
- home_screen에 구현된 UI를 유지해서 Select 탭이 선택된 경우 카테고리 선택하는 하는 것은 dropdown으로 floor db에서 카테고리 리스트를 가져와서 보여주고, 카테고리가 선택되면 해당 카테고리의 상품 아이템이 보여지도록 구현하기
- 현재 home_screen에 구현되어 있는 상품 아이템 버튼이 클릭되면 쇼핑리스트에 추가되는 부분은 수정되지 않고, 현재 하드코딩 되어 있는 상품 아이템 버튼에 로컬 데이타베이스에서 가져온 상품명을 넣어주는 것으로 수정하기
이 프롬프트는 앱의 **로컬 데이터베이스(Floor 패키지)**를 설정하고, 기존 UI를 그대로 유지하면서 동적으로 데이터를 표시하도록 하는 작업을 지시한 것이다.
⏱ 작업에 걸린 시간 및 과정
- 초기 데이터 파일 작성: 인터넷 검색 → ChatGPT로 JSON 파일 생성 → 완료까지 약 1시간 30분 소요
- 전체 코드 작성: 위 프롬프트 하나로 Google Gemini가 문법 오류 없이 정상 작동하는 코드 제공
- 개발 완료 상태: Cline에서 Task Completed로 표시되고 실제 디바이스에서 디버깅 중
🎯 바이브 코딩, 정말 30분 만에 앱을 만들 수 있을까?
유튜브 영상이나 블로그에서 “5분만에 앱 완성!”, “30분이면 코딩 끝!”이라는 말은 AI의 코드 생성 속도만을 강조한 표현일 뿐이다. 실제로 쓸만한 앱을 만들기 위해서는 기획, 설계, 문서 작성, 테스트까지 수많은 단계가 필요하다.
또한, 프롬프트가 구체적이고 정확할수록 더 원하는 결과에 가까운 코드를 얻을 수 있다. 단순히 “쇼핑리스트 기능 만들어줘”라고 하기보다는, 어떤 방식의 리스트인지, 어디에 저장할지, UI 요소는 어떤지까지 디테일하게 알려주는 것이 중요하다.
🤖 바이브 코딩의 함정? AI가 기존 코드를 지워버리기도 한다
처음 바이브 코딩을 시도했을 때는 Google Gemini에게 전체 문서를 준 뒤, “Auto-approve” 옵션으로 진행했다. 그 결과, 전체 코드의 약 30~40%를 빠르게 생성했지만, API 요청 한도 제한에 막혀 멈췄다.
다음날 다시 시도할 때는, 프롬프트를 단계별로 쪼개서 “부분 승인 방식”으로 진행했는데, 기존에 이미 작성된 코드와 다른 방식으로 새로 구현해버리는 문제도 발생했다. AI가 같은 AI라도 상황에 따라 선택하는 코드 방식이 달라질 수 있기 때문이다.
✅ 정리하며 – 생초보가 알아야 할 바이브 코딩의 핵심
- 프롬프트는 코드의 설계도다. 자세할수록 원하는 결과에 가까워진다.
- 코드의 일부만 바꾸고 싶다면, 반드시 기존 코드를 유지하라고 명시하자.
- 작업 시간을 줄일 수는 있지만, 앱 완성까지의 과정은 여전히 사람이 조율해야 한다.
AI와 함께하는 코딩은 생산성과 재미 모두를 올려줄 수 있는 새로운 도구다. 하지만 그만큼 프롬프트 작성 능력과 테스트 능력도 함께 길러야 바이브 코딩의 진짜 힘을 느낄 수 있다.
댓글
댓글 쓰기