WEEK 01 · 2026
AI랑 같이
게임 만들기 입문
Claude Code랑 처음 대화해보고, 좋은 프롬프트가 뭔지 배우는 시간. 오늘 끝나면 — 내 이름과 색깔이 있는 첫 HTML 페이지가 손에 남습니다.
Duration90 minutes
ToolClaude Code
Output첫 인터랙티브 HTML
Phase기본 게임 로직 (1/3)
02 / Learning Goals⏱ 5분
오늘의 학습 목표
1
AI는 마법이 아니다
Claude가 어떻게 코드를 짜는지, 어떤 게 잘하고 못하는지 이해한다.
2
좋은 프롬프트 쓰기
"게임 만들어줘" vs "노란 배경에 빨간 사각형, 클릭하면 색 바뀌게" 차이를 안다.
3
HTML이 뭔지
코드 한 줄 안 외워도 OK. AI가 짠 코드를 읽고 어디 바꿀지만 안다.
4
첫 결과물 손에 들기
자기 이름·좋아하는 색이 있는 진짜 HTML 페이지. 부모님께 보여줄 수 있다.
03 / Concept⏱ 10분
AI는 도구, 너는 디렉터
영화 감독이 모든 장면을 직접 찍지 않는 것처럼, 우리도 코드를 직접 안 짭니다. 대신 "무엇을 어떻게 만들고 싶은지"를 정확히 설명하는 사람이 됩니다.
🎬
너 (디렉터)
아이디어
판단·디자인
판단·디자인
+
🤖
Claude (도구)
코드 작성
빠른 실행
빠른 실행
=
🎮
진짜 결과물
게임 · 웹 · 영상
AI는 "무엇을" 만들지 모릅니다. 너만 알아. 그래서 잘 설명하는 게 진짜 실력.
04 / Prompt Engineering⏱ 15분
프롬프트 — 잘 vs 못
❌ 나쁜 예
"게임 만들어줘"
왜 안 좋나? 너무 막연함. AI가 100가지 게임 중 뭘 만들어야 할지 모름.
결과: 매번 다른 게임이 나옴 → 다시 설명해야 함.
✓ 좋은 예
"노란 배경 페이지에
가운데에 빨간 사각형(200×200px)
클릭하면 파란색으로 바뀌게
HTML 한 파일로 만들어줘"
가운데에 빨간 사각형(200×200px)
클릭하면 파란색으로 바뀌게
HTML 한 파일로 만들어줘"
왜 좋나? 색·크기·위치·동작·형식 모두 명확. AI가 정확히 그것만 만듦.
결과: 한 번에 원하는 거 나옴.
💡 오늘의 비법: "색·크기·위치·동작·형식" 다섯 개를 꼭 말하기. 외워.
05 / Live Build · Step 1⏱ 5분
Step 1 — Claude에게 자기소개
친구한테 처음 만났을 때 인사하는 것처럼 AI에게도 자기소개를 한다. 무슨 게임을 만들고 싶은지, 좋아하는 색이 뭔지 알려주면 AI가 더 잘 도와준다.
1
학생이 Claude Code에 입력할 메시지
// 학생이 그대로 따라쳐
"안녕 클로드. 나는 [이름]이고 [학년]이야.
오늘 너랑 처음으로 HTML 페이지를 만들 거야.
내가 좋아하는 색은 [색깔]이고
좋아하는 동물은 [동물]이야.
앞으로 12주 동안 게임을 만들 거니까 잘 부탁해!"
🎙
멘토 멘트
"AI한테 명령어처럼 짧게 말하지 말고, 친구한테 말하듯 자세히 알려주는 게 좋아요. 본인 정보를 알려주면 AI가 너에 맞춰 답해줘요."
✋
학생 액션
본인 이름·학년·좋아하는 색·동물 채워서 Claude에 입력 → 답변이 오면 옆 친구에게 보여주기.
05 / Live Build · Step 2⏱ 8분
Step 2 — 첫 HTML 파일 만들기
이제 진짜 코드를 만든다. "파일 이름·내용·스타일" 세 가지를 정확히 말해야 한다.
2
Claude에게 보낼 요청 (학생이 직접 작성)
// 좋은 프롬프트 — 색·크기·위치·동작·형식
"index.html 파일을 하나 만들어줘.
화면 한가운데에 내 이름이 아주 크게(120px) 나오고
배경색은 연한 노랑(#FFF8DC),
글자색은 진한 파랑(#1B3A6F)으로 해줘.
폰트는 깔끔한 산세리프로."
✓
예상 결과 — AI가 만들어줄 코드
<!DOCTYPE html>
<html>
<body style="background:#FFF8DC;display:flex;align-items:center;justify-content:center;height:100vh">
<h1 style="color:#1B3A6F;font-size:120px;font-family:sans-serif">창범</h1>
</body>
</html>
🎙
멘토 강조 포인트
"색깔 코드(#FFF8DC) 이게 뭔지 외울 필요 없어요. AI에게 '연한 노랑'이라고만 해도 알아들어요. 우리는 디렉터지 코더가 아니에요."
05 / Live Build · Step 3⏱ 7분
Step 3 — 디자인 다듬기
결과물을 보고 마음에 안 드는 부분을 한 번에 하나씩 고친다. 이게 디렉터의 진짜 일.
3
예시: 학생이 보고 느낀 점 → AI에게 수정 요청
// 한 번에 하나씩 — AI가 헷갈리지 않게
요청 1: "이름 글자에 그림자를 넣어줘. 살짝 떠 보이게."
요청 2: "배경에 작은 동그라미가 여러 개 둥둥 떠다니게 해줘."
요청 3: "이름 위에 작은 글씨로 '나의 첫 페이지'라고 써줘."
요청 4: "전체적으로 둥근 느낌이 더 났으면 좋겠어."
🎙
핵심 가르침
"한꺼번에 다 바꿔달라고 하지 마세요. 한 번에 하나씩. AI가 망가뜨리면 'undo' 해주세요. 이게 진짜 디렉터 일하는 법이에요."
🎨
학생 자유 디자인 (5분)
본인 취향대로 색·폰트·그림자·배경 패턴 세 가지 이상 바꿔보기. 어떤 변화가 가장 마음에 들었는지 옆 친구에게 1줄로 설명.
05 / Live Build · Step 4⏱ 8분
Step 4 — 클릭하면 일어나는 일
이제 진짜 게임의 시작 — "클릭하면 무언가 일어난다". 게임의 모든 인터랙션은 여기서 시작한다.
4
Claude에게 보낼 요청
"내 이름을 클릭하면
글자가 무지개색으로 한 글자씩 바뀌고
클릭할 때마다 색깔이 다음 무지개색으로 넘어가게 해줘.
빨 → 주 → 노 → 초 → 파 → 남 → 보 → 다시 빨 순서로."
✓
핵심 JavaScript 개념 (외울 필요 X, 이해만)
// 이런 게 만들어진다
const colors = ['red', 'orange', 'gold', 'green', 'blue', 'indigo', 'violet'];
let i = 0;
title.onclick = () => {
title.style.color = colors[i % 7]; // 7로 나눈 나머지 = 순환
i++;
};
🎙
개념 한 줄 설명
"이게 바로 '이벤트'예요. 게임에서 캐릭터가 점프하는 것도, 적이 죽는 것도 모두 '이벤트'. 다음 주에 더 자세히 배워요."
🌈
학생 액션
무지개색 말고 본인이 원하는 색 시리즈로 바꿔 요청해보기 (예: 파스텔톤·네온톤·할로윈톤).
05 / Live Build · Step 5⏱ 5분
Step 5 — 저장 · 미리보기 · 공유
완성한 결과물을 진짜로 화면에 띄우고, 다른 사람에게 자랑한다. 이게 메이커의 진짜 완성.
5a
파일 저장
Claude가 만든 코드를 index.html로 저장. 바탕화면에 "MyFirstPage" 폴더 만들어 거기에.
5b
브라우저에서 열기
파일을 더블클릭 → Chrome/Safari에서 열림. 클릭 인터랙션 작동하는지 확인.
5c
자랑하기 (사진 또는 영상)
스크린샷 찍어서 부모님 카톡에 보내거나, 화면 녹화 → 학원 SNS에 올리기.
🎙
오늘의 마무리
"오늘 만든 결과물은 단순해 보이지만, 다음 주부터 이게 점점 게임이 돼요. 클릭 → 점프 → 충돌 → 게임 완성. 시작이 가장 중요해요."
10 / Checkpoint⏱ 5분
여기까지 됐나? 확인하기
✅잘 됐다면
- 자기 이름이 화면에 크게 표시됨
- 배경색·글자색이 원하는 대로 적용
- 클릭하면 색이 변하는 인터랙션 작동
- 파일을 더블클릭하면 브라우저에서 열림
- "내가 만들었다!"는 자신감 ✨
⚠️자주 막히는 부분
- 파일 저장 안 됨 → Cmd/Ctrl + S 누르기
- 색이 안 바뀜 → 파일 새로고침 (Cmd/Ctrl + R)
- AI가 다른 거 만듦 → 더 구체적으로 다시 설명
- 한글 깨짐 → meta charset utf-8 추가 요청
- 화면 까만색 → CSS 색깔 다시 확인
11 / Challenge⏱ 10분
더 해보고 싶다면 도전
🌈
클릭할 때마다 무지개 색으로 순서대로 바뀌게 해보기. (빨→주→노→초→파→남→보)
난이도 ★
🔢
클릭한 횟수를 화면에 표시. 100번 클릭하면 "축하해!" 메시지가 뜨게.
난이도 ★★
🎵
클릭할 때 소리가 나게. (효과음은 AI에게 추천 받아도 OK)
난이도 ★★★
12 / Student Gallery⏱ 7분
작년 친구들 작품
🎨
결과물 1
🌈
결과물 2
✨
결과물 3
🎮
결과물 4
🚀
결과물 5
🎯
결과물 6
📌 첫 학기 종료 후 학생 결과물 사진을 여기에 채울 예정입니다.
13 / Next Week⏱ 5분
다음 시간 예고
WEEK 02 · COMING UP
게임 루프와 캔버스 —
도형이 움직인다
이제 게임의 진짜 비밀, 60fps 게임 루프를 배웁니다. 캔버스에 도형을 그리고 자동으로 움직이게 — 1초에 60번 화면을 다시 그리는 마법.
PREPARE · 준비물
- 이번 주 만든 HTML 파일을 노트북에 저장해 와
- 좋아하는 게임 화면 스크린샷 하나 (어떤 게임이든)
- "이런 게임 만들고 싶다"는 짧은 아이디어