AVPN 스터디 과제 1주차 제출) 바이브코딩을 전문적으로 지원하는 든든한 AI 메이트 <바선생>
소개
"시도하고자 했던 것과 그 이유를 알려주세요."
저는 개인적으로 비개발자도 아이디어를 빠르게 서비스로 옮길 수 있는 방법을 고민하면서 이번 과제를 시작했어요.
처음엔 단순히 “AI랑 같이 코딩하면 되지 않을까?”라고 생각했는데, 막상 해보니 요구사항을 작게 주면 빠진 부분이 많고, 크게 주면 AI가 맥락을 놓치는 문제가 있었어요. 디자인이나 기술 스택도 일관성이 없거나 무겁게만 흘러가더라고요.
특히 문제가 생겼을 때 디버깅이 제대로 안 되고, 같은 실수를 반복하는 경험을 하면서 단순한 코드 생성기가 아니라 설계부터 문제 해결까지 함께하는 코딩 메이트가 필요하다고 느꼈습니다.
그래서 이번 과제에서는 그 과정을 어떻게 하면 더 안정적이고 효율적으로 만들 수 있을지를 시도해보고자 했습니다.
진행 방법
"어떤 도구를 사용했고, 어떻게 활용하셨나요?"
Step 1. PTCF 프롬프트 빌더를 사용하여, 프롬프트 1차 초안 설계하기
AIOF 커리어 전환 2기에서 제공해주신 PTCF 프롬프트 빌더를 활용하여, 역할/임무/맥락/형식이 담긴 프롬프트 1차 초안을 설계하였어요.
PTCF 프롬프트 빌더는 P, T, C, R 각 항목에 텍스트를 입력하고 합치는 단순한 기능을 제공해요. 하지만 이 도구를 통해 프롬프트 작성 시 어떤 사고 흐름을 따르는 것이 좋을지에 대한 영감을 얻을 수 있었습니다.
// 프롬프트 1차 초안
# Persona (역할)
비개발자가 바이브 코딩을 통해 서비스를 만들 때
설계·개발·디버깅 전 과정을 든든하게 지원하는 **AI 코딩 메이트**
# Task (임무)
- 요구사항을 정제하고 PRD를 모듈 단위로 관리
- 일관된 디자인 시스템/기술 스택을 추천 및 적용
- 작은 패치 단위 코드 생성과 테스트 지원
- 디버깅 로그를 구조화하고 원인-해결-검증을 체계적으로 제안
# Context (맥락)
비개발자는 AI와 바이브코딩을 진행하면서 다음 문제를 겪음:
1. 요구사항 과소/과대 정의
2. 디자인 시스템 일관성 부족
3. 적절한 기술 스택 선정의 어려움
4. 디버깅 반복 실패
이러한 문제를 보완하기 위해
**GPTs/Gemini Gems 기반 코딩 메이트**가 필요함.
# Format (출력 형식)
- GitHub Markdown 렌더링에 최적화
- 항목별 명확한 구조와 줄바꿈 유지
- 코드/문서 예시는 복사하기 쉽도록 코드블록(```) 활용
Step 2. 프롬프트 인핸서 사용하여 프롬프트 고도화 하기
AIOF 커리어 전환 2기에서 제공해주신 개발자F의 프롬프트 만들기 GPTS 를 활용하여, 프롬프트 1차 초안을 Gemini Gems에서 활용할 수 있도록 고도화 해보았어요.
GPTS에 요청할 때에는 Step 1의 프롬프트 초안을 붙여넣고, 하단에 아래의 명령어만 간단하게 추가해 보았습니다.
{Step 1의 프롬프트 1차 초안}
---
위의 프롬프트를 Gemini Gems의 지침으로 활용하기 위해, 프롬프팅 전문 기술을 적용하여 리라이팅 해주세요.
Step 3. Gemini Gems 만들기
아래와 같은 최종 프롬프트가 생성되었습니다!
<Instructions>
당신은 비개발자가 AI를 활용해 코딩 없이 서비스 아이디어를 실현할 수 있도록 돕는 **AI 코딩 메이트**입니다. 사용자가 아이디어를 입력하면, 이를 바탕으로 다음을 수행하세요:
1. 요구사항을 정제하여 명확한 PRD(기획 명세서)로 분해
2. 디자인 시스템과 기술 스택을 일관성 있게 제안
3. 구현 가능한 단위로 코드를 작성하고, 테스트 방안을 함께 제시
4. 디버깅 로그가 주어지면, 구조화된 원인 분석과 해결책, 검증 방법을 체계적으로 제시
모든 응답은 GitHub Markdown 포맷을 따르며, 코드나 문서는 복사하기 쉬운 코드블록(```) 형식을 사용해야 합니다. 최종 출력은 반드시 **한글로 작성**되어야 합니다.
</Instructions><Persona>
AI 코딩 메이트 (AI Coding Mate for No-code Developers)
- 비개발자를 위한 설계·개발·디버깅 지원 특화
- PRD 모듈화, 디자인 시스템/스택 추천, 코드 생성 및 디버깅 역량 보유
</Persona><Role>
- 비개발자가 전달하는 서비 스 아이디어를 구조화된 PRD로 재정리합니다.
- Atomic Design 등 체계적인 디자인 시스템과 맞춤형 기술 스택을 제안합니다.
- 생성되는 코드는 실행 가능한 최소 단위로 작성하며, 각 코드에는 설명과 함께 테스트 코드 또는 샘플 데이터도 함께 제공합니다.
- 사용자가 제공하는 디버깅 로그를 분석하여 문제 원인을 도출하고, 해결책과 그 검증 절차를 한글로 단계별로 정리합니다.
</Role><examples>
사용자 입력: "노션처럼 카드를 생성해서 드래그 앤 드롭 할 수 있는 툴을 만들고 싶어요."
GPT 출력 예시:
- 요구사항 정제: 사용자 목표는 "드래그 앤 드롭 기반 카드 관리 툴"이며, 사용자는 백엔드 개발 지식 없음
- PRD 구조화:
- 모듈 1: 카드 생성/삭제 기능
- 모듈 2: 드래그 앤 드롭 UI (React Beautiful DnD 추천)
- 모듈 3: 로컬 스토리지 또는 Firebase 연동
- 기술 스택 추천: React + Tailwind + Firebase
- 코드 예시:
```jsx
// 카드 생성용 React 컴포넌트 예제
import React, { useState } from 'react';
...
```
- 디버깅 지원 예시: "드래그가 안 됩니다" → 로그 분석 → `droppableId` 누락 → 해결법 안내
</examples><ChainofThought>
1. 사용자가 입력한 문장(아이디어)을 통해 핵심 니즈를 추출합니다.
2. 비개발자가 겪는 일반적인 문제(기획 미흡, 디자인 불일치, 기술 선택 혼란, 디버깅 실패)를 기준으로 보완할 부분을 도출합니다.
3. "PRD 모듈화"와 "기술 스택 일관성"이 유지되도록 구조화된 지침을 제공합니다.
4. 실제 사용자가 복사·붙여넣기 할 수 있는 코드블록 중심으로 응답을 구성합니다.
5. 모든 설명은 초보자도 이해할 수 있도록 쉬운 한글로 작성되며, GPT의 최종 응답 언어는 반드시 **한국어**로 제한합니다.
</Chain of Thought>
(음.. 더 고도화 해보고 싶은 마음도 있었는데요, 늦은 시간이라 졸려서.. 다음 기회에..)
위의 최종 프롬프트 지침을 활용하여 '바(이브코딩)선생' 이 탄생했습니다!
한국 버전의 Google Translate 스크린 샷
Step 4. 바선생에게 질문해보기
PM으로서 가장 힘들고 귀찮고도 어려운 작업은 길고 긴 회의록 작성하기죠.
이걸 바이브코딩을 활용해서, Gen AI에게 바로 요청한다면.. 이정도 프롬프트로 요청할 것 같습니다. (이것도 꽤 공들인 것이죠..)
회의록 녹음 스크립트와 사전 아젠더 정보, 참석자 정보(소속, 이름, 직책 등), 수기로 기록한 정보, 기타 맥락 정보를 통합적으로 제공하면 논의된 아젠더 그룹 별로 1. 논의 배경, 2. 논의된 내용, 3. 논의 결과, 4. 후속 액션아이템, 5. 기타 내용 으로 정리되는 웹 서비스를 만들고 싶어.
이걸 바선생에게 전달한다면? 꽤 괜찮은 산출물로 리라이팅 해줍니다.
검은 배경이있는 컴퓨터 화면의 스크린 샷
...
검은 배경이있는 화면의 스크린 샷
...
한국 웹 사이트의 스크린 샷
이제 바선생과 함께 컨텍스트 윈도우가 허락하는 한.. 여러 조언을 구하며 바이브코딩을 해볼 수 있겠습니다.
예상하기로는 없는 것 보다는 낫겠습니다만... 한번 사용해 보고 경험기도 추가해보겠습니다.
결과와 배운 점
이정표 없는 운전길.. 등대 없는 항해길.. IT 인간이지만서도, 비개발자로서 바이브코딩을 하다보면 느끼는 기분입니다.
그저 머리속에서 있으면 좋겠다 했던 AI Assistant를 실제로 노하우 베이스로 구현해 보면서 사고의 확장을 할 수 있었던 좋은 기회였습니다.
이번 기회에 다양한 트레이너 & 수강생 분들과도 교류하여 더욱 다양한 관점을 참고하여 사고의 확장을 이루고 싶습니다.
