개념 사전

낯선 말이 나오면 뜻을 읽고 AI에게 말하기를 써 보세요. 지금 고치려는 화면과 연결하면 됩니다.

찾는 말	바로 가기
작업할 곳과 파일	도구와 환경
HTML, CDN, Import Map, Vite	웹 페이지
카메라, 메시, 모델, 애니메이션	3D
조작, 충돌, 점수, 소리	게임
인터넷 공개, 경로, 이용 조건	배포와 공유

1. 도구와 환경

터미널

뜻: 글자로 명령을 입력하고 실행 결과를 읽는 창입니다.

만나는 곳: 1장 2절의 선택 경로입니다. 기본 실습에서는 Code 탭의 Claude에게 실행을 요청합니다.

AI에게 말하기: “이 프로젝트를 실행해줘. 터미널을 직접 써야 한다면 어느 폴더에서 어떤 명령을 입력하는지도 알려줘.”

에디터와 IDE

뜻: 에디터는 코드 파일을 읽고 고치는 도구이고, IDE는 편집·실행·오류 추적 같은 개발 기능을 한곳에 모은 환경입니다.

만나는 곳: 1장 2절의 선택 도구인 VS Code입니다. 기본 실습은 Code 탭에서 진행합니다.

AI에게 말하기: “Claude Desktop의 Code 탭에서 이 폴더를 열었어. 여기 있는 파일로 작업을 이어가자.”

프로젝트 폴더

뜻: 결과물 하나에 필요한 코드·이미지·모델·설정을 모아 둔 폴더입니다. 작품 하나의 재료 상자입니다.

만나는 곳: 2장 4절의 상품 페이지와 3장 4절의 게임입니다.

AI에게 말하기: “지금 열린 프로젝트 폴더를 확인하고, 실행에 필요한 파일이 어디 있는지 알려줘.”

localhost

뜻: 지금 브라우저를 사용하는 컴퓨터 자신을 가리키는 이름입니다. http://localhost:5173은 내 컴퓨터의 5173번 창구입니다. http://127.0.0.1:5173도 같은 뜻입니다.

만나는 곳: 2장 4절부터 사용합니다. 안내받은 주소와 포트를 엽니다. 친구에게는 배포한 공개 주소를 보냅니다.

AI에게 말하기: “실행한 화면을 localhost에서 열 수 있게 해주고, 내가 누를 정확한 주소를 알려줘.”

2. 웹 페이지

HTML 파일

뜻: 제목·문단·버튼처럼 웹페이지의 내용과 구조를 적는 파일입니다. 페이지의 뼈대이며, CSS로 모양을 꾸미고 JavaScript로 동작을 붙입니다.

만나는 곳: 1장 3절의 카드입니다. 따로 받은 그림은 HTML과 같은 폴더에 둡니다.

AI에게 말하기: “HTML 파일 하나로 만들어줘. 이미지가 따로 필요하다면 같이 보관할 파일도 알려줘.”

index.html

뜻: 웹사이트의 첫 페이지에 흔히 쓰는 파일 이름입니다.

만나는 곳: 1장 3절에서 저장하고 2장 5절에서 배포합니다. 파일 이름이 index.html.txt나 index.html.html로 저장되지 않았는지 확인합니다.

AI에게 말하기: “폴더 맨 위의 첫 페이지 이름이 정확히 index.html인지 확인해줘.”

라이브러리

뜻: 다른 프로그램에서도 가져다 쓸 수 있도록 묶은 기능 모음입니다.

만나는 곳: 2장 1절의 Three.js입니다. 3D를 그리는 기능을 쓰고 점수·시간 규칙은 따로 만듭니다.

AI에게 말하기: “3D 화면은 Three.js로 만들고, 감귤을 모으면 점수가 오르는 규칙도 연결해줘.”

CDN

뜻: 라이브러리 같은 파일을 인터넷 주소로 받아 쓰도록 제공하는 배포망입니다.

만나는 곳: 2장 2절의 빌드 없는 HTML 방식입니다. 완성본은 CDN의 Three.js를 읽으므로 인터넷 연결이 필요합니다.

AI에게 말하기: “Three.js 0.186.1을 jsDelivr CDN에서 불러와줘. 추가 기능도 같은 버전과 CDN을 써줘.”

Import Map

뜻: three 같은 짧은 모듈 이름을 실제 파일 주소에 연결하는 표입니다. 이름을 보고 배달할 주소를 찾는 주소록입니다.

만나는 곳: 2장 2절의 Three.js·OrbitControls입니다. 모듈 코드보다 먼저 두고 본체·추가 기능을 같은 버전으로 연결합니다.

AI에게 말하기: “Import Map에 three 본체와 three/addons/ 경로를 연결하고 둘 다 0.186.1로 맞춰줘.”

캔버스

뜻: JavaScript로 그림을 그리는 HTML 요소입니다. 이 교재에서는 3D 장면이 나타나는 도화지입니다.

만나는 곳: 2장 2절의 카드 위 3D 영역입니다. 비어 있다면 크기와 렌더링 오류를 봅니다.

AI에게 말하기: “3D 캔버스가 카드 너비에 맞고, 창 크기를 바꿔도 도형이 찌그러지지 않게 해줘.”

왜 환경을 지정하나요

뜻: 같은 결과물도 파일을 묶고 실행하는 방법이 여러 가지라서, 지금 사용할 방법을 AI와 맞추는 것입니다.

만나는 곳: 2장 2절은 채팅의 한 파일 미리보기, 2장 4절은 Code 탭의 Vite 프로젝트입니다. 모델 파일이 생기면 Code 탭의 프로젝트 폴더로 옮깁니다.

AI에게 말하기: “이번에는 빌드 없는 HTML 파일 하나로 만들어줘.” 또는 “Code 탭에서 열린 폴더에 Vite 프로젝트로 만들어줘.”

Vite와 빌드

뜻: Vite는 개발 화면을 띄우고 배포용 파일을 만드는 도구입니다. 빌드는 작업 중인 재료를 공개할 파일 묶음으로 준비하는 과정입니다.

만나는 곳: 2장 4절과 3장 4절입니다. dev는 개발 화면, build는 dist/ 생성, preview는 빌드한 결과 확인입니다.

AI에게 말하기: “지원되는 Node 버전을 확인한 뒤 실행해줘. 개발 화면과 빌드한 결과에서 모델이 모두 보이는지도 확인해줘.”

콘솔과 오류 메시지

뜻: 콘솔은 프로그램이 남긴 기록을 읽는 창이고, 오류 메시지는 실패한 작업에 관한 단서입니다.

만나는 곳: 2장 4절과 막혔을 때입니다. 브라우저 Console인지 명령 실행 기록인지 함께 전달합니다.

AI에게 말하기: “localhost에서 열었을 때 브라우저 Console에 나온 첫 오류야. 이 원문을 보고 원인을 찾아줘: [오류 붙여넣기]”

3. 3D

장면과 카메라를 바꾸면 렌더러가 그리는 캔버스의 모습이 달라집니다.

WebGL

뜻: 브라우저에서 GPU를 이용해 그래픽을 그리도록 하는 API입니다.

만나는 곳: 2장 1절입니다. 이 책의 완성본은 WebGLRenderer를 쓰며 WebGL 2 지원이 필요합니다.

AI에게 말하기: “이 브라우저에서 WebGL 2를 사용할 수 있는지 확인하고, 사용할 수 없으면 이해할 수 있는 안내를 보여줘.”

장면 카메라 렌더러

뜻: 장면은 물체가 놓이는 공간, 카메라는 보는 위치와 범위, 렌더러는 그 둘을 받아 화면을 그리는 도구입니다.

만나는 곳: 2장 3절의 3D 화면 실험입니다. 원근 카메라를 물체에서 멀리 옮기면 작게 보입니다.

AI에게 말하기: “원근 카메라를 조금 뒤로 옮겨서 한라봉 전체가 화면 안에 들어오게 해줘.”

메시 지오메트리 머티리얼

뜻: 메시는 지오메트리와 머티리얼을 결합한 3D 물체입니다. 지오메트리는 모양, 머티리얼은 색·금속성 같은 표면 특성이며, 몸과 옷에 비유할 수 있습니다.

만나는 곳: 2장 3절에서 모양과 재질을 따로 바꿉니다.

AI에게 말하기: “지오메트리만 구로 바꾸고 재질은 유지해줘.” 또는 “모양은 두고 머티리얼만 보라색 금속으로 바꿔줘.”

조명

뜻: 장면 속 표면을 비추는 빛입니다.

만나는 곳: 2장 3절의 조명 실험입니다. MeshStandardMaterial은 조명의 영향을 받지만 MeshBasicMaterial은 받지 않습니다. 금속 재질은 반사할 환경에 따라서도 모습이 달라집니다.

AI에게 말하기: “한라봉의 주황색과 입체감이 보이도록 조명과 노출을 조정해줘.”

애니메이션 루프

뜻: 물체의 위치·회전 등을 갱신하고 화면을 반복해서 그리는 흐름입니다. 조금씩 다른 그림을 넘기는 플립북과 비슷합니다.

만나는 곳: 2장 3절의 회전 실험입니다. 기기마다 그리는 횟수가 달라서 움직이는 양은 지난 시간으로 계산합니다.

AI에게 말하기: “자동 회전만 멈추고 드래그 조작은 유지해줘.” 또는 “화면 갱신 속도가 달라도 같은 시간에 같은 만큼 회전하게 해줘.”

좌표와 크기

뜻: 좌표는 물체의 위치를, 크기는 물체가 차지하는 범위를 나타냅니다.

만나는 곳: 2장 4절에서 모델을 가운데 맞추고 3장 4절에서 라이캣의 발을 바닥에 맞춥니다. 이 게임은 Y축을 높이, X·Z 평면을 이동할 바닥으로 사용합니다.

AI에게 말하기: “모델의 중심과 전체 크기를 계산해서 화면에 맞춰줘.” 또는 “캐릭터의 발이 바닥에 닿도록 높이를 맞춰줘.”

glTF와 GLB

뜻: glTF는 3D 장면·재질·동작 등을 전달하는 형식이고, GLB는 이를 담는 바이너리 컨테이너입니다.

만나는 곳: 2장 4절의 한라봉과 3장 2절의 라이캣입니다. 필요한 외부 파일·압축 디코더와 동작 목록은 파일마다 확인합니다.

AI에게 말하기: “이 GLB에 필요한 외부 파일과 디코더가 있는지 확인하고, 애니메이션 이름도 알려줘.”

리깅과 애니메이션

뜻: 리깅은 모델을 움직일 뼈대와 연결을 준비하는 작업이고, 애니메이션은 시간에 따른 동작입니다.

만나는 곳: 3장 2절의 재료 확인과 3장 4절의 걷기입니다. 제공한 라이캣은 스킨 뼈대 변형 대신 팔·다리 그룹을 회전하며, GLB 안에 Idle·Walk 클립이 들어 있습니다.

AI에게 말하기: “GLB 안의 애니메이션 목록을 먼저 확인해줘. Idle과 Walk가 있다면 멈출 때와 걸을 때 전환해줘.”

4. 게임

입력 처리

뜻: 키보드·마우스·터치의 동작을 읽어 게임 행동으로 연결하는 일입니다.

만나는 곳: 3장 4절의 WASD·방향키와 3장 6절의 가상 조이스틱입니다. 떼기·취소·창 이탈 때도 멈추는지 봅니다.

AI에게 말하기: “키를 떼거나 조이스틱 터치를 취소하면 캐릭터가 멈추게 해줘. 창 밖으로 나갔다 돌아와도 입력이 남으면 안 돼.”

충돌 판정

뜻: 두 물체가 닿았거나 정해 둔 거리 안에 들어왔는지 계산하는 일입니다.

만나는 곳: 3장 4절의 장애물과 3장 5절의 감귤 획득입니다. 실제로 가까이 가 보며 판정 범위를 맞춥니다.

AI에게 말하기: “감귤 획득 범위를 조금 넓혀줘. 나무를 통과하지 못하는 판정은 유지해줘.”

상태

뜻: 지금 게임이 어느 단계이며 어떤 값을 갖는지 나타내는 정보입니다.

만나는 곳: 3장 5절입니다. 완성본은 ready·playing·clear·gameover를 구분하고, 점수·남은 시간·수집한 감귤도 관리합니다. 시작·종료 화면에서는 이동과 획득을 막습니다.

AI에게 말하기: “playing 상태에서만 이동·획득·타이머가 진행되고, 성공 화면에서는 멈추게 해줘.”

게임 루프

뜻: 입력을 읽고, 이동과 규칙을 갱신하고, 화면을 그리는 과정을 반복하는 흐름입니다.

만나는 곳: 3장 4절과 3장 5절입니다. 다시하기에서도 반복 흐름이 하나만 도는지 봅니다.

AI에게 말하기: “다시하기에서 게임 루프나 타이머를 하나 더 만들지 않고, 상태와 시작 시각을 초기화하게 해줘.”

자동재생 정책

뜻: 브라우저가 사용자 동작 없이 시작하는 소리 재생 등을 제한하는 규칙입니다.

만나는 곳: 3장 5절의 시작 버튼입니다. 버튼을 누를 때 재생을 요청하고 거절돼도 게임은 계속되게 만듭니다.

AI에게 말하기: “시작 버튼을 누를 때 음악을 재생하고, 재생 실패는 처리해줘. 소리 켜기·끄기도 제공해줘.”

5. 배포와 공유

배포

뜻: 만든 파일을 호스팅 서비스에 올려 다른 사람이 주소로 접속하게 하는 일입니다.

만나는 곳: 2장 5절과 3장 6절입니다. 위니버시티에 폴더·ZIP을 올리면 갤러리에도 공개됩니다.

AI에게 말하기: “위니버시티에 올릴 폴더를 점검하고, 공개 주소에서 확인할 동작을 알려줘.”

정적 사이트

뜻: 준비된 HTML·CSS·JavaScript·이미지 등을 받아 브라우저가 표시하고 실행하는 사이트입니다. 미리 만든 파일을 꺼내 보여 주는 진열장에 비유할 수 있습니다.

만나는 곳: 2장 5절의 페이지와 3장 6절의 게임입니다. 이 예제들은 별도 서버 프로그램 없이 파일을 올려도 회전·수집·소리가 동작합니다.

AI에게 말하기: “이 프로젝트가 정적 사이트로 배포되는지 확인하고, 배포에 포함할 파일을 알려줘.”

base 경로

뜻: 배포한 사이트가 시작되는 기본 URL 경로입니다.

만나는 곳: 2장 5절의 GitHub Pages 대안입니다. https://이름.github.io/my-game/은 보통 /my-game/, 도메인의 루트에서 여는 사이트는 보통 /를 사용합니다. 모델 주소에도 맞는 경로 처리가 필요합니다.

AI에게 말하기: “배포 주소가 /my-game/에서 시작해. Vite base와 GLB·소리 주소를 함께 맞추고 빌드 결과를 확인해줘.”

CI/CD

뜻: 변경을 모아 검사·빌드하고 배포까지 이어 주는 자동화 과정입니다.

만나는 곳: 2장 5절의 GitHub Actions 대안입니다. 빌드·배포가 성공하면 공개 주소에 반영됩니다.

AI에게 말하기: “main에 push하면 검사·빌드·Pages 배포가 이어지게 설정하고, 실패했을 때 읽을 로그 위치도 알려줘.”

라이선스

뜻: 만든 사람이 다른 사람에게 허용한 이용 범위와 조건입니다.

만나는 곳: 3장 2절과 완성본과 재료 내려받기입니다. 무료 다운로드·공개·상업 이용·원본 재배포는 각각 조건을 봅니다.

AI에게 말하기: “에셋출처.md를 읽고 파일별 제작자·출처·라이선스·변경 사항을 정리해줘. 확인되지 않은 이용 권한은 있다고 적지 마.”