0018

HTML, CSS, JavaScript만 사용해서 단일 HTML 파일로 몰입형 스파이럴 갤러리 웹사이트를 만들어줘. 갤러리 이름은 "Spiral Gallery Experience"이고, 전체적으로 어두운 다크 테마(거의 블랙)에 핑크-레드 네온 포인트(#ff3366)를 활용한 모던 다크 갤러리 디자인으로 만들어줘. 영문 전용 사이트야.

프로그램 개요
총 10개 섹션으로 구성된 3D 스파이럴(나선형) 회전 갤러리야. 일반적인 스크롤 웹사이트가 아니라, 각 섹션 안에 여러 개의 카드(이미지/영상/텍스트)가 3D 원형 배치되어 있고, 스크롤로 회전하며 탐색하는 구조야. 섹션 순서는 아래와 같아.

(1) Featured (2) Collections (3) Artists (4) Exhibitions (5) Archive (6) Digital Art (7) Photography (8) Video Art (9) Installations (10) About

페이지 진입 시 로딩 화면이 있고, 커스텀 커서도 포함해줘.

기능
2-1. 로딩 화면 페이지 처음 열리면 다크 배경(#0f0f0f) 위에 핑크-레드(#ff3366) 테두리의 원형 스피너가 회전하는 애니메이션을 보여줘. 약 1.5초 후에 로딩 화면이 페이드아웃 되면서 사라지게 해줘.

2-2. 커스텀 커서 마우스 포인터를 핑크-레드(#ff3366) 원형(20px)으로 대체해줘. mix-blend-mode: difference 적용해줘. 커서가 마우스를 약간 느리게 따라오는 지연(lerp) 효과를 넣어줘. 갤러리 카드나 네비게이션 도트 위에 올리면 커서가 3배로 커지게 해줘. 768px 이하 모바일에서는 커스텀 커서 숨겨줘.

2-3. 플로팅 네비게이션 화면 오른쪽 중앙에 세로로 배열된 원형 도트 네비게이션을 만들어줘. 각 도트는 작은 원형(12px) 테두리 스타일이고, 현재 활성 섹션의 도트는 핑크-레드로 채워지면서 1.5배 커져. 각 도트에 호버하면 왼쪽에 섹션 이름 라벨이 페이드인 되게 해줘. 도트 개수가 많으니 네비게이션 영역에 max-height와 스크롤바를 적용해줘.

2-4. 3D 스파이럴(나선형) 카드 배치 각 섹션의 콘텐츠 카드들이 3D 공간에서 원형으로 배치되어야 해. CSS perspective(1000px)와 transform-style: preserve-3d를 사용해줘. 각 카드는 원형 경로 위에 등간격으로 배치되고(삼각함수로 x, z 좌표 계산), y축으로는 위아래로 약간 오프셋을 줘서 나선형 느낌을 만들어줘. 스크롤(또는 방향키)로 회전축(rotateY)을 돌려서 카드를 탐색하는 방식이야. 현재 정면에 온 카드만 active 상태가 되어 밝게 보이고, 나머지는 어둡게 처리해줘.

2-5. 갤러리 카드 (이미지/영상) 카드 크기는 500×350px로 해줘. 이미지 또는 영상을 꽉 채우고(object-fit: cover), 모서리는 15px 라운드 처리해줘. 기본 상태에서 이미지는 brightness(0.7) contrast(1.1) 필터를 적용하고, active 상태에서 필터를 제거하면서 핑크-레드 글로우 박스쉐도우를 넣어줘. 카드 호버 시 약간의 3D 틸트(rotateY 5deg, rotateX -3deg) 효과를 줘. 카드 우상단에 큰 번호(96px, 핑크-레드, 매우 투명하게)를 장식으로 넣고, 하단에 그라디언트 오버레이 위로 제목, 서브타이틀, 설명 텍스트가 active일 때 나타나게 해줘. 영상 카드는 autoplay, muted, loop, playsinline으로 재생해줘.

2-6. 텍스트 패널 (인용문/설명문) 이미지/영상 카드 사이에 텍스트 전용 패널도 섞어줘. 크기는 갤러리 카드와 동일(500×350px). 반투명 다크 배경에 미세한 흰색 테두리, backdrop-filter: blur(10px), 20px 라운드 처리해줘. 호버 시 배경이 약간 밝아지고 테두리가 핑크-레드로 변하게 해줘. 인용문 타입은 큰 세리프 이탤릭 텍스트 + 저자명, 설명문 타입은 핑크-레드 제목 + 본문 텍스트 형식이야.

2-7. 포커스 뷰 (카드 확대 보기) 갤러리 카드를 클릭하면 해당 카드가 화면 중앙으로 이동하면서 1.2배 확대되는 포커스 뷰가 활성화돼. 뒤에 어두운 오버레이(80% 불투명도)가 깔리고, 우상단에 원형 닫기 버튼(X 모양, 호버 시 핑크-레드로 변하면서 90도 회전)이 나타나. 오버레이 클릭이나 ESC 키로도 닫을 수 있게 해줘. 포커스 상태에서는 스크롤 비활성화해줘.

2-8. 섹션 인디케이터 화면 좌상단에 현재 섹션 정보를 표시해줘. 배경에 매우 크고 투명한(5% 불투명도) 섹션 번호(120px)를 장식으로 깔고, 그 위에 섹션 이름을 표시해줘. 섹션 전환 시 이름이 핑크-레드로 잠시 하이라이트되는 애니메이션을 넣어줘.

2-9. 프로그레스 바 화면 맨 하단에 가로 전체 폭의 얇은(3px) 프로그레스 바를 넣어줘. 배경은 흰색 10% 투명, 채움은 핑크-레드로 현재 진행률(현재 섹션/전체 섹션)을 표시해줘.

2-10. 네비게이션 방법 마우스 휠(스크롤)로 같은 섹션 내 카드를 회전 탐색하고, 마지막 카드에서 더 스크롤하면 다음 섹션으로 넘어가게 해줘. 키보드 좌우 방향키로 카드 탐색, 상하 방향키로 섹션 이동도 지원해줘. 모바일 터치 제스처도 지원해줘(세로 스와이프=섹션 이동, 가로 스와이프=카드 탐색). 하단 중앙에 조작 힌트("↕ Scroll to Navigate", "⎵ Click to Focus")를 작은 텍스트로 표시해줘.

디자인
3-1. 컬러 팔레트 메인 배경: #0f0f0f (거의 블랙) 포인트 컬러: #ff3366 (핑크-레드 네온) 텍스트 뮤트: #666 텍스트 라이트: #e0e0e0 카드 배경: rgba(255,255,255,0.02) 카드 테두리: rgba(255,255,255,0.1)

3-2. 서체 Google Fonts에서 아래 4개 불러와줘. Oswald (200, 400, 600) → 제목, 섹션 이름용 Crimson Text (400, italic) → 인용문, 장식 텍스트용 Space Mono (400, 700) → 본문, UI, 모노스페이스 분위기용 Archivo Black → 큰 장식 번호, 섹션 인디케이터용 기본 body 서체는 'Space Mono', monospace로 해줘.

3-3. 전체 톤앤무드 어둡고 몰입감 있는 갤러리/뮤지엄 분위기. 네온 핑크 포인트가 어둠 속에서 강렬하게 빛나는 느낌. 전체적으로 cubic-bezier(0.23, 1, 0.32, 1) 이징 커브를 기본으로 써줘. 3D perspective 효과로 공간감을 극대화해줘.

3-4. 각 섹션 콘텐츠 및 이미지 상세

(1) Featured — 6개 아이템

이미지: "Digital Horizons" / Contemporary Vision / src: https://cdn.midjourney.com/d88a0583-0025-40b1-9d51-0fda4a81db42/0_0.png
인용문: "Art is the lie that enables us to realize the truth." — Pablo Picasso
영상: "Fluid Motion" / Video Installation / src: https://cdn.midjourney.com/video/efbc89fc-08ba-4326-b0ae-f45b69ab5283/3.mp4
이미지: "Abstract Reality" / Mixed Media / src: https://cdn.midjourney.com/d88a0583-0025-40b1-9d51-0fda4a81db42/0_1.png
설명문: "New Perspectives" / Exploring the intersection of technology and human expression through innovative artistic mediums.
이미지: "Featured Work" / Editor's Choice / src: https://cdn.midjourney.com/d88a0583-0025-40b1-9d51-0fda4a81db42/0_2.png
(2) Collections — 7개 아이템

설명문: "2024 Collection" / A curated selection of works that define contemporary digital artistry.
이미지: "Chromatic Dreams" / Digital Art / src: https://cdn.midjourney.com/d88a0583-0025-40b1-9d51-0fda4a81db42/0_2.png
영상: "Nature Reimagined" / Environmental Art / src: https://cdn.midjourney.com/video/8c31b1e5-f7c1-488d-8eb2-3afff61b32a8/0.mp4
인용문: "Every artist was first an amateur." — Ralph Waldo Emerson
이미지: "Minimal Forms" / Sculptural Series / src: https://cdn.midjourney.com/d88a0583-0025-40b1-9d51-0fda4a81db42/0_3.png
영상: "Animated Dreams" / Motion Graphics / src: https://cdn.midjourney.com/video/4e36274c-4924-4079-9b97-ae83c02afff1/1.mp4
설명문: "Curated Excellence" / Each piece selected for its unique contribution to the contemporary art dialogue.
(3) Artists — 7개 아이템

이미지: "Emerging Voices" / New Generation / src: https://cdn.midjourney.com/d42ae88a-c9ee-4cde-87f8-0c8b8a26bffb/0_0.png
설명문: "Featured Artists" / Showcasing visionaries who challenge conventions and redefine artistic boundaries.
영상: "Artist Profile" / Documentary / src: https://cdn.midjourney.com/video/c63a04db-5b8f-49e8-81ad-6aac06d97a97/2.mp4
인용문: "The artist is a receptacle for emotions that come from all over the place." — Pablo Picasso
이미지: "Master Works" / Established Artist / src: https://cdn.midjourney.com/d42ae88a-c9ee-4cde-87f8-0c8b8a26bffb/0_1.png
설명문: "Artist Residency" / Supporting creative development through our international residency program.
영상: "Studio Visit" / Behind the Scenes / src: https://cdn.midjourney.com/video/47470e92-df6a-48b3-b7bd-921ee2a795b9/0.mp4
(4) Exhibitions — 6개 아이템

설명문: "Current Exhibition" / Immersive installations that transform space and challenge perception.
이미지: "Main Gallery" / Now Showing / src: https://cdn.midjourney.com/d42ae88a-c9ee-4cde-87f8-0c8b8a26bffb/0_2.png
영상: "Video Exhibition" / Screening Room / src: https://cdn.midjourney.com/video/348150cc-43eb-4b80-b00c-a39ee9b38cb8/1.mp4
인용문: "Art washes away from the soul the dust of everyday life." — Pablo Picasso
이미지: "Group Show" / Collective Vision / src: https://cdn.midjourney.com/d42ae88a-c9ee-4cde-87f8-0c8b8a26bffb/0_3.png
설명문: "Upcoming Shows" / Preview our exciting lineup of exhibitions for the coming season.
(5) Archive — 7개 아이템

이미지: "Historical Works" / 2020-2023 / src: https://cdn.midjourney.com/28eb2ef4-d6b0-4f74-ac62-c94d15e8adf4/0_0.png
설명문: "Preserving Legacy" / Four years of groundbreaking exhibitions archived for future generations.
영상: "Archive Footage" / Documentation / src: https://cdn.midjourney.com/video/1181d9d4-6eb2-4984-8407-7d0e68465057/1.mp4
인용문: "The purpose of art is washing the dust of daily life off our souls." — Pablo Picasso
이미지: "Classic Collection" / Permanent Archive / src: https://cdn.midjourney.com/28eb2ef4-d6b0-4f74-ac62-c94d15e8adf4/0_1.png
이미지: "Research Materials" / Academic Resource / src: https://cdn.midjourney.com/28eb2ef4-d6b0-4f74-ac62-c94d15e8adf4/0_2.png
설명문: "Digital Preservation" / Ensuring art history remains accessible through advanced archival technologies.
(6) Digital Art — 7개 아이템

설명문: "Digital Revolution" / Exploring the frontiers of art in the digital age through NFTs, AI, and generative algorithms.
이미지: "Generative Art" / Algorithm-based Creation / src: https://cdn.midjourney.com/d88a0583-0025-40b1-9d51-0fda4a81db42/0_0.png
영상: "AI Collaboration" / Human-Machine Art / src: https://cdn.midjourney.com/video/efbc89fc-08ba-4326-b0ae-f45b69ab5283/3.mp4
인용문: "Technology is the canvas of the 21st century artist." — Digital Art Manifesto
이미지: "NFT Collection" / Blockchain Art / src: https://cdn.midjourney.com/d88a0583-0025-40b1-9d51-0fda4a81db42/0_3.png
설명문: "Virtual Galleries" / Experience art beyond physical boundaries in our metaverse exhibitions.
영상: "Interactive Media" / Responsive Installations / src: https://cdn.midjourney.com/video/7c00cd53-8172-47af-98bd-9c004e4b8e31/1.mp4
(7) Photography — 7개 아이템

이미지: "Urban Landscapes" / City Documentation / src: https://cdn.midjourney.com/d42ae88a-c9ee-4cde-87f8-0c8b8a26bffb/0_0.png
설명문: "Lens & Vision" / Contemporary photography that captures the essence of our changing world.
이미지: "Portrait Series" / Human Stories / src: https://cdn.midjourney.com/d42ae88a-c9ee-4cde-87f8-0c8b8a26bffb/0_1.png
인용문: "Photography is the story I fail to put into words." — Destin Sparks
이미지: "Nature Studies" / Environmental Focus / src: https://cdn.midjourney.com/d42ae88a-c9ee-4cde-87f8-0c8b8a26bffb/0_2.png
이미지: "Abstract Photography" / Experimental Vision / src: https://cdn.midjourney.com/d42ae88a-c9ee-4cde-87f8-0c8b8a26bffb/0_3.png
설명문: "Documentary Projects" / Long-term photographic investigations into social and cultural phenomena.
(8) Video Art — 7개 아이템

영상: "Time-Based Media" / Experimental Film / src: https://cdn.midjourney.com/video/8c31b1e5-f7c1-488d-8eb2-3afff61b32a8/0.mp4
설명문: "Moving Images" / Video art that challenges traditional narrative structures and visual conventions.
영상: "Loop Studies" / Infinite Cycles / src: https://cdn.midjourney.com/video/4e36274c-4924-4079-9b97-ae83c02afff1/1.mp4
인용문: "Video art is not about the medium, but about time and perception." — Bill Viola
영상: "Performance Film" / Body & Movement / src: https://cdn.midjourney.com/video/c63a04db-5b8f-49e8-81ad-6aac06d97a97/2.mp4
영상: "Digital Narratives" / New Storytelling / src: https://cdn.midjourney.com/video/348150cc-43eb-4b80-b00c-a39ee9b38cb8/1.mp4
설명문: "Screening Program" / Monthly presentations of groundbreaking video art from around the world.
(9) Installations — 7개 아이템

이미지: "Spatial Interventions" / Site-Specific Art / src: https://cdn.midjourney.com/28eb2ef4-d6b0-4f74-ac62-c94d15e8adf4/0_0.png
설명문: "Immersive Spaces" / Large-scale installations that transform gallery spaces into experiential environments.
영상: "Light Installation" / Luminous Environment / src: https://cdn.midjourney.com/video/47470e92-df6a-48b3-b7bd-921ee2a795b9/0.mp4
인용문: "Installation art is about creating a universe for the viewer to enter." — Ilya Kabakov
이미지: "Sound Sculpture" / Audio-Visual Experience / src: https://cdn.midjourney.com/28eb2ef4-d6b0-4f74-ac62-c94d15e8adf4/0_1.png
이미지: "Interactive Environment" / Participatory Art / src: https://cdn.midjourney.com/28eb2ef4-d6b0-4f74-ac62-c94d15e8adf4/0_2.png
영상: "Kinetic Installation" / Movement & Space / src: https://cdn.midjourney.com/video/1181d9d4-6eb2-4984-8407-7d0e68465057/1.mp4
(10) About — 6개 아이템

설명문: "Our Mission" / To create a platform where art transcends traditional boundaries and connects with audiences globally.
이미지: "Gallery Space" / Our Home / src: https://cdn.midjourney.com/28eb2ef4-d6b0-4f74-ac62-c94d15e8adf4/0_3.png
인용문: "We believe in the transformative power of art to shape culture and consciousness." — Gallery Director
설명문: "Visit Us" / Open Tuesday to Sunday, 10:00 AM - 8:00 PM. Free admission on first Sundays.
설명문: "Contact" / For inquiries about exhibitions, collections, or collaborations, reach out to our curatorial team.
설명문: "Support" / Join our community of art patrons and help us continue our mission of artistic innovation.
기술
4-1. 기본 구조 단일 HTML 파일 하나에 CSS(style 태그)와 JavaScript(script 태그) 모두 포함해줘. 외부 라이브러리나 프레임워크 절대 사용하지 말고, 순수 HTML + CSS + Vanilla JS로만 만들어줘. Google Fonts CDN만 외부 링크 허용.

4-2. CSS 관련 CSS 변수(Custom Properties)로 컬러, 서체, 이징 커브 등 모두 관리해줘. 반응형은 768px 구간으로 미디어쿼리 작성해줘. 768px 이하: 카드 크기 350×250px로 축소, 섹션 이름 축소, 커스텀 커서 숨김, 조작 힌트 세로 배치.

4-3. JavaScript 관련 requestAnimationFrame으로 커서 lerp 애니메이션. wheel 이벤트로 스크롤 기반 3D 회전 + 섹션 전환 처리. keydown 이벤트로 키보드 방향키 네비게이션. touchstart/touchend로 모바일 스와이프 지원. 섹션 전환 시 페이드 트랜지션(opacity 0 → 렌더링 → opacity 1). querySelectorAll 등 기본 DOM API만 사용. 별도 번들러 없이 전역 스코프에서 동작.

추가 조건 HTML lang="ko"로 설정해줘. body는 overflow: hidden, height: 100vh로 전체 화면 고정이야. 모든 transition에 일관된 이징 커브 적용하고 호버 효과는 0.3~0.6초 사이로 부드럽게. 코드에 영역별로 주석 넣어줘. 실제 서버 없이 로컬에서 HTML 파일 하나만 열어도 완전하게 동작해야 해.