0023

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

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

(1) Hero (전체화면 인트로 — 배경 이미지 위 타이틀) (2) Infinite Scroll Gallery (가로 무한 스크롤 갤러리 띠) (3) Bento Grid Gallery (벤토 그리드 형태 피처드 작품) (4) Quote (대형 인용구 섹션) (5) 3D Card Gallery (가로 스크롤 3D 카드 컬렉션) (6) Parallax (패럴랙스 배경 이미지 + 텍스트) (7) Stats (숫자 카운터 통계 섹션)

그리고 맨 아래에 Footer 넣어줘. 페이지 진입 시 로딩 화면도 있어야 하고, 커스텀 커서도 포함해줘. 우하단에 플로팅 메뉴 버튼도 넣어줘.

기능
2-1. 로딩 화면 페이지 처음 열리면 검정 배경에 "LOADING GALLERY" 텍스트가 중앙에 표시되고, 그 아래에 가로 200px짜리 얇은 바에서 코랄 레드 프로그레스 라인이 왼쪽에서 오른쪽으로 채워지는 애니메이션을 보여줘. 약 2초 후에 로딩 화면이 페이드아웃 되면서 사라지게 해줘.

2-2. 커스텀 커서 마우스 포인터를 두 개 레이어로 대체해줘. 안쪽은 코랄 레드 작은 원형 도트(8px), 바깥쪽은 코랄 레드 반투명 원형 테두리(30px). 링크, 버튼, 카드, 갤러리 아이템 위에 올리면 바깥 테두리가 50px로 커지면서 테두리 색이 더 진해지게 해줘. 768px 이하 모바일과 터치 디바이스에서는 커스텀 커서 숨기고 기본 커서로 복원해줘.

2-3. 네비게이션 상단 고정 네비게이션 바를 만들어줘. 왼쪽에 "IMMERSIVE GALLERY" 로고, 오른쪽에 메뉴 링크들(HOME, FEATURED, COLLECTIONS, ARTISTS, CONTACT) 배치해줘. 배경은 상단에서 아래로 향하는 반투명 검정 그라데이션 + backdrop-filter blur 효과를 적용해줘. 아래로 스크롤하면 네비게이션이 위로 숨겨지고, 위로 스크롤하면 다시 나타나는 show/hide 동작을 넣어줘. 모든 앵커 링크에 부드러운 스크롤 적용해줘. 768px 이하 모바일에서는 메뉴 링크를 숨겨줘.

2-4. 무한 가로 스크롤 갤러리 이미지와 비디오 아이템들을 가로로 나열하고 CSS animation으로 무한 반복 자동 스크롤 되게 해줘(30초 주기). 동일 아이템 세트를 2벌 복제해서 이음새 없이 반복되도록 해줘. 호버 시 애니메이션이 일시정지되고, 각 아이템에 마우스를 올리면 살짝 확대(1.05배)되면서 하단에서 어두운 그라데이션 오버레이와 함께 제목·설명이 페이드인 되게 해줘.

2-5. 벤토 그리드 CSS Grid를 사용해서 다양한 크기의 카드를 비정형 배치해줘. large(2컬럼×2행), wide(2컬럼×1행), tall(1컬럼×2행), 기본(1컬럼×1행) 네 종류 크기를 혼합해줘. 각 카드는 라운드 20px, 호버 시 위로 10px 떠오르면서 그림자 깊어지고, 이미지가 1.1배 확대되면서 하단 그라데이션 오버레이 위에 번호(큰 코랄색 숫자) + 작품명 + 설명이 페이드인 되게 해줘. 이미지와 비디오(autoplay muted loop)를 섞어서 넣어줘. 768px 이하에서는 large/wide 아이템도 1컬럼으로 변환해줘.

2-6. 패럴랙스 효과 배경 이미지 레이어가 스크롤 시 다른 속도로 움직이는 패럴랙스 효과를 넣어줘. data-speed 속성으로 속도를 제어하고, 이미지 레이어는 상하좌우 10% 여유를 둬서(120% 크기) 스크롤 시 빈 공간이 보이지 않게 해줘. 중앙에 큰 텍스트("EXPERIENCE ART")와 서브텍스트를 오버레이해줘.

2-7. 3D 카드 갤러리 가로 스크롤 가능한 카드 컨테이너에 이미지/비디오 카드 5개를 넣어줘. perspective를 적용하고 호버 시 카드가 Y축으로 10도 회전하면서 앞으로 50px 튀어나오는 3D 효과를 넣어줘. scroll-snap으로 카드 중앙 정렬 스냅해줘. 스크롤바도 코랄 레드 컬러로 스타일링해줘. 768px 이하에서는 3D 효과 비활성화해줘.

2-8. 숫자 카운터 통계 4개 통계 항목(Featured Artists 127, Artworks 2847, Exhibitions 89, Countries 45)을 그리드로 배치해줘. 각 카드에 테두리 + 라운드 20px, 호버 시 테두리가 코랄색으로 변하면서 위로 살짝 떠오르는 효과. IntersectionObserver로 화면에 보이면 0에서 목표 숫자까지 카운트업 애니메이션을 실행해줘. requestAnimationFrame 사용해서 부드럽게.

2-9. 인용구 섹션 배경에 매우 큰 반투명 글자("ART")를 깔고, 그 위에 세리프 이탤릭으로 명언을 중앙 배치해줘. 아래에 작성자 이름(대문자, letter-spacing 넓게, 회색).

2-10. 스크롤 Reveal 애니메이션 주요 섹션들에 .reveal 클래스를 적용하고, IntersectionObserver로 뷰포트 80% 지점에 들어오면 아래에서 위로 페이드인(opacity 0→1, translateY 50px→0) 되는 애니메이션을 넣어줘. transition 0.8초.

디자인
3-1. 컬러 팔레트 메인 배경: #0a0a0a (깊은 블랙) 보조 배경: #1a1a1a (다크 그레이) 텍스트 기본: #ffffff (화이트) 텍스트 보조: #999999 (미디엄 그레이) 포인트 컬러: #ff6b6b (코랄 레드 — 커서, 카운터 숫자, 호버 강조, 프로그레스 바 등 전반에 사용) 기본 트랜지션 이징: cubic-bezier(0.4, 0, 0.2, 1)

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. 전체 톤앤무드 시네마틱하고 몰입감 있는 디지털 아트 갤러리 느낌. 배경은 거의 순수 블랙, 콘텐츠가 어둠 속에서 떠오르는 느낌으로 해줘. 카드와 이미지에 라운드 20px 적용. 호버 인터랙션을 모든 요소에 적용하되 트랜지션은 0.3~0.6초로 부드럽게. body에 cursor: none 적용하고 커스텀 커서로 대체. 오버레이는 하단에서 상단으로 향하는 검정 투명 그라데이션을 기본 패턴으로 사용.

3-4. 각 섹션 디자인 상세

(1) Hero 전체 화면(100vh), 배경에 이미지를 깔고 opacity 0.6 + contrast(1.2) 필터 적용. 중앙에 큰 타이틀 "BEYOND PERCEPTION" (Playfair Display, 반응형 clamp 60px~120px, 줄바꿈 있음)과 서브타이틀 "A JOURNEY THROUGH DIGITAL ARTISTRY" (letter-spacing 3px, 회색). 타이틀은 0.5초 딜레이로, 서브타이틀은 0.7초 딜레이로 아래에서 위로 페이드인.

(2) Infinite Scroll Gallery 패딩 상하 100px, 아이템 사이 간격 30px. 각 아이템은 너비 400px × 높이 500px, 라운드 20px. 이미지 5개(비디오 2개 포함)를 한 세트로, 동일 세트를 복제해서 총 10개로 무한 스크롤. 각 아이템에 제목과 부제(예: "Urban Dreams" / "Digital Collection 2024") 오버레이.

(3) Bento Grid 최대 너비 1400px 중앙 정렬, 패딩 100px 40px. 상단에 "FEATURED WORKS" 제목(Bebas Neue, 60px, letter-spacing 5px)과 설명. grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)), gap 20px, grid-auto-flow: dense. 아이템 6개(비디오 2개 포함): 01 large, 02 기본(비디오), 03 tall, 04 기본, 05 wide(비디오), 06 기본. 각 아이템 최소 높이 300px.

(4) Quote 패딩 상하 150px. 배경에 "ART" 글자(Bebas Neue, 300px, opacity 5%). 명언 "The purpose of art is washing the dust of daily life off our souls." (Cormorant Garamond, 48px, 이탤릭). 작성자 "— Pablo Picasso" (14px, 대문자, letter-spacing 3px, 회색). 768px 이하에서 명언 32px로 축소.

(5) 3D Card Gallery 패딩 100px 40px, perspective 1000px. 카드 5개(비디오 2개 포함), 각 350px×500px, 라운드 20px, 그림자. 하단에 제목과 부제 오버레이 (그라데이션 배경). 스크롤바 높이 4px, 트랙 흰색 반투명, 썸 코랄 레드.

(6) Parallax 높이 100vh, 배경 이미지 위에 중앙 텍스트 "EXPERIENCE ART" (Bebas Neue, 80px, letter-spacing 5px)와 서브텍스트 "Where creativity meets innovation" (18px, 회색).

(7) Stats 배경 #1a1a1a, 패딩 100px 40px. 상단에 "BY THE NUMBERS" 제목과 설명. 4컬럼 그리드(반응형 minmax 250px), gap 40px, 최대 너비 1200px. 각 카드에 패딩 40px, 1px 흰색 반투명 테두리, 라운드 20px. 숫자는 Bebas Neue 72px 코랄색, 라벨은 14px 대문자 회색.

Footer 상단 1px 흰색 반투명 보더, 패딩 80px 40px 40px. 중앙 정렬로 "IMMERSIVE GALLERY" (Bebas Neue, 32px), 설명 텍스트(영업시간 포함), 소셜 링크 4개(INSTAGRAM, TWITTER, FACEBOOK, YOUTUBE) 가로 나열. 소셜 링크 호버 시 코랄색.

플로팅 메뉴 버튼 우하단 고정(bottom 40px, right 40px), 코랄 레드 원형(60px), "MENU" 텍스트(Bebas Neue, 18px, 흰색), 코랄색 그림자 효과. 호버 시 1.1배 확대 + 그림자 강화. 클릭 시 180도 회전 토글.

3-5. 각 섹션 이미지/비디오 리소스

(1) Hero 배경 이미지 https://cdn.midjourney.com/d88a0583-0025-40b1-9d51-0fda4a81db42/0_0.png

(2) Infinite Scroll Gallery (5개 아이템 × 2벌 복제)

이미지1: https://cdn.midjourney.com/d88a0583-0025-40b1-9d51-0fda4a81db42/0_1.png ("Urban Dreams" / "Digital Collection 2024")
비디오1: https://cdn.midjourney.com/video/efbc89fc-08ba-4326-b0ae-f45b69ab5283/3.mp4 ("Motion Studies" / "Video Art Series")
이미지2: https://cdn.midjourney.com/d88a0583-0025-40b1-9d51-0fda4a81db42/0_2.png ("Abstract Reality" / "Contemporary Works")
비디오2: https://cdn.midjourney.com/video/8c31b1e5-f7c1-488d-8eb2-3afff61b32a8/0.mp4 ("Nature's Dance" / "Environmental Art")
이미지3: https://cdn.midjourney.com/d88a0583-0025-40b1-9d51-0fda4a81db42/0_3.png ("Minimal Forms" / "Sculptural Series")
(3) Bento Grid Gallery (6개 아이템)

01 large 이미지: https://cdn.midjourney.com/d42ae88a-c9ee-4cde-87f8-0c8b8a26bffb/0_0.png ("Ethereal Landscapes" / "Digital Exploration Series")
02 비디오: https://cdn.midjourney.com/video/4e36274c-4924-4079-9b97-ae83c02afff1/1.mp4 ("Fluid Motion" / "Video Installation")
03 tall 이미지: https://cdn.midjourney.com/d42ae88a-c9ee-4cde-87f8-0c8b8a26bffb/0_1.png ("Vertical Horizons" / "Photography Series")
04 이미지: https://cdn.midjourney.com/d42ae88a-c9ee-4cde-87f8-0c8b8a26bffb/0_2.png ("Color Studies" / "Abstract Collection")
05 wide 비디오: https://cdn.midjourney.com/video/7c00cd53-8172-47af-98bd-9c004e4b8e31/1.mp4 ("Dynamic Forms" / "Motion Graphics")
06 이미지: https://cdn.midjourney.com/d42ae88a-c9ee-4cde-87f8-0c8b8a26bffb/0_3.png ("Light Studies" / "Experimental Photography")
(5) 3D Card Gallery (5개 카드)

이미지1: https://cdn.midjourney.com/28eb2ef4-d6b0-4f74-ac62-c94d15e8adf4/0_0.png ("2024 Collection" / "Latest Works")
비디오1: https://cdn.midjourney.com/video/c63a04db-5b8f-49e8-81ad-6aac06d97a97/2.mp4 ("Video Art" / "Moving Images")
이미지2: https://cdn.midjourney.com/28eb2ef4-d6b0-4f74-ac62-c94d15e8adf4/0_1.png ("Archive" / "Historical Works")
비디오2: https://cdn.midjourney.com/video/47470e92-df6a-48b3-b7bd-921ee2a795b9/0.mp4 ("Experimental" / "Avant-garde Works")
이미지3: https://cdn.midjourney.com/28eb2ef4-d6b0-4f74-ac62-c94d15e8adf4/0_2.png ("Classics" / "Timeless Pieces")
(6) Parallax 배경 이미지 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)로 컬러, 서체, 이징 커브 등 모두 관리해줘. 반응형은 768px 한 구간으로 미디어쿼리 작성해줘. 768px 이하: 네비 메뉴 숨김, Hero 타이틀 60px, bento large/wide 1컬럼 변환, 인용구 32px, 3D 효과 비활성화, 커스텀 커서 숨기고 기본 커서 복원.

4-3. JavaScript 관련 IntersectionObserver로 스크롤 reveal 애니메이션 및 카운터 트리거, scroll 이벤트로 네비게이션 show/hide 및 패럴랙스 처리, requestAnimationFrame으로 카운터 애니메이션. mousemove 이벤트로 커스텀 커서 위치 업데이트. 모든 비디오에 autoplay muted loop playsinline 속성. 터치 디바이스 감지해서 커서 숨김 처리.

추가 조건 언어는 영어 전용. HTML lang="ko"로 설정해줘. 섹션 좌우 패딩 40px 기본, 콘텐츠 최대 너비 1400px. 모든 transition에 일관된 이징 커브 적용. 코드에 영역별로 주석 넣어줘. 실제 서버 없이 로컬에서 HTML 파일 하나만 열어도 완전하게 동작해야 해.