프롬프트 모음

1~3장의 긴 요청문을 최종 본문 그대로 모았습니다. 표 속의 짧은 다듬기 요청은 본문에서 보세요.

1. 복사하기 전에

각 요청 위에 보낼 곳과 본문 링크가 있습니다. 먼저 본문에서 준비할 파일과 성공 기준을 보세요.

• 빈칸: [대괄호]에 실제 주소·오류를 넣습니다.
• 내 내용: 이름·소개·주제를 바꿔도 됩니다. 시간·개수는 GAME.md와 시작 안내도 맞춥니다.
• 파일: 내 경로를 씁니다. 상품·게임의 재료는 public/models/·public/sounds/에 둡니다.
• 확인: 요청 뒤 직접 써 봅니다. 재료를 바꾸면 출처 기록도 고칩니다.

증상부터 찾으려면 막혔을 때로 갑니다. 해당 해결 요청도 이 모음으로 연결됩니다.

2. 프로필 카드 만들기

2.1 첫 프로필 카드

채팅 · 본문 1-3절

라이캣을 소개하는 프로필 카드 웹페이지를 만들어줘.
처음 만든 페이지를 저장해서 나중에 3D 자기소개 페이지로 발전시키고 싶어.

- 가운데 카드 하나에 프로필 이미지 자리, 이름, 한 줄 소개, 이메일 버튼을 넣어줘.
- 이름은 라이캣, 소개는 "작은 호기심으로 새로운 웹을 만듭니다."로 해줘.
- 이메일 버튼에는 실습용 mailto:lycat@example.com을 연결해줘.
- 배경은 부드러운 그라데이션, 글꼴은 깔끔한 고딕 계열로 해줘.
- 휴대폰에서도 글자와 버튼이 잘 보이게 해줘.
- HTML 파일 하나로 만들어 아티팩트에서 미리 볼 수 있게 해줘.
- 그림이 없으면 '라' 글자가 들어간 이미지 자리로 시작해도 돼.
- 내가 적은 예시 정보만 사용해줘.

2.2 미리보기 열기

채팅 · 본문 1-3절

완성한 프로필 카드를 미리 볼 수 있는 HTML 아티팩트로 만들어줘.
아직 3D 기능은 넣지 말고 지금 카드부터 확인하고 싶어.

2.3 밤하늘 배경

채팅 · 본문 1-3절

배경을 밤하늘 느낌의 어두운 색으로 바꿔줘.
글자는 읽기 편하게 밝게 하고 카드 구성은 유지해줘.

2.4 이름 아래 직함

채팅 · 본문 1-3절

이름 아래에 "프론트엔드 개발자 지망생"이라는 직함을 한 줄 추가해줘.
기존 소개와 이메일 버튼은 유지해줘.

2.5 이메일 버튼 효과

채팅 · 본문 1-3절

이메일 버튼에 마우스를 올리면 살짝 커지게 해줘.
mailto:lycat@example.com 연결은 유지해줘.

2.6 카드 그림자

채팅 · 본문 1-3절

카드에 부드러운 그림자를 넣어서 배경 위에 떠 있는 느낌으로 만들어줘.

2.7 저장한 카드의 그림 확인

채팅 · 본문 1-3절

내려받은 index.html을 브라우저에서 열었는데 그림만 안 보여.
index.html과 licat-200.png는 같은 폴더에 있어.
그림 파일 이름과 상대 경로가 맞는지 확인해줘.

2.8 저장본에서 이어가기

채팅 · 본문 1-3절

첨부한 파일은 저장해 둔 프로필 카드야. 이 버전을 기준으로 이어서 수정하자.
이름과 소개, 이메일 링크는 유지하고 배경만 밝은 색으로 바꿔줘.

3. 3D 자기소개 만들기

3.1 카드에 3D 화면 더하기

채팅 · 본문 2-2절

첨부한 프로필 카드에 3D 화면을 추가해줘.
카드 상단에서 보라색 정육면체가 천천히 회전하고,
마우스와 휴대폰 터치로 드래그해 돌려볼 수 있게 해줘.
이름과 소개, 이메일 버튼은 유지해줘.

- HTML 파일 하나로 완성하고 별도 빌드 도구는 쓰지 마.
- Three.js는 jsDelivr의 0.186.1을 CDN + Import Map으로 불러와줘.
- OrbitControls도 같은 CDN과 버전의 three/addons/ 경로로 연결해줘.
- 조명에 반응하는 재질로 밝은 면과 어두운 면이 보이게 해줘.
- 첨부한 이미지는 HTML 안에 넣고, 외부 GLB나 별도 파일을 읽지 않게 해줘.
- 창 크기를 바꾸면 3D 영역도 맞춰줘. 자동 회전을 멈추는 버튼도 넣어줘.
- 내 실제 정보는 새로 넣지 말고, 이메일은 실습용 lycat@example.com을 써줘.

3.2 빈 3D 영역의 오류 전달

채팅 · 본문 2-2절

3D 영역이 비어 있어. 저장한 HTML을 Edge에서 열어 확인했어.
인터넷 연결은 되어 있고, Console에 아래 오류가 나와.
원인을 확인하고 카드 내용은 유지한 채 고쳐줘.
[실제 오류 원문 붙여넣기]

3.3 금속 재질

채팅 · 본문 2-2절

모양은 유지하고 보라색 금속 재질로 바꿔줘.
반사되는 밝은 면이 보이도록 주변 조명과 반사 환경도 맞춰줘.

3.4 반투명 유리 느낌

채팅 · 본문 2-2절

모양은 유지하고 배경이 비치는 반투명한 유리 느낌으로 바꿔줘.

3.5 와이어프레임

채팅 · 본문 2-2절

모양은 유지하고 삼각형의 선이 보이는 와이어프레임으로 바꿔줘.

4. 3D 화면 이해하기

4.1 내 코드의 구성 찾기

채팅 · 본문 2-3절

첨부한 최신 파일에서 장면, 메시의 형태와 재질, 조명,
카메라 위치, 화면을 반복해서 그리는 부분을 찾아줘.
각각의 짧은 코드와 줄 번호를 보여주고, 화면에서 어떤 역할인지
처음 배우는 사람에게 한 문장씩 설명해줘. 아직 코드는 고치지 마.

5. 제주상점 한라봉 만들기

5.1 Node.js와 npm 확인

Code 탭 Local · 본문 2-4절

이 폴더에서 Vite 프로젝트를 만들려고 해.
Node.js와 npm이 준비되어 있는지 확인해줘.
Vite 8.3.5의 Node 조건은 ^20.19.0 || >=22.12.0이야.
맞지 않거나 설치되어 있지 않으면 공식 설치 방법을 안내해줘.
public/models의 모델과 출처 문서는 유지해줘.

5.2 첫 상품 페이지

Code 탭 Local · 본문 2-4절

한라봉을 손으로 돌려 보며 소개를 읽는 상품 페이지를 만들어줘.
따뜻한 크림색 배경에 왼쪽은 3D 뷰어, 오른쪽은 상품 설명으로 해줘.
모바일에서는 뷰어 다음에 설명이 나오게 해줘.

- Vite 8.3.5와 JavaScript, Three.js 0.186.1을 사용해줘.
- 이미 있는 public/models/product.glb와 출처 문서는 보존해줘.
- GLTFLoader로 모델을 불러오고, 크기와 중심을 계산해 전체가 잘 보이게 해줘.
- OrbitControls로 마우스와 터치 드래그를 지원해줘.
- 가만히 둘 때 천천히 자동 회전하고, 회전 멈추기와 처음 각도 버튼을 넣어줘.
- 주황색이 너무 밝게 날아가지 않도록 조명과 노출을 맞춰줘.
- 상점 이름은 제주상점으로 해줘.
- 제목은 한라봉, 카피는 '제주의 햇살을, 당신의 하루에.'로 해줘.
- 구매 버튼은 실제 결제 없이 페이지 안에 안내 문구만 보여줘.
- 모델 주소는 import.meta.env.BASE_URL을 반영해 배포 경로가 바뀌어도 맞게 해줘.
- 설치와 실행을 확인한 뒤, 내가 열 주소와 확인한 내용을 알려줘.

5.3 가격과 실습용 안내

Code 탭 Local · 본문 2-4절

한라봉 아래에 받침대와 그림자가 보이게 해줘.
설명에는 가격 19,800원, 한 상자 3kg과 특징 세 가지를 넣고,
'교재 실습용 상품입니다. 가격과 구성은 예시입니다.'라고 적어줘.
구매 버튼은 '한 상자 담아 보기'로 하고 누르면 안내만 보여줘.

5.4 두 빛깔 전환

Code 탭 Local · 본문 2-4절

'햇살빛'과 '청귤빛' 버튼으로 두 GLB를 전환하게 해줘.
햇살빛은 public/models/product.glb,
청귤빛은 public/models/product-green.glb야.
빠르게 번갈아 눌러도 마지막으로 고른 모델이 남아야 해.
두 모델 모두 배포 base를 반영한 주소로 불러와줘.

5.5 빌드 결과 확인

Code 탭 Local · 본문 2-4절

이 프로젝트를 npm run build로 빌드하고 npm run preview로 확인해줘.
dist/models에 두 GLB가 포함되는지, preview 주소에서도 드래그와
빛깔 전환, 담아 보기 버튼이 동작하는지 확인해줘.
확인한 내용과 실패한 것이 있으면 알려줘.

5.6 상품 프로젝트 보관

Code 탭 Local · 본문 2-4절

지금까지 변경한 파일을 검토해서 로컬 Git 커밋으로 저장해줘.
커밋 번호와 포함한 파일을 알려줘. 아직 GitHub에는 올리지 마.

6. 페이지 배포하기

6.1 연결한 도구로 배포 요청

터미널 Claude Code, 도구 연결 후 선택 · 본문 2-5절

이 상품 페이지 프로젝트를 위니버시티 배포에 올려줘.
연결된 배포 도구의 규칙과 앱 이름을 확인하고,
node_modules와 비밀값을 제외한 소스를 올려줘.
완료되면 배포 상태와 공개 주소를 알려줘.

6.2 GitHub 저장소에 올릴 준비

Code 탭 Local, GitHub Pages 선택 시 · 본문 2-5절

이 프로젝트를 내가 준비한 GitHub 저장소에 올리고 싶어.
저장소 주소는 [내 저장소 주소]야.
비밀값과 node_modules를 제외하고, 현재 Git 상태와 브랜치를 확인해줘.
main 브랜치에 커밋해서 올리는 절차를 안내해줘.

6.3 상품의 GitHub Pages Actions

Code 탭 Local, GitHub Pages 선택 시 · 본문 2-5절

이 Vite 상품 페이지를 GitHub Pages에 배포할 워크플로를 만들어줘.
Vite 공식 정적 배포 문서의 GitHub Pages 안내를 기준으로 해줘.

- main에 push하면 npm ci와 빌드 후 dist를 Pages에 배포하게 해줘.
- 배포 주소는 https://[사용자이름].github.io/[저장소이름]/이야.
- Vite base를 실제 저장소 경로에 맞추고,
  public/models의 두 GLB 주소에도 import.meta.env.BASE_URL을 적용해줘.
- 같은 base로 로컬 build와 preview를 확인해줘.
- 내가 Settings > Pages에서 해야 할 설정도 알려줘.

6.4 공개 후 모델 경로 수정

Code 탭 Local · 본문 2-5절

페이지는 열리는데 모델 요청만 404야.
public/models에 두 GLB는 있어. 실제 요청 주소와 배포 base를 확인하고,
import.meta.env.BASE_URL을 사용해서 두 모델을 불러오게 고쳐줘.
고친 뒤 같은 base로 빌드와 preview까지 확인해줘.
[공개 주소와 실제 오류 원문 붙여넣기]

7. 게임 한 줄 소개

7.1 수집 게임 아이디어

채팅 또는 Code 탭 Local · 본문 3-1절

처음 만드는 3D 수집 게임의 한 줄 소개를 세 개 제안해줘.
이동하고 아이템을 모으는 규칙 안에서 캐릭터와 장소를 바꾸고 싶어.
마음에 드는 것을 고르면 제공 재료로 먼저 만들고 나중에 바꿀 거야.

7.2 완성본 먼저 실행하기

Code 탭 Local · 본문 3-1절

이 폴더는 내려받은 게임 완성본이야.
파일은 고치지 말고 필요한 실행 환경을 확인한 뒤 설치하고 실행해줘.
내가 브라우저에서 열 주소를 알려줘.

8. 게임 재료 준비하기

8.1 제공 재료 검사

Code 탭 Local · 본문 3-2절

이 폴더로 라이캣의 귤밭 산책 게임을 만들 거야. 우선 재료만 확인해줘.
public/models의 character.glb와 item.glb, public/sounds의 mp3 3개,
에셋출처.md가 있는지 확인해줘.
GLB를 검사해서 애니메이션 클립 이름과 외부에서 더 읽어야 할 파일이 있는지도 알려줘.
아직 게임 코드는 만들지 말고, 확인한 파일과 결과를 보고해줘.

8.2 내 캐릭터 생성

Meshy, 선택 실습의 조건 확인 후 · 본문 3-2절

cute low poly cat character, standing in A-pose,
simple colors, clearly separated arms and legs, game character

8.3 FBX를 GLB로 변환

Code 탭 Local · 본문 3-2절

받은 캐릭터가 FBX야. 원본을 보관하고 GLB로 변환하고 싶어.
이 컴퓨터에서 Blender나 FBX2glTF를 쓸 수 있는지 먼저 확인해줘.
없으면 필요한 설치 방법을 알려주고, 준비되면 변환을 도와줘.
변환 뒤 크기·방향·재질·텍스처·애니메이션 클립을 확인하고
브라우저에서 걷기와 대기 동작을 실제로 재생해줘.
보존되지 않은 항목이 있으면 알려줘.

8.4 내 음악 생성

Suno, 선택 실습의 조건 확인 후 · 본문 3-2절

cheerful game background music, playful, loop-friendly,
no vocals, light and bouncy

8.5 재료 뷰어 열기

Code 탭 Local · 본문 3-2절

이 폴더의 게임 완성본을 파일 수정 없이 설치하고 실행해줘.
재료 뷰어 assets.html을 브라우저에서 열 주소를 알려줘.

9. 게임 기획 남기기

9.1 한 판의 모습 정하기

Code 탭 Local · 본문 3-3절

나는 Three.js로 첫 3D 게임을 만들려는 초보자야.
라이캣이 작은 제주 귤밭에서 60초 안에 감귤 10개를 모으는 게임을 만들고 싶어.
처음 하는 사람도 산책하듯 조작을 익힐 수 있게 밝고 편안한 분위기면 좋겠어.
public/models와 public/sounds에 제공 재료가 있어.

목표·조작·시작과 끝을 함께 정해 보자.
내가 결정할 중요한 것만 한 번에 하나씩 질문해줘.
나무 위치나 장식 같은 부분은 어울리게 제안해줘.
아직 코드는 만들지 마.

9.2 결정을 GAME.md로 저장

Code 탭 Local · 본문 3-3절

지금까지 정한 내용을 이 프로젝트의 GAME.md로 저장해줘.
한 줄 소개, 화면 구성, 조작, 규칙, 재료 경로, 제작 단계로 정리해줘.
제공 character.glb의 Idle과 Walk를 사용하고, 성공음 clear.mp3도 포함해줘.
파일을 만든 뒤 내용을 보여줘. 아직 제작은 시작하지 마.

10. 월드와 조작 만들기

10.1 Vite 게임 준비

Code 탭 Local · 본문 3-4절

GAME.md를 읽고 이 폴더에서 게임을 만들 준비를 해줘.
Node.js와 npm이 있는지, Vite 8.3.5를 쓸 수 있는 버전인지 확인해줘.
없거나 맞지 않으면 지원되는 LTS 설치 방법을 안내해줘.
준비되면 기존 GAME.md와 public의 재료를 유지하면서
JavaScript 기반 Vite 8.3.5 + Three.js 0.186.1 프로젝트를 구성해줘.
package-lock.json도 남겨줘. 게임 기능은 다음 요청부터 만들 거야.

10.2 1단계 월드와 캐릭터

Code 탭 Local · 본문 3-4절

GAME.md를 읽고 1단계까지만 만들어줘.
밝은 하늘과 잔디 바닥, 길, 은은한 조명이 있는 작은 제주 귤밭을 만들어줘.
public/models/character.glb의 라이캣을 가운데 바닥에 세워줘.
모델과 소리는 public/models와 public/sounds에서 읽고,
나중에 하위 주소에 배포해도 파일을 찾게 해줘.
모델의 크기와 중심을 확인해 키가 약 1.9단위가 되게 맞추고 발을 바닥에 붙여줘.
나무와 바위는 기본 도형으로 만들고, 다음 단계에서도 위치를 유지해줘.
이동·점수·시간은 아직 넣지 마.
직접 실행해서 모델 로드와 화면 오류를 확인한 뒤 내가 열 주소를 알려줘.

10.3 더블클릭 대신 실행 주소 확인

Code 탭 Local · 본문 3-4절

index.html을 더블클릭해서 file:// 주소로 열었더니 화면이 안 나와.
이 프로젝트의 package.json이 있는 위치와 실행 명령을 확인하고
브라우저에서 열 실제 localhost 주소를 알려줘.

10.4 npm 실행 위치 확인

Code 탭 Local · 본문 3-4절

npm이 package.json을 찾지 못해. 지금 실행 위치와 프로젝트 폴더를 확인해줘.

10.5 1단계 보관

Code 탭 Local · 본문 3-4절

지금 상태를 '1단계 월드 완성'이라는 이름으로 저장해줘.
Git을 쓸 수 있으면 이 컴퓨터에만 소스와 재료를 커밋하고,
아니면 소스와 재료를 ZIP으로 보관해줘. node_modules와 dist는 제외해줘.
인터넷에 올리거나 배포하지는 마.

10.6 2단계 이동과 카메라

Code 탭 Local · 본문 3-4절

지금 월드를 유지하고 GAME.md의 2단계만 더해줘.
방향키와 WASD로 라이캣을 움직이고 이동 방향으로 부드럽게 회전해줘.
위쪽 키는 화면의 먼 쪽으로 가게 하고, 높은 뒤쪽 카메라가 부드럽게 따라오게 해줘.
GLB의 클립 이름을 먼저 확인해서 Idle과 Walk를 AnimationMixer로 전환해줘.
나무·바위를 통과하거나 담장 밖으로 나가면 안 돼.
대각선도 같은 속도이고, 키를 떼거나 창을 벗어나면 멈춰야 해.
이동량은 프레임 수가 아니라 경과 시간을 기준으로 해줘.
점수와 타이머는 아직 넣지 마. 직접 키보드로 확인하고 결과를 알려줘.

10.7 걷기 클립과 재생 확인

Code 탭 Local · 본문 3-4절

라이캣은 이동하는데 팔다리가 움직이지 않아.
지금 읽은 GLB의 실제 경로와 애니메이션 클립 개수·이름을 출력해줘.
제공 character.glb에는 Idle과 Walk가 있어.
클립이 있다면 AnimationMixer의 갱신과 클립 전환을 확인해줘.
클립이 0개라면 이름을 추측하지 말고 어떤 파일을 쓰고 있는지 알려줘.

10.8 2단계 보관

Code 탭 Local · 본문 3-4절

GAME.md도 현재 결정에 맞추고 '2단계 조작 완성'으로 저장해줘.
Git을 쓸 수 있으면 이 컴퓨터에만 소스와 재료를 커밋하고,
아니면 소스와 재료를 ZIP으로 보관해줘. node_modules와 dist는 제외해줘.
인터넷에 올리거나 배포하지는 마.

10.9 완성본 실행하기

Code 탭 Local · 본문 3-4절

이 폴더의 게임 완성본을 파일 수정 없이 설치하고 실행해줘.
브라우저에서 열 주소를 알려줘.

11. 수집과 한 판의 흐름

11.1 3단계 감귤과 점수

Code 탭 Local · 본문 3-5절

GAME.md의 3단계만 더해줘.
public/models/item.glb를 맵에 10개 배치하고 천천히 회전하며 살짝 떠 있게 해줘.
장애물과 다른 감귤에서 여유 있게 떨어뜨리고,
라이캣의 시작 위치 바로 위나 걸어서 닿을 수 없는 곳에는 놓지 마.
라이캣이 가까이 가면 감귤이 한 번만 사라지고 점수가 1씩 오르게 해줘.
왼쪽 위에 글자로 '모은 감귤 0 / 10'을 보여줘.
나무의 작은 귤은 배경으로 남겨줘. 타이머와 소리는 아직 넣지 마.
직접 수집해서 중복 점수와 접근할 수 없는 배치가 없는지 확인해줘.

11.2 4단계 시작과 끝

Code 탭 Local · 본문 3-5절

GAME.md의 4단계만 더해줘.
시작 화면에 제목·목표·조작법·시작 버튼을 넣고,
버튼을 누른 뒤에만 이동·수집·60초 타이머가 시작되게 해줘.
남은 시간은 오른쪽 위에 표시하고 실제 경과 시간을 기준으로 계산해줘.
시간 안에 10개를 모으면 성공과 걸린 시간,
60초가 되면 시간 초과와 모은 수를 보여줘.
결과 화면에서는 이동과 수집을 멈춰줘.
다시하기를 누르면 점수 0, 감귤 10개, 60초, 캐릭터 시작 위치로 새 판을 바로 시작해줘.
다른 탭을 보는 동안에도 제한 시간은 흐르게 해줘.
반복해서 다시 해도 타이머나 게임 루프가 중복되지 않게 확인해줘.
아직 음악은 넣지 마.

11.3 재시작 타이머 확인

Code 탭 Local · 본문 3-5절

다시하기를 세 번 하고 나니 타이머가 빨라져.
새 판마다 타이머나 게임 루프를 추가로 만들고 있지 않은지 확인해줘.
점수 0, 감귤 10개, 시작 위치와 입력도 함께 초기화하고,
각 판에서 실제 1초 뒤 59초가 되는지 확인해줘.

11.4 5단계 소리

Code 탭 Local · 본문 3-5절

GAME.md의 5단계를 더해줘.
시작 버튼을 누르면 public/sounds/bgm.mp3를 반복 재생하고,
감귤 획득 때 pickup.mp3, 성공 때 clear.mp3를 한 번 재생해줘.
성공과 시간 초과에서는 BGM을 멈춰줘.
모든 음악·효과음에 함께 적용되는 소리 켜기·끄기 버튼을 넣어줘.
시작 전에는 재생하지 않고, 다시하기 때 음악이 겹치지 않게 해줘.
재생 요청이 거절되어도 오류 때문에 게임이 멈추지 않게 처리해줘.
시작·획득·성공·시간 초과·재시작·음소거를 각각 확인해줘.

11.5 시작 후 소리 확인

Code 탭 Local · 본문 3-5절

시작 버튼을 눌렀는데 음악이 안 나와.
음소거 선택과 소리 파일의 실제 요청 URL·HTTP 상태부터 확인해줘.
play()가 실패했다면 NotAllowedError 같은 오류 원문을 알려줘.
버튼의 사용자 동작 안에서 재생을 요청하고,
실패해도 게임은 계속되며 다시 소리를 켤 수 있게 해줘.

11.6 같은 브라우저의 최고 기록

Code 탭 Local · 본문 3-5절

더 빠르게 모으는 재미를 위해 성공한 판의 최고 기록을 이 브라우저에 저장해줘.
더 느린 기록은 기존 최고 기록을 덮어쓰지 않게 해줘.
새로고침 후에도 보이고, 저장이 차단된 환경에서도 게임은 계속되어야 해.
다른 사람이나 기기와 기록을 공유하는 기능은 이번에는 필요 없어.

11.7 완성본 실행하기

Code 탭 Local · 본문 3-5절

이 폴더의 게임 완성본을 파일 수정 없이 설치하고 실행해줘.
브라우저에서 열 주소를 알려줘.

12. 게임 다듬기와 배포

12.1 실제 로딩 상태 안내

Code 탭 Local · 본문 3-6절

5단계 게임에 로딩 안내를 더해줘.
GLB와 mp3를 읽는 동안 준비 중이라는 화면을 보여줘.
전체 크기를 알 수 있으면 받은 바이트 기준 진행률을 표시하고,
크기를 모르면 완료한 파일 수나 준비 단계를 보여줘.
진행률을 임의의 타이머로 올리지 말고,
전송 뒤 모델과 소리까지 준비됐을 때 시작 버튼을 보여줘.
실패하면 안내를 보여주고 다시 시도할 수 있게 해줘.

12.2 파일 크기와 압축 검토

Code 탭 Local · 본문 3-6절

GLB와 소리의 파일별 크기를 표로 알려줘.
큰 파일을 줄일 방법을 먼저 제안하고 원본은 보관해줘.
변환·압축을 적용했다면 외형·텍스처·동작이 유지되는지 다시 실행해줘.
Draco나 Meshopt 압축을 썼다면 필요한 디코더도 연결하고
빌드 결과에서 모델이 열리는지 확인해줘.

12.3 휴대폰 터치 조작

Code 탭 Local · 본문 3-6절

휴대폰에서 터치만으로 플레이할 수 있게 해줘.
390×844 화면에서는 왼쪽 아래에 가상 조이스틱을 넣어줘.
손가락을 바깥으로 끌거나 떼거나 터치가 취소되면 입력이 남지 않게 해줘.
점수·시간·소리 버튼이 잘 읽히고 가로로 넘치지 않게 해줘.
게임 영역의 조작 때문에 페이지가 원치 않게 스크롤되지 않게 해줘.
키보드 조작도 유지하고 실제 터치 입력으로 이동과 멈춤을 확인해줘.

12.4 달리기

Code 탭 Local · 본문 3-6절

Shift를 누르는 동안 기본 속도의 1.65배로 달리게 해줘.
휴대폰에는 달리기 버튼을 넣고 조이스틱과 동시에 누를 수 있게 해줘.
제공 캐릭터에는 별도 Run 클립이 없으니 Walk 재생 속도를 맞춰줘.
버튼과 키를 떼면 평소 속도로 돌아오게 해줘.

12.5 출처 화면

Code 탭 Local · 본문 3-6절

에셋출처.md를 바탕으로 시작·결과 화면에서 열 수 있는 출처 화면을 만들어줘.
라이캣과 감귤은 위니브 제공 재료이고 소리 3개는 CC0 1.0이라는 점을 구분해줘.
Three.js와 Vite의 라이선스 안내도 남겨줘.
내가 다른 재료로 교체한 것이 있으면 그 파일의 실제 조건을 반영해줘.
휴대폰에서도 끝까지 읽고 게임 화면으로 돌아갈 수 있게 해줘.

12.6 게임 빌드 결과 확인

Code 탭 Local · 본문 3-6절

배포용 빌드와 preview를 실행해서 모델 2개와 소리 3개의 요청이 성공하는지 확인해줘.
시작·수집·시간 초과·재시작·음소거도 빌드 결과에서 확인하고,
빌드 경고가 있으면 실패와 구분해서 알려줘.

12.7 위니버시티에 올릴 폴더 점검

Code 탭 Local · 본문 3-6절

위니버시티 배포에 my-game 폴더를 올릴 거야.
맨 위에 index.html·package.json·package-lock.json이 있는지,
src와 public/models·public/sounds, Vite 설정, 출처·라이선스 문서가 있는지,
.env나 비밀 값·개인 파일이 없는지 확인만 해줘.
앱 주소의 루트에 맞게 base가 /인지도 확인해줘.

12.8 게임의 GitHub Pages Actions

Code 탭 Local, GitHub Pages 선택 시 · 본문 3-6절

이 Vite 게임을 GitHub Actions로 빌드해 GitHub Pages에 배포하도록 설정해줘.
공식 Vite Pages 안내를 확인하고 main push 때 설치·빌드·dist 배포가 이어지게 해줘.
내 공개 URL이 계정 루트인지 저장소 하위 경로인지 먼저 확인해서 base를 맞춰줘.
public/models와 public/sounds를 읽는 URL에도 같은 base가 적용되게 해줘.
로컬 하위 경로 build와 preview로 모델·소리를 확인한 뒤,
GitHub에서 내가 해야 할 설정과 공개되는 파일을 알려줘.

12.9 공개 URL의 QR 코드

Code 탭 Local · 본문 3-6절

이 실제 배포 URL을 node-qrcode 같은 QR 인코딩 라이브러리로 PNG로 만들어줘.
[확인한 공개 URL을 여기에 붙여 넣기]
완성한 PNG를 별도 QR 디코더로 읽어 원래 URL과 같은지 확인해줘.

12.10 최종판 실행하기

Code 탭 Local · 본문 3-6절

이 폴더의 게임 최종판을 파일 수정 없이 설치하고 실행해줘.
브라우저에서 열 주소를 알려줘.