마지막 불빛

크리스마스 밤, 조난당한 겨울 산에서 민가의 불빛을 향해 스키로 내려가는 브라우저 러너 게임입니다. 중간고사 바이브 코딩 과제로 제작합니다.

바로 플레이하기

1. 제작한 것 소개

비행기 사고로 고도가 높은 산에 조난당한 주인공이 잔해로 스키를 만들어 마을까지 내려갑니다. 어두운 숲길에서 나무와 돌을 피하고 코인을 모으며 달리고, 약 1분 10초 뒤 민가에 도착하면 끝납니다.

• 실행 방법: GitHub Pages에서 플레이 또는 index.html을 내려받아 브라우저로 열기 (인터넷 불필요)
• 조작법: A/D 또는 ←/→로 좌우 이동, Space 점프, 마우스를 움직여 주변 보기 (커서를 위로 올리면 하늘)
• 에셋 출처: 하늘은 사진 없이 셰이더로 직접 그림. 산은 Kanchenjungha-Panorama (Sujay25, CC BY-SA 4.0)를 사용함. 산은 하늘을 지우고 밤 색으로 보정함. 눈 지면은 Poly Haven Snow 02 (Rob Tuytel, CC0). 나무는 Poly Haven Fir Tree 01, Fir Sapling Medium (Rob Tuytel, Rico Cilliers, CC0)에 눈과 달빛을 입혀 이미지로 제작함. 바위 재질은 Poly Haven Rock Boulder Cracked (Dario Barresi, Dimitrios Savva, CC0), 바위 형태는 코드로 생성함. 스키 판자 재질은 Poly Haven Weathered Planks (Dario Barresi, Dimitrios Savva, CC0)

하늘	낭떠러지	민가 발견 (초기 구도)

폴더 구조

• index.html: 게임 전체. 엔진과 이미지까지 내장한 파일 하나로 실행됨
• tools/: 나무 이미지 카드를 만드는 도구
• prototype/: 초기 배경 렌더 테스트
• docs/images/: README 스크린샷
• .claude/skills/: 직접 만든 스킬

2. PRD

목표

• 브라우저에서 설치 없이 실행되는 약 1분 10초 분량의 러너 게임을 만든다.
• 눈 덮인 밤 숲을 실시간 렌더링으로 최대한 사실적으로 표현한다.
• 일반 노트북에서도 플레이할 수 있는 성능을 유지한다.

게임 흐름

단계	내용
1. 사고	기내 창밖으로 깊은 설산을 본 뒤 폭발로 의식을 잃고, 깊은 눈 속에서 깨어나 빠져나온다.
2. 발견	높은 급경사에서 둘러보다 약 3km 밖의 작은 민가 불빛을 발견한다.
3. 제작	판자, 잔해, 나뭇가지를 모아 엉성한 스키를 묶고, 늑대에게 쫓기며 급경사를 자동으로 내려간다.
4. 활강	원래 시작 위치부터 조작한다. 장애물과 동물을 피하거나 뛰어넘고 낭떠러지를 건넌다.
5. 도착	마을 앞에 멈춰 크리스마스트리를 본 뒤 최종 점수와 함께 끝난다.

핵심 기능

우선순위	기능	설명
필수	이동	전진은 자동이고 플레이어는 좌우 이동과 점프를 할 수 있다. 점프는 스테미나를 쓴다.
필수	인트로	스키 착용까지 입력 없는 고정 애니메이션으로 진행하고, 그 뒤 조작을 시작한다.
필수	장애물	나무와 돌은 지나갈 틈을 남기고, 통나무와 낭떠러지는 점프로 넘는다.
필수	동물	곰과 늑대가 길 위 한 곳에 서 있어 옆으로 피하거나 뛰어넘는다.
필수	회복	코스에 놓인 키트로 체력을 회복한다.
필수	충돌과 체력	장애물에 부딪히면 체력이 줄고, 0이 되면 게임 오버 후 재시작한다.
필수	HUD	체력, 민가까지 남은 거리, 시간, 코인, 점수, 스테미나, 조작법을 표시한다.
필수	점수	코인과 생존 시간으로 점수를 얻는다.
필수	진행도	3km를 달리면 민가에 도착한다.
필수	배경	눈 쌓인 전나무 숲, 바위, 눈 지면, 은하수 밤하늘, 먼 설산, 내리는 눈
선택	연출	크리스마스트리, 합성 사운드, 마우스 시점, 카메라 흔들림

범위에서 제외

• 멀티플레이
• 복잡한 제작 화면과 인벤토리
• 무기와 장애물 파괴
• 적과 싸우는 전투 (곰과 늑대는 피하기만 함)

기술 스택

• 렌더링: Babylon.js 7.54.3 (Apache-2.0)
• 구조: 빌드 없이 엔진과 이미지까지 내장한 HTML 파일 하나로 실행
• 에셋: 라이선스를 확인한 사진과 CC0 재질, 모델. 하늘과 사운드는 코드로 생성
• 배포: GitHub Pages에 HTML을 그대로 올림

사실감 전략

실시간으로 계산하기 어려운 것은 미리 만듭니다. 나무는 CC0 스캔 모델에 눈과 달빛을 입혀 이미지 카드로 찍고, 바위와 지면은 촬영 재질을 쓰며, 하늘은 픽셀 단위 셰이더로 직접 그립니다. 사진과 완전히 구분되지 않는 수준은 브라우저 실시간 렌더링으로 보장할 수 없어, 가까이 지나가면 나무 카드의 평면이 드러나는 등의 한계가 있습니다.

완료 기준

• 배포된 URL에서 사고 장면부터 민가 도착까지 플레이할 수 있다.
• 코스의 장애물은 항상 지나갈 길을 남긴다.
• 한 판의 길이가 약 1분 10초다.
• 일반 노트북 기준 평균 30 FPS 이상을 유지한다.
• 사용한 에셋의 출처와 라이선스를 README에 기록한다.

3. Todo 리스트

현재 계획

• 저장소 생성 및 PRD 작성
• 새 기획으로 PRD와 Todo 수정
• 배경 렌더 테스트 작성 (prototype/index.html)
• HUD 디자인
• 렌더 테스트 개선 (민가 불빛, 상고대, 성능)
• 프로젝트 전용 스킬 작성
• 게임용 index.html 구성
• GitHub Pages 배포
• 끝없이 이어지는 코스 생성 구현
• 좌우 이동과 스키 카메라 구현
• 울타리를 바위와 나무 경계로 교체
• 시야 밖 렌더링 제외, 바람과 눈, 스키 팔 동작
• 스테미나, 부스트, 점프 구현
• 지나갈 길을 보장하는 장애물과 점프, 부스트 전용 구간 구현
• 곰과 늑대 출현, 점프 회피 구현
• 충돌, 체력, 게임 오버, 재시작 구현
• 코인, 시간 점수 구현과 HUD 연결
• 플레이어 몸 구현 (팔, 다리, 스키)
• 비행기, 폭발, 추락 인트로 구현
• 눈 속 탈출, 민가 발견, 스키 제작 인트로 구현
• 민가 도착 엔딩 구현
• 민가를 언덕 지형 위의 집과 창문 불빛으로 교체
• 코스 3km, 기본 속도 43m/s, 스테미나는 점프 전용으로 변경
• 급경사 위 추락 지점과 자동 활강 인트로로 변경
• 사용한 스킬과 활용 방식을 README에 기록
• 민가가 약 3km 밖으로 보이도록 변경
• 숲을 스캔 모델로 만든 이미지 카드로 교체

변경 내역

처음 계획과 달라진 부분을 작업 중에 기록합니다. 처음 계획은 첫 커밋에서 볼 수 있습니다.

This is the beginning of the README. Read the rest at the original. Read the full README ↗