뭄바이 투어를 위한 시네마틱 스크롤 기반 여행 웹사이트

"뭄바이: 멈추지 않는 도시"를 위한 프리미엄 시네마틱 단일 페이지 웹사이트를 구축하세요. 경험은 기존 관광 웹사이트라기보다 인터랙티브 여행 영화처럼 느껴져야 하며, 전체 화면 고정 스크롤 시퀀스, 레이어드 사진, 극적인 깊이감, 부드러운 패럴랙스 움직임, 대형 에디토리얼 타이포그래피, 몰입형 스토리텔링, 인터랙티브 목적지 카드를 사용합니다. 1. 핵심 비주얼 방향 프리미엄 여행 다큐멘터리와 고급 에디토리얼 관광 웹사이트에서 영감을 받은 시네마틱하고 몰입감 있는 비주얼 경험을 만드세요. 웹사이트는 다음을 결합해야 합니다: 전체 화면 시네마틱 뭄바이 사진 전경, 중경, 배경 레이어드 이미지 스크롤 기반 스토리텔링 부드러운 깊이 기반 패럴랙스 미세한 포인터 반응 움직임 크고 우아한 세리프 타이포그래피 미니멀한 크림색 인터페이스 요소 분위기 있는 골든아워 조명 깊은 그림자와 따뜻한 하이라이트 위치 간 부드러운 줌 전환 움직임, 스케일, 블러, 투명도를 통한 매끄러운 시각적 전환 프리미엄 에디토리얼 여행 사진 최소한의 UI 혼잡함과 강력한 시각적 위계 일반적인 관광 템플릿 스타일, 과도한 카드, 그라디언트, 네온 색상, 만화 삽화, 전통적인 박스형 웹사이트 섹션은 피하세요. 2. 히어로 신 골든아워의 뭄바이를 담은 숨 막히는 전체 화면 시네마틱 뷰로 시작하세요. 여러 시각적 레이어로 장면을 구성하세요: 배경: 뭄바이 스카이라인, 아라비아해, 분위기 있는 하늘, 먼 건물들, 따뜻한 일몰 안개. 중경: 인도 관문과 주변의 역사적인 건축물. 전경: 강한 시네마틱 깊이를 만드는 건축물 또는 해안가 요소. 거대한 중앙 정렬 세리프 타이틀을 배치하세요: MUMBAI 그 아래: 인도의 꿈, 이야기, 거리, 바다, 그리고 멈추지 않는 에너지의 도시. 크림색 알약 태그 3개를 추가하세요: Heritage Street Life Arabian Sea 장면은 포인터 움직임에 미세하게 반응하여 전경 요소가 먼 요소보다 더 많이 움직여야 합니다. 방문자가 스크롤하면 MUMBAI는 천천히 위로 올라가고, 약간 줄어들며, 사라지고 전경 건축물은 시청자를 향해 확장됩니다. 3. 내비게이션 시네마틱 장면 위에 투명한 내비게이션 바를 만드세요. 왼쪽: Mumbai Experiences 중앙 내비게이션: Explore Landmarks Culture Tour Book 오른쪽: EN ⌄ 넉넉한 간격의 우아한 크림색 타이포그래피를 사용하세요. 사진이 지배적으로 보이도록 내비게이션을 시각적으로 가볍게 유지하세요. 4. 스크롤 경험 약 3,500~4,500픽셀의 스크롤 거리에 걸친 긴 고정 시네마틱 스테이지를 만드세요. 뷰포트는 고정된 상태로 유지되고 그 동안 뭄바이는 방문자 주변에서 변형됩니다. 스크롤은 일반적인 웹페이지 섹션 사이를 이동하는 것이 아니라 뭄바이를 물리적으로 여행하는 것처럼 느껴져야 합니다. 모든 스크롤 제어 애니메이션에 보간 및 스무드스텝 스타일 이징을 사용하세요. 부드러운 렌더링을 위해 requestAnimationFrame을 사용하세요. 데스크톱에서 미세한 스크롤 스무딩과 포인터 패럴랙스를 추가하세요. 콘텐츠 시퀀스를 유지하면서 관성 및 포인터 패럴랙스를 비활성화하여 prefers-reduced-motion을 지원하세요. 5. 신 1: 인도 관문 인도 관문이 구성을 지배하는 것으로 시작하세요. 스크롤이 시작되면: 히어로 타이포그래피가 위로 이동하고 페이드 아웃 전경 건축물이 천천히 확대 배경은 더 느린 속도로 이동 카메라가 인도 관문을 향해 밀어붙이는 것처럼 보임 대기 안개가 미세하게 증가 주변 레이어가 분리되어 깊이감 생성 중앙 정렬 스토리 카피 소개: 뭄바이가 바다를 만나는 관문. 지원 텍스트: 1924년부터 아라비아해 옆에 서 있는 인도 관문은 뭄바이의 가장 상징적인 랜드마크 중 하나로 남아 있으며, 도시를 발견하기 위한 완벽한 출발점입니다. 그 아래 표시: 1924 Gateway completed 20th Century Mumbai’s iconic waterfront landmark 타이포그래피를 우아하고, 미니멀하며, 중앙 정렬되고, 시네마틱하게 유지하세요. 6. 신 2: 마린 드라이브 마린 드라이브를 향한 시네마틱 변환으로 계속 스크롤하세요. 인도 관문 전경은 바깥쪽으로 분리되어 뷰포트 밖으로 이동하고 그 아래에 새로운 전체 화면 해안 장면이 나타납니다. 표시: Arabian Sea Marine Drive promenade Curving coastline Art Deco buildings Moving traffic represented visually Warm sunset reflections Atmospheric city lights beginning to appear 나가는 레이어에 임시 깊이 블러를 적용하고 새 장면이 선명해집니다. 스토리 헤딩: 뭄바이는 아라비아해 옆에서 숨 쉰다. 지원 카피: 바닷바람, 아르데코 건축, 일몰, 교통, 도시 생활이 뭄바이에서 가장 알아볼 수 있는 산책로 중 하나를 따라 만나는 마린 드라이브의 곡선을 따라가 보세요. 시각적 전환은 카메라가 이전 사진을 통과하여 마린 드라이브로 이동하는 것처럼 느껴져야 합니다. 7. 신 3: 차트라파티 시바지 마하라지 터미널 차트라파티 시바지 마하라지 터미널을 중심으로 한 건축적 장면으로 전환하세요. 다음을 강조하는 극적인 저녁 또는 골든아워 사진을 사용하세요: Gothic Revival architecture Stone details Towers and domes Mumbai traffic Historic streets Dense urban atmosphere 헤딩: 역사는 뭄바이 속도로 움직인다. 지원 텍스트: 뭄바이의 가장 위대한 건축 랜드마크 중 하나를 탐험하고 역사적인 석조 건축물과 현대 도시의 끊임없는 움직임 사이의 놀라운 대비를 경험하세요. 강한 패럴랙스 깊이를 만들기 위해 전경 교통 또는 건축 요소를 사용하세요. 8. 신 4: 뭄바이 거리 생활 기념비적인 건축물에서 뭄바이의 인간적인 규모로 이동하세요. 다음과 같은 진정한 시각적 참조를 특징으로 하는 몰입형 거리 구성을 만드세요: Kala Ghoda Colaba streets Local cafés Black-and-yellow taxis Street vendors Historic façades Busy pedestrian streets Local markets 헤딩: 진짜 뭄바이는 랜드마크 사이에 살고 있다. 지원 카피: 음식, 건축, 시장, 택시, 대화, 카페, 그리고 뭄바이의 성격을 드러내는 수많은 작은 이야기들로 가득한 거리를 걸어보세요. 프레젠테이션을 혼란스럽기보다는 정교하고 다큐멘터리처럼 유지하세요. 9. 목적지 탐색기 시네마틱 스크롤의 마지막 단계 근처에서 인터랙티브 가로 목적지 슬라이더를 도입하세요. 슬라이더는 오른쪽에서 뷰포트로 극적으로 날아와야 합니다. 둥근 모서리, 검은색 타이포그래피, 작은 카테고리 라벨, 간결한 설명, 사진 또는 삽화 위치 핀이 있는 대형 크림색 카드를 만드세요. 카드: Gateway of India Category: Waterfront Landmark Description: Begin beside Mumbai’s most recognizable monument overlooking the Arabian Sea. Marine Drive Category: Coastal Mumbai Description: Experience Mumbai’s famous waterfront boulevard and sweeping sea views. Chhatrapati Shivaji Maharaj Terminus Category: Architecture Description: Discover one of Mumbai’s most spectacular historic railway landmarks. Kala Ghoda Category: Arts District Description: Explore heritage architecture, galleries, cafés, museums, and Mumbai’s creative side. Colaba Category: Historic Quarter Description: Walk through lively streets filled with architecture, shopping, cafés, and local character. Dhobi Ghat Category: Local Mumbai Description: See one of Mumbai’s most distinctive working landmarks and understand another layer of everyday city life. 카드는 부드러운 관성 애니메이션으로 가로로 움직여야 합니다. 원형 이전 및 다음 화살표 컨트롤을 포함하세요. 카드 세트를 복제하고 전환 후 슬라이더 위치를 정규화하여 매끄러운 무한 루프를 만드세요. 카드는 마우스, 터치, 키보드 상호작용을 지원해야 합니다. 10. 가이드 투어 전환 섹션 목적지 시퀀스 후 극적인 최종 예약 장면으로 전환하세요. 빛나는 건물, 해안 조명, 교통 흔적, 아라비아해가 있는 블루아워의 시네마틱 뭄바이 스카이라인을 사용하세요. 대형 헤딩: 뭄바이를 방문만 하지 마세요. 경험하세요. 지원 카피: 랜드마크, 유산, 거리, 건축, 문화, 잊을 수 없는 해안 전망을 연결하는 가이드 시티 투어로 뭄바이를 발견하세요. 기본 CTA: Book Your Mumbai Tour 보조 CTA: View Tour Details 버튼 아래에 세 가지 간결한 신뢰 지표를 표시하세요: Local Guided Experience Iconic Mumbai Highlights Curated City Route 예약 CTA는 미니멀한 에디토리얼 미학을 유지하면서 웹사이트에서 가장 강력한 전환 요소여야 합니다. 11. 인터랙션 디자인 모든 모션은 장식적이기보다 시네마틱하게 느껴져야 합니다. 스크롤 위치를 사용하여 제어: Layer translation Image scale Scene opacity Depth blur Brightness Saturation Story-panel visibility Foreground separation Background zoom Horizontal destination-card entrance 포인터 움직임은 미세한 패럴랙스를 생성해야 합니다. 전경 요소는 배경 요소보다 더 강하게 반응해야 합니다. 움직임을 공격적이거나 산만하게 만들지 마세요. 애니메이션은 갑작스러운 CSS 전환 대신 부드러운 보간을 사용해야 합니다. 12. 타이포그래피 주요 타이틀과 목적지 스토리텔링에는 우아한 고대비 에디토리얼 세리프를 사용하세요. 내비게이션, 설명, 라벨, 버튼, 지원 정보에는 깔끔한 현대 산세리프를 사용하세요. MUMBAI라는 단어는 처음에 매우 큰 타이포그래피로 뷰포트를 지배해야 합니다. 순수한 흰색보다 크림색 또는 따뜻한 오프화이트 텍스트를 사용하세요. 제안 팔레트: Cream: #FDF1E1 Charcoal: #111411 Deep Night: #0B1110 Arabian Sea Blue: #4AB5E0 Warm Sunset: #D99A55 색상을 절제해서 사용하고 사진이 대부분의 시각적 팔레트를 정의하도록 하세요. 13. 기술 요구 사항 요청된 기술 스택을 사용하여 웹사이트를 세련된 반응형 경험으로 구축하세요. 간단한 구현을 위해 다음을 사용하세요: HTML CSS Vanilla JavaScript 기본적으로 React를 사용하는 AI 웹사이트 빌더의 경우, 시각적 동작을 변경하지 않고 React 컴포넌트로 동일한 아키텍처를 재현하세요. 다음을 사용하세요: 시네마틱 스테이지에 position: sticky 애니메이션 상태에 CSS 사용자 정의 속성 스크롤 애니메이션에 requestAnimationFrame 성능 이동에 transform: translate3d() 애니메이션 요소에만 will-change 반응형 clamp() 크기 조정 시네마틱 사진에 object-fit: cover 레이어드 z-index 구성 스무드스텝 보간 GPU 친화적 변환 시맨틱 HTML 접근 가능한 내비게이션 설명적인 aria-labels 키보드 접근 가능한 목적지 카드 반응형 데스크톱, 태블릿, 모바일 레이아웃 플랫폼에서 요구하지 않는 한 불필요한 타사 애니메이션 라이브러리를 피하세요. 14. 반응형 동작 데스크톱은 완전한 시네마틱 레이어드 경험을 제공해야 합니다. 태블릿은 과도한 타이포그래피와 전경 스케일을 줄이면서 동일한 스크롤 내러티브를 유지해야 합니다. 모바일은 다음을 수행해야 합니다: 시네마틱 스토리텔링 유지 패럴랙스 강도 줄이기 사진을 지능적으로 재구성 MUMBAI를 읽을 수 있게 유지 필요한 경우 내비게이션을 가로로 스크롤 가능하게 만들기 약 80~85vw 목적지 카드 사용 큰 터치 대상 유지 예약 CTA를 눈에 띄게 유지 가로 페이지 오버플로 방지 모든 시네마틱 장면을 일반적인 모바일 섹션으로 단순히 쌓지 마세요. 15. 이미지 방향 고해상도, 사실적, 시네마틱 뭄바이 사진을 사용하세요. 다음의 진정한 비주얼을 우선시하세요: Gateway of India Marine Drive Chhatrapati Shivaji Maharaj Terminus Kala Ghoda Colaba Dhobi Ghat Arabian Sea Mumbai skyline Black-and-yellow taxis Historic South Mumbai architecture 이미지는 프리미엄 여행 다큐멘터리의 프레임처럼 느껴져야 합니다. 골든아워, 일몰, 블루아워, 분위기 있는 주간 조명, 사실적인 거리 조명, 깊은 원근감, 전경 프레이밍, 자연스러운 군중, 진정한 뭄바이 건축을 선호하세요. 명백히 AI 생성된 건축물, 부정확한 랜드마크, 미래지향적 뭄바이 이미지, 일반적인 인도 이미지, 과포화 사진, 진부한 관광 그래픽을 피하세요. 16. 최종 경험 최종 웹사이트는 뭄바이를 가로지르는 시네마틱 여행을 스크롤하는 것처럼 느껴져야 합니다. 시퀀스는 자연스럽게 흘러야 합니다: MUMBAI HERO ↓ GATEWAY OF INDIA ↓ MARINE DRIVE ↓ CSMT ↓ MUMBAI STREET LIFE ↓ ICONIC DESTINATIONS ↓ BOOK YOUR GUIDED CITY TOUR 방문자는 예약 CTA에 도달하기 전에 점점 더 뭄바이 깊숙이 끌려 들어가는 느낌을 받아야 합니다. 기존 웹사이트 레이아웃보다 분위기, 스토리텔링, 사진, 깊이감, 움직임, 감정적 몰입을 우선시하세요. 완성된 경험은 고급 뭄바이 관광 회사에 충분히 프리미엄하게 보이면서도 누군가가 즉시 도시를 탐험하고 가이드 투어를 예약하고 싶게 만들 만큼 흥미로워야 합니다.