1. 개요
오늘은 바이브 코딩으로 감각적인 웹사이트 만들기 과정을 소개하도록 할게요.
개인적으로 좋아 하는 스타일을 반영한 웹사이트 템플릿을 만들어 보았어요. 바로 프롬프트를 소개하도록 하겠습니다.

2. 프롬프트
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초 정도의 트랜지션을 넣어줘
- 텍스트 선택 시 배경색이 바뀌지 않도록 처리해줘
- 전체적으로 여백을 충분히 줘서 답답하지 않게 만들어줘
3. 다운로드
4. 소스코드