0022

HTML, CSS, JavaScript만 사용해서 단일 HTML 파일로 3D 카드 스택 갤러리 웹사이트를 만들어줘. 갤러리 이름은 "3D GALLERY"이고, 전체적으로 다크 테마 기반에 레드/블루 그라데이션 포인트를 활용한 모던 시네마틱 디자인으로 만들어줘.

프로그램 개요
스크롤/키보드/스와이프로 탐색하는 3D 원근감 카드 스택 갤러리야. 일반적인 스크롤 페이지가 아니라 전체 화면(100vh)을 고정하고, 카드를 하나씩 넘기는 인터랙티브 뷰어 형태야.

5개 섹션으로 구성되어 있고, 각 섹션마다 5장의 카드를 포함해: (1) Featured (2) Collections (3) Artists (4) Exhibitions (5) Archive

각 섹션의 카드는 이미지 카드, 비디오 카드, 텍스트(명언) 카드 세 가지 타입이 섞여 있어. 카드 스택 위에 헤더, 우측 도트 네비게이션, 하단 프로그레스 바, 좌하단 안내 패널이 오버레이로 떠 있는 구조야.

기능
2-1. 로딩 화면 페이지 처음 열리면 검정 배경에 "LOADING" 텍스트가 레드-블루 그라데이션으로 표시되고, 그 아래에 가로 200px짜리 그라데이션 바가 좌에서 우로 반복 흐르는 애니메이션을 보여줘. 텍스트는 opacity가 0.5~1 사이로 펄스 애니메이션 해줘. 약 2초 후에 로딩 화면이 페이드아웃 되면서 사라지게 해줘.

2-2. 3D 마우스 트래킹 마우스 위치에 따라 전체 카드 스택이 3D로 기울어지는 효과를 넣어줘. 마우스가 화면 중앙 기준으로 좌우로 움직이면 Y축 회전, 상하로 움직이면 X축 회전이 되게 해줘. 회전 범위는 ±10도 정도로 해줘. body에 perspective: 2000px를 적용해줘.

2-3. 카드 스택 3D 배치 현재 활성 카드를 중앙에, 나머지 카드들은 오프셋에 따라 3D 공간에 배치해줘. 각 카드는 이전/다음 위치에 따라 translateX(오프셋×50px), translateZ(-절대오프셋×100px), rotateY(오프셋×15deg), scale(1 - 절대오프셋×0.1)로 변환하고, opacity도 거리에 비례해 줄여줘. z-index는 가까운 카드가 높게. 전환은 cubic-bezier(0.4, 0, 0.2, 1) 이징으로 0.6초 동안 부드럽게.

2-4. 카드 호버 효과 현재 활성 카드에 마우스를 올리면 translateZ(50px) + rotateX(-5deg)로 살짝 앞으로 튀어나오는 효과. 마우스를 떼면 원래 위치로 복귀. 카드 위에 135도 방향 흰색 반투명 광택 오버레이가 호버 시 나타나게 해줘. 이미지/비디오 카드는 호버 시 미디어가 1.05배 확대.

2-5. 내비게이션 (스크롤/키보드/터치) 마우스 휠 스크롤로 다음/이전 카드 이동. 방향키(←→↑↓)로도 이동 가능. 모바일에서는 상하 스와이프(50px 이상)로 이동. 한 섹션의 마지막 카드에서 다음으로 넘기면 다음 섹션 첫 카드로, 첫 카드에서 이전으로 넘기면 이전 섹션으로 자동 전환. 애니메이션 중(0.6초) 추가 입력은 무시해줘.

2-6. 도트 네비게이션 화면 우측 중앙에 세로로 5개 도트를 배치해줘. 현재 섹션에 해당하는 도트는 레드 액센트색 + 1.3배 확대. 도트에 마우스를 올리면 왼쪽으로 섹션 이름 툴팁이 나타나게 해줘. 도트 클릭하면 해당 섹션으로 바로 이동.

2-7. 프로그레스 바 화면 하단 중앙에 200px 너비 가로 프로그레스 바를 배치해줘. 전체 진행도(현재 섹션 + 섹션 내 카드 진행률)를 레드 액센트색으로 채워줘. 0.6초 이징으로 부드럽게 변화.

2-8. 안내 패널 좌하단에 "NAVIGATION" 제목과 "Use scroll or arrow keys to navigate through the gallery. Click on cards to explore." 안내 텍스트를 배치해줘. 섹션 전환 시 페이드인으로 나타났다가 3~5초 후 페이드아웃.

디자인
3-1. 컬러 팔레트 메인 배경: #0a0a0a (거의 검정), 보조 배경: #1a1a1a (짙은 회색), 액센트: #ff6b6b (코랄 레드), 주 텍스트: #ffffff, 보조 텍스트: #999999, 카드 그림자: 0 20px 60px rgba(0,0,0,0.8)

3-2. 서체 Google Fonts에서 4개 불러와줘: Playfair Display (400, 700, italic) → 카드 제목, 명언용, Bebas Neue → 로고, 카드 번호, 안내 제목용, Montserrat (100, 300, 400, 600) → 본문, UI용, Cormorant Garamond (300, 400, italic 300) → 장식 텍스트용. 기본 body 서체는 'Montserrat', sans-serif.

3-3. 전체 톤앤무드 어둡고 시네마틱한 갤러리/전시 공간 느낌. body에 overflow: hidden, height: 100vh로 스크롤 없는 풀스크린 앱 형태. 배경에 세 개의 radial-gradient(레드 20%, 블루 80%, 그린 50%)를 겹쳐서 은은하게 깔고, 20초 주기로 scale(1)↔scale(1.1) + 미세 회전하는 애니메이션 적용.

3-4. 카드 디자인 카드 크기: 400×600px (모바일 300×450px). border-radius: 20px. 이미지/비디오 카드는 미디어가 상단 70%, 하단 30%에 그라데이션 오버레이 + 카드 번호(Bebas Neue 48px, 코랄색) + 제목(Playfair Display 24px) + 서브타이틀(14px, 보조 텍스트색). 텍스트 카드는 레드-블루 반투명 그라데이션 배경 + 1px 흰색 반투명 테두리, 중앙에 명언(Playfair Display 32px 이탤릭) + 저자명(14px 대문자).

3-5. 각 섹션 카드 데이터

(1) Featured 섹션

카드1: 이미지, 번호 01, "Ethereal Landscapes", "Digital Art Collection", 이미지 URL: https://cdn.midjourney.com/d88a0583-0025-40b1-9d51-0fda4a81db42/0_0.png
카드2: 텍스트, "Art is not what you see, but what you make others see." — Edgar Degas
카드3: 비디오, 번호 02, "Motion Studies", "Video Installation", 비디오 URL: https://cdn.midjourney.com/video/efbc89fc-08ba-4326-b0ae-f45b69ab5283/3.mp4
카드4: 이미지, 번호 03, "Urban Fragments", "Photography Series", 이미지 URL: https://cdn.midjourney.com/d88a0583-0025-40b1-9d51-0fda4a81db42/0_1.png
카드5: 비디오, 번호 04, "Nature in Motion", "Video Art", 비디오 URL: https://cdn.midjourney.com/video/8c31b1e5-f7c1-488d-8eb2-3afff61b32a8/0.mp4
(2) Collections 섹션

카드1: 이미지, 번호 05, "Abstract Reality", "Mixed Media", 이미지 URL: https://cdn.midjourney.com/d88a0583-0025-40b1-9d51-0fda4a81db42/0_1.png
카드2: 비디오, 번호 06, "Animated Dreams", "Animation Art", 비디오 URL: https://cdn.midjourney.com/video/4e36274c-4924-4079-9b97-ae83c02afff1/1.mp4
카드3: 텍스트, "Every artist dips his brush in his own soul, and paints his own nature into his pictures." — Henry Ward Beecher
카드4: 이미지, 번호 07, "Geometric Visions", "Digital Sculpture", 이미지 URL: https://cdn.midjourney.com/d88a0583-0025-40b1-9d51-0fda4a81db42/0_0.png
카드5: 비디오, 번호 08, "Fluid Dynamics", "Video Sculpture", 비디오 URL: https://cdn.midjourney.com/video/7c00cd53-8172-47af-98bd-9c004e4b8e31/1.mp4
(3) Artists 섹션

카드1: 이미지, 번호 09, "Artist Portfolio", "Contemporary Works", 이미지 URL: https://cdn.midjourney.com/d88a0583-0025-40b1-9d51-0fda4a81db42/0_3.png
카드2: 비디오, 번호 10, "Video Artist", "Moving Images", 비디오 URL: https://cdn.midjourney.com/video/c63a04db-5b8f-49e8-81ad-6aac06d97a97/2.mp4
카드3: 텍스트, "The purpose of art is washing the dust of daily life off our souls." — Pablo Picasso
카드4: 이미지, 번호 11, "Emerging Talent", "New Voices", 이미지 URL: https://cdn.midjourney.com/d42ae88a-c9ee-4cde-87f8-0c8b8a26bffb/0_0.png
카드5: 비디오, 번호 12, "Experimental Film", "Avant-garde Cinema", 비디오 URL: https://cdn.midjourney.com/video/47470e92-df6a-48b3-b7bd-921ee2a795b9/0.mp4
(4) Exhibitions 섹션

카드1: 이미지, 번호 13, "Current Show", "Main Gallery", 이미지 URL: https://cdn.midjourney.com/d42ae88a-c9ee-4cde-87f8-0c8b8a26bffb/0_2.png
카드2: 비디오, 번호 14, "Video Exhibition", "Screening Room", 비디오 URL: https://cdn.midjourney.com/video/348150cc-43eb-4b80-b00c-a39ee9b38cb8/1.mp4
카드3: 텍스트, "Art enables us to find ourselves and lose ourselves at the same time." — Thomas Merton
카드4: 이미지, 번호 15, "Group Show", "Collective Vision", 이미지 URL: https://cdn.midjourney.com/d42ae88a-c9ee-4cde-87f8-0c8b8a26bffb/0_3.png
카드5: 이미지, 번호 16, "Solo Exhibition", "Featured Artist", 이미지 URL: https://cdn.midjourney.com/28eb2ef4-d6b0-4f74-ac62-c94d15e8adf4/0_0.png
(5) Archive 섹션

카드1: 이미지, 번호 17, "Past Exhibition", "2023 Collection", 이미지 URL: https://cdn.midjourney.com/28eb2ef4-d6b0-4f74-ac62-c94d15e8adf4/0_1.png
카드2: 비디오, 번호 18, "Archive Footage", "Historical Documentation", 비디오 URL: https://cdn.midjourney.com/video/1181d9d4-6eb2-4984-8407-7d0e68465057/1.mp4
카드3: 텍스트, "The artist is nothing without the gift, but the gift is nothing without work." — Émile Zola
카드4: 이미지, 번호 19, "Classic Works", "Permanent Collection", 이미지 URL: https://cdn.midjourney.com/28eb2ef4-d6b0-4f74-ac62-c94d15e8adf4/0_2.png
카드5: 이미지, 번호 20, "Archive Material", "Research Collection", 이미지 URL: https://cdn.midjourney.com/28eb2ef4-d6b0-4f74-ac62-c94d15e8adf4/0_3.png
기술
4-1. 기본 구조 단일 HTML 파일 하나에 CSS(style 태그)와 JavaScript(script 태그) 모두 포함해줘. 외부 라이브러리나 프레임워크 절대 사용하지 말고, 순수 HTML + CSS + Vanilla JS로만 만들어줘. Google Fonts CDN만 외부 링크 허용.

4-2. CSS 관련 CSS 변수(Custom Properties)로 컬러, 서체 등 관리해줘. transform-style: preserve-3d를 카드 스택과 카드에 적용해줘. 반응형은 768px 한 구간으로 카드 크기 축소, 우측 도트 네비게이션 위치 조정, 헤더 패딩 축소, 상단 메뉴 링크 숨김 처리해줘.

4-3. JavaScript 관련 갤러리 데이터는 2차원 배열(섹션[카드[]])로 관리해줘. 카드 HTML은 JavaScript로 동적 생성. wheel 이벤트(passive: false + preventDefault로 페이지 스크롤 방지), keydown 이벤트, touchstart/touchend 이벤트로 내비게이션 처리. mousemove 이벤트로 3D 트래킹. 비디오 카드는 autoplay, muted, loop, playsinline 속성 적용.

추가 조건 HTML lang="ko"로 설정해줘. 모든 transition에 일관된 이징 커브 적용하고 카드 전환은 0.6초로 통일. 코드에 영역별로 주석 넣어줘. 실제 서버 없이 로컬에서 HTML 파일 하나만 열어도 완전하게 동작해야 해.