바이브코딩 첫걸음
— 나만의 앱 만들기
코딩을 몰라도, 말로 시켜서 실제로 작동하는 앱을 오늘 만듭니다.
오늘 끝나면
- ① 내 아이디어로 앱 계획서를 만들었다
- ② Codex가 실제로 코드를 쓰는 과정을 보고, 로컬(내 컴퓨터)에서 최소 한 화면이 작동하는 것을 확인했다
- ③ MCP · API · API 키 방식 vs 로그인 방식 · 배포를 내 말로 설명할 수 있다
- ④ 내 앱을 배포했다
- ⑤ ChatGPT 개발자 모드에 연결해, 실제 대화 중 호출되는 것까지 확인했다
④⑤(도전 목표)는 못 가도 완주 실패가 아닙니다. 사내망·계정 상태처럼 개인이 통제할 수 없는 변수가 크기 때문입니다.
오늘의 흐름
핵심 블록 합계 165분
여기에 휴식 10분 × 2회(블록2~3 사이, 블록4~5 사이)와 진행 버퍼 20분을 더해, 총 195~210분(약 3시간~3시간 30분)을 확보합니다.
오리엔테이션 & 짝 배정
- 짝 배정 — 둘씩 짝을 짓는다. 막히면 먼저 짝에게 화면을 보여준다
- 워밍업 — 옆 짝에게 내 앱 아이디어를 "한 문장 + 핵심 기능 3개"로 말해본다
기능이 3개 이내로 줄여지지 않으면, 그 자리에서 줄입니다 — 아이디어 기준 : 기능 3개 이내 · 로그인 없음 · 사내 데이터 안 씀 · 유명 서비스 통째 재현 금지
바이브코딩 — 이 말의 유래
— 안드레이 카파시 (OpenAI 창립 멤버 · 전 테슬라 AI 총괄), 2023년 1월
- 2023년 1월 — 카파시가 위의 한 문장을 남깁니다. 코드를 몰라도 말로 컴퓨터에게 일을 시키는 시대가 온다는 선언이었습니다.
- 2025년 2월 — 그 방식에 직접 이름을 붙입니다: 바이브 코딩(vibe coding). "코드가 있다는 것조차 잊고 분위기(vibe)에 몸을 맡긴다. 나는 그냥 보고, 말하고, 실행하고, 붙여넣는다 — 그런데 대체로 그냥 된다."
- 2025년 11월 — 콜린스 사전이 바이브 코딩을 '올해의 단어'로 선정합니다. 농담처럼 시작한 말이 1년 만에 세계 공용어가 됐습니다.
뜻은 이렇습니다 — 코드를 한 줄씩 읽고 쓰는 대신, 원하는 것을 말로 설명하고 → AI가 코드를 쓰고 → 결과를 보고 다시 말로 고치는 방식. 프로그래밍 언어가 코드에서 우리말로 바뀐 것입니다.
준비 체크
유료 ChatGPT 계정 로그인 상태 확인
가능하면 전날까지 데스크톱 앱 설치 완료
오늘 만들 앱 아이디어 지참
이 아이디어, 오늘에 적합한가?
- 첫 버전 기능을 3개 이내로 줄일 수 있다
- "뭘 누르면 뭐가 나온다"를 한 문장으로 말할 수 있다
- 로그인 · 회원가입 같은 복잡한 인증이 필요 없다
- 사내 데이터 · 개인정보를 다루지 않는다
- 유명 서비스를 통째로 재현하는 것이 아니다 (예: "인스타그램 같은 거" → 당일 축소 필요)
ChatGPT 데스크톱 앱 설치 확인
목표 : 전원이 데스크톱 앱을 설치하고, 로그인 상태로 만듭니다. 공통 진입점 — 브라우저에서 chatgpt.com/download 접속
- Microsoft Store에서 "ChatGPT"(제작사 OpenAI) 검색 · 설치
- 실행 후, 회사에서 쓰는 유료 계정으로 로그인
- 내려받은 설치 파일(.dmg)을 열어 설치
- 실행 후 로그인
이미 설치한 사람은 로그인 상태와 Codex 진입만 확인하고, 옆 짝의 설치를 도와줍니다.
계획 수립 — 진행 안내
목표 : 내 아이디어를 "앱 계획서"로 만듭니다.
- HC가 북릴레이션 아이디어로 먼저 시연한다 — 정제된 프롬프트를 ChatGPT에 넣는다
- ChatGPT가 먼저 역질문한다 — 답할수록 계획서에 가까워진다
- 참가자는 자기 아이디어로 똑같이 진행한다
Codex란 ChatGPT 안에서 코드를 직접 쓰고 실행해 주는 "만들기 담당" AI입니다.
계획 수립 프롬프트
나는 [앱 이름 — 무엇을 하는 앱인지 한 줄]을 만들고 싶어. 나는 코딩을 전혀 몰라. 바로 계획을 세우지 말고, 먼저 나에게 질문해줘. - 이 앱을 정확히 이해하는 데 필요한 것을 한 번에 2~3개씩만 묻고, 내 답을 듣고 이어서 질문해줘. - 누가 쓰는지, 꼭 필요한 기능이 무엇인지, 어떤 화면이 필요한지 분명해지면 질문을 멈춰줘. 질문이 끝나면 아래 형식으로 "앱 계획서"를 만들어줘. 1) 앱 한 줄 소개 2) 첫 버전 핵심 기능 — 3개 이내 (욕심내지 말 것) 3) 화면 구성 — 말로 그린 그림 4) 만드는 순서 — 단계별 5) Codex에게 줄 첫 지시문 — 실제 제작은 ChatGPT의 Codex가 할 거야. 위 계획을 Codex가 그대로 받아 실행할 수 있는 지시문 하나로 정리해줘. 필요한 스킬·서브에이전트·도구가 있다면 지시문 안에 함께 적어줘.
첫 줄의 [ ] 부분만 자기 앱 이야기로 바꾸고, 나머지는 그대로 둡니다.
Codex로 제작 시작
- 계획서의 Codex 지시문을 붙여넣는다
- AI가 실제로 코드를 쓰는 과정을 지켜본다
- 로컬(내 컴퓨터)에서 실행되는 화면을 내 눈으로 확인한다
API
이 질문이 자연스럽게 뜨는 순간
코드가 만들어지는 화면을 보다가 — "이 앱이 다른 프로그램과 어떻게 대화하지?"
MCP
이 순간에 연결된다
로컬 실행 화면이 처음 뜨는 순간
API 키 방식
앱이 다른 서비스(AI 등)를 쓸 때마다, 내가 발급받은 열쇠(API 키)로 그때그때 비용을 냅니다.
로그인(구독) 방식
이미 로그인해 둔 단골 가게 점원에게 심부름을 시키듯, 이미 결제된 계정이 대신 처리해줍니다. 지금 쓰고 있는 Codex 자체가 이 방식으로 작동 중입니다.
막혔을 때
옆 사람 화면을 보며 같이 따라간다
흔한 오류와 해결법을 먼저 확인한다
그래도 안 풀리면 내 것은 잠시 멈추고, 개념 이해부터 챙긴다
시간이 남으면 다시 내 화면으로 돌아옵니다.
배포가 만드는 것 두 가지
로컬 실행이 부엌 요리였다면, 배포는 그 요리를 파는 가게 문을 여는 것입니다. Sites로 배포하면 두 가지가 생깁니다.
- 내 앱 사이트 — 앱이 실제로 돌아가는 주소가 생긴다
- 연결 고리 — 그 주소 뒤에
/api/mcp를 붙인 것이 ChatGPT에 등록할 주소가 된다
Codex에게 배포 시키기
이제 이 앱을 ChatGPT 안에서 쓸 수 있게 배포하고 싶어. 1) 이 앱을 ChatGPT가 불러 쓸 수 있는 MCP 서버로 만들어줘. 2) Sites 기능으로 운영 주소에 배포해줘. 3) 배포가 끝나면 내가 ChatGPT 개발자 모드에 등록할 MCP 주소를 알려줘 — 주소가 /api/mcp 로 끝나는지 꼭 확인해줘. /mcp 로 끝나면 동작하지 않아. 4) 마지막으로 그 주소가 실제로 응답하는지 확인한 결과도 알려줘.
이 프롬프트는 [ ] 없이 그대로 씁니다.
Codex가 배포 승인을 물으면 "배포(Publish)"를 승인합니다.
ChatGPT 개발자 모드에 연결하기
- ChatGPT 설정 → 앱 및 커넥터 → 고급 설정에서 개발자 모드 켜기
- 커넥터 만들기 → 이름 입력 + Codex가 알려준 MCP 주소(…/api/mcp) 붙여넣기 → 인증 '없음' → 저장
- 새 대화를 열고 내 앱 이름을 부르며 부탁하기 → 대화 안에 위젯이 뜨면 성공 (블록1에서 본 북릴레이션 화면처럼)
/api/mcp인지 ② 저장 후 새 대화로 다시 ③ 그래도 안 되면 짝 → 진행자 호출마무리 — 오늘 어디까지 왔나
완주 최소선
- 계획서를 만들었다
- Codex가 코드 만드는 것을 목격했다
- 내 컴퓨터에서 실행을 확인했다
도전 목표
- 배포했다
- ChatGPT 개발자 모드에 연결했다
바이브코딩 · API · MCP · API 키 방식 vs 로그인 방식 · 배포
다음에 추가하고 싶은 기능을 하나 적어본다
2탄은 만드는 도구를 바꿉니다 — 오늘은 ChatGPT의 Codex, 다음엔 클로드의 Claude Code로 같은 여정을 밟으며 비교합니다.
막힘 대응 표
진행자(HC · 보조 진행자) 참고용
| 막히는 지점 | 발생 블록 | 대응 |
|---|---|---|
| 데스크톱 앱 설치 실패 · 지연 | 블록 2 | 짝 화면 보며 블록3까지 같이 진행, 완료되는 대로 합류 |
| 아이디어가 너무 크거나 모호함 | 블록 3 | 진행자가 순회하며 기능 3개로 축소 개입 |
| Codex 응답 지연 · 무응답 | 블록 4 | "이 화면이 뜨면 정상" 사전 안내, 5분 넘으면 짝 화면 보며 대기 |
| 생성된 코드가 로컬에서 안 뜸 | 블록 4 | 막힘 카드로 먼저 확인, 안 풀리면 HC 화면 따라오기 |
| 참가자마다 Codex 실행 경로가 다름 | 블록 2·4 | 데스크톱 내장 Codex 경로 하나로만 통일 안내 |
| 배포 · 개발자 모드 연결 실패 | 블록 5 | 도전 목표 구간이라 완주 실패 아님, HC 화면으로 "성공 예시" 관람 |
| 빨리 끝난 사람이 무료해짐 | 블록 2·4·5 | 스트레치 카드(기능 추가·짝 도와주기) 즉시 제공 |
| 전원 동시 접속·배포로 부하·이름 충돌 | 블록 4·5 | 배포 이름 규칙(앱이름-이니셜) 사전 공지 |
진행자용 타임테이블
진행자(HC · 보조 진행자) 참고용
| 시간(누적) | 블록 | 비고 |
|---|---|---|
| 0:00 ~ 0:15 | 블록 1 | 오리엔테이션 · 짝 배정 |
| 0:15 ~ 0:30 | 블록 2 | 데스크톱 앱 설치 확인 (지연 시 최대 0:40까지) |
| 0:30 ~ 0:40 | 휴식 | 10분 |
| 0:40 ~ 1:10 | 블록 3 | 계획 수립 |
| 1:10 ~ 2:05 | 블록 4 | ★완주 최소선 — Codex로 제작 |
| 2:05 ~ 2:15 | 휴식 | 10분 |
| 2:15 ~ 2:50 | 블록 5 | 도전 목표 — 배포 |
| 2:50 ~ 3:05 | 블록 6 | 마무리 |
위 표는 지연 없는 기준 진행표입니다(0:00~3:05, 185분 = 핵심 165분 + 휴식 20분). 블록2 지연(최대 +10분)과 진행 버퍼(20분)를 더하면 총 195~210분(약 3시간~3시간 30분)이 됩니다.