바이브 코딩으로 스크롤 기반 웹사이트 만들기 (프롬프트, 소스코드 포함)

1. 프로그램 개요

스크롤 기반의 인터랙티브 다크 모드 포트폴리오 웹사이트를 만들어줘.
스튜디오나 디자이너의 작품을 보여주는 느낌의 웹사이트로, 스크롤 할 때마다 프로젝트 이름이 롤링 되면서 바뀌고,
오른쪽에는 해당 작품의 미디어(이미지 또는 비디오)가 나타나는 구조로 만들어줘.
전체적으로 미니멀하고 세련된 느낌으로, 검은 배경에 흰 텍스트를 사용해서 고급스러운 분위기를 연출해줘.

2. 기능

스크롤 인터랙션:

• 페이지를 스크롤하면 프로젝트 이름들이 세로로 롤링되는 효과를 넣어줘
• 현재 보고 있는 프로젝트는 크고 선명하게, 위아래 프로젝트들은 흐릿하고 작게 보이도록 해줘
• 각 섹션마다 Architecture, Motion, Branding, Digital, Editorial, Visual 같은 임의의 프로젝트 이름을 넣어줘

미디어 프리뷰:

• 각 프로젝트에 마우스를 올리면 오른쪽 하단에 관련 이미지나 비디오가 나타나게 해줘
• 이미지는 세로형, 가로형, 정사각형에 따라 자동으로 크기가 조절되도록 해줘
• 여러 장의 이미지가 있으면 3초마다 자동으로 넘어가는 갤러리로 만들어줘
• 비디오는 자동재생되고 무한 반복되도록 설정해줘
• 마우스 움직임에 따라 미디어가 살짝 기울어지고 움직이는 효과를 넣어줘

진행 표시:

• 페이지 최상단에 얇은 빨간색 진행바를 넣어서 스크롤 진행률을 보여줘
• 오른쪽에 점(dot) 형태의 네비게이션을 만들어서 클릭하면 해당 섹션으로 이동하게 해줘

3. 디자인/스타일

색상:

• 배경은 검은색으로 해줘. 기본적으로 다크모드로 해줘.
• 메인 텍스트는 흰색으로 해줘
• 강조 색상으로 빨간색을 사용해줘
• 비활성 텍스트는 아주 어두운 회색으로 처리해줘

타이포그래피:

• 헤더 제목은 Playfair Display 세리프 폰트로 우아하게 만들어줘
• 프로젝트 이름은 Inter 폰트로 굵고 크게 표시해줘
• 모든 텍스트는 대문자로 처리하고 자간을 좁게 해서 임팩트 있게 만들어줘

레이아웃:

• 왼쪽 상단에 “Creative Studio”라는 타이틀과 “Selected Works / 2020-2024” 서브타이틀을 고정시켜줘
• 프로젝트 이름은 왼쪽에 크게, 번호는 오른쪽에 작게 배치해줘
• 미디어 프리뷰는 오른쪽 하단에 고정시켜줘

효과:

• 텍스트가 롤링될 때 블러 효과와 투명도 변화를 줘서 깊이감을 만들어줘
• 활성화된 텍스트에 마우스를 올리면 오른쪽으로 살짝 이동하는 효과를 넣어줘
• 이미지에 흑백 필터 20%와 높은 대비를 적용해서 통일감 있게 만들어줘
• 그림자 효과를 깊게 줘서 이미지가 떠있는 느낌을 만들어줘

4. 기술

구조:

• 순수 HTML, CSS, JavaScript만 사용해서 외부 라이브러리 없이 만들어줘
• 반응형으로 만들어서 모바일, 태블릿, 데스크톱에서 모두 잘 보이게 해줘
• 스크롤 이벤트를 활용해서 섹션 감지와 애니메이션을 구현해줘

성능 최적화:

• 이미지 프리로드 기능을 넣어서 처음 몇 개 이미지는 미리 로드해줘
• 스크롤 이벤트에 디바운싱을 적용해서 성능을 최적화해줘
• CSS 트랜지션으로 부드러운 애니메이션을 구현해줘

미디어 처리:

• Midjourney CDN 링크나 외부 이미지 URL을 사용할 수 있게 해줘
• 이미지 비율을 자동으로 감지해서 portrait, landscape, square 클래스를 적용해줘
• 비디오는 HTML5 video 태그로 처리하고 자동재생 정책을 준수하도록 muted 속성을 넣어줘

5. 추가 조건

사용자 경험:

• 마우스 커서를 십자가 모양으로 바꿔서 특별한 느낌을 줘
• 스크롤바를 얇고 미니멀하게 커스터마이징해줘
• 모든 애니메이션은 cubic-bezier 이징을 사용해서 자연스럽게 만들어줘

접근성:

• 모바일에서는 진행 점(dots)을 숨기고 대신 상단 진행바만 보여줘
• 770px 이하에서는 텍스트 크기와 여백을 조정해서 가독성을 유지해줘
• 갤러리 이미지에 인디케이터를 넣어서 현재 몇 번째 이미지인지 알 수 있게 해줘

코드 품질:

• 각 기능별로 함수를 분리해서 깔끔하게 정리해줘
• CSS 변수를 사용해서 색상과 스타일을 쉽게 수정할 수 있게 해줘
• 주석을 한글로 달아서 각 섹션이 무엇을 하는지 설명해줘

이 모든 요소들을 하나의 HTML 파일에 인라인으로 넣어서, 별도의 파일 없이 바로 실행할 수 있는 완성된 웹사이트를 만들어줘.