0016

HTML, CSS, JavaScript만 사용해서 단일 HTML 파일로 프리미엄 수평 스크롤 갤러리 웹사이트를 만들어줘. 갤러리 이름은 "HORIZONTAL GALLERY"이고, 전체적으로 어두운 다크 테마(거의 블랙) 배경에 그레이스케일 이미지/영상이 커서 근접 시 컬러로 전환되는 인터랙티브 갤러리 경험을 만들어줘.

프로그램 개요
총 5개 섹션이 가로로 나란히 배치된 수평 스크롤(Horizontal Scroll) 웹사이트야. 마우스 휠을 굴리면 세로가 아니라 좌우로 섹션이 전환돼. 섹션 순서는 아래와 같아.

(1) Featured (2) Collections (3) Artists (4) Exhibitions (5) Archive

페이지 진입 시 로딩 화면이 있어야 하고, 커스텀 커서도 포함해줘. 각 섹션 내부에는 이미지/영상 갤러리 아이템과 텍스트 아이템(인용문, 통계, 설명 등)이 혼합된 비정형 그리드가 배치돼.

기능
2-1. 로딩 화면 페이지 처음 열리면 검정 배경에 "LOADING EXPERIENCE" 텍스트가 펄스(pulse) 애니메이션으로 깜빡여. 폰트는 Bebas Neue, letter-spacing 넓게. 약 1초 후에 로딩 화면이 페이드아웃 되면서 사라지게 해줘.

2-2. 커스텀 커서 기본 마우스 포인터를 숨기고(cursor: none), 100px 크기의 원형 커서를 만들어줘. radial-gradient로 중심이 살짝 밝고 바깥이 투명한 은은한 빛 느낌으로 해줘. mix-blend-mode: screen 적용. 커서가 마우스를 약간 느리게 따라오는 지연(lerp) 효과를 넣어줘. 갤러리 아이템 근처(반경 150px 이내)에 마우스가 오면 커서가 150px로 커지게 해줘. 768px 이하 모바일에서는 커스텀 커서 숨기고 기본 커서 복원해줘.

2-3. 수평 스크롤 내비게이션 상단 고정 헤더에 왼쪽 로고("HORIZONTAL GALLERY"), 오른쪽에 섹션 메뉴 링크 5개(FEATURED, COLLECTIONS, ARTISTS, EXHIBITIONS, ARCHIVE) 배치해줘. 헤더 배경은 위쪽이 거의 불투명한 검정이고 아래로 갈수록 투명해지는 그라디언트 + backdrop-filter blur 적용. 메뉴 링크 클릭하면 해당 섹션으로 수평 이동해줘. 링크 호버 시 하단에 흰색 밑줄이 왼쪽에서 오른쪽으로 펼쳐지는 애니메이션 넣어줘.

2-4. 수평 스크롤 전환 마우스 휠(deltaY) 입력을 가로 섹션 전환으로 변환해줘. 한 번 휠 시 한 섹션씩 이동하고, 연속 입력 방지를 위해 800ms 쿨다운을 걸어줘. 키보드 좌/우 화살표로도 섹션 이동 가능하게 해줘. 모바일에서는 좌/우 스와이프(50px 이상)로 섹션 전환하게 해줘. 섹션 전환 애니메이션은 translateX + cubic-bezier(0.4, 0, 0.2, 1) 이징으로 0.8초간 부드럽게 슬라이드.

2-5. 갤러리 아이템 인터랙션 각 갤러리 아이템(이미지/영상)은 기본 상태에서 grayscale(100%) + contrast(1.2) 필터가 적용된 흑백 상태야. 마우스 커서가 아이템 중심으로부터 반경 150px 이내로 접근하면 해당 아이템에 active 클래스가 붙으면서: 필터가 grayscale(0%)로 전환되어 컬러가 복원되고, 이미지가 scale(1.1)로 살짝 확대되고, 하단 그라디언트 오버레이가 페이드인 되면서 작품 제목과 부제가 아래에서 위로 슬라이드인 돼. 좌상단에는 작품 번호(01~24)가 연하게 표시되고, active 시 살짝 이동해줘. 모바일에서는 기본으로 컬러 상태(grayscale 해제)로 보여줘.

2-6. 비정형 그리드 레이아웃 각 섹션 내부는 6컬럼 CSS Grid로 구성하고, nth-child 선택자를 활용해서 특정 아이템들이 2컬럼×2행, 2컬럼×1행, 1컬럼×2행 등 다양한 크기로 배치되게 해줘. 그리드 내부는 세로 스크롤이 가능하게(overflow-y: auto) 하되 가로 스크롤은 숨겨줘. 스크롤바는 4px 너비의 미니멀한 스타일로 커스텀해줘.

디자인
3-1. 컬러 팔레트 메인 배경: #0a0a0a (거의 블랙) 갤러리 아이템 배경: #111 텍스트 아이템 테두리: rgba(255, 255, 255, 0.1) (호버 시 0.3) 텍스트: #fff (제목), #999 (부제/본문) 전체적으로 모노크롬 톤, 컬러는 오직 갤러리 아이템 호버 시에만 나타남.

3-2. 서체 Google Fonts에서 아래 4개 불러와줘. Playfair Display (400, 700, italic) → 인용문, 작품 제목 Bebas Neue → 로고, 섹션 타이틀, 작품 번호, 대형 텍스트 Montserrat (100, 300, 400, 600) → 본문, UI, 부제 Cormorant Garamond (300, 400, italic) → 텍스트 아이템 중간 제목

3-3. 전체 톤앤무드 어둡고 미니멀한 현대 갤러리/뮤지엄 느낌. 콘텐츠가 흑백으로 절제되어 있다가 사용자의 커서 접근에 반응해 컬러가 살아나는 인터랙티브 경험이 핵심이야. 각 섹션 중앙에는 섹션 이름이 120px 크기로 매우 연하게(opacity 0.05) 워터마크처럼 깔려있어. 갤러리 아이템은 라운드 8px, 텍스트 아이템은 투명 배경에 미세한 흰색 테두리.

3-4. 텍스트 아이템 유형 갤러리 그리드 사이사이에 세 종류의 텍스트 아이템을 섞어줘: Quote형 (3컬럼×2행): Playfair Display 이탤릭 48px 인용문 + 작가 이름 Statement형 (2컬럼×1행): Cormorant Garamond 32px 제목 + Montserrat 16px 설명 Stat/Label형 (기본 크기): Bebas Neue 72px 큰 숫자/텍스트 + 작은 레이블

3-5. 각 섹션별 콘텐츠 상세

(1) Featured 갤러리 아이템 6개(이미지 4 + 영상 2) + 텍스트 아이템 2개. 인용문: "Art is not what you see, but what you make others see." — Edgar Degas 설명문: "Contemporary Vision" / "Exploring the boundaries between digital and physical realms through innovative artistic expression." 이미지/영상 소스:

이미지01: https://cdn.midjourney.com/d88a0583-0025-40b1-9d51-0fda4a81db42/0_0.png
영상02: https://cdn.midjourney.com/video/efbc89fc-08ba-4326-b0ae-f45b69ab5283/3.mp4
이미지03: https://cdn.midjourney.com/d88a0583-0025-40b1-9d51-0fda4a81db42/0_1.png
영상04: https://cdn.midjourney.com/video/8c31b1e5-f7c1-488d-8eb2-3afff61b32a8/0.mp4
이미지05: https://cdn.midjourney.com/d88a0583-0025-40b1-9d51-0fda4a81db42/0_2.png
이미지06: https://cdn.midjourney.com/d88a0583-0025-40b1-9d51-0fda4a81db42/0_3.png
(2) Collections 갤러리 아이템 5개(이미지 3 + 영상 2) + 텍스트 아이템 3개. Stat: "2024" / "COLLECTION" 인용문: "Every artist dips his brush in his own soul, and paints his own nature into his pictures." — Henry Ward Beecher 설명문: "Curated Excellence" / "A carefully selected collection showcasing the evolution of contemporary digital artistry." 이미지/영상 소스:

이미지07: https://cdn.midjourney.com/d88a0583-0025-40b1-9d51-0fda4a81db42/0_1.png
영상08: https://cdn.midjourney.com/video/4e36274c-4924-4079-9b97-ae83c02afff1/1.mp4
이미지09: https://cdn.midjourney.com/d88a0583-0025-40b1-9d51-0fda4a81db42/0_0.png
이미지10: https://cdn.midjourney.com/d88a0583-0025-40b1-9d51-0fda4a81db42/0_2.png
영상11: https://cdn.midjourney.com/video/7c00cd53-8172-47af-98bd-9c004e4b8e31/1.mp4
(3) Artists 갤러리 아이템 5개(이미지 3 + 영상 2) + 텍스트 아이템 3개. 설명문: "Featured Artists" / "Discover the visionaries shaping tomorrow's artistic landscape." 인용문: "The purpose of art is washing the dust of daily life off our souls." — Pablo Picasso Stat: "32" / "ARTISTS FEATURED" 이미지/영상 소스:

이미지12: https://cdn.midjourney.com/d88a0583-0025-40b1-9d51-0fda4a81db42/0_3.png
영상13: https://cdn.midjourney.com/video/c63a04db-5b8f-49e8-81ad-6aac06d97a97/2.mp4
이미지14: https://cdn.midjourney.com/d42ae88a-c9ee-4cde-87f8-0c8b8a26bffb/0_0.png
이미지15: https://cdn.midjourney.com/d42ae88a-c9ee-4cde-87f8-0c8b8a26bffb/0_1.png
영상16: https://cdn.midjourney.com/video/47470e92-df6a-48b3-b7bd-921ee2a795b9/0.mp4
(4) Exhibitions 갤러리 아이템 4개(이미지 3 + 영상 1) + 텍스트 아이템 3개. 설명문(Statement): "Current Exhibition" / "Experience immersive installations that challenge perception and redefine space." 인용문: "Art enables us to find ourselves and lose ourselves at the same time." — Thomas Merton 정보문: "Visit Us" / "Open Tuesday to Sunday, 10:00 AM - 8:00 PM" 이미지/영상 소스:

이미지17: https://cdn.midjourney.com/d42ae88a-c9ee-4cde-87f8-0c8b8a26bffb/0_2.png
영상18: https://cdn.midjourney.com/video/348150cc-43eb-4b80-b00c-a39ee9b38cb8/1.mp4
이미지19: https://cdn.midjourney.com/d42ae88a-c9ee-4cde-87f8-0c8b8a26bffb/0_3.png
이미지20: https://cdn.midjourney.com/28eb2ef4-d6b0-4f74-ac62-c94d15e8adf4/0_0.png
(5) Archive 갤러리 아이템 4개(이미지 3 + 영상 1) + 텍스트 아이템 3개. Stat: "EST." / "2020" 인용문: "The artist is nothing without the gift, but the gift is nothing without work." — Émile Zola 설명문(Statement): "Preserving History" / "Four years of groundbreaking exhibitions and artistic innovation archived for future generations." 이미지/영상 소스:

이미지21: https://cdn.midjourney.com/28eb2ef4-d6b0-4f74-ac62-c94d15e8adf4/0_1.png
영상22: https://cdn.midjourney.com/video/1181d9d4-6eb2-4984-8407-7d0e68465057/1.mp4
이미지23: https://cdn.midjourney.com/28eb2ef4-d6b0-4f74-ac62-c94d15e8adf4/0_2.png
이미지24: 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 변수로 배경색, 텍스트색, 이징 커브 등 관리해줘. 반응형은 1200px, 768px 두 구간으로 미디어쿼리 작성해줘. 1200px 이하: 그리드 4컬럼으로 축소, 텍스트 크기 줄임. 768px 이하: 그리드 2컬럼, 커스텀 커서 숨김, 기본 커서 복원, 이미지 기본 컬러(grayscale 해제), 텍스트 아이템 span 조정.

4-3. JavaScript 관련 mousemove 이벤트로 커서 위치 추적 + requestAnimationFrame으로 lerp 애니메이션. 각 갤러리 아이템과 커서 사이 거리를 계산해서 150px 이내면 active 클래스 토글. wheel 이벤트로 수평 섹션 전환(쿨다운 800ms). keydown으로 화살표 키 내비게이션. touchstart/touchend로 모바일 스와이프 감지. 별도 번들러 없이 전역 스코프에서 동작.

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