일본식 벚꽃 계곡 인터랙티브 3D 경관 웹페이지

브라우저에서 실시간으로 상호작용할 수 있는 완성도 높은 3D 경관 웹페이지를 바로 제작해 주세요. 테마: 일본식 벚꽃 계곡. HTML, CSS, JavaScript로 구현해 주세요. 이미지를 생성하지 말고, 디자인 계획만 제시하지도 마세요. 배경 이미지 한 장에 패럴랙스 효과를 더해 3D처럼 보이게 만들지 마세요. 실제로 실행하고 탐험할 수 있는 완성물을 원합니다. 【1. 작품 방향】 완전하고 연속적이며 원근감이 살아 있는 계곡 경관이어야 합니다. 고립된 작은 소품이나 공중에 뜬 섬, 받침대가 있는 디오라마가 아니며 단순한 기술 데모도 아닙니다. 스타일은 현대적인 고급 복셀 / voxel art입니다. 입방체 기하의 조형 언어는 유지하되, 화면은 고해상도와 안티앨리어싱을 적용하고 빛과 그림자는 섬세하게 표현해 주세요. 복고풍의 저해상도 픽셀 아트처럼 만들지 말고, 큼직한 블록을 거칠게 쌓지도 말며, 화면 전체에 픽셀 필터를 씌우지도 마세요. 시각적 품질을 우선하세요. 기능을 몇 가지 줄이더라도 구도, 머티리얼과 조명을 희생하지 마세요. 【2. 레퍼런스 이미지 사용 방식】 레퍼런스 이미지가 있다면 먼저 구도의 위계, 스케일, 조명과 색상 관계를 파악하세요. 분위기와 시각적 언어만 참고해 장면을 새롭게 설계하세요. 건물, 나무, 산과 도로의 위치를 그대로 옮기거나 1:1로 복제하지 마세요. 레퍼런스 이미지는 웹페이지의 배경 소재가 아닙니다. 장면 자체가 실제 3D 지오메트리로 구성되어야 합니다. 【3. 장면 구성】 페이지를 처음 열었을 때부터 완성도 높고 매력적인 화면이 보여야 합니다. 사용자가 먼저 카메라를 돌려야 보기 좋은 구도를 찾을 수 있어서는 안 됩니다. 디오라마식 아이소메트릭 탑뷰 카메라가 아니라 원근 카메라를 사용하세요. 화면에는 전경, 중경, 원경이 뚜렷하게 드러나야 합니다. 전경: 존재감 있는 오래된 벚나무 한 그루에 바위, 풀과 식물, 석등, 소량의 낙화를 배치하세요. 화면 가장자리에 자연스러운 프레임을 만들되, 강과 다리, 주요 건물을 가리지 않게 하세요. 중경: 구불구불한 강이 시선을 화면 안쪽으로 이끌고, 붉은 목조 다리가 강을 가로지르게 하세요. 마을, 찻집, 신사와 오솔길은 지형을 따라 배치하고, 건물 사이에는 실제로 이동할 수 있는 동선을 구현하세요. 지면에는 고저 차이와 강변, 자연스러운 지형 전환을 만들고, 평면 위에 모델을 균일하게 배치하지 마세요. 원경: 산비탈의 다층 탑, 서로 다른 거리에 있는 숲과 산등성이, 그리고 멀리 보이는 설산을 배치하세요. 거리감은 스케일 변화, 가림, 색온도 변화와 대기 원근으로 표현하세요. 먼 곳의 오브젝트를 단순히 작게 만드는 방식만 사용하지 마세요. 모든 요소를 균일하게 채워 넣지 마세요. 주제와 보조 요소의 위계, 밀도 변화, 여백과 분명한 시각적 초점이 필요합니다. 【4. 조형과 화면 품질】 벚나무: 줄기에는 굴곡과 가지 분기, 뿌리를 표현하고, 수관은 불규칙한 꽃송이 군집으로 구성하세요. 빈틈과 두께 변화를 주고 가지가 보이게 하세요. 규칙적인 구체 몇 개나 네모난 덩어리처럼 만들지 마세요. 건축물: 지붕에는 겹쳐진 기와, 처마, 보와 기둥, 창살을 표현하세요. 건물마다 용도와 규모, 높이에 차이를 두고, 같은 집 한 채를 복제해 계곡 전체를 채우지 마세요. 지형: 강변에는 젖은 바위와 풀숲, 식생으로 이어지는 자연스러운 전환을 넣으세요. 지나치게 규칙적인 계단, 반복되는 줄무늬, 체크무늬와 눈에 띄는 프로시저럴 생성 격자는 피하세요. 수면: 주변 경관이 비치고, 적당한 물결과 깊이 변화, 강변과의 자연스러운 전환이 반드시 표현되어야 합니다. 가능하면 실제 장면의 반사를 사용하세요. 성능을 낮춰야 하는 경우에도 시각적으로 자연스러운 결과를 유지해야 합니다. 깜빡이는 노이즈, 과도한 왜곡이나 파란색 평면 하나로 물을 대신하지 마세요. 디테일: 비단잉어, 낙화, 반딧불이, 폭포와 멀리 나는 새를 소량 추가할 수 있습니다. 모든 디테일은 분위기를 살리는 역할을 해야 하며, 화면이 산만해 보이게 해서는 안 됩니다. 모델 수를 많아 보이게 하려고 디테일을 무작정 쌓지 마세요. 【5. 색상과 분위기】 기본 분위기는 블루 아워입니다. 차가운 색감의 계곡과 먼 산, 부드러운 분홍빛 벚꽃, 따뜻하지만 과노출되지 않은 등불과 창가의 빛을 표현하세요. 따뜻한 빛은 사람이 활동하는 장소에 집중하고, 환경 전체를 주황색으로 물들이지 마세요. 부드러운 그림자, 오브젝트가 맞닿는 부분의 명암, 적절한 노출이 필요합니다. 번짐 효과는 절제하고, 안티앨리어싱과 거리에 따른 층위가 있는 옅은 안개를 적용하세요. 화면이 하얗게 뜨거나 잿빛으로 흐려지지 않게 하고, 과도한 채도와 짙은 안개, 과노출된 조명, 눈에 띄는 계단 현상을 피하세요. 복셀 형태는 선명하게 보여도 되지만, 렌더링 자체가 거칠어서는 안 됩니다. 추가로 ‘이른 아침’과 ‘비 오는 날’ 두 가지 분위기도 제공하세요. 전환할 때 하늘, 환경광, 안개와 국소 효과도 함께 변경하고, 배경색만 바꾸는 데 그치지 마세요. 【6. 인터랙션 및 인터페이스】 완성도 있게 구성한 카메라 시점 네 가지를 제공하세요: 계곡 전경, 강변 로우 앵글, 사찰 오솔길, 산비탈 부감 시점. 전환은 부드러워야 하며, 각 시점마다 독립적인 구도상의 가치가 있어야 합니다. 기본 인터랙션: 마우스를 드래그해 시점을 둘러보고, 휠로 확대·축소하거나 앞으로 이동할 수 있게 하세요. 터치스크린에서는 드래그와 두 손가락 확대·축소를 지원하세요. 시점 초기화, 인터페이스 숨기기, 현재 화면 저장 기능을 제공하세요. 선택 기능: 자유 탐색, 느린 카메라 투어, 환경음. 환경음은 기본적으로 꺼 두고, 사용자가 직접 클릭한 경우에만 재생하세요. 추가 기능 때문에 기본 화면의 완성도가 떨어져서는 안 됩니다. 인터페이스는 절제되고 세련된 디자인으로 구성하되, 경관이 중심이 되게 하세요. 제목과 컨트롤 바는 가장자리에 배치해 시각적 초점을 가리지 않게 하세요. 데스크톱과 모바일 모두에서 버튼이 화면 밖으로 벗어나거나, 텍스트가 겹치거나, 조작할 수 없는 문제가 없어야 합니다. 【7. 개발 및 성능】 Three.js / WebGL과 버전이 고정되고 서로 호환되는 CDN 의존성을 사용할 수 있습니다. 검증된 렌더링 기능을 우선 사용하고, ‘의존성 없음’을 위해 엔진 전체를 다시 작성하지 마세요. 직접 작성하는 HTML, CSS, JavaScript는 가능한 한 하나의 HTML 파일에 정리하세요. 장면은 프로시저럴 지오메트리와 머티리얼로 생성하고, 외부 이미지나 3D 모델 리소스에 의존하지 마세요. 반복되는 오브젝트에는 적절한 배치 렌더링 또는 인스턴싱을 사용하세요. 세분화, 그림자, 반사와 렌더링 해상도를 합리적인 수준으로 제어하세요. 고화질 모드와 경량 모드를 제공하고, 모바일에서는 기본적으로 가벼운 설정을 사용하세요. 복셀 수를 무한정 늘려 디테일을 확보하려 하지 마세요. 로딩 안내, WebGL을 지원하지 않을 때의 안내와 필요한 오류 처리를 추가하세요. 사운드를 켜지 않은 상태에서는 자동 재생하지 말고, 동작 줄이기 시스템 설정을 존중하세요. 【8. 납품 전 검수】 코드 작성이 끝났다고 바로 납품하지 마세요. 현재 환경에서 브라우저 실행과 스크린샷 촬영을 지원한다면, 먼저 페이지를 실제로 열어 보고 기본 카메라, 네 가지 시점, 분위기 전환, 데스크톱 및 모바일 레이아웃을 점검한 다음, 스크린샷을 바탕으로 눈에 띄는 구도, 노출, 오브젝트 가림과 렌더링 문제를 수정하세요. 중점적으로 확인할 항목: 빈 화면, 로딩 실패, 콘솔 오류가 발생하지 않는지 확인하세요. 클리핑, 깜빡임, 그림자 밴딩, 과다 노출, 수면 이상이 없는지 확인하세요. 기본 화면이 작은 샌드박스가 아니라 실제로 완성된 경관처럼 보이는지 확인하세요. 기능 버튼이 실제로 작동하고 모바일에서 화면 밖으로 벗어나지 않는지 확인하세요. 브라우저 스크린샷으로 검수할 수 있지만, 이미지 생성 도구는 호출하지 마세요. 완료하지 못한 테스트는 사실대로 설명하고, 검증했다고 주장하지 마세요. 최종 납품물: 1. 실제로 존재하고 열 수 있는 HTML 파일 또는 현재 환경에서 지원하는 인터랙티브 프리뷰. 2. 스크린샷을 촬영할 수 있다면 실제 브라우저 렌더링 스크린샷 한 장을 첨부하세요. 3. 조작 방법과 필요한 실행 조건을 간단히 설명하세요. 바로 제작을 완료하세요. 중요하지 않은 세부 사항은 일관된 디자인 원칙에 따라 스스로 결정하고, 스스로 해결할 수 있는 구현 문제를 반복해서 저에게 결정해 달라고 하지 마세요.