바이브 코딩으로 감각적인 웹사이트 만들기 (프롬프트/소스코드 공개)

1. 프로그램 개요

고급스러운 미술 갤러리 웹사이트를 만들어줘. 일반적인 세로 스크롤이 아니라 가로(수평)로 스크롤되는 특별한 구조로 만들어줘. 전체적으로 어둡고 모던한 분위기의 갤러리 사이트로, 마치 실제 갤러리를 방문하는 것 같은 몰입감 있는 경험을 제공해줘.

2. 기능

네비게이션 기능:

• 총 5개의 섹션(FEATURED, COLLECTIONS, ARTISTS, EXHIBITIONS, ARCHIVE)으로 구성해줘
• 상단 메뉴를 클릭하면 해당 섹션으로 부드럽게 이동하도록 해줘
• 키보드 좌우 화살표로도 섹션 간 이동이 가능하게 해줘
• 마우스 휠을 위아래로 굴려도 좌우로 이동되도록 해줘
• 모바일에서는 좌우 스와이프로 섹션 이동이 되도록 해줘

갤러리 기능:

• 각 섹션마다 격자(그리드) 형태로 작품들을 배치해줘
• 이미지와 동영상을 섞어서 보여줘 (동영상은 자동재생, 무음, 반복재생)
• 작품마다 번호를 매겨줘 (01, 02, 03…)
• 마우스를 작품 근처에 가져가면 작품이 활성화되면서 제목과 설명이 나타나도록 해줘
• 기본적으로 이미지는 흑백으로 보이다가 마우스를 가져가면 컬러로 변하게 해줘

텍스트 요소:

• 갤러리 아이템 사이사이에 명언이나 설명 텍스트를 넣어줘
• 예술 관련 명언들을 큰 이탤릭체로 보여주고 작가 이름도 함께 표시해줘
• 간단한 설명문이나 통계 숫자도 디자인 요소로 활용해줘

3. 디자인/스타일

색상과 분위기:

• 배경은 거의 검은색으로 해줘
• 텍스트는 흰색과 회색 톤을 사용해줘
• 전체적으로 어둡고 미니멀한 분위기를 만들어줘

타이포그래피:

• 로고와 큰 제목은 Bebas Neue 폰트를 사용해줘
• 명언은 Playfair Display 이탤릭체로 우아하게 표현해줘
• 본문은 Montserrat 폰트로 깔끔하게 처리해줘
• 서브 타이틀은 Cormorant Garamond로 클래식한 느낌을 더해줘

레이아웃:

• 6열 그리드 시스템을 기본으로 하되, 일부 아이템은 2칸이나 3칸을 차지하도록 크기를 다양하게 해줘
• 세로로 긴 아이템, 가로로 긴 아이템을 섞어서 리듬감 있게 배치해줘
• 각 섹션 배경에 섹션 이름을 아주 크고 투명하게(5% 불투명도) 깔아줘

특수 효과:

• 커스텀 커서를 만들어서 마우스 포인터를 큰 원형 블러 효과로 바꿔줘
• 갤러리 아이템 근처에서는 커서가 더 커지도록 해줘
• 모든 전환 효과는 부드럽게(cubic-bezier 이징) 처리해줘
• 로딩 화면도 “LOADING EXPERIENCE” 텍스트와 함께 넣어줘

4. 기술

필수 기술:

• 순수 HTML, CSS, JavaScript만 사용해줘 (외부 라이브러리 없이)
• 구글 폰트는 CDN으로 불러와줘
• CSS Grid와 Flexbox를 활용해서 레이아웃을 구성해줘
• transform: translateX()를 사용해서 수평 스크롤을 구현해줘

인터랙션:

• 마우스 움직임을 추적해서 커스텀 커서가 부드럽게 따라오도록 해줘
• requestAnimationFrame을 사용해서 애니메이션을 최적화해줘
• 갤러리 아이템과 마우스 거리를 계산해서 150px 이내면 활성화되도록 해줘
• 스크롤 이벤트에 딜레이를 줘서 너무 빠르게 넘어가지 않도록 해줘

반응형 처리:

• 1200px 이하에서는 4열 그리드로 변경해줘
• 768px 이하에서는 2열 그리드로 변경하고 커스텀 커서는 숨겨줘
• 모바일에서는 터치 이벤트로 좌우 스와이프를 감지해줘
• 폰트 크기도 화면 크기에 맞춰 조절해줘

5. 추가 조건

성능 최적화:

• 동영상에 autoplay, muted, loop, playsinline 속성을 모두 넣어줘
• 이미지는 실제 URL을 사용하되, Midjourney CDN 링크 같은 걸 예시로 넣어줘
• CSS 애니메이션은 GPU 가속이 되는 속성(transform, opacity)만 사용해줘

접근성:

• 모든 이미지에 alt 텍스트를 넣어줘
• 키보드로도 네비게이션이 가능하도록 해줘
• 섹션 이동 시 부드러운 전환 효과를 넣어줘

콘텐츠:

• 각 섹션마다 최소 7-8개의 갤러리 아이템을 넣어줘
• 유명한 예술가들의 명언을 4-5개 정도 포함시켜줘
• 2024년 컬렉션, 32명의 아티스트, EST. 2020 같은 통계 정보도 디자인 요소로 활용해줘
• 갤러리 운영 시간(화-일, 10:00 AM – 8:00 PM) 같은 실제 정보도 넣어줘

세부 스타일:

• 스크롤바는 얇고 미니멀하게 커스터마이징해줘
• hover 효과는 모두 0.3-0.5초 정도의 트랜지션을 넣어줘
• 텍스트 선택 시 배경색이 바뀌지 않도록 처리해줘
• 전체적으로 여백을 충분히 줘서 답답하지 않게 만들어줘