AI 스니커즈 게임 코딩 실습

AI가 만든 3D 레이싱 게임 코드를 직접 수정하고 결과를 확인해보자!

VS Code HTML / JS 3D Game
Today's Goal

오늘 할 일 3가지

1

HTML 파일을 VS Code로 열기

게임 코드가 담긴 파일을 에디터에서 확인합니다.

2

터미널에서 게임 실행하기

로컬 서버를 켜서 브라우저에서 게임을 실행합니다.

3

코드를 수정해서 변화 확인하기

코드의 숫자나 글자를 바꾸고, 화면이 어떻게 달라지는지 관찰합니다.

Preparation

준비물 확인

📦 필요한 것들

  • VS Code 설치 완료
  • index.html 파일 1개
  • shoe.glb 파일 1개 (플레이어 캐릭터 — 3D 신발)
  • 두 파일을 같은 폴더에 넣기
📁 Desktop
  └── 📁 nike-race
      ├── index.html
      └── shoe.glb
💡 왜 같은 폴더? — 코드 안에 ./shoe.glb 라고 적혀 있는데, 이건 "나(html)와 같은 폴더에 있는 shoe.glb"라는 뜻이에요.
Background

HTML 파일이 뭐예요?

📄 하나의 파일 안에 3가지가 들어 있어요

  • HTML — 웹페이지의 구조 (뼈대)
  • CSS — 디자인, 색깔, 크기 (옷)
  • JavaScript — 움직임, 게임 동작 (두뇌)

이 게임 파일 하나에 화면 구성, 글자, 게임 로직이 모두 포함되어 있습니다.

Step 1

VS Code로 파일 열기

📁 선생님께 받은 학생자료 폴더를 VS Code로 열어야 해요. 그 안에 index.html과 shoe.glb 두 파일이 있습니다.

💻 방법 1: 메뉴에서 열기

VS Code 실행 → File → Open Folder → 학생자료 폴더 선택

🖱️ 방법 2: 드래그 앤 드롭

학생자료 폴더를 VS Code 아이콘 위에 끌어다 놓기

🖥️ VS Code 화면 구조

  • 왼쪽 — 파일 목록 (index.html, shoe.glb 두 개가 보여야 함)
  • 가운데 — 코드 편집 영역
  • 아래 — 터미널 (명령어 입력 창)
  • 위 — 열린 파일 탭
Step 2

터미널에서 게임 실행하기

⌨️ 터미널이 뭐예요?

컴퓨터에게 글자로 명령하는 창이에요. 마우스 클릭 대신 타이핑으로 컴퓨터를 조작합니다.

📂 터미널 열기

VS Code 상단 메뉴 → Terminal → New Terminal

⚠️ 왜 더블클릭으로 열면 안 되나요? — 이 게임은 3D 라이브러리(Three.js)와 플레이어 캐릭터 파일(shoe.glb)을 불러오는데, 브라우저 보안 정책 때문에 파일을 직접 열면 차단돼요. 그래서 로컬 서버가 필요합니다.
Terminal
python -m http.server 8000

🔍 이 명령어의 뜻

  • python — 파이썬 프로그램 실행
  • -m http.server — 웹서버 기능 사용
  • 8000 — 포트 번호 (문 번호 같은 것)

"내 컴퓨터를 웹사이트처럼 여는 것"이라고 생각하면 돼요!

🌐 브라우저에서 열기

브라우저 주소창에 아래 주소를 입력하세요:

Browser
http://localhost:8000
💡 왜 파일명을 안 써도 되나요? — 파일 이름이 index.html이면 서버가 자동으로 찾아서 열어줍니다. 구글도 google.com/index.html이 아니라 google.com만 치잖아요, 같은 원리예요.
Controls

게임 조작 방법

W ↑ 앞으로 가속
S ↓ 브레이크 / 후진
A D 좌우 방향 조절
Shift 드리프트
Step 3

코드 수정 실습

아래 실습을 하나씩 해보세요. 수정 후 반드시 Ctrl + S로 저장하고, 브라우저를 F5로 새로고침하세요!

실습 01

게임 제목 바꾸기

★★★

화면 중앙에 표시되는 메시지를 내가 원하는 문구로 바꿔보세요.

수정 전
<div id="centerMessage">FINAL LAP</div>
↓
수정 후
<div id="centerMessage">MY SNEAKER GAME</div>
실습 02

도움말을 한국어로 바꾸기

★★★

영어로 된 조작 설명을 한국어로 번역해보세요.

수정 전
<div id="help"> <div><strong>Controls</strong></div> <div>W / ↑ : Accelerate</div> <div>S / ↓ : Brake / Reverse</div> <div>A / D : Steer</div> <div>Shift : Drift</div> </div>
↓
수정 후
<div id="help"> <div><strong>조작법</strong></div> <div>W / ↑ : 가속</div> <div>S / ↓ : 브레이크 / 후진</div> <div>A / D : 방향 조절</div> <div>Shift : 드리프트</div> </div>
실습 03

배경색 바꾸기

★★★

3D 장면의 배경색을 변경해보세요. 색 코드는 0x 뒤에 6자리 숫자+알파벳 조합이에요.

코드에서 찾기
scene.background = new THREE.Color(0x0b0f14);
↓
색상 예시
// 하늘색 scene.background = new THREE.Color(0x87ceeb); // 핑크 scene.background = new THREE.Color(0xffdede); // 보라 scene.background = new THREE.Color(0x2d1b69);
실습 04

건물 색 바꾸기

★★★

도시 건물의 색상을 한 가지 색으로 변경해보세요.

수정 전
color: new THREE.Color().setHSL(...)
↓
수정 후 예시
// 빨간색 color: 0xff0000 // 민트색 color: 0x00ffcc
실습 05

트랙 크기 바꾸기

★★★

레이싱 트랙의 크기와 도로 폭을 조절해보세요.

코드에서 찾기
const TRACK_RADIUS_X = 90; // 가로 크기 const TRACK_RADIUS_Z = 62; // 세로 크기 const ROAD_WIDTH = 18; // 도로 폭

숫자를 크게 → 트랙이 커짐, 숫자를 작게 → 트랙이 작아짐

실습 06

CPU 대수 바꾸기

★★★

함께 달리는 컴퓨터 플레이어의 수를 조절해보세요.

수정 전
const CPU_COUNT = 7;
↓
수정 후
const CPU_COUNT = 3; // 또는 15로도 해보세요!
실습 07

속도 변경하기

★★★

가속, 브레이크, 최대 속도 값을 바꿔보세요.

코드에서 찾기
const CONFIG = { accel: 24, // 가속력 brake: 28, // 브레이크 drag: 8, // 저항 (마찰) maxSpeed: 42 // 최대 속도 }

maxSpeed를 100으로 하면? 어떻게 될까요? 직접 해보세요!

실습 08

신발 크기 바꾸기

★★★

3D 신발 모델의 크기를 키우거나 줄여보세요.

수정 전
playerVisual.scale.setScalar(2.4);
↓
수정 후
playerVisual.scale.setScalar(3.2); // 크게! playerVisual.scale.setScalar(1.2); // 작게!

🏁 오늘의 미션

아래 항목 중 3개 이상 수정해서 나만의 게임을 만들어보세요!

Troubleshoot

문제가 생겼을 때

😱 플레이어(shoe.glb)가 안 보여요!
파일 이름이 정확히 shoe.glb인지 확인하세요. index.html과 같은 폴더에 있어야 합니다.
😱 화면이 까맣게만 나와요!
localhost:8000으로 열었는지 확인하세요. 파일을 더블클릭해서 열면 안 됩니다!
😱 수정했는데 변화가 없어요!
Ctrl + S로 저장했는지 확인하고, 브라우저에서 F5 또는 Ctrl + R로 새로고침하세요.
😱 에러가 나서 게임이 안 돼요!
걱정하지 마세요! Ctrl + Z로 되돌리면 됩니다. 코딩에서 에러는 자연스러운 일이에요.
Key Points

기억해야 할 것들

✨ 오늘의 핵심

  • 코드는 이해하는 게 아니라 수정하고 관찰하는 것부터!
  • 수정 후 반드시 저장 (Ctrl + S)
  • 브라우저에서 새로고침 (F5)
  • 에러가 나도 Ctrl + Z로 되돌리면 됩니다
  • 숫자 하나, 글자 하나 바꾸는 것이 코딩의 시작이에요!
Summary

수업 흐름 한눈에 보기

1

파일 열기

VS Code에서 nike-race 폴더 열기

2

터미널 열기

Terminal → New Terminal

3

서버 실행

python -m http.server 8000

4

브라우저 실행

http://localhost:8000

5

코드 수정

실습 과제를 하나씩 해보기

6

저장 + 새로고침

Ctrl + S → F5

7

결과 확인!

바뀐 화면을 보고, 또 수정해보기

"코드를 이해하려 하지 말고, 바꾸면 어떻게 변하는지 관찰하세요."

VS Code + 터미널 + 코드 수정 → 결과 확인 경험