🧑‍💻 🤖

나만의 게임, 오늘 만든다

AI 에이전트에게 말로 요청하는 바이브 코딩

어린이 × 부모 세미나 · 코딩을 몰라도, 8살이어도 OK

✨ 이 화면을 눌러 보세요 — 이 슬라이드도 코드로 만들었거든요 ✨

→ 화살표 키로 다음 페이지

📌 부모님 가이드 ⓪ — 진행 방법

이 자료, 이렇게 진행하세요

종이색 페이지는 아이와 함께 — 아이가 읽고, 반짝이는 요소를 직접 눌러 보게 해주세요.
노란 노트 페이지(이 페이지)는 부모님 담당 — 설치, 실행, 모델 선택을 대신 해주세요.
중반의 라이브 데모 페이지가 핵심입니다. "한 줄 요청 → 게임이 바뀐다"를 눈으로 보여준 뒤, 실제 도구에서 그대로 재현하면 됩니다.
사용 도구: Claude Code 또는 Codex — 터미널에서 실행되는 코딩 에이전트입니다.
오늘의 목표: 완성도보다 "내가 요청해서 내가 만들었다"는 경험 한 번.

⏱️ 준비(설치) 약 15분 + 실습 30~40분 · 권장: 초등 저학년 이상 + 비개발자 부모

STEP 1 · AI 이해하기

퀴즈 — 다음에 올 말은? 빈칸을 눌러 확인!

“옛날 옛날 아주 먼 ❓에…”

“아이스크림은 차갑고, 불은 ❓!”

🤖 AI 쉽죠? 저는 이 "다음에 올 말 맞히기"를 수십억 번 연습한 프로그램이에요. 그래서 글도 쓰고, 그림도 그리고, 코드도 쓸 수 있어요.

STEP 1 · AI 이해하기

"다음 말"을 계속 이으면 — 코드까지 쓸 수 있다

📖

말을 이으면
글·이야기

🎨

선과 색을 이으면
그림

💻

명령어를 이으면
코드

코드란? 컴퓨터에게 내리는 명령을 적어 놓은 글이에요.

게임도, 유튜브도, 이 슬라이드도 전부 코드로 만들어져 있어요. 그리고 AI는 그 코드를 아주 잘 씁니다.

STEP 2 · 에이전트

우리가 쓸 도구는 AI 에이전트

그냥 챗봇은

💬
물어보면 말로 대답까지만 해요.

"사과 게임 만들어줘"
→ 코드를 글로 보여주고 끝.
옮겨 붙이는 건 내 몫… 😅

에이전트는

🤖⚙️
요청을 받으면 직접 파일을 만들고, 코드를 쓰고, 실행까지 해요.

"사과 게임 만들어줘"
→ 파일 생성 ✅ 코드 작성 ✅ 실행 ✅
나는 확인하고 다음 요청만!

🤖 에이전트 제 이름은 Claude Code (친구 이름은 Codex예요). 까만 창(터미널)에서 저와 대화하면 돼요 — 채팅하듯 요청을 적고 Enter!

STEP 2 · 에이전트

바이브 코딩 = 이 4단계를 계속 도는 것

🗣️

1. 요청
원하는 걸
한 줄로 말한다

⚙️

2. 생성
에이전트가
코드를 만든다

▶️

3. 실행
게임을 열어
직접 해본다

🔁

4. 다음 요청
"이것도 넣어줘!"
다시 1번으로

한 바퀴 돌 때마다 게임이 한 단계씩 진화해요. 다음 페이지에서 직접 확인!

📌 부모님 가이드 ① — 준비물 & 설치 (약 15분)

에이전트 설치하기

🧰 준비물

컴퓨터(맥/윈도우) + 인터넷
계정 둘 중 하나:
· Claude Code — Anthropic 계정
· Codex — OpenAI(ChatGPT) 계정
웹 브라우저 (완성된 게임 실행용)

💻 설치 (Node.js 설치 후, 둘 중 하나만)

Claude Code:
npm install -g @anthropic-ai/claude-code

Codex:
npm install -g @openai/codex

첫 실행(claude / codex) 시 로그인 안내를 따라 주세요. 설치 방법이 바뀌었을 수 있으니 막히면 공식 문서 참고.

📌 부모님 가이드 ② — 시작 직전 세팅 (약 3분)

폴더 · 실행 · 모델 선택

작업 폴더 만들기 (예: my-game) → 터미널에서 cd my-game
에이전트 실행: claude (또는 codex) + Enter → 입력창이 나오면 준비 완료
모델(두뇌) 선택: Claude Code에서 /model → Sonnet 권장(속도·성능 균형). 복잡한 문제로 막힐 때만 Opus. Codex는 기본값으로 충분.
안전: 생성 파일은 이 폴더 안에만 만들어집니다. 에이전트가 실행 권한을 물으면 부모님이 내용 확인 후 승인해 주세요.
여기까지 마치면 키보드를 아이에게 넘겨 주세요. 요청은 아이가 직접!

핵심 · 라이브 데모 — 직접 눌러 보세요

요청 한 줄마다, 오른쪽 게임이 진화합니다

🍎 0점 생명 ❤️❤️❤️

🐱🧺

GAME OVER! 다시 도전 💪

떨어지는 사과는 클릭해서 받아요 · 실제 바이브 코딩도 이 순서 그대로입니다 — 요청하고, 만들어지면, 바로 플레이!

STEP 3 · 직접 해보기

이제 진짜로 — 첫 번째 프롬프트

프롬프트 = 에이전트에게 보내는 요청 문장. 아래를 그대로 입력해도 좋고, 바꿔도 좋아요.

📋 첫 프롬프트 — 입력하고 Enter 고양이가 바구니를 들고 위에서 떨어지는 사과를 받는 게임을 HTML 파일 하나로 만들어줘. 왼쪽·오른쪽 화살표 키로 고양이를 움직이고, 사과를 받으면 점수가 1씩 올라가. 색깔은 알록달록하게 해줘. 다 만들면 여는 방법도 알려줘.

🤖 에이전트 좋은 프롬프트의 비밀: 누가(고양이) · 무엇을(사과 받기) · 어떻게(화살표 키)가 다 들어 있어요.

📌 부모님: 완성되면 폴더 안의 index.html을 브라우저로 열어 주세요. "방금 만든 파일을 브라우저로 열어줘"라고 에이전트에게 요청해도 됩니다.

STEP 3 · 직접 해보기

업그레이드는 한 번에 한 줄씩

데모에서 봤던 것처럼, 요청을 하나 보내고 → 실행해 보고 → 다음 요청. 이 리듬이 중요해요.

💖 "사과를 놓치면 생명이 줄게 해줘. 생명은 3개"

⚡ "점수가 오를수록 점점 빨라지게 해줘"

🔊 "사과를 받을 때 효과음이 나게 해줘"

🌌 "배경을 밤하늘로 바꾸고 별이 반짝이게 해줘"

🏆 "최고 점수를 기억해서 화면에 보여줘"

🌟 "가끔 황금사과가 나오고, 받으면 5점을 주게 해줘"

네가 생각해 낸 요청이 제일 좋은 요청이에요. 마음껏 실험해 봐요!

STEP 4 · 버그 잡기

뭔가 이상해요? — 그게 버그, 고치면 됩니다

🧑 나 고양이가 안 움직여. 화살표 키를 눌러도 그대로야. 고쳐줘.

🤖 에이전트 확인했어요 — 키 입력 처리에 문제가 있네요. 수정했으니 새로고침해 보세요!

버그 신고 잘하는 법 🔍

① 뭐가 이상한지 그대로 말하기 ("점수가 안 올라가")
② 빨간 에러 메시지가 보이면 복사해서 붙여넣기 — 최고의 힌트!
③ 고쳐지면 다시 실행해서 확인 — 이것도 바이브 코딩 루프의 일부예요.

📌 부모님 가이드 ③ — 마무리

작품 보관과 다음 세션

게임 파일이 든 폴더째 보관하면 언제든 다시 열고, 이어서 만들 수 있습니다.
플레이 장면 스크린샷·영상을 남겨 주세요 — 아이의 첫 소프트웨어입니다. 📸
이어서 만들기: 같은 폴더에서 claude(또는 codex)를 다시 실행하면 됩니다.
아이가 원리를 물으면 에이전트에게 "방금 코드를 초등학생에게 설명해줘"라고 요청해 보세요 — 눈높이 설명이 나옵니다.
부모님도 더 깊이: 왼쪽 위 "↗ 어른용" 세미나에서 AI·에이전트·모델 선택을 자세히 다룹니다.

정리

오늘의 핵심, 딱 세 가지

🎯

구체적으로 요청
누가 · 무엇을 · 어떻게

🔁

한 번에 한 줄씩
요청 → 실행 → 다음 요청

👀

꼭 실행해서 확인
버그는 고치면 그만

이 세 가지는 어른들이 회사에서 쓰는 바이브 코딩과 완전히 똑같은 방법이에요.

다음 프로젝트

다음엔 뭘 만들어 볼까?

🐶

내 강아지가
주인공인 달리기 게임

🚀

운석을 피하는
우주선 게임

❓

가족 퀴즈
맞히기 게임

🎨

내 마음대로
그림판 만들기

상상할 수 있으면 → 요청할 수 있고 → 요청할 수 있으면 만들 수 있다.

🎉

오늘부터 너도 만드는 사람

코딩을 다 외울 필요는 없어요.
좋은 요청을 만드는 사람이 다음 시대의 개발자니까요.

✨ 화면을 눌러서 축하 폭죽! ✨

부모님께 — 어른용 세미나: 바이브 코딩이란 무엇인가?