요즘 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에서 카테고리 리스트를 가져와서...