🎯커스텀 프로젝트 설계
나만의 프로젝트 기획
MediaPipe + Ableton 제어 프로젝트를 Plan Mode로 설계하는 방법을 배웁니다.
Chapter 12: 커스텀 프로젝트 설계 — 나만의 프로젝트 기획
지금까지 바이브 코딩의 기초를 배우고, 3가지 예제를 만들어봤습니다. 이제 가장 중요한 단계입니다: 나만의 프로젝트를 기획하고 설계하는 것. 이 장에서는 "MediaPipe로 손동작으로 Ableton을 제어하는 앱"을 실제로 설계하는 전 과정을 함께합니다.
지금까지는 **에뛰드(연습곡)**를 연주했습니다. 이제 나만의 작품을 작곡하는 시간입니다. 작곡은 영감에서 시작하지만, 완성까지는 체계적인 과정이 필요합니다. 곡의 테마 정하기 → 구조 설계 → 편곡 → 파트별 녹음 → 믹싱. 프로젝트 개발도 정확히 같은 과정을 거칩니다.
12.1 하고 싶은 것 정의하기 — 곡의 테마 정하기
모든 프로젝트는 한 문장으로 정의할 수 있어야 합니다.
한 문장 정의 실습
곡을 쓸 때 "슬픈 노래"라고 하면 너무 모호합니다. "Am 키, 70 BPM, 피아노 반주의 발라드로, 이별의 감정을 표현하는 노래"라고 하면 명확해지죠. 프로젝트도 마찬가지입니다. 구체적일수록 AI가 정확하게 도와줄 수 있습니다.
12.2 Plan Mode로 AI와 구조 설계하기
프로젝트 정의가 끝나면, AI와 함께 전체 구조를 설계합니다. 아직 코드를 쓰지 않습니다!
Plan Mode 실습 — 전체 대화 흐름
첫 번째 프롬프트: 전체 구조 요청
AI의 설계 리뷰 및 수정 요청
AI가 구조를 제안하면, 음악가의 관점에서 리뷰합니다:
설계 확정 및 AGENTS.md 반영
설계가 확정되면, 결과를 AGENTS.md에 저장합니다:
12.3 기능 목록 작성 및 우선순위 정하기
설계가 끝나면 구현할 기능의 우선순위를 정합니다. 모든 기능을 한 번에 만들려고 하면 실패합니다.
앨범 프로덕션에서 모든 트랙을 동시에 녹음하지 않습니다. 먼저 리듬 섹션(드럼+베이스)을 녹음하고, 그 위에 하모니(기타/키보드), 그 위에 멜로디(보컬), 마지막으로 장식음(이펙트/배경 보컬)을 쌓아올립니다. 프로젝트도 기초 기능부터 차례로 쌓아올려야 합니다.
우선순위 매트릭스
| 순서 | 기능 | 우선순위 | 이유 | 음악 비유 | |------|------|---------|------|-----------| | 1 | 카메라 연결 + 손 인식 | 필수 | 모든 것의 기초 | 리듬 섹션 (드럼) | | 2 | 좌표 → 볼륨 매핑 | 필수 | 핵심 기능 | 베이스 | | 3 | OSC 전송 | 필수 | Ableton 연결 | 메인 보컬 | | 4 | Smoothing 처리 | 높음 | 사용성 향상 | 컴프레서 | | 5 | 캘리브레이션 | 높음 | 개인화 | 이퀄라이저 | | 6 | 제스처 인식 (뮤트) | 중간 | 추가 기능 | 배경 보컬 | | 7 | 템포 제어 | 중간 | 추가 기능 | 오토메이션 | | 8 | UI 꾸미기 | 낮음 | 외관 | 마스터링 | | 9 | 프리셋 저장/불러오기 | 낮음 | 편의 기능 | 앨범 패키징 |
1-3번까지만 완성하면 이미 동작하는 프로젝트입니다! 나머지는 나중에 하나씩 추가할 수 있습니다. 처음부터 완벽한 프로젝트를 만들려고 하지 마세요. 데모 트랙도 완벽하지 않지만, 곡의 방향은 보여줄 수 있습니다.
12.4 기술 스택 선정 — AI와 상의하기
기술 스택 선정도 AI와 상의할 수 있습니다:
AI는 아마 이렇게 답할 것입니다: "프레임워크 없이 Vanilla JS가 적합합니다. 브라우저에서 직접 UDP를 보낼 수 없으므로 Node.js 서버가 필요합니다." 이런 기술적 제약은 AI가 알려주므로, 우리가 미리 공부할 필요가 없습니다.
12.5 작은 단위로 쪼개서 진행하기 — 스프린트
앨범 프로덕션에서 각 곡을 섹션별로 작업합니다. 전체 곡을 한 번에 완성하는 게 아니라, 인트로 → A 멜로디 → B 멜로디 → 코러스 → 브릿지 → 아웃트로 순서로 작업하죠. 소프트웨어 개발의 스프린트도 정확히 같은 개념입니다. 한 주(또는 며칠) 동안 하나의 "섹션"을 완성합니다.
우리 프로젝트의 스프린트 계획
| 스프린트 | 기간 | 목표 | 완료 기준 | 음악 비유 | |---------|------|------|----------|-----------| | 1 | 1-2일 | 카메라 + 손 인식 | 화면에 랜드마크 표시 | 드럼 트랙 녹음 | | 2 | 1-2일 | 좌표 → 값 매핑 | 슬라이더로 값 변환 확인 | 베이스 녹음 | | 3 | 1-2일 | OSC 서버 구축 | 메시지 전송 확인 | 보컬 녹음 | | 4 | 1일 | Ableton 연결 | 실제 볼륨 변경 확인 | 트래킹 세션 | | 5 | 1-2일 | Smoothing + 캘리브레이션 | 부드러운 제어 확인 | 믹싱 | | 6 | 1일 | UI 개선 + 정리 | 보기 좋은 인터페이스 | 마스터링 |
각 스프린트의 AI 프롬프트 예시
각 스프린트에서 **"다른 기능은 만들지 마"**라고 명시하는 것이 중요합니다. AI가 열정적으로 모든 기능을 한 번에 만들려고 할 수 있습니다. 마치 편곡할 때 "지금은 드럼만 녹음할 거야, 기타는 나중에"라고 분명히 하는 것과 같습니다.
12.6 서버 개념 — 공연장의 구조 이해하기
프로젝트가 로컬에서 잘 동작하면, 다른 사람들도 쓸 수 있게 서버에 배포하고 싶을 수 있습니다. 서버 관련 개념을 음악 공연에 비유하여 설명하겠습니다.
서버 = 24시간 열린 공연장
여러분의 노트북은 작은 연습실입니다. 혼자서 연습하기엔 충분하지만, 관객을 부를 수는 없죠. 서버는 24시간 문을 열어놓은 공연장입니다. 언제든 관객(사용자)이 와서 공연(웹사이트)을 볼 수 있습니다.
| 개념 | 음악 비유 | 실제 의미 |
|------|-----------|-----------|
| 로컬 서버 | 연습실 | 내 컴퓨터에서만 접속 가능 |
| 클라우드 서버 | 상설 공연장 | 인터넷에서 누구나 접속 가능 |
| localhost | "여기 이 방에서" | 내 컴퓨터 자신을 가리키는 주소 |
도메인 = 공연장의 주소
공연장에 가려면 주소가 필요합니다.
- IP 주소 (
123.45.67.89)는 GPS 좌표와 같습니다. 정확하지만 외우기 어렵죠. - 도메인 (
myproject.com)은 "강남역 코엑스 아티움"처럼 사람이 기억하기 쉬운 이름입니다. - DNS(Domain Name System)는 "코엑스가 어디야?"라고 물으면 GPS 좌표를 알려주는 안내소입니다.
포트 = 건물의 문 번호
하나의 서버(건물)에 **여러 서비스(방)**가 있을 수 있습니다. 포트 번호는 문 번호입니다.
- 80번 문: 웹사이트 입구 (HTTP)
- 443번 문: 보안 웹사이트 입구 (HTTPS)
- 3000번 문: 우리의 MediaPipe 앱
- 11000번 문: Ableton이 OSC를 듣는 곳
마치 공연장에 여러 홀이 있는 것과 같습니다. "1번 홀에서 클래식 공연, 2번 홀에서 재즈, 3번 홀에서 전자음악"처럼요.
방화벽 = 경비원
방화벽은 공연장의 경비원입니다. "티켓이 있는 사람만 들어오세요"처럼, 허용된 포트(문)로만 접근을 허용합니다.
- 허용: 80번(HTTP), 443번(HTTPS), 22번(관리자 입구/SSH)
- 차단: 나머지 모든 포트
경비원이 없으면 아무나 아무 문으로 들어올 수 있어 위험합니다!
리버스 프록시(Nginx) = 안내 데스크
Nginx는 공연장 입구의 안내 데스크입니다. 관객이 "어디로 가면 되나요?"라고 물으면, 안내원이 "아, 클래식은 1번 홀(포트 3000), 재즈는 2번 홀(포트 8080)로 가세요"라고 안내합니다.
외부에서는 **443번 문(HTTPS)**으로만 들어오고, Nginx가 요청의 도메인을 보고 적절한 내부 서비스로 안내합니다.
전체 구조 한눈에 보기
서버 배포는 프로젝트가 완성된 후에 해도 됩니다. 개발 단계에서는 localhost로 충분합니다. 공연을 올리기 전에 연습실에서 리허설을 충분히 하는 것과 같습니다.
12.7 포트폴리오 홈페이지 배포까지의 로드맵
최종 목표인 포트폴리오 홈페이지에 프로젝트를 전시하기까지의 로드맵입니다.
Phase 1: 로컬 개발 (1-2주)
지금 단계입니다.
- MediaPipe 손 추적 + OSC 전송 기본 기능 완성
localhost:3000에서 동작 확인- Git으로 버전 관리
Phase 2: 기능 완성 (1-2주)
- Smoothing, 캘리브레이션, 제스처 인식 추가
- Ableton/TouchDesigner 실제 연결 테스트
- UI 개선 및 사용 설명 페이지 추가
Phase 3: 데모 영상 제작 (2-3일)
- 프로젝트 동작 화면 녹화
- 손동작으로 Ableton을 제어하는 퍼포먼스 영상
- 이 영상이 포트폴리오의 핵심 콘텐츠!
데모 영상은 뮤직비디오 또는 라이브 영상과 같습니다. 아무리 좋은 곡도 들을 수 있어야 가치가 있듯, 아무리 좋은 프로젝트도 보여줄 수 있어야 합니다.
Phase 4: 포트폴리오 사이트 제작 (1주)
프로젝트를 보여주는 포트폴리오 웹사이트를 만듭니다:
Phase 5: 배포 (1일)
포트폴리오를 인터넷에 공개합니다:
처음에는 GitHub Pages 또는 Vercel로 포트폴리오 정적 사이트를 배포하세요. 무료이고 설정이 간단합니다. MediaPipe 앱 자체는 서버가 필요하므로, 데모 영상으로 보여주고 GitHub 코드 링크를 제공하는 것이 현실적입니다.
12.8 전체 프로젝트 체크리스트
프로젝트 정의
한 문장으로 정의했는가? 구체적인 기능이 명시되어 있는가?
설계 완료
Plan Mode로 AI와 전체 구조를 설계했는가? AGENTS.md에 반영했는가?
우선순위 결정
기능 목록을 작성하고 MVP(최소 실행 가능)를 정의했는가?
스프린트 계획
작업을 작은 단위로 쪼개서 순서를 정했는가?
기술 스택 확정
AI와 상의하여 적절한 기술 스택을 선정했는가?
서버 개념 이해
서버, 도메인, 포트, 방화벽, 리버스 프록시의 역할을 이해했는가?
배포 계획
포트폴리오 사이트 + 프로젝트 데모를 어떻게 공개할지 계획했는가?
이 체크리스트를 모두 완료하면, 여러분은 프리프로덕션이 끝난 상태입니다. 곡의 구조, 편성, 코드 진행, 녹음 순서가 모두 정해진 것이죠. 이제 스튜디오에 들어가서(코딩을 시작하여) 한 트랙씩 녹음하면 됩니다. 준비가 탄탄하니, 녹음(코딩)은 예상보다 빠르게 진행될 것입니다.
프로젝트의 성패는 코딩 전에 결정됩니다. 명확한 정의, 체계적인 설계, 단계적인 실행 계획이 있으면 AI가 훨씬 효과적으로 도와줄 수 있습니다. 그리고 기억하세요: 완벽하지 않아도 됩니다. 먼저 동작하는 것을 만들고, 점점 개선하세요.
실습 과제
- 자신만의 프로젝트를 한 문장으로 정의해보세요
- AI에게 Plan Mode로 구조 설계를 요청하고, 최소 2번 수정 요청을 해보세요
- 기능 목록을 만들고 MVP에 해당하는 3개 기능을 선정하세요
- 스프린트 계획표를 작성하세요 (최소 4개 스프린트)
- 설계 결과를 AGENTS.md에 반영하고 Git 커밋하세요
- (도전) GitHub Pages로 간단한 포트폴리오 페이지를 배포해보세요