0021

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

1. 프로그램 개요
총 7개 섹션 + 인용구 구간 2개로 구성된 원페이지 스크롤 웹사이트야. 섹션 순서는 아래와 같아.

(1) Featured (벤토 그리드 갤러리 — 이미지+영상 혼합) (2) Quote (첫 번째 인용구) (3) Collections (마키 무한 스크롤 갤러리) (4) Artists (벤토 그리드 갤러리 — 아티스트 포트폴리오) (5) Quote (두 번째 인용구) (6) Exhibitions (벤토 그리드 갤러리 — 전시 정보) (7) Archive (벤토 그리드 갤러리 — 아카이브)

페이지 진입 시 로딩 화면도 있어야 해.

2. 기능
2-1. 로딩 화면
페이지 처음 열리면 검정 배경에 "LOADING" 텍스트가 중앙에 표시되고, 그 아래에 가로 200px짜리 얇은 바(2px) 안에서 코럴 레드 색상의 프로그레스 라인이 좌에서 우로 채워졌다가 다시 사라지는 애니메이션을 반복 재생해줘. 약 1.5초 후에 로딩 화면이 페이드아웃 되면서 사라지게 해줘.

2-2. 플로팅 네비게이션
화면 우측에 세로로 고정된 도트 네비게이션을 만들어줘. 각 도트는 12px 원형이고, 기본은 반투명 흰색, 현재 보고 있는 섹션에 해당하는 도트는 코럴 레드색으로 활성화되면서 1.5배 커지게 해줘. 각 도트에 마우스를 올리면 오른쪽에서 왼쪽으로 섹션 제목 라벨(Featured, Collections, Artists, Exhibitions, Archive)이 페이드인으로 나타나게 해줘. 도트 클릭하면 해당 섹션으로 부드럽게 스크롤해줘. IntersectionObserver로 현재 보이는 섹션을 감지해서 도트 활성 상태를 자동 업데이트해줘. 768px 이하 모바일에서는 플로팅 네비게이션 숨겨줘.

2-3. 마그네틱 헤더
상단 고정 헤더를 만들어줘. 왼쪽에 "IMMERSIVE GALLERY" 로고, 오른쪽에 햄버거 메뉴 아이콘(가로선 3개, 각각 길이가 100%, 70%, 40%로 다르게) 배치해줘. mix-blend-mode: difference를 적용해서 어떤 배경 위에서도 보이게 해줘. 로고에 마우스를 올리고 움직이면 마우스 방향으로 살짝 끌려오는 마그네틱 효과를 넣어줘. 햄버거 아이콘에 호버하면 짧은 선들이 모두 100% 길이로 늘어나는 애니메이션 적용해줘.

2-4. 벤토 그리드 레이아웃
Featured, Artists, Exhibitions, Archive 섹션 모두 6컬럼 벤토(Bento) 그리드를 사용해줘. grid-auto-rows는 250px로 하고, 각 아이템은 border-radius 30px의 라운드 카드로 만들어줘. 아이템마다 grid-column: span과 grid-row: span 값을 다양하게 줘서 대형(2×2), 중형(2×1, 3×1), 기본(1×1) 등 비정형 레이아웃을 만들어줘. 각 카드에 호버하면 scale(0.98)로 살짝 줄어들면서 안쪽에 코럴 레드 3px 테두리가 생기게 해줘. 카드 위에 반투명 블러 오버레이가 호버 시 나타나면서 제목과 설명 텍스트가 보이게 해줘. 이미지와 영상 카드에는 object-fit: cover를 적용해서 카드를 꽉 채우게 해줘. 일부 카드는 이미지/영상 없이 다크 배경에 텍스트만 넣거나, 코럴 레드 배경에 큰 숫자/통계를 표시하는 강조 카드로 만들어줘. 768px 이하 모바일에서는 2컬럼으로 바꾸고, 홀수 아이템은 2컬럼 차지하게 해줘.

2-5. 마키(Marquee) 갤러리
Collections 섹션에 이미지와 영상이 섞인 가로 무한 스크롤 마키를 만들어줘. 각 아이템은 400×300px 크기에 border-radius 20px 라운드 처리하고, 아이템 간 20px 간격을 줘. CSS @keyframes animation으로 translateX를 사용해서 30초 동안 linear으로 무한 반복 스크롤되게 해줘. 아이템을 2배로 복제해서 끊김 없이 이어지게 만들어줘. 배경은 약간 밝은 다크(#1a1a1a)로 차별화해줘.

2-6. 인용구 섹션
두 개의 인용구 섹션을 만들어줘. 각각 100vh 높이의 전체 화면이고, 중앙에 큰 세리프 이탤릭 인용문과 그 아래 작은 대문자 저자명(코럴 레드색)을 배치해줘. 인용문 텍스트 크기는 clamp(48px, 6vw, 80px)로 반응형 처리해줘. 배경에 코럴 레드 색상의 큰 원형 블러 글로우 요소 2개를 대각선 방향에 배치하고, 스크롤 시 느리게 따라오는 패럴랙스 효과를 적용해줘. 인용문은 아래에서 위로 페이드인 되는 애니메이션을 넣어줘. 첫 번째 인용구: "Art is not what you see, but what you make others see." — Edgar Degas. 두 번째 인용구: "The purpose of art is washing the dust of daily life off our souls." — Pablo Picasso.

2-7. 영상 자동재생 관리
모든 video 태그에 autoplay, muted, loop, playsinline 속성을 적용해줘. IntersectionObserver로 화면에 보이는 영상만 재생하고 화면 밖으로 나가면 일시정지하는 최적화를 구현해줘.

2-8. 패럴랙스 효과
인용구 섹션의 플로팅 글로우 요소에 스크롤 기반 패럴랙스 효과를 넣어줘. requestAnimationFrame으로 부드럽게 처리하고, 각 요소마다 속도를 다르게(0.5, 0.3) 설정해줘.

3. 디자인
3-1. 컬러 팔레트
메인 배경: #0a0a0a (거의 순수 블랙) 보조 배경: #1a1a1a (약간 밝은 다크) 코럴 레드 포인트: #ff6b6b (메인 강조색) 텍스트: #ffffff (메인) 보조 텍스트: #888888 (설명, 서브텍스트)

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. 전체 톤앤무드
어둡고 몰입감 있는 현대 미술 갤러리 느낌. body 위에 고정된 45도 대각선 스트라이프 노이즈 텍스처를 매우 낮은 투명도(3%)로 깔아줘. 모든 전환 효과에 cubic-bezier(0.4, 0, 0.2, 1) 이징 커브를 기본으로 써줘. 섹션 간 충분한 패딩(100px 60px)을 줘줘.

3-4. 이미지 처리 스타일
카드에 사용되는 모든 이미지/영상은 object-fit: cover로 카드를 완전히 채우게 해줘. 호버 시 이미지가 1.1배 확대되는 효과를 0.6초 이징으로 적용해줘. 갤러리 카드에는 hover 시 135도 방향 그라디언트 오버레이(투명 → 코럴 레드 10%)를 추가해줘. 카드의 콘텐츠(번호, 제목, 설명)는 하단에서 위로 올라오는 그라디언트(검정 90% → 투명) 위에 배치하고, 기본 상태에서는 translateY(100%)로 숨겨뒀다가 호버 시 올라오게 해줘.

3-5. 각 섹션에 사용할 이미지/영상 목록
(1) Featured (벤토 그리드)

아이템 1 (2col×2row, 이미지): https://cdn.midjourney.com/d88a0583-0025-40b1-9d51-0fda4a81db42/0_0.png — "Ethereal Landscapes" / "Digital Art Collection"
아이템 2 (2col×1row, 영상): https://cdn.midjourney.com/video/efbc89fc-08ba-4326-b0ae-f45b69ab5283/3.mp4 — "Motion Studies" / "Video Installation"
아이템 3 (2col×2row, 이미지): https://cdn.midjourney.com/d88a0583-0025-40b1-9d51-0fda4a81db42/0_1.png — "Urban Fragments" / "Photography Series"
아이템 4 (3col×1row, 영상): https://cdn.midjourney.com/video/8c31b1e5-f7c1-488d-8eb2-3afff61b32a8/0.mp4 — "Nature in Motion" / "Video Art"
아이템 5 (3col×1row, 이미지): https://cdn.midjourney.com/d88a0583-0025-40b1-9d51-0fda4a81db42/0_2.png — "Chromatic Dreams" / "Contemporary Art"
아이템 6 (2col×1row, 이미지): https://cdn.midjourney.com/d88a0583-0025-40b1-9d51-0fda4a81db42/0_3.png — "Minimal Forms" / "Sculptural Photography"
아이템 7 (4col×2row, 텍스트 전용): 다크 배경에 "Contemporary Vision" 제목 + "Exploring the boundaries between digital and physical realms through innovative artistic expression." 설명
(3) Collections (마키) 마키 아이템 순서대로 (2배 복제해서 무한 루프):

이미지: https://cdn.midjourney.com/d88a0583-0025-40b1-9d51-0fda4a81db42/0_1.png
영상: https://cdn.midjourney.com/video/4e36274c-4924-4079-9b97-ae83c02afff1/1.mp4
이미지: https://cdn.midjourney.com/d88a0583-0025-40b1-9d51-0fda4a81db42/0_0.png
이미지: https://cdn.midjourney.com/d88a0583-0025-40b1-9d51-0fda4a81db42/0_2.png
영상: https://cdn.midjourney.com/video/7c00cd53-8172-47af-98bd-9c004e4b8e31/1.mp4
(4) Artists (벤토 그리드)

아이템 1 (2col×2row, 이미지): https://cdn.midjourney.com/d88a0583-0025-40b1-9d51-0fda4a81db42/0_3.png — "Artist Portfolio" / "Contemporary Works" / 번호 12
아이템 2 (2col×1row, 영상): https://cdn.midjourney.com/video/c63a04db-5b8f-49e8-81ad-6aac06d97a97/2.mp4 — "Video Artist" / "Moving Images" / 번호 13
아이템 3 (2col×2row, 이미지): https://cdn.midjourney.com/d42ae88a-c9ee-4cde-87f8-0c8b8a26bffb/0_0.png — "Emerging Talent" / "New Voices" / 번호 14
아이템 4 (3col×1row, 이미지): https://cdn.midjourney.com/d42ae88a-c9ee-4cde-87f8-0c8b8a26bffb/0_1.png — "Master Works" / "Established Artist" / 번호 15
아이템 5 (3col×1row, 영상): https://cdn.midjourney.com/video/47470e92-df6a-48b3-b7bd-921ee2a795b9/0.mp4 — "Experimental Film" / "Avant-garde Cinema" / 번호 16
아이템 6 (2col×1row, 텍스트 전용): 다크 배경에 "Featured Artists" 제목 + "Discover the visionaries shaping tomorrow's artistic landscape." 설명
아이템 7 (4col×2row, 강조 카드): 코럴 레드 배경에 큰 숫자 "32" + "ARTISTS FEATURED" 텍스트
(6) Exhibitions (벤토 그리드)

아이템 1 (2col×2row, 이미지): https://cdn.midjourney.com/d42ae88a-c9ee-4cde-87f8-0c8b8a26bffb/0_2.png — "Current Show" / "Main Gallery"
아이템 2 (2col×1row, 영상): https://cdn.midjourney.com/video/348150cc-43eb-4b80-b00c-a39ee9b38cb8/1.mp4 — "Video Exhibition" / "Screening Room"
아이템 3 (2col×2row, 이미지): https://cdn.midjourney.com/d42ae88a-c9ee-4cde-87f8-0c8b8a26bffb/0_3.png — "Group Show" / "Collective Vision"
아이템 4 (3col×1row, 이미지): https://cdn.midjourney.com/28eb2ef4-d6b0-4f74-ac62-c94d15e8adf4/0_0.png — "Solo Exhibition" / "Featured Artist"
아이템 5 (3col×1row, 텍스트 전용): 다크 배경에 "Current Exhibition" 제목 + "Experience immersive installations that challenge perception and redefine space." 설명
아이템 6 (2col×1row, 텍스트 전용): 다크 배경에 "Visit Us" 제목 + "Open Tuesday to Sunday / 10:00 AM - 8:00 PM" 안내
(7) Archive (벤토 그리드)

아이템 1 (2col×2row, 이미지): https://cdn.midjourney.com/28eb2ef4-d6b0-4f74-ac62-c94d15e8adf4/0_1.png — "Past Exhibition" / "2023 Collection"
아이템 2 (2col×1row, 강조 카드): 코럴 레드 배경에 "EST. 2020" 텍스트
아이템 3 (2col×2row, 영상): https://cdn.midjourney.com/video/1181d9d4-6eb2-4984-8407-7d0e68465057/1.mp4 — "Archive Footage" / "Historical Documentation"
아이템 4 (3col×1row, 이미지): https://cdn.midjourney.com/28eb2ef4-d6b0-4f74-ac62-c94d15e8adf4/0_2.png — "Classic Works" / "Permanent Collection"
아이템 5 (3col×1row, 이미지): https://cdn.midjourney.com/28eb2ef4-d6b0-4f74-ac62-c94d15e8adf4/0_3.png — "Archive Material" / "Research Collection"
아이템 6 (2col×1row, 텍스트 전용): 다크 배경에 "Preserving History" 제목 + "Four years of groundbreaking exhibitions and artistic innovation archived for future generations." 설명
4. 기술
4-1. 기본 구조
단일 HTML 파일 하나에 CSS(style 태그)와 JavaScript(script 태그) 모두 포함해줘. 외부 라이브러리나 프레임워크 절대 사용하지 말고, 순수 HTML + CSS + Vanilla JS로만 만들어줘. Google Fonts CDN만 외부 링크 허용.

4-2. CSS 관련
CSS 변수(Custom Properties)로 컬러, 서체, 이징 커브 등 모두 관리해줘. 반응형은 768px 구간으로 미디어쿼리 작성해줘. 768px 이하에서는 플로팅 네비게이션 숨김, 벤토 그리드 2컬럼 변환(홀수 아이템 2컬럼 차지), 헤더 패딩 축소, 인용구 텍스트 크기 축소.

4-3. JavaScript 관련
IntersectionObserver로 네비게이션 도트 활성 상태 자동 업데이트 및 영상 재생/정지 관리. requestAnimationFrame으로 패럴랙스 처리. 마그네틱 효과는 mousemove/mouseleave 이벤트로 구현. 스크롤 함수에 ticking 플래그 사용해서 성능 최적화해줘. 별도 번들러 없이 전역 스코프에서 동작.

5. 추가 조건
HTML lang="ko"로 설정해줘. 섹션 좌우 패딩은 60px 기본. 모든 transition에 일관된 이징 커브(cubic-bezier(0.4, 0, 0.2, 1)) 적용해줘. 코드에 영역별로 주석 넣어줘. 실제 서버 없이 로컬에서 HTML 파일 하나만 열어도 완전하게 동작해야 해.