관리자 인증 확인 중...
B 또는 Space 로 복귀
‹
›
LUNA CODE LAB · CLASS I Week 10 — 레벨업과 무기 진화 초4 · 중3 / 90분
1 / 9 📄 워크시트 ←
WEEK 10 · 2026

레벨업,
3장의 카드

적을 잡으면 경험치가 쌓이고, 가득 차면 3장의 무기 카드가 떠요. 새 무기 받을지, 기존 무기 강화할지 — 선택은 너의 몫. 그리고 칼+창=양날검 같은 진화 트리.

Duration90 minutes
ToolClaude Code
Output경험치 + 카드 + 진화
Phase2D 뱀파이어 서바이벌 (3/5)
02 / Learning Goals⏱ 5분

오늘의 학습 목표

1
경험치 시스템
적이 죽으면 보석(gem) 등장 → 줍기 → XP 쌓이기 → 게이지 바.
2
레벨업 카드 UI
XP 만땅 → 게임 멈춤 → 3장 카드 표시 → 클릭 한 번이면 적용.
3
무기 5종 + 시너지
마법구슬·칼·창·번개·얼음. 둘 만렙 + 다른 무기 만렙 = 진화 무기.
4
진화 트리
칼+창=양날검, 번개+얼음=얼음폭풍. 조합으로 새로운 무기가 태어난다.
03 / Concept⏱ 10분

레벨업 = 선택의 순간

뱀파이어 서바이벌의 진짜 재미는 "매번 다른 빌드"다. 같은 게임을 두 번 해도 카드 뽑힘이 달라서 매번 새로운 캐릭터가 만들어진다.

💎
보석 줍기
적 처치 →
XP 보석 드롭
→
🃏
3장 카드
랜덤 무기/강화
중 선택
→
⚡
진화 무기
두 무기 만렙 시
합쳐서 강해짐
매번 다른 순서로 카드가 나오니까, 같은 게임이라도 매번 새로워. 이게 "리플레이성".
04 / Prompt Engineering⏱ 10분

레벨업 카드 — UI 설계 프롬프트

❌ 나쁜 예
"레벨업하면 카드 보여줘"
왜 안 좋나? 어디 위치? 몇 장? 어떻게 선택? AI가 만든 UI가 게임 위에 안 떠 있으면 보이지도 않을 수 있음.
✓ 좋은 예
"레벨업하면 게임 일시정지,
화면 가운데 3장 카드(가로 배치),
각 카드: 아이콘 + 이름 + 설명 + Lv,
카드 클릭 → 적용 → 게임 재개"
왜 좋나? 일시정지·위치·카드 내용·클릭 동작 다 명시. 진짜 게임 UI 흐름.
💡 UI 프롬프트 4요소: 일시정지 · 위치(가운데) · 카드 내용(아이콘·텍스트·레벨) · 클릭 후 동작. 게임 UI의 표준 패턴.
05 / Live Build · Step 1⏱ 12분

Step 1 — 경험치 + 게이지 바

적이 죽으면 보석이 떨어진다. 플레이어가 다가가면 줍는다. 그러면 게이지가 찬다.

1
Claude에게 보낼 요청
"지난 주 게임에 경험치 시스템 추가해줘. - 적이 죽을 때 그 자리에 파란 보석(반지름 5) 드롭 - 플레이어가 보석에 닿으면 +1 XP - 화면 상단에 가로 게이지 바 (현재 XP / 필요 XP) - 게이지 색은 파랑, 배경은 회색"
✓
예상 결과 — XP 시스템
const gems = []; let xp = 0, level = 1, xpNeeded = 5; // 적 사망 시 if(e.hp <= 0){ gems.push({ x:e.x, y:e.y, r:5 }); enemies.splice(j, 1); } // 보석 줍기 (플레이어와 거리) for(let i = gems.length-1; i >= 0; i--){ const g = gems[i]; const dx = g.x - player.x, dy = g.y - player.y; if(Math.sqrt(dx*dx + dy*dy) < player.r + 12){ xp++; gems.splice(i, 1); } } // 게이지 바 그리기 ctx.fillStyle = '#333'; ctx.fillRect(20, 10, 760, 12); ctx.fillStyle = '#3D5A80'; ctx.fillRect(20, 10, 760 * (xp/xpNeeded), 12);
🎙
멘토 멘트 "보석을 줍는 반경을 player.r+12로 넉넉히 해주세요. 정확히 닿아야 줍게 하면 답답해요. '근처에 가면 자동 흡수' 느낌이 좋은 게임."
05 / Live Build · Step 2⏱ 12분

Step 2 — 레벨업 트리거

XP가 차면 게임 멈춤 + 효과음 + 레벨업! 다음 단계 카드를 띄울 신호.

2
Claude에게 보낼 요청
"xp가 xpNeeded 도달하면: 1. paused = true로 게임 일시정지 2. level++, xp는 0으로 리셋 3. xpNeeded는 1.5배로 증가(다음 레벨 더 어렵게) 4. showLevelUpCards() 호출 준비 5. 화면 가운데에 'LEVEL UP!' 큰 글씨 잠깐 표시"
✓
예상 결과 — 레벨업 트리거
let paused = false; function checkLevelUp(){ if(xp >= xpNeeded){ level++; xp = 0; xpNeeded = Math.floor(xpNeeded * 1.5); // 5 → 7 → 10 → 15... paused = true; showLevelUpCards(); } } // 메인 루프 function loop(){ if(!paused){ update(); draw(); } requestAnimationFrame(loop); }
🎙
핵심 가르침 "xpNeeded * 1.5 — 이게 진짜 비밀이에요. 매 레벨 1.5배씩 어려워야 게임이 길게 즐길 수 있어요. 너무 빠르면 5분 만에 만렙, 너무 느리면 지루함."
05 / Live Build · Step 3⏱ 18분

Step 3 — 3장 카드 UI

화면 위에 떠 있는 카드를 HTML divider로 만든다. 클릭하면 적용되고 게임 재개.

3
Claude에게 보낼 요청
"레벨업 카드 UI 만들어줘. - 5가지 무기 중 랜덤 3개 뽑기 (혹은 강화 옵션) - HTML div로 카드 3장 가로 배치 (가운데 정렬) - 각 카드: 아이콘(이모지) + 이름 + 'Lv2로 강화' 또는 '신규 획득' - 카드 클릭 시 selectCard(weaponId) → paused=false"
✓
예상 결과 — 카드 생성 + 클릭
const WEAPONS = { orb: { name:'마법구슬', icon:'🔮', dmg:[10,15,22,30] }, sword: { name:'칼', icon:'⚔️', dmg:[12,18,26,38] }, spear: { name:'창', icon:'🗡️', dmg:[8,14,22,32] }, thunder: { name:'번개', icon:'⚡', dmg:[15,22,32,45] }, ice: { name:'얼음', icon:'❄️', dmg:[6,10,16,24] } }; const playerWeapons = { orb: 1 }; // 시작 무기 function showLevelUpCards(){ const options = pickThreeRandom(WEAPONS); const ui = document.getElementById('levelup'); ui.innerHTML = options.map(o => `<div class="card" onclick="selectCard('${o.id}')"> <div class="icon">${o.icon}</div> <div class="name">${o.name}</div> <div class="lv">Lv ${(playerWeapons[o.id]||0)+1}</div> </div>` ).join(''); ui.style.display = 'flex'; }
🎙
왜 HTML로 만드나? "canvas로 카드를 그리면 클릭 좌표를 직접 계산해야 해서 복잡해요. HTML div는 onclick 하나로 끝. 게임 UI는 HTML이 훨씬 쉬워요."
🎨
학생 액션 본인이 만들고 싶은 6번째 무기 추가 — 이름·아이콘·데미지 4단계 정해서 WEAPONS에 추가.
05 / Live Build · Step 4⏱ 15분

Step 4 — 무기 시너지 (조합)

칼과 창 둘 다 만렙? 양날검으로 합쳐진다. 두 무기 조합이 새로운 무기를 만든다.

4
Claude에게 보낼 요청
"무기 시너지 만들어줘. - 칼(Lv4) + 창(Lv4) = 양날검 (자동 변환) - 번개(Lv4) + 얼음(Lv4) = 얼음폭풍 - 마법구슬(Lv4) + 칼(Lv4) = 검 오라 selectCard에서 무기 레벨 올린 후 checkSynergy()로 조건 체크 → 변환되면 알림."
✓
예상 결과 — 시너지 사전
const SYNERGIES = [ { need:['sword', 'spear'], result:'doubleblade' }, { need:['thunder', 'ice'], result:'icestorm' }, { need:['orb', 'sword'], result:'auraSword' } ]; function checkSynergy(){ for(const s of SYNERGIES){ const ok = s.need.every(w => (playerWeapons[w]||0) >= 4); if(ok && !playerWeapons[s.result]){ // 진화 발동! s.need.forEach(w => delete playerWeapons[w]); playerWeapons[s.result] = 1; showSynergyAlert(s.result); } } }
🎙
게임 디자인의 본질 "시너지는 학생이 '발견하는 재미'예요. AI한테 시너지 정보를 화면에 안 보여주게 만들면, 학생이 직접 실험으로 알아내요. 게임이 100배 재미있어져요."
🧪
학생 액션 (시너지 디자인) 본인만의 시너지 1개 추가 — 어떤 무기 두 개 합치면 어떤 새 무기 나오는지 디자인.
05 / Live Build · Step 5⏱ 8분

Step 5 — 진화 트리 완성

각 무기가 어떻게 작동하는지 발사 로직 분기. 5개 무기 다 다른 패턴으로.

5a
무기별 다른 발사 패턴
마법구슬=가장 가까운 적, 칼=주변 360도 회전, 창=직선 4방향, 번개=랜덤 적, 얼음=느려지는 효과.
function fireWeapons(){ Object.keys(playerWeapons).forEach(w => { if(w === 'orb') fireOrb(playerWeapons[w]); if(w === 'sword') fireSword(playerWeapons[w]); if(w === 'spear') fireSpear(playerWeapons[w]); if(w === 'thunder') fireThunder(playerWeapons[w]); if(w === 'ice') fireIce(playerWeapons[w]); }); }
5b
테스트 플레이 (3분)
5분 동안 살아남으며 카드 5번 이상 뽑기. 시너지 발동 시 화면에 알림 뜨는지 확인.
5c
자랑 + 다음 주 빌드 기록
"내가 만든 빌드(무기 조합)" 화면 캡처. 다음 주에는 골드·아이템·게임 폴리시.
🎙
오늘의 마무리 "오늘 만든 게임은 진짜 '뱀파이어 서바이벌' 같아졌어요. 레벨업 카드 + 시너지 = 매번 다른 게임. 다음 주 골드·아이템 붙이면 진짜 출시해도 되는 수준."
10 / Checkpoint⏱ 5분

여기까지 됐나? 확인하기

✅잘 됐다면
  • 적 처치 → 보석 드롭, 플레이어 근처에서 자동 흡수
  • 화면 상단 XP 게이지 바가 차오름
  • 레벨업 시 게임 멈추고 3장 카드 표시
  • 카드 클릭 → 무기 추가/강화 → 게임 재개
  • 두 무기 만렙 → 진화 무기로 자동 변환
⚠️자주 막히는 부분
  • 카드가 안 보임 → CSS z-index 999 + position fixed
  • 일시정지 후 안 멈춤 → loop에서 paused 체크 누락
  • 카드 클릭해도 안 닫힘 → display:'none' 다시 설정
  • 시너지 무한 발동 → !playerWeapons[result] 조건 빠짐
  • 같은 무기만 3장 → pickThreeRandom 중복 제거 누락
11 / Challenge⏱ 5분

더 해보고 싶다면 도전

💎
보석 자동 흡수 — 플레이어 주변에 자석 효과(반경 80) 안에 들어오면 빨려 들어옴.
난이도 ★
🃏
레어 카드 시스템 — 10% 확률로 황금 테두리 카드(데미지 2배 추가). 카드 등급 색으로 구분.
난이도 ★★
🌳
진화 트리 그림 — 화면 한쪽에 '내 무기 트리' 항상 표시. 무기 만렙 시 별 표시.
난이도 ★★★
12 / Student Gallery⏱ 5분

작년 친구들 빌드

⚔️
양날검 빌드
⚡
얼음폭풍 빌드
🔮
마법구슬 만렙
🌟
검 오라 시너지
🃏
레어 카드 컬렉션
🏆
진화 트리 완성
📌 첫 학기 종료 후 학생 결과물 사진을 여기에 채울 예정입니다.
13 / Next Week⏱ 5분

다음 시간 예고

WEEK 11 · COMING UP

골드 · 아이템 ·
게임 폴리시

이제 진짜 출시 준비. 골드 시스템으로 영구 업그레이드 사기, 랜덤 아이템 박스 줍기, 그리고 게임 폴리시(연출·효과음·메뉴) — 출시 가능한 진짜 게임으로 완성된다.

PREPARE · 준비물
  • 오늘 만든 레벨업 시스템 포함 게임
  • 좋아하는 게임의 메뉴 화면 스크린샷 한 장
  • 본인만의 "영구 업그레이드" 아이디어 3개