바이브 코딩으로 인터랙티브 효과를 넣은 웹사이트 만들기(프롬프트/소스코드 포함)

1. 프로그램 개요

한국어로 된 웹사이트를 만들어줘. 사이트 이름은 “바이브코딩”이고, 디지털 아트와 기술을 결합한 작품을 선보이는 회사 소개 페이지야.
전체적으로 검은 배경에 흰색 텍스트를 사용하고, 미니멀하면서도 인터랙티브한 느낌을 줘야 해. 한 페이지로 스크롤하면서 모든 내용을 볼 수 있는 원페이지 웹사이트로 만들어줘.

2. 기능

로딩 화면:

• 페이지가 처음 열릴 때 “바이브코딩”이라는 텍스트와 함께 로딩 바를 보여줘
• 리소스 로딩 진행률을 퍼센트로 표시해줘
• 로딩이 완료되면 부드럽게 사라지게 해줘

네비게이션:

• 상단에 고정된 메뉴를 만들어줘 (홈, 소개, 철학, 작품, 프로세스, 팀, 비디오, 연락처)
• 스크롤하면 배경이 반투명 검은색으로 변하게 해줘
• 메뉴 클릭하면 해당 섹션으로 부드럽게 스크롤되게 해줘

히어로 섹션 (메인 화면):

• 전체 화면 높이로 설정해줘
• 배경에 움직이는 파티클 효과를 넣어줘 (플로우 필드 효과)
• “바이브코딩” 텍스트를 3D 파티클로 만들어서 흩어졌다가 모이는 애니메이션 넣어줘
• 클릭하면 파티클이 흩어지거나 모이게 해줘
• “클릭하여 플로우 변경”이라는 힌트 텍스트를 페이드 인/아웃으로 보여줘
• 하단에 스크롤 인디케이터 넣어줘

각 섹션별 내용:

• 소개: 회사 소개 텍스트와 오른쪽에 움직이는 실 애니메이션 캔버스 넣어줘
• 철학: 4개의 카드 형태로 창의성, 연결성, 지속가능성, 혁신 내용을 보여줘
• 작품: 이미지 갤러리를 3열 그리드로 배치하고, 호버하면 제목과 설명이 올라오게 해줘
• 프로세스: 번호와 함께 4단계 프로세스를 지그재그로 배치해줘
• 팀: 팀원 3명의 사진과 이름, 직책을 원형 프로필로 보여줘
• 비디오: 자동재생되는 비디오들을 2열 그리드로 배치해줘
• 연락처: 연락 정보와 문의 폼을 넣어줘

3. 디자인/스타일

색상:

• 배경은 완전한 검정색으로 해줘
• 텍스트는 흰색을 기본으로 하고, 부제목은 약간 회색으로 해줘
• 강조 색상으로 그라데이션(보라, 파랑, 핑크 계열) 사용해줘

타이포그래피:

• 한글 폰트는 “Do Hyeon” 구글 폰트를 사용해줘
• 제목은 크게(72px), 본문은 읽기 좋게(20-24px) 설정해줘
• 자간을 넓게 해서 고급스러운 느낌을 줘

레이아웃:

• 섹션마다 최소 100vh 높이로 여유있게 만들어줘
• 최대 너비는 1400px로 제한하고 가운데 정렬해줘
• 패딩은 충분히 줘서 답답하지 않게 해줘

애니메이션:

• 스크롤할 때 요소들이 아래에서 위로 페이드인되게 해줘
• 호버 효과는 부드럽게 0.3초 트랜지션 줘
• 로딩 텍스트는 펄스 애니메이션으로 깜빡이게 해줘

4. 기술

Three.js 활용:

• 히어로 섹션에 Three.js로 3D 파티클 텍스트 효과 구현해줘
• OrbitControls로 마우스 드래그 회전 가능하게 해줘
• 파티클은 한글 글자 모양으로 만들어줘
• 안개 효과와 조명 효과 추가해줘

Canvas 애니메이션:

• 플로우 필드 파티클 시스템을 순수 캔버스로 구현해줘
• 마우스 위치에 반응하는 인터랙티브 효과 넣어줘
• About 섹션에 움직이는 실 애니메이션 넣어줘

리소스 관리:

• 이미지와 비디오 URL은 미드저니 CDN 링크 사용해줘
• 프리로더로 모든 리소스를 미리 로드하고 진행률 표시해줘
• 로드 실패한 리소스는 건너뛰고 에러 처리해줘

인터랙션:

• 스크롤 위치에 따라 네비게이션 바 스타일 변경해줘
• Intersection Observer 대신 스크롤 이벤트로 요소 애니메이션 트리거해줘
• 폼 제출시 alert로 간단한 확인 메시지 보여줘

5. 추가 조건

• 모든 코드는 하나의 HTML 파일 안에 인라인으로 작성해줘
• 외부 라이브러리는 CDN 링크로만 불러와줘 (Three.js, OrbitControls, Google Fonts)
• 반응형으로 만들어서 모바일에서도 잘 보이게 해줘 (768px 기준)
• 한국어로 모든 텍스트 작성하되, 코드 주석은 영어로 써줘
• 성능 최적화를 위해 requestAnimationFrame 사용해줘
• 파티클은 1500개 정도로 제한해서 성능 문제 없게 해줘
• 비디오는 자동재생, 음소거, 루프 설정해줘
• 크로스 브라우저 호환성 고려해서 vendor prefix 필요한 곳에 추가해줘
• 로딩 시간이 길어도 사용자가 지루하지 않게 애니메이션 효과 넣어줘
• 전체적으로 고급스럽고 모던한 느낌이 나도록 디테일에 신경써줘