신용카드사회공헌재단 직원 실습 워크숍

바이브코딩 첫걸음
— 나만의 앱 만들기

코딩을 몰라도, 말로 시켜서 실제로 작동하는 앱을 오늘 만듭니다.

대상 : 신용카드사회공헌재단 직원 중 희망자 소그룹 진행 : HC 도구 : ChatGPT 데스크톱 앱 · Codex
도착점

오늘 끝나면

완주 최소선 — 모두 도달
  • ① 내 아이디어로 앱 계획서를 만들었다
  • ② Codex가 실제로 코드를 쓰는 과정을 보고, 로컬(내 컴퓨터)에서 최소 한 화면이 작동하는 것을 확인했다
  • ③ MCP · API · API 키 방식 vs 로그인 방식 · 배포를 내 말로 설명할 수 있다
도전 목표 — 여유가 되면
  • ④ 내 앱을 배포했다
  • ⑤ ChatGPT 개발자 모드에 연결해, 실제 대화 중 호출되는 것까지 확인했다

④⑤(도전 목표)는 못 가도 완주 실패가 아닙니다. 사내망·계정 상태처럼 개인이 통제할 수 없는 변수가 크기 때문입니다.

지도

오늘의 흐름

핵심 블록 합계 165분

1오리엔테이션 · 짝 배정15분
2ChatGPT 데스크톱 앱 설치 확인15분 (최대 25분)
3계획 수립30분
4★완주 최소선 — Codex로 제작 시작55분
5도전 목표 — 배포35분
6마무리 — 회고 · 다음 예고15분

여기에 휴식 10분 × 2회(블록2~3 사이, 블록4~5 사이)와 진행 버퍼 20분을 더해, 총 195~210분(약 3시간~3시간 30분)을 확보합니다.

블록 1 · 15분

오리엔테이션 & 짝 배정

"북릴레이션은 이미 완성되어 돌아가는 앱입니다. 오늘 그 여정을 처음부터 다시 밟으며, 여러분은 각자 자기 앱으로 같은 길을 갑니다."
내가 만든 앱이 ChatGPT 대화 안에서 열린 화면 (북릴레이션 『데미안』 실제 위젯, 화면 구성 예시)
오늘의 도착점 — 내가 만든 앱이 ChatGPT 대화 안에서 이렇게 열립니다 (북릴레이션 『데미안』 실제 위젯, 화면 구성 예시)
  1. 짝 배정 — 둘씩 짝을 짓는다. 막히면 먼저 짝에게 화면을 보여준다
  2. 워밍업 — 옆 짝에게 내 앱 아이디어를 "한 문장 + 핵심 기능 3개"로 말해본다

기능이 3개 이내로 줄여지지 않으면, 그 자리에서 줄입니다 — 아이디어 기준 : 기능 3개 이내 · 로그인 없음 · 사내 데이터 안 씀 · 유명 서비스 통째 재현 금지

개념

바이브코딩 — 이 말의 유래

"가장 뜨거운 새 프로그래밍 언어는 영어다"
— 안드레이 카파시 (OpenAI 창립 멤버 · 전 테슬라 AI 총괄), 2023년 1월
  • 2023년 1월 — 카파시가 위의 한 문장을 남깁니다. 코드를 몰라도 말로 컴퓨터에게 일을 시키는 시대가 온다는 선언이었습니다.
  • 2025년 2월 — 그 방식에 직접 이름을 붙입니다: 바이브 코딩(vibe coding). "코드가 있다는 것조차 잊고 분위기(vibe)에 몸을 맡긴다. 나는 그냥 보고, 말하고, 실행하고, 붙여넣는다 — 그런데 대체로 그냥 된다."
  • 2025년 11월 — 콜린스 사전이 바이브 코딩을 '올해의 단어'로 선정합니다. 농담처럼 시작한 말이 1년 만에 세계 공용어가 됐습니다.

뜻은 이렇습니다 — 코드를 한 줄씩 읽고 쓰는 대신, 원하는 것을 말로 설명하고 → AI가 코드를 쓰고 → 결과를 보고 다시 말로 고치는 방식. 프로그래밍 언어가 코드에서 우리말로 바뀐 것입니다.

카파시 자신도 "주말에 만들어 보는 작은 프로젝트에 딱 좋다"고 했습니다 — 오늘 우리가 하는 것이 정확히 그 규모입니다. 코드를 몰라도 됩니다. 대신 "원하는 것을 정확히 말하는 능력"이 오늘의 핵심 실력입니다.
사전 준비

준비 체크

계정

유료 ChatGPT 계정 로그인 상태 확인

PC

가능하면 전날까지 데스크톱 앱 설치 완료

아이디어

오늘 만들 앱 아이디어 지참

이 아이디어, 오늘에 적합한가?

  • 첫 버전 기능을 3개 이내로 줄일 수 있다
  • "뭘 누르면 뭐가 나온다"를 한 문장으로 말할 수 있다
  • 로그인 · 회원가입 같은 복잡한 인증이 필요 없다
  • 사내 데이터 · 개인정보를 다루지 않는다
  • 유명 서비스를 통째로 재현하는 것이 아니다 (예: "인스타그램 같은 거" → 당일 축소 필요)
블록 2 · 15분(최대 25분)

ChatGPT 데스크톱 앱 설치 확인

목표 : 전원이 데스크톱 앱을 설치하고, 로그인 상태로 만듭니다. 공통 진입점 — 브라우저에서 chatgpt.com/download 접속

Windows
  1. Microsoft Store에서 "ChatGPT"(제작사 OpenAI) 검색 · 설치
  2. 실행 후, 회사에서 쓰는 유료 계정으로 로그인
Mac
  1. 내려받은 설치 파일(.dmg)을 열어 설치
  2. 실행 후 로그인
설치 확인 — 로그인 후 앱 왼쪽 메뉴에서 Codex가 보이면 준비 완료입니다.

이미 설치한 사람은 로그인 상태와 Codex 진입만 확인하고, 옆 짝의 설치를 도와줍니다.

블록 3 · 30분

계획 수립 — 진행 안내

목표 : 내 아이디어를 "앱 계획서"로 만듭니다.

  1. HC가 북릴레이션 아이디어로 먼저 시연한다 — 정제된 프롬프트를 ChatGPT에 넣는다
  2. ChatGPT가 먼저 역질문한다 — 답할수록 계획서에 가까워진다
  3. 참가자는 자기 아이디어로 똑같이 진행한다

Codex란 ChatGPT 안에서 코드를 직접 쓰고 실행해 주는 "만들기 담당" AI입니다.

다음 화면의 프롬프트를 복사한 뒤 [ ] 안만 내 아이디어로 바꿔 씁니다.
블록 3 · ★복사한 뒤 [ ] 안만 바꿔 쓰는 프롬프트

계획 수립 프롬프트

나는 [앱 이름 — 무엇을 하는 앱인지 한 줄]을 만들고 싶어. 나는 코딩을 전혀 몰라.

바로 계획을 세우지 말고, 먼저 나에게 질문해줘.
- 이 앱을 정확히 이해하는 데 필요한 것을 한 번에 2~3개씩만 묻고, 내 답을 듣고 이어서 질문해줘.
- 누가 쓰는지, 꼭 필요한 기능이 무엇인지, 어떤 화면이 필요한지 분명해지면 질문을 멈춰줘.

질문이 끝나면 아래 형식으로 "앱 계획서"를 만들어줘.
1) 앱 한 줄 소개
2) 첫 버전 핵심 기능 — 3개 이내 (욕심내지 말 것)
3) 화면 구성 — 말로 그린 그림
4) 만드는 순서 — 단계별
5) Codex에게 줄 첫 지시문 — 실제 제작은 ChatGPT의 Codex가 할 거야. 위 계획을 Codex가 그대로 받아 실행할 수 있는 지시문 하나로 정리해줘. 필요한 스킬·서브에이전트·도구가 있다면 지시문 안에 함께 적어줘.
자동 복사가 안 되면, 위 상자를 클릭해 전체 선택(Ctrl/Cmd+A) 후 복사하세요. 복사 버튼이 동작하지 않습니다 — 위 상자를 직접 드래그해 복사해주세요.

첫 줄의 [ ] 부분만 자기 앱 이야기로 바꾸고, 나머지는 그대로 둡니다.

블록 4 · 55분 · ★완주 최소선

Codex로 제작 시작

  1. 계획서의 Codex 지시문을 붙여넣는다
  2. AI가 실제로 코드를 쓰는 과정을 지켜본다
  3. 로컬(내 컴퓨터)에서 실행되는 화면을 내 눈으로 확인한다
"로컬 실행 = 우리 집 부엌에서 요리해서 나만 먹는 것"
이 화면이 뜨면, 오늘의 완주 최소선 달성입니다.
블록 4 · Codex가 코드를 만드는 동안 — 잠깐 개념

API

식당의 주문 창구

이 질문이 자연스럽게 뜨는 순간

코드가 만들어지는 화면을 보다가 — "이 앱이 다른 프로그램과 어떻게 대화하지?"

주문 창구에 원하는 메뉴를 말하면 주방에 전달되듯, API는 프로그램끼리 "이거 해줘"를 주고받는 창구입니다.
블록 4 · Codex가 코드를 만드는 동안 — 잠깐 개념

MCP

만능 콘센트 어댑터

이 순간에 연결된다

로컬 실행 화면이 처음 뜨는 순간

나라마다 다른 콘센트 모양에 맞는 어댑터 하나면 어디서든 충전되듯, MCP는 하나의 도구를 여러 AI 챗봇에 똑같이 꽂아 쓸 수 있게 해주는 공통 규격입니다. 북릴레이션도 이 규격 하나로 여러 AI 챗봇에 연결됩니다.
블록 4 · Codex가 코드를 만드는 동안 — 잠깐 개념 (대조)

API 키 방식

내 카드로 직접 결제

앱이 다른 서비스(AI 등)를 쓸 때마다, 내가 발급받은 열쇠(API 키)로 그때그때 비용을 냅니다.

"왜 우리는 API 키를 따로 안 만들었지?" — 다음 화면에서 답합니다.
블록 4 · Codex가 코드를 만드는 동안 — 잠깐 개념

로그인(구독) 방식

단골 가게 점원에게 심부름

이미 로그인해 둔 단골 가게 점원에게 심부름을 시키듯, 이미 결제된 계정이 대신 처리해줍니다. 지금 쓰고 있는 Codex 자체가 이 방식으로 작동 중입니다.

북릴레이션은 왜 추가 비용이 0원인가 — 서버는 AI 서비스를 직접 호출하지 않습니다. 분석은 이미 결제된 내 ChatGPT 대화가 하고, 서버는 확인하고 화면에 그려주기만 합니다.
블록 4 · 막힘 대응

막혔을 때

1
짝 매칭

옆 사람 화면을 보며 같이 따라간다

2
막힘 카드

흔한 오류와 해결법을 먼저 확인한다

3
HC 화면 따라오기

그래도 안 풀리면 내 것은 잠시 멈추고, 개념 이해부터 챙긴다

시간이 남으면 다시 내 화면으로 돌아옵니다.

블록 5 · 35분 · 도전 목표

배포가 만드는 것 두 가지

로컬 실행이 부엌 요리였다면, 배포는 그 요리를 파는 가게 문을 여는 것입니다. Sites로 배포하면 두 가지가 생깁니다.

  1. 내 앱 사이트 — 앱이 실제로 돌아가는 주소가 생긴다
  2. 연결 고리 — 그 주소 뒤에 /api/mcp를 붙인 것이 ChatGPT에 등록할 주소가 된다
진짜 완성은 사이트가 아니라 ChatGPT 대화 안에서 내 앱이 열리는 것입니다. 여기서부터는 도전 목표 구간 — 막혀도 완주 실패가 아닙니다.
Sites로 배포된 북릴레이션 앱 사이트 화면, 오른쪽 위 전체화면 버튼 표시
Sites 배포로 생긴 북릴레이션 앱 사이트 — 이 주소 뒤에 /api/mcp 를 붙인 것이 ChatGPT에 등록할 연결 고리입니다
블록 5 · Codex에게 배포 프롬프트

Codex에게 배포 시키기

이제 이 앱을 ChatGPT 안에서 쓸 수 있게 배포하고 싶어.

1) 이 앱을 ChatGPT가 불러 쓸 수 있는 MCP 서버로 만들어줘.
2) Sites 기능으로 운영 주소에 배포해줘.
3) 배포가 끝나면 내가 ChatGPT 개발자 모드에 등록할 MCP 주소를 알려줘 — 주소가 /api/mcp 로 끝나는지 꼭 확인해줘. /mcp 로 끝나면 동작하지 않아.
4) 마지막으로 그 주소가 실제로 응답하는지 확인한 결과도 알려줘.
자동 복사가 안 되면, 위 상자를 클릭해 전체 선택(Ctrl/Cmd+A) 후 복사하세요. 복사 버튼이 동작하지 않습니다 — 위 상자를 직접 드래그해 복사해주세요.

이 프롬프트는 [ ] 없이 그대로 씁니다.

Codex가 배포 승인을 물으면 "배포(Publish)"를 승인합니다.

블록 5 · 개발자 모드 연결

ChatGPT 개발자 모드에 연결하기

  1. ChatGPT 설정 → 앱 및 커넥터 → 고급 설정에서 개발자 모드 켜기
  2. 커넥터 만들기 → 이름 입력 + Codex가 알려준 MCP 주소(…/api/mcp) 붙여넣기 → 인증 '없음' → 저장
  3. 새 대화를 열고 내 앱 이름을 부르며 부탁하기 → 대화 안에 위젯이 뜨면 성공 (블록1에서 본 북릴레이션 화면처럼)
안 뜰 때 점검 순서 — ① 주소 끝이 /api/mcp인지 ② 저장 후 새 대화로 다시 ③ 그래도 안 되면 짝 → 진행자 호출
블록 6 · 15분

마무리 — 오늘 어디까지 왔나

1
자가 체크리스트

완주 최소선

  • 계획서를 만들었다
  • Codex가 코드 만드는 것을 목격했다
  • 내 컴퓨터에서 실행을 확인했다

도전 목표

  • 배포했다
  • ChatGPT 개발자 모드에 연결했다
2
개념 퀵 리캡 (5분)

바이브코딩 · API · MCP · API 키 방식 vs 로그인 방식 · 배포

3
다음 기능 1개 적기

다음에 추가하고 싶은 기능을 하나 적어본다

4
2탄 예고

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분)이 됩니다.

1회 진행 권장 조건 : 참가자 8명 이하 + 보조 진행자 1인 이상. 9명을 넘거나 리허설에서 사내망 동시접속 이슈가 확인되면 2회 분할(1회차 = 블록1~4, 2회차 = 블록5~6 + 지난 회차 확인 10분 추가).
1 / 21