0031

HTML, CSS, JavaScript만 사용해서 단일 HTML 파일로 몰입형 크리에이티브 포트폴리오 웹사이트를 만들어줘. 스튜디오 이름은 "VISION"이야. 전체적으로 다크 테마(#0a0a0a 배경) 에 화이트 포인트, 미니멀하고 시네마틱한 디자인으로 만들어줘.

1. 프로그램 개요
수직 스크롤이 아니라 수평 가로 스크롤 갤러리 방식의 풀스크린 포트폴리오야. 마우스 휠을 굴리면 좌우로 슬라이드가 전환되는 구조야. 메인 갤러리 위에 떠 있는 UI 요소들(로고, 네비게이션 오브, 프로그레스 바, 스크롤 힌트)이 고정 배치되고, 사이드 패널을 열어서 About / Contact 정보를 볼 수 있어.

구성 요소:

커스텀 리퀴드 커서
좌상단 고정 로고
우측 고정 플로팅 네비게이션 오브(Home, About, Contact)
풀스크린 가로 갤러리 (이미지 + 비디오 19장)
하단 고정 프로그레스 바
하단 중앙 스크롤 힌트 인디케이터
배경 플로팅 셰이프 장식
우측에서 슬라이드인 되는 사이드 패널 (About / Contact)
2. 기능
2-1. 커스텀 리퀴드 커서
기본 마우스 포인터를 숨기고(cursor: none), 흰색 반투명 원형(20px)으로 대체해줘. mix-blend-mode: screen과 filter: blur(1px) 적용해줘. 커서가 마우스를 약간 느리게 따라오는 지연(lerp, speed 0.15) 효과를 requestAnimationFrame으로 구현해줘. 네비게이션 오브, 로고, 버튼 등 인터랙티브 요소 위에 올리면 커서가 60px로 커지면서 반투명해지고 blur가 강해지는 확대 효과를 넣어줘. 마우스가 브라우저 창을 벗어나면 커서가 사라지고, 다시 들어오면 나타나게 해줘.

2-2. 플로팅 네비게이션 오브
화면 우측 중앙에 세로로 정렬된 3개의 원형 오브 버튼을 고정 배치해줘. 각각 Home, About, Contact 역할이야. 60px 크기의 원형이고, 반투명 흰색 배경에 backdrop-filter: blur(10px) 적용해줘. 각 오브 안에 해당 기능을 나타내는 인라인 SVG 아이콘을 넣어줘. 오브에 호버하면 1.2배 확대되면서 배경이 밝아지고, 오브 왼쪽에 라벨 텍스트("Home", "About", "Contact")가 페이드인 + 슬라이드인 되어 나타나게 해줘. 오브 내부에 ::before로 radial-gradient 빛 번짐 효과도 넣어줘.

2-3. 수평 갤러리 슬라이드
19개의 갤러리 아이템을 가로로 나란히 배치하고, 한 번에 하나씩 풀스크린(100vw × 100vh)으로 보여주는 방식이야. 마우스 휠(deltaY), 좌우 키보드 화살표, 터치 스와이프(50px 이상)로 슬라이드를 전환해줘. 전환 애니메이션은 transform: translateX에 cubic-bezier(0.4, 0, 0.2, 1) 이징, 1초 duration이야. 전환 중 중복 입력 방지(isScrolling 플래그)를 넣어줘. 각 갤러리 아이템 중앙에 미디어 영역(70% 너비, 70% 높이, border-radius 30px)을 배치하고, 활성 슬라이드일 때 scale(0.9)에서 scale(1)로 확대되는 트랜지션을 적용해줘.

2-4. 콘텐츠 오버레이
각 슬라이드 좌하단에 콘텐츠 오버레이를 배치해줘. 순번 넘버(120px 크기, font-weight 900, opacity 0.1로 반투명하게), 프로젝트 제목(3rem, font-weight 700, letter-spacing -2px), 설명 텍스트(1.1rem, opacity 0.8)로 구성해줘. 활성 슬라이드가 되면 아래에서 위로 50px 슬라이드업 + 페이드인 되며 나타나고(0.3초 딜레이), 비활성이면 다시 아래로 내려가며 사라지게 해줘.

2-5. 프로그레스 바
화면 최하단에 전체 너비로 고정된 프로그레스 바를 넣어줘. 높이 4px, 배경은 반투명 흰색, 채움 부분은 흰색에서 반투명 흰색으로의 좌→우 그라데이션. 현재 슬라이드 위치에 따라 (현재 슬라이드 + 1) / 전체 슬라이드 수 × 100%로 너비가 부드럽게 변하게 해줘.

2-6. 사이드 패널
화면 우측에서 슬라이드인 되는 400px 너비의 패널을 만들어줘. 어두운 반투명 배경(rgba(20,20,20,0.95))에 backdrop-filter: blur(20px) 적용. 우상단에 X 닫기 버튼(CSS ::before/::after로 만든 크로스), 패딩 넉넉하게. About 패널에는 스튜디오 소개 텍스트와 2×2 스킬 그리드(Design, Motion, Development, Strategy — 각각 서브 설명 포함)를 넣어줘. 스킬 아이템은 반투명 배경 + 라운드 15px, 호버 시 밝아지면서 5px 위로 떠오르게. Contact 패널에는 Name, Email, Message(textarea) 3개 필드의 미니멀 폼을 넣어줘. 입력 필드는 반투명 배경 + 미세한 테두리, 포커스 시 밝아지면서 테두리 강조. 하단에 흰색 배경의 "Send Message" 제출 버튼, 호버 시 위로 떠오르며 글로우 그림자. 제출 시 alert 메시지 표시 후 패널 닫기. 패널 콘텐츠는 열릴 때 아래에서 위로 페이드인 애니메이션(0.3초 딜레이).

2-7. 배경 플로팅 셰이프
화면 전체에 고정된 3개의 큰 원형 셰이프를 배치해줘. 각각 다른 크기(300px, 200px, 150px)와 위치에 놓고, radial-gradient로 중심이 밝고 바깥이 투명한 흐릿한 빛 효과를 줘. 20초 주기로 위치와 크기가 변하는 float 애니메이션을 적용하고, 각 셰이프마다 animation-delay를 다르게 줘서 비동기적으로 움직이게 해줘. pointer-events: none으로 클릭 방해 없게.

2-8. 스크롤 힌트
화면 하단 중앙에 "Scroll to explore" 텍스트(14px, 대문자, letter-spacing 넓게, opacity 0.6)와 그 옆에 3개의 흰색 작은 점(8px)이 순차적으로 오른쪽으로 이동했다 돌아오는 반복 애니메이션을 넣어줘. 각 점마다 0.2초씩 딜레이를 줘서 물결처럼 흘러가는 느낌을 만들어줘.

3. 디자인
3-1. 컬러 팔레트
메인 배경: #0a0a0a (거의 검정) 패널/카드 배경: rgba(20, 20, 20, 0.95), rgba(255, 255, 255, 0.05~0.1) 텍스트: #ffffff 서브 텍스트: rgba(255, 255, 255, 0.6~0.8) 강조/인터랙션: 순백 #ffffff 테두리: rgba(255, 255, 255, 0.1~0.3) 커서/글로우: rgba(255, 255, 255, 0.3~0.8)

3-2. 서체
시스템 폰트 스택 사용: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif. 외부 폰트 CDN 불필요. 제목은 font-weight 700~900, letter-spacing 좁게(-1px ~ -2px). 본문은 font-weight 400, line-height 1.6.

3-3. 전체 톤앤무드
어둡고 시네마틱한 갤러리/뮤지엄 느낌. 흰색과 검정의 강한 대비, 반투명/블러 처리로 깊이감 표현. 요소들이 떠 있는 듯한 레이어드 구조. 모든 트랜지션에 cubic-bezier(0.4, 0, 0.2, 1) 이징 커브 사용. 라운드 처리는 30px(미디어), 15px(카드), 10px(입력 필드) 등 넉넉하게.

3-4. 이미지/미디어 처리
갤러리 미디어 영역은 border-radius: 30px에 overflow: hidden. 이미지와 비디오 모두 object-fit: cover로 영역을 꽉 채우게. 비디오는 autoplay loop muted playsinline 속성 적용.

3-5. 각 슬라이드 상세 (미디어 + 콘텐츠)
총 19개 슬라이드. 각 슬라이드에 순번(01~19), 제목, 설명, 미디어(이미지 또는 비디오)가 포함돼.

(슬라이드 01) 이미지 — 제목: "Digital Horizons" / 설명: "Exploring the boundaries between reality and digital art" 이미지: https://cdn.midjourney.com/e2961bd3-5f3e-4df5-97b0-372cde33881e/0_3.png

(슬라이드 02) 이미지 — 제목: "Neon Dreams" / 설명: "Where cyberpunk meets contemporary design" 이미지: https://cdn.midjourney.com/e2961bd3-5f3e-4df5-97b0-372cde33881e/0_2.png

(슬라이드 03) 이미지 — 제목: "Abstract Reality" / 설명: "Transforming concepts into visual experiences" 이미지: https://cdn.midjourney.com/e2961bd3-5f3e-4df5-97b0-372cde33881e/0_1.png

(슬라이드 04) 이미지 — 제목: "Future Vision" / 설명: "Designing tomorrow's digital landscape" 이미지: https://cdn.midjourney.com/e2961bd3-5f3e-4df5-97b0-372cde33881e/0_0.png

(슬라이드 05) 비디오 — 제목: "Motion Study" / 설명: "Dynamic visual narratives in motion" 비디오: https://cdn.midjourney.com/video/8c31b1e5-f7c1-488d-8eb2-3afff61b32a8/0.mp4

(슬라이드 06) 이미지 — 제목: "Color Theory" / 설명: "Exploring emotional responses through color" 이미지: https://cdn.midjourney.com/921d92cb-996f-4d3a-aa06-257595ab9574/0_1.png

(슬라이드 07) 이미지 — 제목: "Geometric Flow" / 설명: "Mathematics meets artistic expression" 이미지: https://cdn.midjourney.com/921d92cb-996f-4d3a-aa06-257595ab9574/0_0.png

(슬라이드 08) 비디오 — 제목: "Fluid Dynamics" / 설명: "The beauty of motion captured in time" 비디오: https://cdn.midjourney.com/video/8c31b1e5-f7c1-488d-8eb2-3afff61b32a8/1.mp4

(슬라이드 09) 이미지 — 제목: "Urban Canvas" / 설명: "City life through a digital lens" 이미지: https://cdn.midjourney.com/7e67b738-f518-4963-ab7f-0f6aee68631f/0_0.png

(슬라이드 10) 이미지 — 제목: "Light Studies" / 설명: "Capturing the essence of illumination" 이미지: https://cdn.midjourney.com/7e67b738-f518-4963-ab7f-0f6aee68631f/0_1.png

(슬라이드 11) 비디오 — 제목: "Kinetic Art" / 설명: "Movement as a form of expression" 비디오: https://cdn.midjourney.com/video/8c31b1e5-f7c1-488d-8eb2-3afff61b32a8/2.mp4

(슬라이드 12) 이미지 — 제목: "Nature Remix" / 설명: "Organic forms in digital space" 이미지: https://cdn.midjourney.com/a727665f-52bb-4f12-8ab5-a14de7d37fa0/0_0.png

(슬라이드 13) 이미지 — 제목: "Texture Play" / 설명: "Tactile experiences in visual form" 이미지: https://cdn.midjourney.com/6f1e16bb-1c36-4d96-a63a-07d287befbb5/0_0.png

(슬라이드 14) 비디오 — 제목: "Time Lapse" / 설명: "Compressing time into moments" 비디오: https://cdn.midjourney.com/video/8c31b1e5-f7c1-488d-8eb2-3afff61b32a8/3.mp4

(슬라이드 15) 이미지 — 제목: "Minimalist Space" / 설명: "Finding beauty in simplicity" 이미지: https://cdn.midjourney.com/435bc734-6093-48be-8671-a03dac8c0646/0_0.png

(슬라이드 16) 이미지 — 제목: "Pattern Language" / 설명: "Repetition and rhythm in design" 이미지: https://cdn.midjourney.com/24bf6d75-335f-4e3e-a0ac-51f1b596650d/0_0.png

(슬라이드 17) 이미지 — 제목: "Ethereal Landscapes" / 설명: "Dreamscapes and digital poetry" 이미지: https://cdn.midjourney.com/b20cfa8a-047e-4cc9-9cb1-fd00cf5b6868/0_0.png

(슬라이드 18) 이미지 — 제목: "Tech Organic" / 설명: "Where technology meets nature" 이미지: https://cdn.midjourney.com/deb55a2f-c5dd-4f0e-91ae-a4a29a82ed7c/0_0.png

(슬라이드 19) 이미지 — 제목: "Final Frame" / 설명: "The culmination of digital artistry" 이미지: https://cdn.midjourney.com/d88cbb51-1d35-4110-8c22-a159348485cf/0_0.png

4. 기술
4-1. 기본 구조
단일 HTML 파일 하나에 CSS(<style> 태그)와 JavaScript(<script> 태그) 모두 포함해줘. 외부 라이브러리나 프레임워크 절대 사용하지 말고, 순수 HTML + CSS + Vanilla JS로만 만들어줘. 외부 CDN 링크 없음.

4-2. CSS 관련
시스템 폰트 스택 사용. body에 cursor: none 적용. overflow-x: hidden으로 가로 스크롤바 숨기기. 반응형은 768px 한 구간으로 미디어쿼리 작성해줘. 768px 이하에서는 네비게이션 오브 크기 축소(50px), 로고 크기/위치 축소, 갤러리 미디어 영역 확대(85%×60%), 콘텐츠 오버레이 위치/크기 조정, 사이드 패널 전체 너비(100%), 스크롤 힌트 텍스트 축소.

4-3. JavaScript 관련
갤러리 데이터를 배열 객체로 관리하고, DOMContentLoaded 시 동적으로 갤러리 아이템 DOM을 생성해줘. requestAnimationFrame으로 커서 lerp 애니메이션 구현. wheel 이벤트에 setTimeout 디바운스(50ms) 적용해서 슬라이드 전환. touchstart/touchend로 터치 스와이프 감지. keydown으로 좌우 화살표 키 내비게이션. 사이드 패널은 innerHTML로 콘텐츠를 동적 삽입하고 CSS 클래스 토글로 열기/닫기.

5. 추가 조건
HTML lang="ko" 설정. 갤러리 데이터 배열에 type(image/video), src, title, description 필드를 포함해줘. 비디오는 autoplay loop muted playsinline 속성 필수. 모든 transition에 일관된 cubic-bezier(0.4, 0, 0.2, 1) 이징 커브 적용. 코드에 영역별로 주석 넣어줘. 실제 서버 없이 로컬에서 HTML 파일 하나만 열어도 완전하게 동작해야 해.