픽셀 태양계

"흑백 픽셀 아트 스타일의 인터랙티브 태양계 웹사이트"를 완전히 구현하세요(순수 정적 사이트, 로컬 실행 가능, 정적 호스팅 배포 가능). 모든 요구사항은 아래에 나열되어 있습니다. 이에 따라 구현하고 각 항목을 검증하세요.

[1. 기술 기반]
1. 순수 정적 사이트: importmap + 네이티브 ESM, three.js 및 모든 의존성을 로컬에 포함, CDN·빌드 단계·백엔드 없음, 진입점은 index.html.
2. 이원화된 에셋 전략: 지오메트리는 three.js 내장 구체/파라메트릭 메시를 사용하고, 텍스처는 실제 천문 이미지(NASA Visible Earth, LRO 달 지도, SolarSystemScope)를 사용합니다. 표준 / HD 4K / 울트라 8K의 세 품질 등급으로 구성하고, 텍스처 로딩 관리자(Promise 캐시, SRGB와 선형 색 공간 구분, 이방성 ≤ 8, 실패 시 재시도 후 표준 등급으로 폴백)를 구현하세요.
3. 렌더러: antialias, SRGB 출력, ACESFilmicToneMapping(노출 ≈ 1.05), DPR ≤ 2(모바일에서는 ≤ 1.5), near plane 0.002, 검은 씬 배경.

[2. 씬 콘텐츠(모두 실시간 3D, 이미지나 동영상을 3D처럼 제시하지 말 것)]
1. 구성원: 태양 + 8개 행성 + 달(지구 주위를 공전하며 조석 고정). 안쪽 행성은 더 빠르게, 바깥쪽 행성은 더 느리게 공전하며 실제 비례 회전 속도와 실제 자전축 기울기(토성 27°, 천왕성 82°)를 사용합니다.
2. 태양: 발광 구체 + 희미한 헤일로, 조명용 점광원 + 희미한 주변광.
3. 지구: "법선 · 태양 방향 내적"으로 낮/밤 이중 텍스처를 실시간 전환(명암 경계 전환)하고, 밤쪽 도시 불빛은 자체 발광하며 독립적으로 토글할 수 있어야 합니다. 별도의 구름 셸(1.006R, alphaMap)과 대기 프레넬 림 라이트 셸(1.025R, 햇빛 계수 곱셈)을 포함하고, 세 레이어를 각각 토글할 수 있어야 합니다.
4. 토성: 구체와 고리는 같은 27° 기울기 그룹을 공유합니다. 고리는 XZ 평면의 파라메트릭 메시이며, UV는 반지름에 따라 가로줄 텍스처를 매핑하고 양면 렌더링, alphaTest ≈ 0.04, depthWrite = false를 적용합니다.
5. 달: 8K 달 표면 텍스처(웹에서는 4K / 8K 등급 제공)를 사용합니다. 근접 조명은 사실적인 중간 회색 느낌으로 어둡게 해야 합니다.
6. 배경: 성운 대형 텍스처가 아닌, 드문드문 고정된 별 점.

[3. 인터랙션 시스템]
1. 천체 선택: 카탈로그 클릭 / 씬에서의 레이캐스트 클릭(작은 천체에는 확대된 보이지 않는 선택 구체 제공) / 이전-다음 순환.
2. 포커스 카메라: 카메라는 움직이는 대상 천체에 계속 고정되어야 하며(매 프레임 위치 동기화), 공전 운동에 끌려가지 않아야 합니다. 시야 거리 = 경계 반지름 / 화면 채움 계수(기본 0.7, 달 0.78, 태양은 검은 테두리 포함 0.45). 850ms ease-out 부드러운 전환은 전환 중에도 대상을 실시간으로 추적해야 하며, 사용자가 드래그하면 즉시 제어권을 넘겨 프로그래밍된 카메라 이동을 취소합니다.
3. 보기 프리셋: 밝은 면 / 명암 경계 / 극지방 / 가장자리 / 밤쪽 / 상세의 여섯 카메라 위치. "태양을 향한 방향 × 옆 방향 × 위쪽" 오프셋으로 구성하며, 대상이 원점에 있으면 영 벡터 퇴화를 피하기 위해 고정 방향을 사용합니다.
4. 시간 및 표시: 전체 일시정지, 독립 회전 토글, 독립 공전 토글, 0–4× 속도, 궤도선 토글, 레이블 토글, 보기 초기화. 회전/공전 상태는 UI와 엄격히 동기화되어야 합니다.

[4. 흑백 픽셀 스타일 UI(careers.kimi.com의 분위기, 순수 검정/흰색/회색, 파란색 없음)]
1. 고정폭 글꼴을 기본으로 사용하고, 숫자 / 짧은 제목 / 내비게이션에는 픽셀 글꼴(OFL 라이선스, 자체 호스팅)을 사용합니다. 중국어 본문에는 읽기 쉬운 본문 글꼴을 사용합니다.
2. 상단 바: 왼쪽에 SOLAR SYSTEM 로고(영문 텍스트와 중국어 이름), 오른쪽에 "개요 / 천체 / 표시 설정".
3. 천체 선택기: 별 / 행성 / 달로 그룹화하고, 두 자리 번호를 사용하며, 현재 항목을 강조 표시합니다(큰 색상 블록 없음). 스크롤 가능해야 합니다.
4. 왼쪽 하단 명판: 번호(예: 05/10) + 큰 제목(중국어 이름 + 영어) + 유형 레이블 + 시적인 한 줄 + 지름 데이터 + "자세히 보기 ↗". 개요 모드에서는 "표현을 위해 크기와 거리를 조정했습니다"를 표시합니다.
5. 하단 도구 모음: 일시정지 / 회전 / 공전 / 속도 / 궤도선 / 보기 초기화(아이콘 + 짧은 텍스트) + 이전/다음 스테퍼(가운데에 현재 천체의 영문 이름 표시).
6. 세부 정보 패널(오른쪽에서 슬라이드): 소개, 핵심 정보(단위 및 "약" 표기 포함), 관측 초점 버튼(각각 실제 카메라/레이어 상태에 연결되고 "현재" 표시), 데이터 출처, 추가 읽을거리 링크. 설정 패널은 "보기 / 품질" 그룹으로 나눕니다.
7. 이벤트 통과: 전체 화면 UI 레이어는 pointer-events: none을 사용하고, 버튼 / 목록 / 패널 / 도구 모음에만 auto를 사용합니다. 패널 내부 스크롤은 캔버스로 전파되지 않아야 합니다. 태양계 대신 적색왜성 하나와 암석 행성 일곱 개로 이루어진 TRAPPIST-1 외계행성계를 사용하세요. 픽셀 아트 UI, 포커스 카메라, 시간 제어는 유지하고 각 행성에는 실제 TRAPPIST-1 매개변수를 사용하세요. [5. 픽셀화된 시작 및 모션 효과]
1. 시작: 전체 화면 1비트 Bayer 순서 디더링 달 표면(이미지 샘플링 → 회색조 양자화 → 4단계 회색 → 4×4 매트릭스). 로딩 진행에 따라 디더 블록 크기가 14px에서 1.5px로 부드럽게 선명해지며(진행률 자체가 로딩 표시기), 가운데에 픽셀 글꼴 제목, 어두운 방사형 마스크, "탐험 시작 →" 버튼을 배치합니다. 진입은 사용자 클릭이 필요하며 자동 진입하지 않습니다.
2. 종료: 클릭 후 제목이 220ms 동안 페이드아웃되고, 이어서 숫자 매트릭스가 파동처럼 해체됩니다. 대각선 파면이 화면을 가로지르며(셀별 변형 포함), 파동 그라데이션을 따라 픽셀 블록이 축소·페이드되고 약 800ms 후 태양계 개요가 나타납니다.
3. 기타 모션 효과: 천체 전환 시 큰 제목과 시적인 문구는 스크램블 디코드 효과로 나타납니다(약 320/420ms). 내비게이션 버튼 글자는 2단계 롤을 적용합니다(350ms, 글자당 30ms 지연, hover와 focus 모두에서 실행). 패널은 불투명도 + 12px 오프셋으로 전환합니다(약 220ms). 세부 정보 패널 제목은 드문 블록 마스크를 통해 드러납니다(≤ 700ms).
4. prefers-reduced-motion 환경에서는 모두 즉시 전환으로 축소합니다.

[6. 정보 강화]
1. 관측 십자선: 얇은 십자선이 마우스를 따라가며, 가리킨 행성 표면의 LAT/LON 좌표를 오른쪽 상단에 실시간으로 표시합니다(터치스크린에서는 숨김).
2. 카탈로그 hover 미리보기 카드(이름 / 지름 / 태양으로부터의 거리 / 시적인 문구).
3. 완전한 키보드 제어: ←/→ 천체 전환, ↑/↓ 돌리, Space 일시정지, 1–0 바로 이동, O 개요, D 세부 정보, S 설정, H 단축키 카드, Esc 패널 닫기.
4. 관측 로그: 오른쪽 하단에 최근 3개 작업의 스크롤 가능한 고정폭 기록을 표시합니다.

[7. 모바일 및 접근성]
1. 가로 스크롤 가능한 카탈로그에서 선택 항목을 자동으로 화면에 맞춥니다. 세부 정보 / 설정은 닫을 수 있는 하단 시트로 제공하고, 터치 대상은 ≥ 44px, 안전 영역에 대응하며, 도구 모음과 패널이 서로 겹치지 않아야 합니다.
2. 시맨틱 버튼, 올바른 aria-pressed / aria-selected, 보이는 포커스, Escape로 패널을 닫고 실행 버튼에 포커스를 되돌리기, 가벼운 라이브 리전으로 로딩 상태 알림.

[8. 승인 기준(각 항목 테스트)]
1. 실행 시 픽셀 시작 화면이 보이며, 클릭하면 파동처럼 해체되어 개요(가운데 태양, 궤도선, 행성 레이블)로 전환됩니다.
2. 10개 천체를 하나씩 모두 전환합니다. 이름 / 카탈로그 선택 / 데이터가 동기화되고, 카메라는 대상을 놓치지 않고 부드럽게 추적하며, 검은 구체·셰이더 컴파일 오류·404가 없어야 합니다.
3. 지구의 세 레이어 토글은 눈에 보이는 효과를 내며, 토성의 고리는 적도와 같은 평면에 있고, 달의 명암 경계는 흰색이 날아가지 않으면서 자연스럽고, 태양은 검은 테두리가 있는 원반이어야 합니다(전체 화면 태양 표면이 아님).
4. 데스크톱 1440×900 및 휴대폰 390×844 스크린샷으로 검증합니다. 가림이나 오버플로가 없고 콘솔 오류는 0개이며, reduced-motion을 활성화해도 완전히 사용할 수 있어야 합니다.

먼저 구현 순서(씬 → 인터랙션 → UI → 모션 → 승인)를 나열한 뒤, 실행 가능한 파일을 직접 제공하세요. 미완성 플레이스홀더를 제공하거나 에셋 또는 데이터를 꾸며내지 마세요.

"흑백 픽셀 아트 스타일의 인터랙티브 태양계 웹사이트"를 완전히 구현하세요(순수 정적 사이트, 로컬 실행 가능, 정적 호스팅 배포 가능). 모든 요구사항은 아래에 나열되어 있습니다. 이에 따라 구현하고 각 항목을 검증하세요.

[1. 기술 기반]
1. 순수 정적 사이트: importmap + 네이티브 ESM, three.js 및 모든 의존성을 로컬에 포함, CDN·빌드 단계·백엔드 없음, 진입점은 index.html.
2. 이원화된 에셋 전략: 지오메트리는 three.js 내장 구체/파라메트릭 메시를 사용하고, 텍스처는 실제 천문 이미지(NASA Visible Earth, LRO 달 지도, SolarSystemScope)를 사용합니다. 표준 / HD 4K / 울트라 8K의 세 품질 등급으로 구성하고, 텍스처 로딩 관리자(Promise 캐시, SRGB와 선형 색 공간 구분, 이방성 ≤ 8, 실패 시 재시도 후 표준 등급으로 폴백)를 구현하세요.
3. 렌더러: antialias, SRGB 출력, ACESFilmicToneMapping(노출 ≈ 1.05), DPR ≤ 2(모바일에서는 ≤ 1.5), near plane 0.002, 검은 씬 배경.

[2. 씬 콘텐츠(모두 실시간 3D, 이미지나 동영상을 3D처럼 제시하지 말 것)]
1. 구성원: 태양 + 8개 행성 + 달(지구 주위를 공전하며 조석 고정). 안쪽 행성은 더 빠르게, 바깥쪽 행성은 더 느리게 공전하며 실제 비례 회전 속도와 실제 자전축 기울기(토성 27°, 천왕성 82°)를 사용합니다.
2. 태양: 발광 구체 + 희미한 헤일로, 조명용 점광원 + 희미한 주변광.
3. 지구: "법선 · 태양 방향 내적"으로 낮/밤 이중 텍스처를 실시간 전환(명암 경계 전환)하고, 밤쪽 도시 불빛은 자체 발광하며 독립적으로 토글할 수 있어야 합니다. 별도의 구름 셸(1.006R, alphaMap)과 대기 프레넬 림 라이트 셸(1.025R, 햇빛 계수 곱셈)을 포함하고, 세 레이어를 각각 토글할 수 있어야 합니다.
4. 토성: 구체와 고리는 같은 27° 기울기 그룹을 공유합니다. 고리는 XZ 평면의 파라메트릭 메시이며, UV는 반지름에 따라 가로줄 텍스처를 매핑하고 양면 렌더링, alphaTest ≈ 0.04, depthWrite = false를 적용합니다.
5. 달: 8K 달 표면 텍스처(웹에서는 4K / 8K 등급 제공)를 사용합니다. 근접 조명은 사실적인 중간 회색 느낌으로 어둡게 해야 합니다.
6. 배경: 성운 대형 텍스처가 아닌, 드문드문 고정된 별 점.

[3. 인터랙션 시스템]
1. 천체 선택: 카탈로그 클릭 / 씬에서의 레이캐스트 클릭(작은 천체에는 확대된 보이지 않는 선택 구체 제공) / 이전-다음 순환.
2. 포커스 카메라: 카메라는 움직이는 대상 천체에 계속 고정되어야 하며(매 프레임 위치 동기화), 공전 운동에 끌려가지 않아야 합니다. 시야 거리 = 경계 반지름 / 화면 채움 계수(기본 0.7, 달 0.78, 태양은 검은 테두리 포함 0.45). 850ms ease-out 부드러운 전환은 전환 중에도 대상을 실시간으로 추적해야 하며, 사용자가 드래그하면 즉시 제어권을 넘겨 프로그래밍된 카메라 이동을 취소합니다.
3. 보기 프리셋: 밝은 면 / 명암 경계 / 극지방 / 가장자리 / 밤쪽 / 상세의 여섯 카메라 위치. "태양을 향한 방향 × 옆 방향 × 위쪽" 오프셋으로 구성하며, 대상이 원점에 있으면 영 벡터 퇴화를 피하기 위해 고정 방향을 사용합니다.
4. 시간 및 표시: 전체 일시정지, 독립 회전 토글, 독립 공전 토글, 0–4× 속도, 궤도선 토글, 레이블 토글, 보기 초기화. 회전/공전 상태는 UI와 엄격히 동기화되어야 합니다.

[4. 흑백 픽셀 스타일 UI(careers.kimi.com의 분위기, 순수 검정/흰색/회색, 파란색 없음)]
1. 고정폭 글꼴을 기본으로 사용하고, 숫자 / 짧은 제목 / 내비게이션에는 픽셀 글꼴(OFL 라이선스, 자체 호스팅)을 사용합니다. 중국어 본문에는 읽기 쉬운 본문 글꼴을 사용합니다.
2. 상단 바: 왼쪽에 SOLAR SYSTEM 로고(영문 텍스트와 중국어 이름), 오른쪽에 "개요 / 천체 / 표시 설정".
3. 천체 선택기: 별 / 행성 / 달로 그룹화하고, 두 자리 번호를 사용하며, 현재 항목을 강조 표시합니다(큰 색상 블록 없음). 스크롤 가능해야 합니다.
4. 왼쪽 하단 명판: 번호(예: 05/10) + 큰 제목(중국어 이름 + 영어) + 유형 레이블 + 시적인 한 줄 + 지름 데이터 + "자세히 보기 ↗". 개요 모드에서는 "표현을 위해 크기와 거리를 조정했습니다"를 표시합니다.
5. 하단 도구 모음: 일시정지 / 회전 / 공전 / 속도 / 궤도선 / 보기 초기화(아이콘 + 짧은 텍스트) + 이전/다음 스테퍼(가운데에 현재 천체의 영문 이름 표시).
6. 세부 정보 패널(오른쪽에서 슬라이드): 소개, 핵심 정보(단위 및 "약" 표기 포함), 관측 초점 버튼(각각 실제 카메라/레이어 상태에 연결되고 "현재" 표시), 데이터 출처, 추가 읽을거리 링크. 설정 패널은 "보기 / 품질" 그룹으로 나눕니다.
7. 이벤트 통과: 전체 화면 UI 레이어는 pointer-events: none을 사용하고, 버튼 / 목록 / 패널 / 도구 모음에만 auto를 사용합니다. 패널 내부 스크롤은 캔버스로 전파되지 않아야 합니다. 별, 암석 행성, 가스 거대행성, 위성의 네 장으로 구성된 교실 모드를 추가하세요. 카메라는 각 단계에서 멈추고 칠판 스타일의 핵심 요점 세 가지를 표시하며, 교사는 스페이스바로 각 요점을 진행합니다. [5. 픽셀화된 시작 및 모션 효과]
1. 시작: 전체 화면 1비트 Bayer 순서 디더링 달 표면(이미지 샘플링 → 회색조 양자화 → 4단계 회색 → 4×4 매트릭스). 로딩 진행에 따라 디더 블록 크기가 14px에서 1.5px로 부드럽게 선명해지며(진행률 자체가 로딩 표시기), 가운데에 픽셀 글꼴 제목, 어두운 방사형 마스크, "탐험 시작 →" 버튼을 배치합니다. 진입은 사용자 클릭이 필요하며 자동 진입하지 않습니다.
2. 종료: 클릭 후 제목이 220ms 동안 페이드아웃되고, 이어서 숫자 매트릭스가 파동처럼 해체됩니다. 대각선 파면이 화면을 가로지르며(셀별 변형 포함), 파동 그라데이션을 따라 픽셀 블록이 축소·페이드되고 약 800ms 후 태양계 개요가 나타납니다.
3. 기타 모션 효과: 천체 전환 시 큰 제목과 시적인 문구는 스크램블 디코드 효과로 나타납니다(약 320/420ms). 내비게이션 버튼 글자는 2단계 롤을 적용합니다(350ms, 글자당 30ms 지연, hover와 focus 모두에서 실행). 패널은 불투명도 + 12px 오프셋으로 전환합니다(약 220ms). 세부 정보 패널 제목은 드문 블록 마스크를 통해 드러납니다(≤ 700ms).
4. prefers-reduced-motion 환경에서는 모두 즉시 전환으로 축소합니다.

[6. 정보 강화]
1. 관측 십자선: 얇은 십자선이 마우스를 따라가며, 가리킨 행성 표면의 LAT/LON 좌표를 오른쪽 상단에 실시간으로 표시합니다(터치스크린에서는 숨김).
2. 카탈로그 hover 미리보기 카드(이름 / 지름 / 태양으로부터의 거리 / 시적인 문구).
3. 완전한 키보드 제어: ←/→ 천체 전환, ↑/↓ 돌리, Space 일시정지, 1–0 바로 이동, O 개요, D 세부 정보, S 설정, H 단축키 카드, Esc 패널 닫기.
4. 관측 로그: 오른쪽 하단에 최근 3개 작업의 스크롤 가능한 고정폭 기록을 표시합니다.

[7. 모바일 및 접근성]
1. 가로 스크롤 가능한 카탈로그에서 선택 항목을 자동으로 화면에 맞춥니다. 세부 정보 / 설정은 닫을 수 있는 하단 시트로 제공하고, 터치 대상은 ≥ 44px, 안전 영역에 대응하며, 도구 모음과 패널이 서로 겹치지 않아야 합니다.
2. 시맨틱 버튼, 올바른 aria-pressed / aria-selected, 보이는 포커스, Escape로 패널을 닫고 실행 버튼에 포커스를 되돌리기, 가벼운 라이브 리전으로 로딩 상태 알림.

[8. 승인 기준(각 항목 테스트)]
1. 실행 시 픽셀 시작 화면이 보이며, 클릭하면 파동처럼 해체되어 개요(가운데 태양, 궤도선, 행성 레이블)로 전환됩니다.
2. 10개 천체를 하나씩 모두 전환합니다. 이름 / 카탈로그 선택 / 데이터가 동기화되고, 카메라는 대상을 놓치지 않고 부드럽게 추적하며, 검은 구체·셰이더 컴파일 오류·404가 없어야 합니다.
3. 지구의 세 레이어 토글은 눈에 보이는 효과를 내며, 토성의 고리는 적도와 같은 평면에 있고, 달의 명암 경계는 흰색이 날아가지 않으면서 자연스럽고, 태양은 검은 테두리가 있는 원반이어야 합니다(전체 화면 태양 표면이 아님).
4. 데스크톱 1440×900 및 휴대폰 390×844 스크린샷으로 검증합니다. 가림이나 오버플로가 없고 콘솔 오류는 0개이며, reduced-motion을 활성화해도 완전히 사용할 수 있어야 합니다.

먼저 구현 순서(씬 → 인터랙션 → UI → 모션 → 승인)를 나열한 뒤, 실행 가능한 파일을 직접 제공하세요. 미완성 플레이스홀더를 제공하거나 에셋 또는 데이터를 꾸며내지 마세요.