0036

HTML, CSS, JavaScript만 사용해서 단일 HTML 파일로 실험적인 디지털 아트 갤러리 웹사이트를 만들어줘. 갤러리 이름은 "ARTSCAPE"이고, 전체적으로 다크 테마(순수 블랙 배경)에 핫핑크(#ff0066) 포인트를 활용한 실험적이고 아방가르드한 디자인으로 만들어줘. 영문 전용 사이트야.

프로그램 개요
풀스크린 그리드 기반의 몰입형 갤러리 레이아웃이야. 전통적인 섹션 나누기 대신, 하나의 거대한 아트 캔버스 위에 미디어(이미지+비디오)가 그리드로 배치되고, 그 위에 플로팅 UI 요소들이 떠 있는 구조야.

주요 레이어 구성은 아래와 같아: (1) 로딩 화면 (2) 배경 타이포그래피 레이어 (거대한 아웃라인 텍스트가 천천히 흘러가는 장식) (3) 메인 아트 그리드 (이미지/비디오 셀들) (4) 중앙 히어로 타이틀 (mix-blend-mode로 그리드 위에 겹침) (5) 수평으로 흘러가는 플로팅 텍스트 배너 (6) 하단 고정 스크롤 갤러리 (썸네일 스트립) (7) 플로팅 원형 네비게이션 오브 (8) 클릭 시 올라오는 하단 정보 패널 (9) 액체 커서

기능
2-1. 로딩 화면 페이지 처음 열리면 순수 블랙 배경에 "LOADING" 텍스트가 넓은 letter-spacing(0.5em)으로 가운데 표시돼. 텍스트가 opacity 0.3↔1 사이를 반복하는 펄스 애니메이션을 보여줘. 모든 리소스 로드 완료 후 약 1.5초 뒤에 로딩 화면이 페이드아웃되면서 사라지게 해줘.

2-2. 액체 커서 기본 마우스 포인터를 숨기고(cursor: none), 30px 크기의 흰색 원형 커서를 만들어줘. mix-blend-mode: exclusion 적용해줘. 커서가 마우스를 약간 느리게 따라오는 lerp(0.1) 효과를 넣어줘. 인터랙티브 요소(링크, 버튼, 카드, 썸네일 등) 위에 올리면 커서가 3배로 커지는 expand 효과, 마우스 클릭 시 0.5배로 줄어드는 contract 효과를 넣어줘. requestAnimationFrame으로 부드럽게 애니메이션해줘.

2-3. 플로팅 원형 네비게이션 (Nav Orb) 우상단에 80px 크기의 반투명 원형 오브를 고정 배치해줘. backdrop-filter: blur(20px) 적용. 기본 상태에서 ☰ 아이콘 표시. 호버 시 살짝 커지면서 180도 회전하고 핑크빛으로 변하게 해줘. 클릭하면 원이 300×400px 크기의 라운드 사각형으로 확장되면서 내부에 숨겨진 메뉴가 페이드인 돼. 메뉴 항목: GALLERY, ABOUT, CONTACT, ARCHIVE. 각 항목은 가늘고 넓은 letter-spacing의 텍스트, 호버 시 하단에 핑크색 언더라인이 왼쪽에서 오른쪽으로 펼쳐지게 해줘. 다시 클릭하면 ✕ 아이콘과 함께 원래 원형으로 축소. ESC 키로도 닫히게 해줘. 확장 애니메이션은 cubic-bezier(0.68, -0.55, 0.265, 1.55) 바운스 이징 적용.

2-4. 메인 아트 그리드 auto-fit + minmax(300px, 1fr) 반응형 그리드로 아트 셀들을 배치해줘. 셀 간 간격은 2px, 배경 #111(간격 라인이 미세한 회색선처럼 보이도록). 각 셀의 이미지/비디오는 기본 grayscale(100%) 필터를 적용하고, 호버 시 컬러 복원 + 1.1배 확대 + 핑크색 글로우 box-shadow 효과를 넣어줘. 호버 시 셀이 z-index 올라가면서 1.05배 scale 되는 pop-out 효과도 적용해줘. 비디오는 autoplay, loop, muted, playsInline으로 자동 재생 처리. 각 셀 클릭 시 하단 정보 패널이 올라와.

2-5. 중앙 히어로 타이틀 화면 정중앙에 "ARTSCAPE" 텍스트를 거대하게 (clamp 3rem~10rem) 고정 배치해줘. font-weight: 900, letter-spacing: -0.03em. mix-blend-mode: exclusion으로 아래 그리드 콘텐츠와 자연스럽게 섞이게 해줘. 4초 주기로 scale 1↔1.05, opacity 0.1↔0.3 사이를 반복하는 "호흡" 애니메이션 적용. pointer-events: none으로 클릭 불가. 글리치 효과도 넣어줘: ::before(핑크), ::after(시안) 가상 요소로 clip-path가 불규칙하게 움직이면서 색상 분리되는 효과.

2-6. 플로팅 텍스트 배너 화면 세로 중앙에 "EXPERIMENTAL × DIGITAL × ART × GALLERY" 텍스트가 오른쪽에서 왼쪽으로 30초간 무한 수평 이동하는 배너를 만들어줘. clamp(2rem~6rem) 크기, font-weight: 900, mix-blend-mode: difference, pointer-events: none. white-space: nowrap으로 한 줄 유지.

2-7. 배경 타이포그래피 레이어 "DIGITAL"과 "ARTSCAPE" 두 개의 거대한 아웃라인 텍스트(clamp 8rem~20rem, -webkit-text-stroke: 1px rgba 흰색 10% 투명도, 색 채우기 없음)를 배경 장식으로 넣어줘. 하나는 상단 10%에서 왼쪽으로 천천히 드리프트(40초), 다른 하나는 하단 10%에서 오른쪽으로 드리프트(35초). pointer-events: none, z-index 낮게.

2-8. 하단 고정 스크롤 갤러리 (썸네일 스트립) 화면 하단에 120px 높이의 가로 스크롤 썸네일 바를 고정 배치해줘. 반투명 블랙 배경 + backdrop-filter blur, 라운드 15px. 썸네일은 180×100px 라운드 카드, 호버 시 위로 10px 떠오르면서 핑크 글로우. 스크롤바는 숨기고, 자동 스크롤(좌→우→좌 왕복, 0.5px/frame 속도)을 requestAnimationFrame으로 구현해줘. 마우스가 갤러리 위에 올라가면 자동 스크롤 멈추고 수동 스크롤 가능하게. 썸네일 클릭 시 정보 패널 열림.

2-9. 하단 정보 패널 화면 하단에서 올라오는 60vh 높이의 슬라이드업 패널이야. 기본은 화면 밖(bottom: -100%)에 숨어있다가, 아트 셀이나 썸네일 클릭 시 bottom: 0으로 올라와. 반투명 블랙 배경 + backdrop-filter blur(30px). 바운스 이징(cubic-bezier(0.68, -0.55, 0.265, 1.55))으로 등장. 내부에 프로젝트 제목(그라데이션 텍스트: 흰→핑크), 설명, 이미지/비디오 미리보기 표시. 우상단에 원형 닫기 버튼(호버 시 핑크색 + 90도 회전). ESC 키로도 닫기 가능.

디자인
3-1. 컬러 팔레트 메인 배경: #000000 (순수 블랙) 그리드 간격 배경: #111111 UI 글래스 배경: rgba(255, 255, 255, 0.1) + backdrop-filter blur 액센트: #ff0066 (핫핑크) 보조 액센트: #00ffff (시안, 글리치 효과용) 텍스트: #ffffff 포인트 글로우: rgba(255, 0, 102, 0.3) (그림자용)

3-2. 서체 시스템 폰트 스택 사용: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif. 외부 폰트 CDN 불필요. 전체적으로 산세리프, 굵은 웨이트(700~900) 위주.

3-3. 전체 톤앤무드 어둡고 실험적인 디지털 아트 갤러리/뮤지엄 느낌. mix-blend-mode: exclusion과 difference를 적극 활용해서 레이어들이 서로 반전/간섭하는 시각 효과. 글리치, 모노크롬→컬러 전환, 대비 강한 타이포그래피 등 아방가르드한 요소 강조. 그리드 셀 사이의 2px 갭이 미세한 선 패턴을 만들어 전체적으로 모자이크/디스플레이 월 느낌 연출.

3-4. 이미지 처리 스타일 그리드 내 이미지/비디오는 기본 grayscale(100%), 호버 시 grayscale(0%)로 컬러 복원. object-fit: cover로 셀에 꽉 채우기. 전환은 0.8초로 느긋하게. 정보 패널 안 이미지는 라운드 10px, max-width: 600px.

3-5. 미디어 및 레이아웃 상세

메인 아트 그리드에 사용할 미디어 데이터 (이미지 16개 + 비디오 4개, 총 20개):

이미지:

https://cdn.midjourney.com/e2961bd3-5f3e-4df5-97b0-372cde33881e/0_3.png (Digital Dreams)
https://cdn.midjourney.com/e2961bd3-5f3e-4df5-97b0-372cde33881e/0_2.png (Neon Nights)
https://cdn.midjourney.com/e2961bd3-5f3e-4df5-97b0-372cde33881e/0_1.png (Synthetic Nature)
https://cdn.midjourney.com/e2961bd3-5f3e-4df5-97b0-372cde33881e/0_0.png (Future Memories)
https://cdn.midjourney.com/921d92cb-996f-4d3a-aa06-257595ab9574/0_1.png (Chromatic Waves)
https://cdn.midjourney.com/921d92cb-996f-4d3a-aa06-257595ab9574/0_0.png (Abstract Reality)
https://cdn.midjourney.com/921d92cb-996f-4d3a-aa06-257595ab9574/0_2.png (Data Landscapes)
https://cdn.midjourney.com/921d92cb-996f-4d3a-aa06-257595ab9574/0_3.png (Neural Networks)
https://cdn.midjourney.com/7e67b738-f518-4963-ab7f-0f6aee68631f/0_0.png (Quantum Fields)
https://cdn.midjourney.com/7e67b738-f518-4963-ab7f-0f6aee68631f/0_1.png (Time Fragments)
https://cdn.midjourney.com/7e67b738-f518-4963-ab7f-0f6aee68631f/0_2.png (Void Spaces)
https://cdn.midjourney.com/7e67b738-f518-4963-ab7f-0f6aee68631f/0_3.png (Light Sculptures)
https://cdn.midjourney.com/a727665f-52bb-4f12-8ab5-a14de7d37fa0/0_0.png (Organic Machines)
https://cdn.midjourney.com/a727665f-52bb-4f12-8ab5-a14de7d37fa0/0_1.png (Crystal Growth)
https://cdn.midjourney.com/a727665f-52bb-4f12-8ab5-a14de7d37fa0/0_2.png (Echo Chambers)
https://cdn.midjourney.com/a727665f-52bb-4f12-8ab5-a14de7d37fa0/0_3.png (Fractal Dreams)
비디오:

https://cdn.midjourney.com/video/8c31b1e5-f7c1-488d-8eb2-3afff61b32a8/0.mp4 (Motion Study #1)
https://cdn.midjourney.com/video/8c31b1e5-f7c1-488d-8eb2-3afff61b32a8/1.mp4 (Motion Study #2)
https://cdn.midjourney.com/video/8c31b1e5-f7c1-488d-8eb2-3afff61b32a8/2.mp4 (Motion Study #3)
https://cdn.midjourney.com/video/8c31b1e5-f7c1-488d-8eb2-3afff61b32a8/3.mp4 (Motion Study #4)
그리드에 배치할 때 이미지와 비디오를 섞어서 랜덤 순서로 셔플해줘.

하단 썸네일 스트립에 사용할 추가 이미지 24개:

https://cdn.midjourney.com/6f1e16bb-1c36-4d96-a63a-07d287befbb5/0_0.png
https://cdn.midjourney.com/6f1e16bb-1c36-4d96-a63a-07d287befbb5/0_1.png
https://cdn.midjourney.com/6f1e16bb-1c36-4d96-a63a-07d287befbb5/0_2.png
https://cdn.midjourney.com/6f1e16bb-1c36-4d96-a63a-07d287befbb5/0_3.png
https://cdn.midjourney.com/435bc734-6093-48be-8671-a03dac8c0646/0_0.png
https://cdn.midjourney.com/435bc734-6093-48be-8671-a03dac8c0646/0_1.png
https://cdn.midjourney.com/435bc734-6093-48be-8671-a03dac8c0646/0_2.png
https://cdn.midjourney.com/435bc734-6093-48be-8671-a03dac8c0646/0_3.png
https://cdn.midjourney.com/24bf6d75-335f-4e3e-a0ac-51f1b596650d/0_0.png
https://cdn.midjourney.com/24bf6d75-335f-4e3e-a0ac-51f1b596650d/0_1.png
https://cdn.midjourney.com/24bf6d75-335f-4e3e-a0ac-51f1b596650d/0_2.png
https://cdn.midjourney.com/24bf6d75-335f-4e3e-a0ac-51f1b596650d/0_3.png
https://cdn.midjourney.com/b20cfa8a-047e-4cc9-9cb1-fd00cf5b6868/0_0.png
https://cdn.midjourney.com/b20cfa8a-047e-4cc9-9cb1-fd00cf5b6868/0_1.png
https://cdn.midjourney.com/b20cfa8a-047e-4cc9-9cb1-fd00cf5b6868/0_2.png
https://cdn.midjourney.com/b20cfa8a-047e-4cc9-9cb1-fd00cf5b6868/0_3.png
https://cdn.midjourney.com/deb55a2f-c5dd-4f0e-91ae-a4a29a82ed7c/0_0.png
https://cdn.midjourney.com/deb55a2f-c5dd-4f0e-91ae-a4a29a82ed7c/0_1.png
https://cdn.midjourney.com/deb55a2f-c5dd-4f0e-91ae-a4a29a82ed7c/0_2.png
https://cdn.midjourney.com/deb55a2f-c5dd-4f0e-91ae-a4a29a82ed7c/0_3.png
https://cdn.midjourney.com/d88cbb51-1d35-4110-8c22-a159348485cf/0_0.png
https://cdn.midjourney.com/d88cbb51-1d35-4110-8c22-a159348485cf/0_1.png
https://cdn.midjourney.com/d88cbb51-1d35-4110-8c22-a159348485cf/0_2.png
https://cdn.midjourney.com/d88cbb51-1d35-4110-8c22-a159348485cf/0_3.png
기술
4-1. 기본 구조 단일 HTML 파일 하나에 CSS(style 태그)와 JavaScript(script 태그) 모두 포함해줘. 외부 라이브러리나 프레임워크 절대 사용하지 말고, 순수 HTML + CSS + Vanilla JS로만 만들어줘. 외부 CDN 링크 없음.

4-2. CSS 관련 CSS 변수로 컬러, 액센트 관리. 반응형은 768px 한 구간으로 미디어쿼리 작성. 768px 이하: 그리드 1컬럼, Nav Orb 크기 축소(60px), 확장 시 전체 너비, 히어로 타이틀 크기 축소, 플로팅 텍스트 속도 빠르게(20초), 썸네일 바 높이 80px·썸네일 120×60px, 아트셀 최소 높이 200px.

4-3. JavaScript 관련 모든 미디어 데이터를 JS 배열로 관리하고, DOM을 동적으로 생성해줘. 그리드 셀과 썸네일 모두 JS로 생성. requestAnimationFrame으로 커서 lerp와 썸네일 자동 스크롤 처리. 이미지에 lazy loading(loading="lazy") 적용. IntersectionObserver로 뷰포트 진입 시 이미지 로딩 최적화. 터치 스와이프 기본 감지(touchstart/touchend) 포함.

추가 조건 HTML lang="ko"로 설정해줘. body에 cursor: none 적용. 히어로 타이틀, 플로팅 텍스트, 배경 타이포는 user-select: none 처리. 모든 transition에 cubic-bezier 이징 적용하고 호버 효과는 0.3~0.8초 사이로. 코드에 영역별로 주석 넣어줘. 실제 서버 없이 로컬에서 HTML 파일 하나만 열어도 완전하게 동작해야 해.