0020

HTML, CSS, JavaScript만 사용해서 단일 HTML 파일로 몰입형 원형 갤러리 웹사이트를 만들어줘. 사이트 이름은 "CIRCULAR GALLERY"이고, 전체적으로 어두운 블랙 배경에 화이트 포인트를 활용한 미니멀 다크 테마 디자인으로 만들어줘.

프로그램 개요
스크롤 기반이 아닌 섹션 전환 방식의 풀스크린 갤러리 웹사이트야. 마우스 휠, 키보드 방향키, 원형 네비게이션 클릭으로 섹션을 전환해. 총 10개 섹션이 있고, 각 섹션마다 이미지/영상 카드가 궤도처럼 배치되어 나타나는 구조야. 섹션 순서는 아래와 같아.

(1) Featured (2) Collection (3) Artists (4) Exhibition (5) Archive (6) Process (7) Studio (8) Philosophy (9) Community (10) Future

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

기능
2-1. 로딩 화면 페이지 처음 열리면 순수 블랙 배경 중앙에 원형 테두리가 있고, 그 테두리 위를 흰색 아크(border-top만 흰색)가 무한 회전하는 스피너 애니메이션을 보여줘. 약 1초 후 로딩 화면이 페이드아웃 되면서 사라지고 첫 번째 섹션이 표시되게 해줘.

2-2. 커스텀 커서 마우스 포인터를 2개 레이어로 대체해줘. 하나는 8px 흰색 원형 도트(마우스를 빠르게 추적), 다른 하나는 40px 흰색 반투명 테두리 링(마우스를 느리게 추적하는 lerp 효과). 네비게이션 아이템, 캐러셀 아이템, 네비게이션 도트 위에 올리면 링이 80px로 커지면서 배경이 반투명 흰색으로 채워지게 해줘. body에 cursor: none 적용하고, 768px 이하 모바일에서는 커스텀 커서 숨기고 기본 커서 복원해줘.

2-3. 원형 네비게이션 (Circular Navigation) 화면 정중앙에 두 겹의 원형 링(이중 궤도) 위에 10개의 원형 버튼이 배치된 네비게이션을 만들어줘. 바깥 링은 시계 방향으로 90초에 1회전, 안쪽 링은 반시계 방향으로 60초에 1회전하는 CSS 애니메이션을 넣어줘. 각 버튼은 70px 원형이고, 반투명 배경 + 미세한 흰색 테두리, Bebas Neue 서체로 섹션 이름 표시. 호버 시 배경 밝아지고 테두리 강해지며 1.1배 확대. 활성 섹션 버튼은 흰색 배경 + 검정 텍스트로 반전. 카드가 확대 표시될 때는 원형 네비게이션 전체가 축소 + 페이드아웃 되면서 숨겨져.

2-4. 중앙 디스플레이 원형 네비게이션 한가운데에 현재 섹션 번호("01"~"10")를 Bebas Neue 120px로 매우 옅게(opacity 0.1) 표시해줘. 섹션 전환 시 번호가 바뀌면서 잠시 opacity가 0.3으로 밝아졌다 다시 돌아오는 펄스 효과, 그 위에 섹션 이름이 Playfair Display로 잠시 나타났다 사라지는 효과를 넣어줘. 카드 확대 시 중앙 디스플레이도 함께 숨겨줘.

2-5. 사이드 네비게이션 도트 화면 오른쪽 세로 중앙에 10개의 작은 도트(6px 원형)를 세로로 배치해줘. 현재 섹션의 도트만 흰색 + 1.5배 확대, 나머지는 어두운 반투명. 호버 시 도트 왼쪽에 섹션 이름 툴팁이 나타나게 해줘. 클릭하면 해당 섹션으로 이동. 카드 확대 시 사이드 네비게이션도 숨겨줘.

2-6. 콘텐츠 캐러셀 (궤도형 카드 배치) 각 섹션에 속한 이미지/영상 카드들이 화면 곳곳에 궤도처럼 분산 배치되는 구조야. 카드는 280×380px 라운드(20px) 사각형이고, 반투명 배경 + 미세한 흰색 테두리. 현재 섹션의 카드만 보이고, 다른 섹션 카드는 축소 + 회전 + 페이드아웃 상태. 섹션 전환 시 카드가 랜덤한 딜레이(0~300ms)로 순차 등장하는 효과를 넣어줘. 이미지/영상에는 기본 grayscale(100%) + contrast(1.2) 필터를 적용하고, 호버 시 컬러 복원 + 1.05배 확대. 하단에 어둡→투명 그라디언트 오버레이가 있고, 호버 시 아래에서 올라오면서 제목(Playfair Display) + 서브타이틀이 표시돼.

2-7. 카드 확대 (Center Focus) 카드 클릭 시 해당 카드가 화면 정중앙에서 500×650px로 확대되면서 상세 보기 모드로 전환돼. 배경에 검정 80% 불투명 백드롭이 깔리고, 카드 우상단에 원형 닫기 버튼(X) 표시. 닫기 버튼 호버 시 90도 회전 효과. 확대 상태에서 이미지 필터는 해제(컬러), 오버레이 텍스트도 항상 표시. 닫기 버튼 클릭, 백드롭 클릭, ESC 키 중 아무거나로 닫을 수 있어. 확대 중에는 원형 네비게이션, 중앙 디스플레이, 사이드 도트, 텍스트 패널 모두 숨겨줘.

2-8. 텍스트 패널 화면 네 모서리 근처(좌상단, 우하단, 좌중앙, 우중앙)에 배치되는 반투명 글래스모피즘 텍스트 패널을 4개 만들어줘. 각 섹션마다 어떤 패널이 보이고 숨겨지는지 미리 정의해놓고, 섹션 전환 시 순차 딜레이(0.1초 간격)로 페이드인/아웃 해줘. 패널 내용은 명언(Playfair Display 이탤릭 인용문 + 작가명) 또는 정보 텍스트(Cormorant Garamond 설명 + 디테일). 카드 확대 시 모든 텍스트 패널 숨겨줘.

2-9. 섹션 전환 방식 마우스 휠(위=이전, 아래=다음, 800ms 쿨다운), 키보드 방향키(상하좌우), 숫자키(0~9), 원형 네비게이션 클릭, 사이드 도트 클릭 — 총 5가지 방식으로 섹션 전환 가능하게 해줘. 카드 확대 상태에서는 ESC만 동작하고 섹션 전환은 막아줘. 터치 디바이스에서는 상하 스와이프(50px 이상)로 전환 가능하게 해줘.

2-10. 프로그레스 바 화면 최하단에 가로 2px 높이의 진행 바를 만들어줘. 전체 배경은 흰색 10% 투명, 채움 부분은 흰색. 현재 섹션 번호에 따라 10%~100%로 너비가 변하게 해줘.

2-11. 부유 장식 요소 화면에 3개의 큰 원형 부유 요소(200px, radial-gradient 반투명 흰색→투명)를 배치하고, 20초 주기로 위치와 크기가 미세하게 오가는 float 애니메이션을 넣어줘. pointer-events: none으로 클릭 방해 안 되게 해줘.

2-12. 특수 요소 Archive(섹션 4)와 Future(섹션 9)에서만 화면 우상단에 원형 데이터 시각화 요소가 나타나게 해줘. 원형 테두리 + 중앙에 Bebas Neue로 "2024" 표시, 3초 주기로 크기와 투명도가 펄스하는 애니메이션.

디자인
3-1. 컬러 팔레트 메인 배경: #0a0a0a (깊은 블랙) 텍스트/강조: #ffffff (순백) 보조 텍스트: #999999 (미디엄 그레이) UI 요소 배경: rgba(255, 255, 255, 0.05) ~ rgba(255, 255, 255, 0.1) UI 요소 테두리: rgba(255, 255, 255, 0.1) ~ rgba(255, 255, 255, 0.3) 활성 상태: rgba(255, 255, 255, 0.9)

3-2. 서체 Google Fonts에서 아래 4개 불러와줘. Playfair Display (400, 700, italic) → 제목, 인용문 Bebas Neue → 네비게이션, 섹션 번호, 데이터 숫자 Montserrat (100, 300, 400, 600) → 본문, UI Cormorant Garamond (300, 400, italic) → 정보 텍스트 기본 body 서체는 'Montserrat', sans-serif로 해줘.

3-3. 전체 톤앤무드 어둡고 몰입감 있는 미술관/갤러리 무대 느낌. 요소들이 어둠 속에서 떠오르는 듯한 분위기. 모든 전환에 cubic-bezier(0.4, 0, 0.2, 1) 이징 커브를 기본으로 써줘. 투명도와 블러를 적극 활용한 글래스모피즘 스타일.

3-4. 헤더 상단 고정, 좌측에 "CIRCULAR GALLERY" 로고(Bebas Neue, letter-spacing 3px), 우측에 3줄 햄버거 메뉴 아이콘(1px 두께 흰색 라인 3개). 패딩 30px 40px.

3-5. 각 섹션별 콘텐츠 및 이미지

(1) Featured — 카드 2장

"Ethereal Landscapes" / Digital Art Collection 이미지: https://cdn.midjourney.com/d88a0583-0025-40b1-9d51-0fda4a81db42/0_0.png
"Motion Studies" / Video Installation 영상: https://cdn.midjourney.com/video/efbc89fc-08ba-4326-b0ae-f45b69ab5283/3.mp4
(2) Collection — 카드 2장

"Urban Fragments" / Photography Series 이미지: https://cdn.midjourney.com/d88a0583-0025-40b1-9d51-0fda4a81db42/0_1.png
"Nature in Motion" / Video Art 영상: https://cdn.midjourney.com/video/8c31b1e5-f7c1-488d-8eb2-3afff61b32a8/0.mp4
(3) Artists — 카드 1장

"Chromatic Dreams" / Contemporary Art 이미지: https://cdn.midjourney.com/d88a0583-0025-40b1-9d51-0fda4a81db42/0_2.png
(4) Exhibition — 카드 1장

"Minimal Forms" / Sculptural Photography 이미지: https://cdn.midjourney.com/d88a0583-0025-40b1-9d51-0fda4a81db42/0_3.png
(5) Archive — 카드 1장

"Archive Material" / Historical Documentation 영상: https://cdn.midjourney.com/video/4e36274c-4924-4079-9b97-ae83c02afff1/1.mp4
(6) Process — 카드 2장

"Behind the Scenes" / Creative Process 이미지: https://cdn.midjourney.com/d42ae88a-c9ee-4cde-87f8-0c8b8a26bffb/0_0.png
"Studio Documentation" / Work in Progress 영상: https://cdn.midjourney.com/video/7c00cd53-8172-47af-98bd-9c004e4b8e31/1.mp4
(7) Studio — 카드 1장

"Studio Space" / Creative Environment 이미지: https://cdn.midjourney.com/d42ae88a-c9ee-4cde-87f8-0c8b8a26bffb/0_1.png
(8) Philosophy — 카드 1장

"Artistic Vision" / Conceptual Framework 이미지: https://cdn.midjourney.com/d42ae88a-c9ee-4cde-87f8-0c8b8a26bffb/0_2.png
(9) Community — 카드 1장

"Community Events" / Collaborative Projects 영상: https://cdn.midjourney.com/video/c63a04db-5b8f-49e8-81ad-6aac06d97a97/2.mp4
(10) Future — 카드 2장

"Future Visions" / Upcoming Projects 이미지: https://cdn.midjourney.com/28eb2ef4-d6b0-4f74-ac62-c94d15e8adf4/0_0.png
"Innovation Lab" / Experimental Works 영상: https://cdn.midjourney.com/video/1181d9d4-6eb2-4984-8407-7d0e68465057/1.mp4
3-6. 텍스트 패널 내 명언 (섹션별로 순환) 01: "Art is not what you see, but what you make others see." — Edgar Degas 02: "Every artist dips his brush in his own soul." — Henry Ward Beecher 03: "The purpose of art is washing the dust of daily life off our souls." — Pablo Picasso 04: "Art enables us to find ourselves and lose ourselves at the same time." — Thomas Merton 05: "The artist is nothing without the gift, but the gift is nothing without work." — Émile Zola 06: "Creativity takes courage." — Henri Matisse 07: "Art is the lie that enables us to realize the truth." — Pablo Picasso 08: "The main thing is to be moved, to love, to hope, to tremble, to live." — Auguste Rodin 09: "Art must be an expression of love or it is nothing." — Marc Chagall 10: "The future belongs to those who believe in the beauty of their dreams." — Eleanor Roosevelt

기술
4-1. 기본 구조 단일 HTML 파일 하나에 CSS(style 태그)와 JavaScript(script 태그) 모두 포함해줘. 외부 라이브러리나 프레임워크 절대 사용하지 말고, 순수 HTML + CSS + Vanilla JS로만 만들어줘. Google Fonts CDN만 외부 링크 허용.

4-2. CSS 관련 CSS 변수(Custom Properties)로 배경색, 텍스트색, 강조색, 이징 커브 등 관리해줘. 반응형은 768px 한 구간으로 미디어쿼리 작성해줘. 768px 이하: 커스텀 커서 숨김 + 기본 커서 복원, 원형 네비게이션 350px로 축소, 안쪽 링 250px, 네비게이션 버튼 50px + 10px 폰트, 카드 200×280px, 확대 카드 90% 너비 × 70vh, 사이드 네비게이션 숨김, 섹션 번호 80px로 축소.

4-3. JavaScript 관련 requestAnimationFrame으로 커서 lerp 애니메이션 처리. wheel 이벤트(passive: true)로 섹션 전환(800ms 쿨다운). keydown 이벤트로 키보드 네비게이션. touchstart/touchend로 모바일 스와이프 감지(50px 이상). 이벤트 위임과 querySelectorAll 등 기본 DOM API만 사용. 별도 번들러 없이 전역 스코프에서 동작.

추가 조건 HTML lang="ko"로 설정해줘. body에 overflow: hidden, height: 100vh 적용해서 스크롤 없는 풀스크린 구조로 만들어줘. 모든 transition에 일관된 이징 커브(cubic-bezier(0.4, 0, 0.2, 1)) 적용해줘. 영상 요소는 autoplay, muted, loop, playsinline 속성 모두 넣어줘. 코드에 영역별로 주석 넣어줘. 실제 서버 없이 로컬에서 HTML 파일 하나만 열어도 완전하게 동작해야 해.