0012

HTML, CSS, JavaScript만 사용해서 단일 HTML 파일로 다크 미니멀 크리에이티브 스튜디오 포트폴리오 웹사이트를 만들어줘. 스튜디오 이름은 "Creative Studio"이고, 부제는 "Selected Works / 2020-2024"야. 영문 중심 사이트이고, 전체적으로 거의 블랙에 가까운 다크 배경에 화이트 텍스트, 빨간색 포인트를 활용한 하이엔드 미니멀 디자인으로 만들어줘.

프로그램 개요
전체 화면을 채우는 세로 스크롤 기반 포트폴리오 웹사이트야. 고정된 텍스트 롤링 영역 위에 스크롤 섹션들이 겹쳐지는 구조로, 스크롤에 따라 프로젝트 이름이 수직으로 전환되고, 동시에 우하단에 해당 프로젝트의 미디어 프리뷰가 나타나는 인터랙티브 구조야.

핵심 구성 요소는 아래와 같아.

(1) 좌상단 고정 헤더 (스튜디오명 + 부제) (2) 화면 중앙 고정 텍스트 롤링 영역 (프로젝트명이 스크롤에 따라 수직 전환) (3) 우측 고정 번호 트랙 (현재 프로젝트 번호 표시) (4) 우하단 고정 미디어 프리뷰 영역 (이미지/비디오/갤러리) (5) 상단 프로그레스 바 + 우측 프로그레스 도트

기능
2-1. 텍스트 롤링 시스템 화면 좌측에 프로젝트명을 초대형 볼드 텍스트(뷰포트 기준 10vw 이상)로 표시해줘. 한 번에 하나의 프로젝트명만 완전히 보이고, 이전/이후 프로젝트명들은 위아래로 밀려나면서 점점 투명해지고 블러 처리되는 수직 스택 구조야. 총 7단계 위치 상태를 만들어줘: far-prev(완전히 숨김, 위로 300px), prev-prev(거의 안 보임, 위로 200px, blur 10px), prev(흐릿하게 보임, 위로 100px, blur 3px), active(완전히 선명, 제자리), next(흐릿하게 보임, 아래로 100px), next-next(거의 안 보임, 아래로 200px), far-next(완전히 숨김, 아래로 300px). 비활성 텍스트는 text-stroke만 남기고 투명하게 처리해줘. 활성 텍스트에 마우스를 올리면 오른쪽으로 40px 밀리는 호버 효과를 넣어줘. 모든 전환은 1초짜리 cubic-bezier(.25,.46,.45,.94) 이징으로 부드럽게.

2-2. 스크롤 연동 섹션 감지 각 프로젝트마다 100vh 높이의 투명한 스크롤 섹션을 만들고, 스크롤 중심점이 어떤 섹션에 위치하는지 감지해서 해당 프로젝트를 활성화해줘. 스크롤 위치에 따라 텍스트 롤링, 번호 트랙, 프로그레스 도트, 미디어 프리뷰가 모두 동기화되어야 해.

2-3. 미디어 프리뷰 시스템 우하단에 고정된 미디어 프리뷰 영역을 만들어줘. 세 가지 미디어 타입을 지원해야 해.

단일 이미지: 이미지가 로드되면 가로/세로 비율을 자동 판단해서 portrait/landscape/square 클래스를 붙이고, 각각 다른 max 사이즈를 적용해줘.
비디오: 자동재생, 루프, 음소거 처리하고 이미지와 동일하게 비율 판단 적용.
이미지 갤러리: 여러 장의 이미지를 3초 간격으로 페이드 전환하고, 하단에 인디케이터 도트를 표시해줘. 활성 도트는 길쭉한 바 형태로 변하게.
미디어 전환 시 아래에서 위로 올라오면서 살짝 회전+스케일 변화가 있는 진입 애니메이션을 넣어줘. 기본적으로 grayscale 20% + contrast 1.1 필터를 적용하고, 강한 그림자를 줘. 마우스 위치에 따라 미디어 프리뷰가 미세하게 기울어지고 움직이는 패럴랙스 추적 효과(lerp 기반, requestAnimationFrame)를 넣어줘.

2-4. 프로그레스 표시 상단에 빨간색 얇은 프로그레스 바가 스크롤 진행률에 따라 채워지게 해줘. 우측에 프로젝트 수만큼 프로그레스 도트를 세로로 배치하고, 현재 활성 프로젝트의 도트가 커지고 밝아지게 해줘. 도트 클릭 시 해당 섹션으로 부드럽게 스크롤.

2-5. 번호 트랙 우측에 현재 프로젝트 번호(001, 002 등)를 표시해줘. 활성 번호는 빨간색으로, 이전/다음 번호는 위아래로 밀려나면서 흐려지게.

디자인
3-1. 컬러 팔레트 메인 배경: #0a0a0a (거의 블랙), 기본 텍스트: #ffffff, 보조 텍스트: #333333, 페이드 텍스트: #1a1a1a, 포인트: #ff0000 (빨간색, 프로그레스 바와 활성 번호에 사용).

3-2. 서체 Google Fonts에서 Inter(100~900)와 Playfair Display(400, 700, 900) 불러와줘. 본문과 대형 텍스트는 Inter, 헤더 타이틀은 Playfair Display 사용. 프로젝트명은 Inter 900 weight, uppercase, letter-spacing -0.05em으로 압축감 있게.

3-3. 전체 톤앤무드 극도로 어둡고 미니멀한 갤러리/스튜디오 분위기. 커서는 crosshair로 변경. 스크롤바는 4px 너비로 극도로 얇게, 트랙은 배경색, 썸은 보조 텍스트 색으로. mix-blend-mode: difference를 헤더에 적용해서 미디어 위에서도 텍스트가 보이게 해줘.

데이터 구조
각 프로젝트는 HTML의 data 속성으로 정의해줘. scroll-section 요소에 data-text(프로젝트명), data-number(번호), data-media-type(image/video/gallery), data-media(미디어 URL, 갤러리는 콤마 구분)를 넣어줘. 프로젝트 6개를 예시로 넣어줘: Architecture(이미지), Motion(비디오), Branding(3장 갤러리), Digital(이미지), Editorial(2장 갤러리), Visual(이미지).

기술
5-1. 기본 구조 단일 HTML 파일 하나에 CSS(style 태그)와 JavaScript(script 태그) 모두 포함해줘. 외부 라이브러리나 프레임워크 없이 순수 HTML + CSS + Vanilla JS로만 만들어줘. Google Fonts CDN만 외부 링크 허용.

5-2. CSS 관련 CSS 변수로 컬러 관리. 반응형은 1200px, 768px 두 구간으로 미디어쿼리 작성해줘. 768px 이하에서는 텍스트 크기 축소, 미디어 프리뷰 크기 축소, 프로그레스 도트 숨김, 여백 축소.

5-3. JavaScript 관련 DOM 생성은 JavaScript에서 동적으로 해줘(텍스트 요소, 번호 요소, 프로그레스 도트 등). IntersectionObserver 대신 scroll 이벤트 + getBoundingClientRect로 섹션 감지. requestAnimationFrame으로 마우스 추적 패럴랙스 애니메이션. 이미지 프리로드 함수를 만들어서 초기에 첫 몇 개 미디어를 미리 로드해줘.

추가 조건 이미지와 비디오 URL은 placeholder로 넣어줘(실제 URL이든 빈 태그든). 모든 transition은 일관된 이징 커브 적용. 코드에 영역별 주석 넣어줘. 로컬에서 HTML 파일 하나만 열어도 완전하게 동작해야 해.