hyperframes로 모션 영상 만들기

# HyperFrames 제작 요청: 딸기, 새콤달콤한 설렘과 한 입의 행복

너는 프리미엄 식품 광고의 크리에이티브 디렉터이자 모션 디자이너, HTML/GSAP 그래픽 엔지니어다.

아래 브리프에 따라 실제로 재생되고 렌더링되는 딸기 소개 모션그래픽을 제작하라. 일러스트 자산 제작, 코드 작성, 미리보기, 오류 수정, 최종 MP4 출력, 사이트 연결까지 수행하라.

## 1. 제작 목표와 확정 사양

- 작품명: **딸기: 새콤달콤한 설렘, 한 입의 행복.**
- 핵심 인상: 새콤달콤한 맛이 눈으로 느껴지는 생기, 한 입 직전의 설렘, 베어 문 뒤의 행복. 촉촉한 질감과 작은 대상에서 발견하는 디테일로 그 감정을 전한다.
- 길이: 정확히 28초.
- 기본 출력: 1920x1080, 16:9, 30fps, 총 840프레임의 MP4.
- 언어: 한국어.
- 전달 방식: 내레이션 없이 영상과 짧은 타이포그래피로 전달.
- 구성: 주인공 딸기 한 알을 중심으로 연결되는 7개 장면.
- 프로젝트 위치: 사이트 폴더 밖의 [영상 작업 폴더]/strawberry-film/ (예: 문서/ai-video/strawberry-film/). 렌더 파일과 중간 산출물이 GitHub와 Vercel에 올라가지 않게 하기 위해서다.
- 최종 결과: 수정 가능한 HyperFrames 프로젝트, 브라우저 미리보기, strawberry-film.mp4, 웹용 압축본과 포스터 이미지, 주요 장면 스틸 7장(제작 순서 7번의 확인 시점과 같은 7개), 짧은 실행 안내.
- 로그인, DB, 결제, 런타임 LLM 기능은 필요 없다.

이번 브리프의 콘셉트, 길이, 기본 사양을 제작 기준으로 삼아 진행하라. 비어 있는 사소한 디자인 선택은 이 브리프와 일관되게 판단하라. 실제로 사용 가능한 도구로 완성하라.

## 2. HyperFrames 제작 방식

HeyGen의 공식 오픈소스 HyperFrames를 사용한다.

- 공식 저장소: https://github.com/heygen-com/hyperframes
- 시작 안내: https://hyperframes.heygen.com/quickstart
- GSAP 안내: https://hyperframes.heygen.com/guides/gsap-animation
- 시간 재현성 안내: https://hyperframes.heygen.com/concepts/determinism

현재 프로젝트와 설치된 플러그인, 스킬을 먼저 확인한다. 설치되어 있으면 /hyperframes:hyperframes 로 작업 흐름을 확인하고, 여러 장면으로 된 28초 영상이므로 /hyperframes:general-video 작업 흐름으로 진행한다(/hyperframes:motion-graphics 는 10초 안팎의 짧은 영상용이다). 미설치 상태라면 공식 시작 안내에 따라 설정한다.

독립형 스킬 설치는 공식 안내의 npx hyperframes skills update 를 참고하되, 기존 구성을 불필요하게 다시 만들지 않는다. 초기화, 미리보기, 렌더링 명령과 옵션은 설치 버전의 도움말로 확인한다.

영상 컴포지션은 HTML/CSS와 시간 제어 가능한 GSAP 애니메이션을 기본으로 한다.

전체 길이와 해상도를 명시하고, paused 상태의 타임라인을 composition ID와 일치하는 키로 등록한다. 라이브러리의 공식 등록 방식과 미디어 재생 규약을 따른다. 존재하지 않는 API나 옵션을 만들어 사용하지 않는다.

## 3. 아트 디렉션

일관된 식품 광고 룩을 만든다. 사진처럼 보이려 하지 않는 매끈한 벡터 일러스트(부드러운 그라데이션, 반사광, 그림자)로, 그림책이나 에디토리얼 잡지 일러스트에 가까운 완성도를 목표로 한다. 첫 장면부터 마지막 장면까지 같은 딸기, 같은 조명 계열, 같은 색 보정으로 연결한다.

### 색상

- 깊은 버건디: #17090F
- 선명한 딸기 레드: #E3283F
- 밝은 코럴: #FF6D75
- 따뜻한 크림: #FFF3E8
- 잎: 자연스러운 짙은 녹색

### 조명과 재질

왼쪽 위의 큰 부드러운 주광과 반대편의 얇은 림라이트를 기본으로 한다.

딸기의 표면은 작은 굴곡과 씨앗이 보일 만큼 선명하게 그린다. 물방울은 밝은 하이라이트를 가지되, 딸기 전체가 플라스틱처럼 번들거리지 않게 한다.

딸기의 붉은 부분과 초록 잎이 어두운 배경에 묻히지 않도록 한다. 표면의 작은 밝기 차이와 씨앗 주변의 음영을 살린다.

### 공간감

레이어는 다음처럼 구분한다.

- 전경: 크고 가까운 물방울.
- 중경: 가장 선명한 주인공 딸기.
- 후경: 작은 물방울과 배경.

깊이에 따라 이동량, 선명도, 그림자를 다르게 한다. 초점은 항상 주인공 딸기에 남긴다.

### 타이포그래피

주요 피사체와 문구는 화면 가장자리에서 약 7% 이상 떨어뜨린다. 의도적으로 잘리는 것은 전경 효과나 배경 대형 타이포에 한정한다.

일반 제목은 1080p 기준 약 110~170px, 짧은 보조 문구는 36~48px를 출발점으로 실제 화면에서 조정한다. 실제 사용 가능한 한국어 글꼴 파일을 프로젝트 안에 로컬로 준비한다(Pretendard, SIL 오픈 폰트 라이선스). 제목과 대형 타이포는 ExtraBold(800), 보조 문구는 SemiBold(600)를 기본으로 한다.

한 화면에서는 주요 문구를 한 덩어리로 보여준다. 글자가 등장할 때마다 여러 효과를 중첩하지 않는다.

## 4. 자산: 사진 없이 2.5D 에디토리얼 일러스트로 통일

이번 제작은 사진과 생성 이미지를 쓰지 않는다. 외부 이미지를 내려받지 않는다. 모든 자산을 SVG와 CSS로 직접 그린 정교한 에디토리얼 2.5D 일러스트로 통일하고, 결과 보고에 적용한 스타일을 명시한다.

### 그릴 자산 (모두 같은 스타일, 같은 조명 방향)

1. 잎이 붙은 온전한 딸기 한 알. 정면 또는 약한 사선 구도이며, 화면을 가득 채울 만큼 키워도 선명해야 한다.
2. 같은 색감과 조명 계열의 딸기 단면(흰 심과 붉은 과육의 방사형 결).
3. 극접사용 표면 디테일 레이어. 씨앗, 씨앗이 박힌 작은 홈, 촉촉한 하이라이트가 보여야 한다.
4. 세로로 자른 반쪽 두 개.
5. 모양이 다른 작은 과육 조각 3~5개.
6. 크기와 하이라이트가 다른 절제된 벡터 물방울 여러 개.
7. 한 입 베어 문 자국. 온전한 딸기 위에 마스크로 덮어 쓰며, 자국 안쪽에는 단면과 같은 흰 심과 붉은 과육 결이 보이게 한다.

### 일러스트 품질 기준

- 씨앗은 크기와 기울기가 조금씩 다르고, 규칙적인 격자처럼 보이지 않게 배치한다. 배치는 고정된 seed로 결정한다.
- 표면의 붉은 면은 여러 겹의 방사형 그라데이션과 아주 약한 노이즈 텍스처로 입체감을 만든다.
- 림라이트, 접지 그림자, 물방울의 굴절 하이라이트를 따로 레이어로 둔다.
- 벡터라서 확대해도 깨지지 않는 장점을 살려, 접사와 전체 장면은 같은 원본 일러스트를 확대해 연결한다.
- 단순한 빨간 원이나 하트 모양, 이모지를 최종 딸기로 사용하지 않는다.

온전한 딸기 한 장으로 보이지 않는 뒷면을 억지로 만드는 360도 회전을 구현하지 않는다. 작은 평면 회전, 마스크, 레이어 시차, 크기 변화로 깊이를 만든다.

## 5. 초 단위 스토리보드

각 구간에는 다음 구간으로 넘어가는 전환 시간이 포함된다. 전환 때문에 전체 28초를 늘리지 않는다.

### 장면 1 (0.00~2.50초): 표면에서 한 알로

배경은 깊은 버건디(#17090F)다. 첫 프레임부터 선명한 붉은 표면과 씨앗을 보여준다. 씨앗 옆의 작은 하이라이트를 따라 빛이 지나간다.

0.35초부터 카메라가 뒤로 빠진다. 0.80~1.30초에 속도를 올리고 1.60초까지 부드럽게 감속해 잎을 포함한 딸기 한 알을 공개한다.

**1.5초 전후에는 누구나 딸기임을 알아볼 수 있어야 한다.**

접사와 전체 장면은 같은 벡터 원본을 확대해 연결한다. 접사에만 쓰는 디테일 레이어는 0.80~1.10초의 빠른 이동 중 자연스럽게 사라지게 한다.

딸기는 중앙보다 약간 왼쪽에 떠 있다. 아래에는 넓고 옅은 그림자가 생긴다. 멈춘 뒤 짧은 관성 이동을 한 번만 준다.

1.70초부터 오른쪽 여백에 **"딸기"**가 12~18px 정도 상승하며 나타난다. 흐림 6px 이하에서 0.3초 안에 또렷해지는 짧은 변화와 함께 등장한다.

### 장면 2 (2.50~6.00초): 빛을 머금은 한 알

버건디 배경 위로 넓은 따뜻한 조명이 퍼지며 크림 배경으로 연결된다.

딸기는 오른쪽으로 천천히 이동하고 5~7도 정도 기울어진다.

딸기 뒤에 작은 물방울 3개, 앞에 물방울 2개를 둔다. 앞쪽의 큰 물방울은 화면 가장자리를 스쳐 가고 딸기의 표면을 가리지 않는다.

왼쪽에 **"새콤달콤"**을 약 2초 이상 읽을 수 있게 보여준다. 글자가 나타날 때 딸기 주변에 작고 밝은 반짝임 2~3개가 한 번만 톡 튀어, 새콤한 맛이 눈으로 느껴지게 한다.

5.40초부터 주인공을 화면 중심에 정렬하며 다음 장면을 준비한다.

### 장면 3 (6.00~10.00초): 한 알이 펼쳐지는 순간

배경은 장면 2에서 이어진 따뜻한 크림(#FFF3E8)이다. 딸기 중심에 얇은 세로 하이라이트가 생긴다. 6.50초 전후에 그 빛을 마스크로 사용해 온전한 딸기를 반쪽 일러스트와 연결한다.

두 반쪽은 다음처럼 움직인다.

- 왼쪽 반쪽: 왼쪽 위로 약 190px 이동하며 -12도 회전.
- 오른쪽 반쪽: 오른쪽 아래로 약 190px 이동하며 +10도 회전.

중앙에는 선명한 단면을 남기고, 뒤에서 앞으로 조금 다가오는 것처럼 크기와 그림자를 변화시킨다.

반쪽 두 개와 중앙 단면이 서로 다른 깊이에 놓인 전시 오브제처럼 보이게 한다. 이는 감각적인 전시 연출이며, 실제 과일이 세 조각으로 절단되는 과학 설명처럼 표시하지 않는다.

8.00초부터 움직임을 줄여 단면을 최소 1초 이상 온전히 관찰하게 한다.

### 장면 4 (10.00~14.00초): 과육의 윤곽이 화면이 된다

카메라가 중앙 단면으로 접근한다.

단면의 유기적인 윤곽을 따라 얇은 코럴 선이 생기고, 그 모양을 이어받은 크림, 코럴, 버건디의 큰 마스크 3~4개가 차례로 확장된다.

약 1초 안에 깊이 있는 전환을 완성하고 새로운 딸기 구도를 공개한다. 마지막으로 펼쳐진 마스크는 버건디이며, 그 위에 **다시 온전한 한 알**의 딸기가 화면 중앙에서 약간 오른쪽, 화면 높이의 약 55% 크기, 약 8도 기울어진 사선 구도로 나타난다. 이 장면부터 마지막까지 딸기는 온전한 한 알이다(장면 7의 베어 문 자국 전까지).

문구는 **"한 알을 더 가까이"**. 2초 정도 유지한다.

이 장면의 핵심은 작은 과육의 모양이 전체 화면의 그래픽으로 이어지는 연결감이다. 반복되는 만화경이나 끝없는 터널로 만들지 않는다.

### 장면 5 (14.00~18.50초): 시간이 멈추는 과즙

배경은 장면 4에서 이어진 버건디다. 이 장면은 "한 입 직전의 설렘"이다. 딸기 주위에 물방울 12~18개와 과육 조각 3~5개를 배치한다.

입자는 왼쪽 아래에서 오른쪽 위로 휘어지는 비대칭 곡선과 하나의 리본 같은 흐름을 따른다. 크기와 속도를 다르게 하고, 일부는 주인공 뒤를 지나고 일부는 앞을 지나게 한다.

정확한 동작은 다음과 같다.

- 14.20초부터 물방울과 조각이 퍼진다.
- 15.10~15.25초에 감속한다.
- 15.25~15.65초에는 입자의 장면 내 위치를 고정한다.
- 15.65~16.00초에는 재가속한다.

**정지 구간에도 카메라 오프셋과 깊이에 따른 시차는 계속 계산한다.**

카메라가 옆으로 25~40px 움직이는 것처럼 전경, 중경, 후경의 이동량을 다르게 해, 입자는 멈췄는데 공간은 살아 있는 느낌을 만든다.

전체 타임라인을 일시 정지하는 방식으로 구현하지 않는다.

이후 입자들이 기존 경로를 따라 다시 가속한다. 큰 전경 물방울 하나가 화면 가장자리를 가로질러 다음 장면의 가림막이 된다.

실시간 유체 시뮬레이션은 쓰지 않는다. 벡터 물방울과 과육 조각, 정교한 경로, 속도 변화, 가림 관계로 이 장면을 완성한다.

### 장면 6 (18.50~23.50초): 이름이 장면이 된다

크림 배경 위에 커다란 **"딸기"** 두 글자를 배치한다. 글자는 화면 너비의 약 65~75%를 사용한다.

이 장면의 "딸기"는 일반 제목 크기 규칙에서 제외하는 배경 디스플레이 타이포다. 1080p에서 약 600~720px를 출발점으로 사용하고 실제 글자 너비를 기준으로 조정한다.

한 알의 딸기가 왼쪽 화면 밖에서 출발해 글자 앞으로만 지나간다(글자 뒤로 돌아가지 않는다). 딸기의 위치에 따라 글자 위에 떨어지는 그림자도 함께 움직인다. 20.50초 무렵 중심에 도착한 뒤 속도를 줄인다.

마지막에는 글자 전체가 읽히는 구도를 확보한다.

보조 입자는 4~6개로 줄인다. 앞선 장면의 에너지를 주인공과 이름에 모은다. 화면의 모든 요소가 동시에 크게 움직이지 않게 한다.

### 장면 7 (23.50~28.00초): 한 입의 행복

배경이 따뜻한 크림(#FFF3E8)으로 바뀌고, 가장자리에 아주 옅은 코럴 빛이 번진다.

주인공 딸기는 중앙보다 약간 위에 있다. 24.00~24.40초에 딸기 오른쪽 위에 **한 입 베어 문 자국**이 생기고, 자국 안쪽의 흰 심과 붉은 과육이 드러난다. 같은 순간 작은 과즙 방울 4~6개가 자국에서 튀어 오른 뒤 0.6초 안에 사라진다. 베어 무는 동작은 한 번만 한다.

아래 문구를 표시한다.

**딸기**
**새콤달콤한 설렘, 한 입의 행복.**

25.50초까지 문구를 모두 완성한다. 마지막 2.5초는 읽고 기억할 수 있게 유지한다.

딸기는 거의 정지한 상태로 미세하게 떠 있고, 작은 물방울 하나의 하이라이트만 지나간다.

마지막 프레임까지 의도된 구도를 유지한다. 임의의 브랜드명이나 불필요한 구매 버튼을 추가하지 않는다.

## 6. 움직임과 사운드

리듬은 다음 순서로 구성한다.

**빠르게 공개, 천천히 관찰, 펼쳐지는 반전, 순간 정지(설렘), 한 입과 행복한 마무리.**

큰 이동은 약 0.6~1.2초 안에서 가속과 감속을 분명하게 하고, 작은 부유는 느리고 작게 만든다. 카메라 롤과 반복 바운스는 최소화한다.

주인공을 가리는 과도한 블러와 글로우를 피한다.

이번 제작은 **무음판으로 확정**한다. 음악과 효과음을 찾거나 생성하지 않는다. 존재하지 않는 오디오 파일을 참조하지 않는다.

무음으로 보아도 장면의 리듬과 의미가 전달되어야 한다.

## 7. 시간 재현성과 렌더링

모든 애니메이션은 입력 시간 t에서 해당 상태를 재구성할 수 있어야 한다.

- 파티클과 씨앗의 위치, 크기, 속도는 고정된 seed와 절대 시간으로 결정한다.
- 렌더 모드에서 Date.now, 자유 실행 타이머, 누적 deltaTime, seed 없는 Math.random에 시각 결과를 의존하지 않는다.
- 렌더러가 관리하는 타임라인과 미디어 재생을 사용한다.
- 첫 프레임 전에 폰트 등 필요한 자산을 준비한다.
- 런타임 자산은 로컬로 고정한다.
- 그림자, 마스크, 텍스트도 임의 시간 이동과 역방향 이동 후 일관되게 복원한다.

## 8. 제작 순서

1. 현재 환경과 HyperFrames 버전을 확인하고 제작 환경을 준비한다.
2. 일러스트 자산을 먼저 그리고, 최종 크기에서 선명도, 조명 일관성, 검은 배경과 크림 배경 위의 가장자리 상태를 검토한다.
3. 7개 장면의 구도와 정확한 타임코드를 구현한다.
4. 네 가지 핵심 연출인 표면 공개, 단면 전시, 순간 정지, 한 입을 완성한다.
5. 타이포그래피, 베어 무는 순간, 전환의 타이밍을 맞춘다.
6. 해당 버전이 제공하는 lint, check 등 검증 명령을 확인하여 적용한다.
7. 대표 시점 0.5, 1.8, 7.5, 12.0, 15.4, 21.0, 26.5초를 이미지로 확인한다.
8. 21초, 7.5초, 15.4초 순서로 이동해도 장면이 복원되는지 확인한다.
9. 먼저 빠른 시험 렌더(설치 버전의 draft 품질 옵션)로 전체를 확인하고, 컷 사이의 점프, 검은 프레임, 글자 겹침, 잘린 물방울을 수정한다.
10. 28초, 1080p, 30fps 최종 MP4를 렌더링하고 길이, 해상도, 프레임 수를 확인한다.

## 9. 사이트에 넣기

1. FFmpeg로 웹용 압축본을 만든다(1280x720, H.264, yuv420p, faststart, 오디오 없음, 5MB 이하가 되도록 화질 값 조정).
2. 26.5초 지점의 프레임으로 포스터 이미지를 만든다.
3. 압축본과 포스터를 내 사이트 폴더(index.html이 있는 폴더)의 assets/video/ 로 복사하고, 첫 화면의 소개 영상으로 연결한다. video 태그에는 autoplay, muted, loop, playsinline 을 넣고, 영상을 멈출 수 있는 작은 일시정지 버튼을 함께 둔다.
4. 원본 렌더 파일과 중간 산출물은 사이트 폴더로 복사하지 않는다.

## 10. 최종 합격 기준

- 첫 1.5초 전후에 딸기임을 알아볼 수 있다.
- 극접사 공개, 단면 전시, 순간 정지, 한 입이 서로 다른 놀라움을 준다.
- 마지막에 "새콤달콤한 설렘, 한 입의 행복."이 밝고 행복한 분위기로 남는다.
- 일러스트가 마지막 장면까지 같은 스타일, 같은 색, 같은 조명으로 이어진다.
- 한순간에 가장 크게 움직이는 대상이 분명하다.
- 한국어가 깨지지 않고 주요 문구를 충분히 읽을 수 있다.
- 임시 도형, 깨진 그림, 지저분한 가장자리, 같은 모양의 반복 입자가 남지 않는다.
- 근거 없는 영양 수치, 건강 효능, 산지, 당도 수치를 넣지 않는다.
- 마지막 구도를 최소 2초 이상 감상할 수 있다.
- 출력된 MP4와 사이트에 넣은 압축본에서도 연출이 정상 동작한다.

작업 후 실제 생성한 프로젝트 위치, 미리보기 주소, MP4와 압축본, 포스터, 스틸 파일 경로, 실행과 재렌더 방법을 알려라.

적용한 스타일과 남은 한계가 있으면 구체적으로 밝혀라. 네 가지 핵심 연출을 확인하고 보완한 뒤 완료하라. 결과 요약은 코딩을 모르는 사람도 이해할 수 있는 쉬운 한국어로 써라.

# HyperFrames 제작 요청: SOLAR ODYSSEY, 우리의 태양계를 여행하다

너는 몰입형 디지털 전시의 크리에이티브 디렉터, 우주 다큐멘터리 모션 디자이너, Three.js/GSAP 프런트엔드 그래픽 엔지니어다.

아래 브리프를 실제 작동하는 프로젝트로 구현하라. 그래픽 제작, 웹 구현, 애니메이션, 검수, HyperFrames 영상 렌더링까지 수행하라.

## 0. 진행 방식: 4단계로 나눠서 하고, 단계마다 멈춘다

이 프로젝트는 한 번에 끝내기에는 크다. 아래 4단계로 나눠 진행한다. 각 단계가 끝나면 작업을 멈추고, 완료한 것과 실제로 확인한 것과 남은 것을 쉬운 한국어로 보고한 뒤 내가 "다음 단계"라고 말할 때까지 기다린다.

1. **1단계:** 프로젝트 준비, 천체 데이터 구조, 전체 지도, 목적지 선택, 지도 복귀, 공통 이동 연출, 그리고 **태양, 지구, 토성** 세 목적지를 높은 완성도로 완성한다.
2. **2단계:** 나머지 7개 목적지(수성, 금성, 화성, 목성, 천왕성, 해왕성, 명왕성)의 장면, 설명, 탐험 액션을 완성한다.
3. **3단계:** 웹 자동 투어, 일시정지와 재개, 이동 건너뛰기, 사용자 입력 우선권, 모바일, 키보드, 모션 감소, 정적 빌드를 완성한다.
4. **4단계:** 같은 투어 스케줄을 HyperFrames 영상 원본에 연결하고, 시험 렌더 후 120초 최종 MP4를 렌더링한다.

최종 결과물에는 10개 목적지가 모두 들어간다. 자원이 부족해도 목적지나 주요 탐험 기능을 임의로 빼지 않고, 입자 수, 후처리, 셰이더 복잡도를 낮춘다.

## 1. 제작 목표와 산출물

**프로젝트명:** SOLAR ODYSSEY, 우리의 태양계를 여행하다.

**첫 화면 카피:** 가장 가까운 별에서, 멀리 떨어진 얼음 세계까지.

**주요 경험:** 태양계 지도에서 목적지를 선택하면 탐사선과 카메라가 이동하고, 천체마다 새로운 장관과 짧은 탐험 액션이 펼쳐진다.

이번 제작 모드는 **"클릭 가능한 웹 탐험 + 같은 장면을 활용한 자동 투어 영상"**으로 확정한다.

**프로젝트 위치:** [작업 폴더]/solar-odyssey/ (예: 문서/ai-site/solar-odyssey/)

### 산출물 A: 인터랙티브 웹

- 반응형 웹에서 10개 목적지를 자유롭게 선택한다.
- 각 목적지에 고유한 장면과 실제 작동하는 탐험 버튼 1개가 있다.
- 이전, 다음, 지도 복귀, 자동 투어, 일시정지와 재개, 음소거를 제공한다.
- 자유 탐험은 체류 시간 제한이 없다.
- 정적 파일로 빌드하고, 어떤 하위 경로(예: /examples/solar/)에 올려도 동작해야 한다. Vite의 base 를 './'(상대 경로)로 설정하고, 모든 자산 경로를 상대 경로로 둔다.

### 산출물 B: HyperFrames 자동 투어

- 동일한 천체 데이터, 그래픽, 장면 로직을 재사용한다.
- 정확히 120초, 1920x1080, 16:9, 30fps, 3600프레임의 MP4.
- 출력 파일명은 solar-odyssey-tour.mp4.
- 영상에서는 클릭 없이 카메라와 탐험 액션이 정해진 시간에 진행된다.
- MP4에서 작동하지 않는 클릭 버튼은 숨기고, 목적지 이름과 여행 진행 표시만 필요한 만큼 남긴다.

수정 가능한 전체 프로젝트, 실행 안내, 정적 웹 빌드, MP4, 10개 목적지 대표 스틸도 제공한다.

두 산출물이 완료되었는지 각각 확인한다. DB, 회원가입, 로그인, 런타임 LLM, 유료 외부 API는 필요 없다.

## 2. 목적지와 과학적 표현 기준

관람 순서는 다음과 같다.

| 번호 | 이름 | 영어 | 분류 |
|---|---|---|---|
| 00 | 태양 | SUN | 항성 |
| 01 | 수성 | MERCURY | 암석행성 |
| 02 | 금성 | VENUS | 암석행성 |
| 03 | 지구 | EARTH | 암석행성 |
| 04 | 화성 | MARS | 암석행성 |
| 05 | 목성 | JUPITER | 기체거인 |
| 06 | 토성 | SATURN | 기체거인 |
| 07 | 천왕성 | URANUS | 얼음거인 |
| 08 | 해왕성 | NEPTUNE | 얼음거인 |
| 09 | 명왕성 | PLUTO | 왜소행성 |

화면에서는 **"10개의 목적지"**라고 부른다.

이 프로젝트는 감상을 위한 가상 여행이다. 크기, 궤도 간격, 공전과 자전 속도, 비행 시간은 가독성과 연출을 위해 조정한다. 지도는 현재 시각의 실제 천체 배치가 아니다.

화면의 정보 버튼에 **"크기, 거리, 시간을 조정한 여행용 시각화"**라고 안내한다.

거대한 도착 천체와 느린 이동으로 공간의 규모를 전달하되, 정확한 실축척이라는 인상을 주지 않는다.

천체별 사실은 NASA Science 등의 공식 자료(15장 목록)를 확인한다. 과학 수치는 꼭 필요한 것만 쓰고 단위와 출처를 기록한다.

이 작품은 이름, 분류, 핵심 특징 한 문장만으로도 성립해야 한다. 지름, 거리, 공전주기 표를 모든 장면에 의무적으로 채우지 않는다.

## 3. 기술과 구조

HyperFrames는 HeyGen 공식 오픈소스 버전을 사용한다.

- 공식 저장소: https://github.com/heygen-com/hyperframes
- 시작 안내: https://hyperframes.heygen.com/quickstart
- GSAP 안내: https://hyperframes.heygen.com/guides/gsap-animation
- 시간 재현성 안내: https://hyperframes.heygen.com/concepts/determinism

현재 작업 환경, 기존 프로젝트, 설치된 플러그인과 스킬을 먼저 확인한다. 설치되어 있으면 /hyperframes:hyperframes 로 작업 흐름을 확인하고, 여러 장면으로 된 긴 영상이므로 /hyperframes:general-video 작업 흐름을 따른다. 없다면 공식 시작 안내에 따라 준비한다.

독립형 스킬 설치 안내의 npx hyperframes skills update 를 참고한다. 설치 버전의 도움말을 확인하고 존재하는 CLI 옵션과 런타임 연동 API만 사용한다.

### Three.js 연동

HyperFrames는 공식 three 런타임 어댑터를 제공한다. 설치된 hyperframes-animation 스킬의 adapters/three.md 를 먼저 읽고 그 방식을 따른다. 어댑터는 장면을 대신 소유하지 않고 HyperFrames 시간을 전달하며 seek 이벤트(hf-seek)를 보내므로, 그 시간에 맞는 프레임을 직접 그린다. 문서에 없는 연동 방식을 지어내지 않는다.

### 웹과 영상의 구조

새 프로젝트라면 Vite + TypeScript + Three.js + GSAP처럼 정적 배포 가능한 가벼운 구성을 기본으로 한다. React는 쓰지 않는다.

HyperFrames 컴포지션과 웹 앱은 별도 진입점을 두되 장면 로직과 그래픽을 공유한다.

**공유 방법을 다음처럼 고정한다.** HyperFrames 영상 원본(index.html)은 순수 HTML이라 TypeScript를 직접 읽지 못한다. 그래서 장면 렌더러, 천체 데이터, 투어 스케줄을 Vite의 별도 빌드 진입점으로 묶어 단일 JS 파일(예: tour-bundle.js)로 출력하고, 영상 원본이 그 파일을 로컬 경로로 불러온다. 웹 앱도 같은 소스 모듈을 사용한다. 코드를 바꾸면 이 번들을 다시 빌드한 뒤 영상을 렌더한다.

책임은 다음처럼 나눈다.

- **천체 데이터:** 이름, 분류, 설명, 재질 설정, 색상, 장면 설정, 탐험 액션.
- **장면 렌더러:** 천체, 조명, 카메라, 입자, 라벨을 그린다.
- **웹 컨트롤러:** 클릭, 드래그, 키보드, 선택, 방문 상태를 관리한다.
- **투어 스케줄:** 절대 시간에 따라 목적지, 이동, 카메라, 탐험 액션을 결정한다.
- **HyperFrames 진입점:** 투어의 원하는 시간을 렌더링한다.

인터랙티브 웹의 입력을 영상 렌더링에 실제 클릭으로 재연하는 구조로 만들지 않는다.

**시간 t에 해당하는 투어 상태를 직접 계산하고 그 상태를 그린다.**

컴포지션의 루트 길이와 해상도를 명시하고, 등록된 paused 타임라인을 HyperFrames가 제어하게 한다. seek 후 캔버스가 그려진 다음 캡처되도록 한다.

## 4. 전체 미술 방향

핵심 키워드:

**깊은 우주, 거대한 곡면, 빛과 어둠의 경계, 섬세한 관측 장비, 절제된 SF, 각 세계의 고유한 재질.**

### 색상과 UI

- 배경: #03050C 수준의 깊은 검정과 아주 어두운 남색.
- 기본 글자: #F4F7FC
- 보조 글자: #A8B5CC
- 상호작용 강조: #8DDCFF
- 천체별 포인트 색: 해당 세계의 재질에서 가져온다.

화려함은 크기 변화, 입체적인 가림, 카메라 경로, 조명, 재질의 대비로 만든다.

기본 감상 화면에서는 천체가 가장 먼저 보이고 UI는 그 다음에 읽혀야 한다. 관측 장비 느낌의 선과 숫자는 실제 의미가 있는 범위에서만 사용한다.

한국어 글꼴 파일은 프로젝트 안에 로컬로 준비한다(예: Pretendard, SIL 오픈 폰트 라이선스).

### 우주의 깊이

별은 깊이가 다른 3개 층으로 구성하되 반짝임을 매우 약하게 한다.

성운이나 우주 먼지는 분위기를 보조하는 수준으로 사용한다. 가까운 천체와 배경별의 이동량을 다르게 해 공간감을 만든다.

비행 때만 짧은 별빛 늘어짐을 사용한다. 이 효과는 여행 전환을 위한 창작 연출이다.

### 빛

태양은 스스로 빛나고, 다른 천체는 태양 방향의 광원으로 밝고 어두운 면이 결정되도록 한다.

명암을 보완하는 약한 보조광은 허용하지만 낮과 밤의 방향이 뒤집히지 않아야 한다.

블룸 때문에 표면 질감이 사라지지 않게 한다. 밝은 영역 옆에 어두운 여백을 남겨 크기와 빛의 대비를 만든다.

## 5. 첫 화면: 궤도 지도가 살아난다

첫 프레임은 화면 왼쪽 아래를 크게 차지하는 태양의 곡면으로 시작한다.

검은 우주와 금빛 가장자리의 대비를 즉시 보여준다. 짧은 홍염 아치 하나가 천천히 모습을 드러낸다.

카메라가 뒤로 물러나면서 가는 궤도선과 서로 다른 위치의 천체가 보인다.

선택용 지도이므로 천체 크기와 궤도 간격은 적절히 압축한다. 작고 먼 목적지도 읽을 수 있는 이름 버튼과 충분한 클릭 영역을 제공한다.

제목:

**우리의 태양계**
**가장 가까운 별에서, 멀리 떨어진 얼음 세계까지.**

주요 버튼:

- **태양부터 출발**
- **자동 투어**

천체나 이름 버튼을 직접 눌러 자유 탐험을 시작할 수도 있다.

첫 연출이 끝나기 전에도 조작 가능하게 하며, 늦어도 3초 이내에 선택할 수 있어야 한다.

### 여행 내비게이션

하단에는 10개 목적지의 이름을 순서대로 배치한 얇은 여행 내비게이션을 둔다.

현재 목적지와 방문한 목적지는 모양과 텍스트로도 구분한다. 모바일에서는 이름 목록이 가로 스크롤되며 현재 목적지가 보이도록 한다.

호버 또는 키보드 포커스 시 이름과 선택 링을 부드럽게 강조한다. 천체의 크기는 최대 3% 정도만 변화시킨다.

클릭 한 번으로 곧바로 출발하게 한다.

## 6. 공통 이동 연출: 지도가 비행으로 이어진다

첫 방문의 기본 이동은 약 1.8~2.4초, 재방문은 약 0.8~1.0초를 목표로 한다.

도착 구도에 필요한 시간을 조정하되 자동 투어의 전체 타임코드 안에 포함한다.

### 1단계 (0.00~0.18초)

선택한 이름과 목적지를 강조하고 다른 라벨의 대비를 낮춘다.

현재 위치에서 목적지로 연결되는 경로를 하나만 보여준다.

### 2단계 (0.18~0.50초)

선택 궤도의 시각적 리듬을 이어받은 곡선 비행 경로가 앞으로 뻗는다.

작은 탐사선이 경로에 정렬된다.

이 선은 여행 경로이며, 실제 공전 궤도가 물리적으로 변형된다는 뜻이 아니다.

### 3단계 (0.50~1.30초)

카메라가 탐사선 뒤쪽으로 붙었다가 속도를 올린다.

지도 구도가 사선 공간 구도로 바뀌고 별빛이 잠깐 길어진다.

배경, 탐사선, 목적지의 이동량이 달라야 한다. 카메라 롤은 최대 6도 수준으로 절제한다.

### 4단계 (1.30~2.00초 전후)

별빛 늘어짐을 줄이고 목적지가 프레임 안으로 커진다.

다른 천체나 목적지 구체 내부를 관통하지 않는 곡선 경로를 사용한다.

목적지가 화면 밖으로 사라졌다 갑자기 나타나지 않게 한다.

### 5단계: 도착

천체별 고유한 카메라 각도로 부드럽게 정착한다.

0.4~0.6초 동안 장관을 먼저 보여준 후 이름과 설명을 나타낸다.

탐사선은 프레임 가장자리로 물러나 규모를 보여주는 작은 기준점이 된다.

탐사선은 이번 프로젝트를 위한 가상의 소형 탐사선이다. 안테나, 몸체, 패널 등 단순하고 잘 읽히는 형상으로 구성한다.

## 7. 목적지별 장면과 실제 탐험 액션

이름, 설명, 분류, 탐험 버튼은 공통 UI 언어를 유지한다.

피사체의 배치, 도착 구도, 카메라 움직임, 탐험 액션은 아래처럼 달라져야 한다.

### 00. 태양: 모든 여행이 시작되는 빛

**장면:** 태양의 거대한 곡면이 프레임 밖까지 이어진다. 금빛과 주황빛 표면의 미세한 흐름과 가장자리 홍염 아치를 보여준다. 태양 색상은 작품의 관측 연출이며 모든 파장의 실제 육안 색을 재현한다고 주장하지 않는다.

**카메라:** 가장자리를 비스듬히 따라가다가 뒤로 빠져 태양의 규모를 드러낸다. 표면 위에 착륙하지 않는다. 구체 전체가 맥박처럼 커졌다 작아지는 효과를 사용하지 않는다.

**탐험 버튼 "태양 활동 관측":** 이미 존재하는 홍염 영역으로 관측 프레임을 옮기고 2초 동안 가까이 보여준 뒤 원래 구도로 복귀한다. 버튼이 태양 폭발을 발생시키는 식으로 만들지 않는다.

**설명:** "태양계의 중심에서 빛과 에너지를 내는 별."

### 01. 수성: 고요한 충돌구의 세계

**장면:** 회갈색 암석, 충돌구, 낮과 밤의 날카로운 경계를 보여준다. 두꺼운 구름이나 푸른 대기 테두리를 추가하지 않는다. 표면 전체를 용암으로 덮지 않는다.

**카메라:** 표면을 비스듬히 스치는 횡이동으로 크레이터의 그림자를 보여준 뒤, 초승달 모양의 구체가 읽히는 관측 위치에 정착한다.

**탐험 버튼 "충돌구 스캔":** 선택 지형 위로 얇은 스캔선이 지나가고 윤곽선이 1초 정도 남는다. 해당 부분을 잠시 확대해 보여준 뒤 구체 전체로 돌아간다. 스캔은 관측 UI이며 천체 표면을 실제 변형시키지 않는다.

**설명:** "태양에 가장 가까운, 충돌구가 많은 암석행성."

### 02. 금성: 구름 아래 감춰진 세계

**장면:** 크림색과 옅은 황토색 구름이 표면을 가리고 천천히 흐른다. 구름 외관과 표면 관측 모드 사이에 강한 시각적 반전을 만든다.

**카메라:** 구름의 곡면을 따라 가까워지다가 대기 바깥의 관측 위치에 멈춘다. 기본 외관에서 지표가 노출되지 않게 한다.

**탐험 버튼 "레이더로 보기":** 화면을 지나는 스캔 영역에서 구름이 레이더 기반 지형 시각화로 전환된다. **"레이더 기반 시각화(재구성)"** 라벨을 표시하고 같은 버튼으로 구름 보기로 돌아간다. 구름이 실제로 갈라진 것처럼 표현하지 않는다.

**설명:** "두꺼운 대기 아래, 태양계에서 가장 뜨거운 행성."

### 03. 지구: 우리가 돌아갈 집

**장면:** 푸른 바다, 대륙, 흰 구름, 얇은 대기층을 보여준다. 낮과 밤의 경계를 따라 지구의 곡률을 보여준다. 밤의 도시 불빛은 지표의 밤쪽 육지에 자연스럽게 나타난다.

**카메라:** 어두운 프레임 아래에서 푸른 지평선이 떠오르고, 카메라가 천천히 높아지며 지구 전체가 드러난다. 다른 장면보다 움직임을 줄이고 최소 3초는 푸른 지구를 감상하게 한다.

**탐험 버튼 "밤의 지구 보기":** 관측 시점을 밤쪽으로 옮겨 도시 불빛을 보여준다. 구름과 지표는 독립된 층으로 처리한다. 다시 누르면 최초 구도로 복귀한다.

**설명:** "바다와 구름, 생명이 함께하는 우리의 집."

### 04. 화성: 붉은 지형을 스치는 비행

**장면:** 붉은 갈색, 황토, 어두운 암석이 섞인 지형과 긴 협곡을 보여준다. 얇은 먼지층, 전경과 중경과 후경의 차이를 이용한다. 화면 전체에 강한 빨간 필터를 씌우지 않는다.

**카메라:** 궤도에서 특정 지형을 향해 접근한 뒤, 사선으로 협곡을 스치는 짧은 비행 장면으로 연결한다. 실제 지형 데이터를 쓰지 않으므로 **"지형을 참고한 탐험 연출"**이라고 표시한다.

**탐험 버튼 "협곡 탐험":** 3초짜리 정해진 카메라 경로를 따라 협곡을 비행한 뒤 궤도 관측 시점으로 돌아온다. 사용자가 도중에 복귀할 수 있는 버튼을 둔다.

**설명:** "붉은 먼지와 깊은 협곡에 남겨진 오래된 풍경."

### 05. 목성: 화면에 다 담기지 않는 거대함

**장면:** 크림, 황갈색, 갈색의 구름띠와 대적점을 보여준다. 처음에는 구름의 거대한 곡면이 화면 대부분을 차지하고, 뒤로 물러나며 그것이 행성의 일부였음을 알게 한다.

**카메라:** 구름띠와 나란히 횡이동한 뒤 천천히 후퇴한다. 규모를 느끼게 하는 작은 탐사선 실루엣을 가장자리에 잠시 둔다. 단단한 땅에 착륙하는 장면은 없다.

**탐험 버튼 "폭풍 추적":** 대적점 위치를 따라 관측 시점과 얇은 표시가 움직인다. 대적점은 행성의 회전과 함께 움직이며 화면에 고정된 스티커처럼 보이지 않아야 한다. 현재 크기를 검증하지 않은 수치로 표시하지 않는다.

**설명:** "거대한 구름띠와 폭풍이 흐르는 기체거인."

### 06. 토성: 얇은 선이 거대한 고리로 펼쳐진다

**장면:** 아이보리와 샴페인색 구체와 얇고 섬세한 고리를 보여준다. **이 장면을 전체 여행의 시각적 절정으로 만든다.** 고리의 간극과 밝기 차이, 고리와 행성의 그림자를 보여준다.

**카메라:** 처음에는 고리 평면과 거의 나란히 있어 얇은 선만 보인다. 카메라가 위로 올라가며 고리가 넓은 타원으로 펼쳐지고 그 뒤에 토성이 드러난다. 천체를 회전시켜 고리를 억지로 펼치는 대신 카메라 관측 각도를 바꾼다.

**탐험 버튼 "고리 가까이 보기":** 고리 위쪽을 따라 정해진 경로로 이동한다. 가까운 일부 구간에서 크기가 다른 얼음과 암석 입자를 드러내고 다시 전체 고리로 돌아온다. 고리 전체를 거대한 바위 몇 개나 두꺼운 도넛으로 표현하지 않는다.

**구현 기준:** 앞쪽 고리는 행성 앞, 뒤쪽 고리는 행성 뒤에 가려져야 한다. 고리의 앞뒤를 단순히 같은 CSS 레이어에 올려 가림 관계를 망가뜨리지 않는다. 입자 구간을 통과하는 대신 그 위를 비행한다.

**설명:** "수많은 얼음과 암석 조각이 이루는 거대한 고리."

### 07. 천왕성: 옆으로 누운 세계

**장면:** 옅은 청록색의 부드러운 구체와 어둡고 얇은 고리를 보여준다. 목성과 토성의 화려함 뒤에 여백과 조용한 움직임을 배치한다.

**카메라:** 기울어진 자전축과 고리의 방향을 읽을 수 있는 사선 구도로 접근한다. 행성과 고리는 처음부터 같은 축 관계를 유지한다.

**탐험 버튼 "자전축 확인":** 궤도면, 자전축, 약 97.8도의 기울기 표시를 잠시 보여준다. 각도의 기준이 궤도면의 수직 방향임을 그림에서 분명히 한다. 버튼을 누른 뒤 행성이 새롭게 쓰러지는 연출은 하지 않는다.

**설명:** "크게 기울어진 자전축을 가진 청록빛 얼음거인."

얼음거인이라는 이유로 걸을 수 있는 빙판이나 얼음 산맥을 행성 표면에 만들지 않는다.

### 08. 해왕성: 차가운 색, 거센 대기

**장면:** 천왕성보다 약간 푸른 청록색 계열의 구체와 밝은 구름을 보여준다. UI 포인트와 주변 배경을 차가운 남색으로 잡아 시각적 개성을 준다.

**카메라:** 느린 카메라 움직임과 상대적으로 빠르게 흐르는 대기의 대비를 만든다. 구름 속으로 들어가 단단한 지면에 착륙하지 않는다.

**탐험 버튼 "바람의 흐름 보기":** 구름 위에 흐름선이 잠시 나타나 대기의 운동 방향을 설명하고 다시 사라진다. 실제 관측 시계열 데이터가 없으므로 실시간 풍속이나 기상 정보처럼 표시하지 않는다.

**설명:** "멀리 떨어진 곳에서도 거센 바람이 부는 얼음거인."

과거 Voyager의 짙은 파랑을 정확한 자연색이라고 고정하지 않는다. 강한 코발트색 모드가 필요하면 **"색 강조 보기"**로 구분한다. 과거 대흑점을 영구적인 고정 지형으로 묘사하지 않는다.

### 09. 명왕성: 작은 세계의 커다란 발견

**장면:** 밝은 베이지와 붉은 갈색 지역, 하트 모양의 밝은 지형을 대비시킨다. 하트는 표면 재질에 자연스럽게 포함되며 별도의 귀여운 아이콘을 붙이지 않는다. 이름 옆에 **"왜소행성"**을 표시한다.

**카메라:** 작은 천체를 천천히 가까이 보여주고 하트 지형을 관찰한다. 이후 시점을 뒤로 돌려 먼 태양이 작고 밝게 보이도록 구성한다. **같은 태양이 첫 장면의 거대한 모습과 달라 보이는 시각적 대조로 여행을 마무리한다.** 밝기와 크기는 감상용으로 조정할 수 있다.

**탐험 버튼 "하트 지형 가까이 보기":** 하트 영역을 따라 짧게 이동해 밝은 얼음 지형의 디테일을 보여준 뒤 돌아온다. 이 지형 디테일은 재구성 그래픽임을 표시한다.

**설명:** "밝은 하트 모양 지형을 품은 먼 왜소행성."

**마무리 카피:** "우리의 이번 여행은 여기서 잠시 멈춥니다."

명왕성을 태양계의 물리적인 끝이라고 설명하지 않는다.

## 8. 자동 투어: 정확히 120초

모든 이동 전환은 아래 구간에 포함한다. 구간 밖에 전환 시간을 추가하지 않는다.

| 시간 | 목적지 | 연출 |
|---|---|---|
| 0~7초 | 오프닝 | 태양 가장자리에서 전체 지도와 제목 공개 |
| 7~17초 | 태양 | 접근, 홍염 관측, 거대한 빛 감상 |
| 17~24초 | 수성 | 날카로운 명암과 짧은 충돌구 스캔 |
| 24~33초 | 금성 | 구름에서 레이더 시각화로 반전한 뒤 복귀 |
| 33~45초 | 지구 | 푸른 지평선 공개, 밤쪽 관측, 최소 3초 감상 |
| 45~55초 | 화성 | 궤도에서 협곡 비행으로 전환한 뒤 복귀 |
| 55~68초 | 목성 | 구름띠에서 전체 규모 공개, 대적점 관측 |
| 68~82초 | 토성 | 얇은 고리 전개, 가까이 이동, 전체 구도 감상 |
| 82~91초 | 천왕성 | 느린 접근, 기울어진 자전축 표시 |
| 91~101초 | 해왕성 | 대기 흐름 관측, 차가운 분위기 유지 |
| 101~113초 | 명왕성 | 하트 지형과 먼 태양을 돌아보는 장면 |
| 113~120초 | 에필로그 | 지도가 돌아오며 방문한 목적지들이 차례로 켜짐 |

각 목적지의 탐험 액션은 해당 구간의 중간에 한 번 자동 재생한다.

장관이 드러난 뒤 문구를 표시하며, 주요 설명은 최소 2초 정도 읽을 수 있게 한다.

마지막 3초는 다음 문구와 전체 여행 경로를 안정적으로 보여준다.

**우리의 태양계**
**다음 여행은 어디로?**

### 사운드

영상의 소리는 감상을 돕는 음악과 효과음으로 구성한다.

도입부의 낮은 전자음, 지구의 따뜻한 화음, 토성의 넓은 공간감, 명왕성의 고요한 여운으로 변화를 준다.

목적지 이동 때마다 같은 큰 충격음을 반복하지 않는다. 우주 공간의 실제 소리를 녹음한 것처럼 설명하지 않는다.

라이선스를 확인할 수 있는 음원만 쓰고, 계정이나 유료 API가 필요한 생성 기능은 쓰지 않는다. 오디오 자산을 준비할 수 없다면 무음판을 출력하고 사실대로 알린다.

## 9. 인터랙션과 상태 전환

웹 상태는 최소한 다음처럼 구분한다.

- overview
- departing
- travelling
- arriving
- exploring

자동 투어 재생 상태와 현재 목적지는 별도 상태로 관리한다.

### 자유 탐험

도착 후 장면을 유지한다. 다음 버튼을 누르기 전 자동으로 떠나지 않는다.

"태양부터 출발"은 태양으로 이동한 뒤 자유 탐험 상태가 된다.

탐험 액션 중에는 "원래 시점으로"를 제공하고 초기 카메라와 라벨 상태를 복구한다.

### 자동 투어

"자동 투어"는 120초 스케줄을 처음부터 시작한다.

일시정지 버튼은 현재 투어 시간과 시각 상태를 그대로 정지하고, 재개는 동일한 시간부터 진행한다.

자유 탐험 후 누르는 "자동 투어로 돌아가기"와 구분한다.

### 사용자 입력의 우선권

자동 투어 중 다음 동작은 사용자 조작으로 간주한다.

- 목적지 선택.
- 탐험 액션.
- 드래그와 터치 회전.
- 이전과 다음.
- 지도 복귀.

이때 투어 시계를 먼저 멈추고 사용자 입력을 반영한다.

**카메라를 제어하는 주체는 항상 하나여야 한다.**

### 자유 탐험에서 투어로 복귀

"자동 투어로 돌아가기"를 누르면 현재 목적지의 **도착 정착 시점**부터 이어 간다.

목적지별 구간 시작 시각과 도착 정착 시각을 별도로 정의한다.

현재 자유 카메라에서 투어 카메라까지 짧게 연결하여 이전 목적지 출발 구도로 튀지 않게 한다.

지도에서는 마지막 목적지의 도착 정착 시점으로 돌아가고, 방문한 목적지가 없으면 처음부터 시작한다.

이 복귀 처리는 웹에만 적용하며 120초 영상 스케줄을 바꾸지 않는다.

### 이동 중 조작

지도 복귀 버튼과 Escape는 언제든 작동한다.

이동 중에는 "이동 건너뛰기"로 도착 상태를 바로 만들 수 있다.

- 자동 투어에서는 도착 정착 시점으로 투어 시간을 이동한 뒤 계속 재생한다.
- 자유 탐험에서는 도착 후 자유 탐험을 유지한다.

이동 중 다른 목적지 선택은 임시 비활성화하고 상태를 표시한다.

여러 카메라 애니메이션을 겹쳐 실행하지 않는다. 각 상태를 빠져나갈 때 이전 카메라와 오버레이 애니메이션, 이벤트를 정리한다.

### 드래그와 키보드

PC에서는 도착 후 드래그로 현재 천체를 제한된 범위에서 관찰할 수 있다. 이동 중에는 드래그 회전을 잠근다.

클릭과 드래그를 구분하고, 버튼 위 드래그가 카메라를 움직이지 않게 한다. 모바일에서는 터치로 같은 기능을 제공한다.

키보드로 모든 이름 버튼과 기능을 선택할 수 있어야 한다.

Tab 포커스를 분명하게 보여주고 버튼에는 읽을 수 있는 이름을 제공한다. 키보드 단축키는 입력 요소의 기본 동작과 충돌하지 않게 한다.

### 방문 상태와 오디오

방문 상태는 현재 세션 메모리로 관리한다. DB나 계정 연동 없이 새로 시작할 수 있다.

브라우저 오디오는 기본 음소거다. 사용자가 사운드를 켜면 음악이 시작되며 아이콘과 상태가 일치한다.

방문과 탐험에 소리가 필수 조건이 되지 않게 한다.

## 10. 레이아웃과 반응형

데스크톱 상세 장면은 천체와 환경에 화면의 약 65~75%를 할당한다.

설명은 남은 여백에 간결하게 배치한다.

지구의 지평선, 목성의 큰 곡면, 토성의 고리를 위한 구도를 각각 잡는다.

1080p 기준 천체 제목은 72~104px, 설명은 26~34px 정도로 시작해 실제 화면에서 조정한다.

한국어 설명은 기본 1~2문장, 2~3줄 이내로 한다. 분류와 영어 이름은 보조 정보다. 상세 패널을 열었을 때만 추가 사실과 출처를 보여준다.

### 모바일

상단 약 60~65%에 우주 장면, 아래에 이름, 설명, 탐험 버튼을 배치한다.

토성 고리, 태양 가장자리, 하단 조작부가 서로 겹치지 않도록 카메라 구도를 따로 조정한다.

390px 안팎 너비에서 가로 넘침과 잘린 버튼이 없어야 한다.

### 모션 감소

prefers-reduced-motion에서는 긴 비행, 별빛 늘어짐, 카메라 롤을 줄이고 약 0.2~0.3초 페이드 중심의 이동을 제공한다.

같은 목적지, 정보, 탐험 기능에 접근할 수 있어야 한다.

큰 화면 점멸이나 반복 섬광은 사용하지 않는다.

## 11. 그래픽: 사진 없이 절차적 재질로

이번 제작은 사진, 위성 이미지 텍스처, 생성 이미지를 쓰지 않는다. 외부 이미지를 내려받지 않는다. 모든 천체는 셰이더 기반 절차적 재질(노이즈, 띠, 크레이터 패턴, 대기 산란 근사)과 벡터 그래픽으로 직접 만든다. 결과 보고와 정보 패널에 "사진이 아닌 재구성 그래픽"임을 밝힌다.

### 천체별 재질 기준

- 태양: 흐르는 노이즈 표면, 가장자리 어두워짐, 홍염 아치.
- 수성: 크기가 다른 크레이터 패턴과 날카로운 명암 경계.
- 금성: 천천히 흐르는 크림색 구름층, 레이더 모드는 별도의 지형 노이즈.
- 지구: 바다, 대륙, 구름, 대기 테두리, 밤 불빛을 분리한 층. 대륙 윤곽이 지구로 알아볼 수 있어야 하므로, 공개 도메인 벡터 지도 데이터(예: Natural Earth)를 쓸 수 있으면 사용하고 출처를 기록한다. 쓸 수 없으면 실제 대륙 배치를 단순화한 형상으로 그린다.
- 화성: 붉은 갈색 지형 노이즈와 협곡을 위한 별도 지형 메시.
- 목성: 위도별 구름띠, 띠 사이의 난류, 대적점.
- 토성: 아이보리 구체, 간극과 밝기 차이가 있는 고리, 고리와 행성의 서로 드리운 그림자.
- 천왕성, 해왕성: 부드러운 청록 계열과 옅은 구름, 해왕성은 더 빠르게 흐르는 밝은 구름.
- 명왕성: 베이지와 붉은 갈색 지역, 밝은 하트 모양 지형.

### 구현 기준

- 대적점, 하트 지형, 크레이터 표시는 행성의 자전과 함께 움직인다.
- 토성 고리는 알파와 앞뒤 가림이 자연스러워야 한다.
- 천왕성의 고리와 축은 같은 기준 변환을 사용한다.
- 지구는 낮 지표, 밤 불빛, 구름층을 분리한다.
- 사용한 데이터, 글꼴, 음원의 출처와 라이선스를 정보 패널의 크레딧에 표시한다.

### 성능 기준

- 일반적인 데스크톱에서 부드러운 조작을 목표로 하고 실제 환경에서 프레임 저하를 확인한다.
- 측정하지 않은 60fps를 보장한다고 쓰지 않는다.
- 모바일에서는 픽셀 비율, 입자 수, 셰이더 복잡도, 후처리를 낮춘다.
- 웹에서는 현재 목적지를 먼저 준비하고 다음 목적지의 셰이더와 데이터를 미리 준비한다.
- 비활성 장면의 무거운 후처리를 멈추고 렌더 자원과 리스너를 정리한다.
- 별은 점군이나 인스턴싱 등 적절한 렌더링 방식으로 구현한다.
- 고리는 멀리서는 단순한 재질, 가까운 일부 구간에서만 입자 상세를 사용한다.
- WebGL이 불가능하면 같은 목적지의 2.5D 그림, 이동, 설명, 버튼으로 탐험이 가능한 대체 화면을 제공한다.

## 12. HyperFrames 렌더 재현성

실시간 웹 모드와 영상 렌더 모드의 시계 소유권을 분명하게 한다.

웹에서는 사용자 입력과 실시간 프레임 루프를 사용할 수 있지만, **영상 모드의 결과는 입력 시간 t만으로 결정되어야 한다.**

현재와 다음 목적지 중심의 지연 준비와 비활성 장면 정리는 웹 모드의 최적화다.

영상 모드는 캡처 전에 전체 투어에 필요한 셰이더와 데이터를 준비하거나, 공식 seek 완료 절차 안에서 해당 프레임의 준비를 확실히 보장한다.

이전 장면을 지나왔다는 이유로 필요한 자원이 존재한다고 가정하지 않는다.

다음을 지킨다.

- 영상 렌더 중 자유 실행 requestAnimationFrame, Date.now, 타이머, 누적 deltaTime으로 상태가 달라지지 않게 한다.
- 무작위 별, 먼지, 고리 입자, 크레이터 배치는 고정된 seed로 만든다.
- 천체 회전, 카메라 위치, 대기 흐름, 라벨 가시성, 레이더 마스크, 탐험 액션을 절대 시간에서 계산한다.
- GSAP 콜백이 앞에서 실행되었다는 사실에 의존해 장면을 생성하지 않는다.
- 중간 시점으로 바로 seek해도 그 장면이 준비되어야 한다.
- 렌더 도중 외부 네트워크 요청이 장면을 바꾸지 않게 한다.
- 역방향 seek와 반복 seek에서도 카메라, 재질, 표시 상태를 복원한다.
- 프레임을 요청한 뒤 WebGL 드로우가 끝난 상태가 실제 캡처되는지 확인한다.
- 오디오를 사용하면 HyperFrames의 공식 미디어 재생 방식에 맞게 배치한다.
- 3600프레임 WebGL 렌더는 오래 걸린다. 먼저 설치 버전의 draft 품질 옵션으로 짧은 구간과 전체를 시험 렌더한 뒤 최종 렌더한다. GPU 사용 옵션은 설치 버전의 도움말로 확인한다.

## 13. 단계별 구현 순서

### 1단계

1. 환경과 공식 HyperFrames 문서, three 어댑터 문서를 확인하고 웹과 영상 진입점이 있는 프로젝트를 준비한다.
2. 10개 목적지 데이터 구조와 재질 설정 목록을 구성한다.
3. 전체 지도와 목적지 선택, 지도 복귀, 기본 카메라 이동을 구현한다.
4. **태양의 첫 공개, 지구의 지평선, 토성 고리의 전개**를 가장 먼저 높은 완성도로 만든다.

### 2단계

5. 나머지 7개 목적지에 고유 카메라, 재질, 탐험 액션을 적용하고 명왕성의 마무리를 완성한다.

### 3단계

6. 120초 투어 스케줄과 웹 자동 재생, 일시정지, 건너뛰기, 복귀를 연결한다.
7. 모바일, 키보드, 모션 감소, 반복 방문, 빠른 이동 종료를 확인한다.
8. 정적 웹 빌드를 만들고, 하위 경로에 올려도 동작하는지 로컬에서 확인한다.

### 4단계

9. 공유 로직을 단일 JS 번들로 빌드해 HyperFrames 영상 원본에 연결한다.
10. 대표 프레임을 확인하고 시험 렌더로 오류를 수정한 뒤 최종 렌더링한다.

어려운 3D 지형은 정교한 2.5D로 대체할 수 있다. 각 목적지의 고유한 구도와 대표 액션은 유지한다.

## 14. 완료 전 실제 확인

### 웹 기능

- 지도에서 10개 목적지를 각각 선택할 수 있는가?
- 모든 탐험 버튼이 실제 장면 변화를 일으키는가?
- 이전, 다음, 지도 복귀, 이동 건너뛰기, 자동 투어, 일시정지, 재개가 동작하는가?
- 자동 투어 도중 사용자 조작으로 전환한 후 다시 돌아갈 수 있는가?
- 토성, 수성, 명왕성처럼 순서를 바꿔 방문해도 카메라와 재질이 섞이지 않는가?
- 모바일과 키보드로 같은 주요 기능에 접근할 수 있는가?
- 정적 빌드를 하위 경로에 올려도 그림, 글꼴, 스크립트가 모두 불러와지는가?

### 영상과 시각

- 태양, 지구, 토성에 서로 다른 대표 장관이 있는가?
- 토성 고리의 가림과 그림자가 올바른가?
- 천왕성의 자전축과 고리가 일치하는가?
- 금성 레이더 모드에 표시가 있는가?
- 기체거인과 얼음거인에 지면 착륙이 없는가?
- 한국어 폰트, 라벨, 배경 대비가 정상인가?
- 8초, 28초, 38초, 73초, 108초로 직접 이동해도 정상인가?
- 73초, 8초, 108초, 28초처럼 역순으로 seek해도 같은 장면이 나오는가?
- 실제 MP4에 검은 캔버스, 한 프레임 지연, 깜빡임, 잘린 UI가 없는가?
- 결과가 정확히 120초, 1920x1080, 30fps인가?
- 오디오 포함 여부가 보고 내용과 일치하는가?

검수 후 프로젝트 위치, 웹 미리보기 주소, 정적 빌드 위치, MP4와 대표 스틸 경로, 재실행 방법, 실제 확인한 항목을 알려라.

렌더링이나 구현이 막혔다면 원인과 완료된 범위를 구분해 보고하라. 생성하지 않은 파일을 완성했다고 말하지 않는다. 보고는 코딩을 모르는 사람도 이해할 수 있는 쉬운 한국어로 써라.

## 15. 공식 과학 자료

아래 자료를 천체별 특징의 기준으로 사용한다.

- 태양계 분류: https://science.nasa.gov/solar-system/planets/
- 태양: https://science.nasa.gov/sun/facts/
- 수성: https://science.nasa.gov/mercury/facts/
- 금성: https://science.nasa.gov/venus/venus-facts/
- 지구: https://science.nasa.gov/earth/facts/
- 화성: https://science.nasa.gov/mars/facts/
- 목성: https://science.nasa.gov/jupiter/jupiter-facts/
- 토성: https://science.nasa.gov/saturn/facts/
- 천왕성: https://science.nasa.gov/uranus/facts/
- 해왕성: https://science.nasa.gov/neptune/neptune-facts/
- 명왕성: https://science.nasa.gov/dwarf-planets/pluto/facts/

초 단위 여행, 가상의 탐사선, 카메라 이동과 스캔 효과는 이번 작품을 위한 창작 연출로 구현한다.