0017

HTML, CSS, JavaScript만 사용해서 단일 HTML 파일로 프리미엄 디지털 에이전시 웹사이트를 만들어줘. 에이전시 이름은 "VERTEX"이고, 한국어 + 영어 혼용 사이트야. 전체적으로 어두운 다크 테마(거의 블랙) 배경에 레드-블루 그라데이션 포인트를 활용한 몰입형 풀스크린 디자인으로 만들어줘.

프로그램 개요
총 10개 섹션으로 구성된 풀스크린 세로 스크롤 원페이지 웹사이트야. 일반 스크롤이 아니라 마우스 휠/터치/키보드(위아래 방향키)로 한 섹션씩 전환되는 풀페이지 스냅 방식이야. 섹션 순서는 아래와 같아.

(1) Hero (풀스크린 인트로) (2) About (에이전시 소개 + 통계 4개) (3) Services (서비스 카드 6개) (4) Portfolio (포트폴리오 갤러리 3개) (5) Process (작업 프로세스 6단계) (6) Team (팀 멤버 4명) (7) Timeline (연혁 타임라인 4개) (8) Testimonials (고객 후기 카드 3개) (9) Blog (최신 인사이트 갤러리 3개) (10) Contact (문의 폼 + 이메일)

커스텀 커서도 포함해줘.

기능
2-1. 풀스크린 섹션 전환 각 섹션은 100vw × 100vh 풀스크린이야. 한 번에 하나의 섹션만 보여주고, 마우스 휠(deltaY 기반), 터치 스와이프(50px 이상 이동 시), 키보드 위/아래 방향키, 스페이스바로 섹션을 전환해줘. 전환 시 1.5초 쿨다운을 걸어서 연속 입력을 방지해줘. 전환 애니메이션은 scale(1.1) + translateY(50px) + opacity:0 상태에서 scale(1) + translateY(0) + opacity:1로 나타나는 형태(cubic-bezier(0.4, 0, 0.2, 1) 이징, 1.5초)야. 숫자키 0~9를 누르면 해당 섹션으로 직접 이동도 가능하게 해줘.

2-2. 커스텀 커서 마우스 포인터를 흰색 원형 테두리(40px)로 대체해줘. mix-blend-mode: difference 적용해줘. 커서를 따라오는 80px짜리 팔로워(레드 방사형 그라데이션, blur 5px)도 추가해줘. 팔로워는 0.5초 딜레이로 느리게 따라오게 해줘. 링크, 버튼, 카드, 갤러리 아이템, 팀 멤버, 타임라인 콘텐츠 위에 올리면 커서가 2배로 커지면서 레드 배경으로 채워지게 해줘. 768px 이하 모바일에서는 커스텀 커서 숨기고 기본 커서 사용해줘.

2-3. 네비게이션 상단 고정 네비게이션 바를 만들어줘. 왼쪽에 "VERTEX" 로고(볼드, letter-spacing 넓게, 레드-블루 그라데이션 텍스트), 오른쪽에 메뉴 링크 10개(Home, About, Services, Portfolio, Process, Team, Timeline, Testimonials, Blog, Contact) 배치해줘. 메뉴 클릭 시 해당 섹션으로 전환. 배경은 상단에서 아래로 페이드되는 반투명 검정 + backdrop-filter blur(20px) 처리해줘. 768px 이하에서는 메뉴 링크 숨기고 햄버거 버튼(흰색 가로선 3개) 보여줘.

2-4. 우측 네비게이션 도트 화면 오른쪽 중앙에 세로로 10개 도트를 고정 배치해줘. 현재 활성 섹션의 도트는 내부에 레드색 원이 채워지고, 호버 시 레드 테두리 + 1.3배 확대되게 해줘. 도트 클릭으로 섹션 이동 가능하게 해줘.

2-5. 하단 프로그레스 바 화면 최하단에 4px 높이 프로그레스 바를 고정해줘. 현재 섹션 위치에 따라 10%~100%로 채워지고, 레드-블루 그라데이션 + 레드 글로우(box-shadow) 효과를 적용해줘. 전환 시 0.8초 이징으로 부드럽게 변하게 해줘.

2-6. 섹션 내 등장 애니메이션 각 섹션이 활성화될 때마다 내부 요소들(제목, 부제, 설명, 카드, 갤러리 아이템, 통계, 팀 멤버, 타임라인 아이템, 폼 필드)의 CSS 애니메이션을 리셋하고 다시 재생해줘. 제목은 translateY(120%)에서 올라오는 reveal 방식, 나머지는 translateY(30px) + opacity:0에서 fadeInUp, 갤러리 아이템은 scale(0.8)에서 scaleIn. 요소마다 animation-delay를 0.2초~1초 사이로 순차 적용해줘.

2-7. 배경 이미지/비디오 + 마우스 패럴랙스 각 섹션 뒤에 풀스크린 배경 이미지(brightness 40% 필터)를 깔아줘. Services 섹션은 비디오 배경(brightness 30%)을 사용하고, 비디오 재생 불가 시 이미지 폴백 처리해줘. 활성 섹션의 배경 이미지가 20초에 걸쳐 scale(1.1)에서 scale(1.15)로 천천히 확대되는 효과를 넣어줘. 마우스 움직임에 따라 배경 이미지와 장식 도형들이 살짝 이동하는 패럴랙스 효과도 넣어줘.

2-8. 플로팅 장식 도형 페이지 전체에 3개의 대형 장식 도형을 깔아줘: (1) 우상단 레드 방사형 그라데이션 원(400px, blur 80px), (2) 좌하단 블루 방사형 그라데이션 원(600px, blur 100px), (3) 중앙 시안-옐로우 그라데이션 사각형(300px, 45도 회전, blur 60px). 모두 opacity 0.1이고, 20~30초 주기로 천천히 떠다니거나 회전하는 애니메이션 적용. 마우스 패럴랙스에도 반응하게 해줘.

2-9. 파티클 효과 30개의 작은 흰색 원(3px)을 화면 하단에서 상단으로 15~25초에 걸쳐 떠오르는 파티클 애니메이션으로 만들어줘. 각 파티클은 랜덤한 가로 위치, 랜덤한 딜레이, 랜덤한 속도를 가지게 해줘. opacity는 중간 구간에서만 0.3 정도로 보이게 해줘.

2-10. 문의 폼 이름, 이메일 2개 필드를 가로 2컬럼으로, 메시지 textarea를 full-width로 배치해줘. 입력 필드는 반투명 배경 + 2px 반투명 흰색 테두리 + 라운드 10px, 포커스 시 테두리가 레드로 변하고 배경이 살짝 밝아지게 해줘. 제출 시 alert로 확인 메시지 띄우고 폼 리셋해줘.

디자인
3-1. 컬러 팔레트 메인 배경: #0a0a0a (거의 블랙) 액센트 레드: #ff4757 세컨더리 블루: #3742fa 터셔리 시안: #00d2d3 쿼터너리 옐로우: #feca57 텍스트: #ffffff (밝은 텍스트) 보조 텍스트: rgba(255,255,255,0.8) / rgba(255,255,255,0.7) 카드 배경: rgba(255,255,255,0.05) 카드 보더: rgba(255,255,255,0.1)

3-2. 서체 시스템 폰트 스택 사용: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif. 외부 폰트 CDN 불필요.

3-3. 전체 톤앤무드 어둡고 몰입감 있는 디지털 에이전시 / 테크 스튜디오 느낌. 풀스크린 배경 이미지 위에 반투명 오버레이와 글래스모피즘(backdrop-filter blur) 카드를 조합한 레이어드 디자인. 각 섹션 좌상단에 거대한 섹션 번호(01~10, font-size 약 10rem, opacity 0.05)를 워터마크처럼 깔아줘. 제목에 레드-블루 그라데이션 텍스트(background-clip: text), CTA 버튼에 45도 레드-블루 그라데이션 배경을 적용해줘. 호버 시 요소들이 위로 살짝 떠오르며 레드 글로우 그림자가 생기는 효과. 화면 전체를 꽉 채우는 극적이고 시네마틱한 연출.

3-4. 공통 UI 요소 CTA 버튼: 레드-블루 그라데이션 채움(primary) + 반투명 테두리(secondary) 2종. 패딩 1.2rem 3rem, uppercase, letter-spacing 2px, 호버 시 translateY(-3px) + 레드 글로우. 버튼 위로 흰색 반투명 오버레이가 왼쪽에서 오른쪽으로 슬라이드하는 호버 효과. 카드: rgba(255,255,255,0.05) 배경, backdrop-filter blur(20px), 1px 반투명 흰색 보더, 라운드 20px. 호버 시 배경 밝아지고 보더가 레드로 변하며 레드 글로우 그림자 + translateY(-10px).

3-5. 각 섹션 디자인 상세

(1) Hero 풀스크린, 2컬럼 그리드(텍스트만 사용, 왼쪽 정렬). 섹션 번호 "01" 워터마크. 큰 타이틀 3줄("Beyond" / "Digital" / "Boundaries"), 한글 부제목 "차원을 넘어서는 디지털 경험"(레드-블루 그라데이션 텍스트), 한글 설명문, CTA 버튼 2개("시작하기" primary + "더 알아보기" secondary). 배경 이미지: https://cdn.midjourney.com/272959e4-8f3f-4c62-8e2f-9a754ba5f261/0_1.png

(2) About 2컬럼 그리드(역방향 배치, 텍스트만 사용). 섹션 번호 "02" 워터마크. 타이틀 2줄("Creative" / "Agency"), 한글 부제 "혁신을 디자인하다", 한글 설명문. 하단에 통계 4개 가로 배치(150+ 완료된 프로젝트, 50+ 글로벌 클라이언트, 15+ 수상 경력, 99% 고객 만족도). 숫자는 레드-블루 그라데이션 텍스트. 배경 이미지: https://cdn.midjourney.com/272959e4-8f3f-4c62-8e2f-9a754ba5f261/0_0.png

(3) Services 중앙 정렬 레이아웃. 섹션 번호 "03" 워터마크. 타이틀 2줄("Our" / "Services"), 한글 부제 "전문성과 창의성의 만남". 아래에 글래스모피즘 카드 6개를 3×2 그리드로 배치. 각 카드에 이모지 아이콘 + 서비스명 + 한글 설명. 서비스: ⚡웹 개발, 🎨UI/UX 디자인, 🚀브랜딩, 📱모바일 앱, 🎯디지털 마케팅, 💡컨설팅. 배경 비디오: https://cdn.midjourney.com/video/bbab7ae5-f289-4954-8536-b944f42252be/1.mp4 비디오 폴백 이미지: https://cdn.midjourney.com/2272f4a9-af7e-46f0-ba09-fbb2834ef574/0_3.png

(4) Portfolio 중앙 정렬 레이아웃. 섹션 번호 "04" 워터마크. 타이틀 2줄("Featured" / "Works"), 한글 부제 "우리가 만든 걸작들". 갤러리 아이템 3개를 3컬럼 그리드(높이 300px, 라운드 20px)로 배치. 각 아이템은 이미지 + 호버 시 하단에서 올라오는 그라데이션 오버레이(프로젝트명 + 카테고리).

아이템1: Tech Startup Platform / Web Development, 이미지 https://cdn.midjourney.com/272959e4-8f3f-4c62-8e2f-9a754ba5f261/0_2.png
아이템2: Brand Identity Design / Branding, 이미지 https://cdn.midjourney.com/272959e4-8f3f-4c62-8e2f-9a754ba5f261/0_1.png
아이템3: E-commerce Solution / Web & Mobile, 이미지 https://cdn.midjourney.com/272959e4-8f3f-4c62-8e2f-9a754ba5f261/0_0.png 배경 이미지: https://cdn.midjourney.com/272959e4-8f3f-4c62-8e2f-9a754ba5f261/0_3.png
(5) Process 2컬럼 그리드(왼쪽 텍스트 + 오른쪽 카드). 섹션 번호 "05" 워터마크. 타이틀 2줄("Our" / "Process"), 한글 부제 "완벽을 향한 여정", 한글 설명문, CTA 버튼 1개. 오른쪽에 글래스모피즘 카드 6개를 3×2 그리드로 배치. 각 카드: 이모지 아이콘 + 단계명 + 한글 설명. 단계: 🔍1.리서치, ✏️2.기획, 🎨3.디자인, 💻4.개발, 🧪5.테스트, 🚀6.런칭. 배경 이미지: https://cdn.midjourney.com/39a94585-100e-40ad-add1-48e4931200be/0_3.png

(6) Team 중앙 정렬 레이아웃. 섹션 번호 "06" 워터마크. 타이틀 2줄("Meet Our" / "Team"), 한글 부제 "열정과 재능이 만나는 곳". 팀 멤버 4명을 4컬럼 그리드로 배치. 각 멤버: 원형 사진(150px, 호버 시 1.1배 확대) + 이름(한글) + 역할(영문).

김민수 / CEO & Founder, 사진 https://cdn.midjourney.com/39a94585-100e-40ad-add1-48e4931200be/0_1.png
이지은 / Creative Director, 사진 https://cdn.midjourney.com/39a94585-100e-40ad-add1-48e4931200be/0_0.png
박준호 / Tech Lead, 사진 https://cdn.midjourney.com/cb571eb8-c7e4-4c64-b4b8-1b15d8ad0e7f/0_1.png
최서연 / UX Designer, 사진 https://cdn.midjourney.com/cb571eb8-c7e4-4c64-b4b8-1b15d8ad0e7f/0_2.png 배경 이미지: https://cdn.midjourney.com/39a94585-100e-40ad-add1-48e4931200be/0_2.png
(7) Timeline 중앙 정렬 레이아웃. 섹션 번호 "07" 워터마크. 타이틀 2줄("Our" / "Journey"), 한글 부제 "성장의 발자취". 세로 타임라인(중앙에 레드-블루 그라데이션 세로 라인 4px)을 만들어줘. 4개 항목을 좌우 교차 배치(홀수 왼쪽, 짝수 오른쪽). 각 항목: 글래스모피즘 카드에 연도(레드색 큰 숫자) + 제목 + 한글 설명. 항목: 2020 회사 설립, 2021 첫 대형 프로젝트, 2023 해외 진출, 2025 업계 선도. 배경 이미지: https://cdn.midjourney.com/cb571eb8-c7e4-4c64-b4b8-1b15d8ad0e7f/0_3.png

(8) Testimonials 중앙 정렬 레이아웃. 섹션 번호 "08" 워터마크. 타이틀 2줄("Client" / "Stories"), 한글 부제 "고객이 들려주는 성공 이야기". 글래스모피즘 카드 3개를 3컬럼 그리드로 배치. 각 카드: ⭐ 아이콘 + 한글 후기 텍스트 + 회사명. 배경 이미지: https://cdn.midjourney.com/1de7a57d-8f2c-4a21-882d-695cc25f5272/0_1.png

(9) Blog 중앙 정렬 레이아웃. 섹션 번호 "09" 워터마크. 타이틀 2줄("Latest" / "Insights"), 한글 부제 "트렌드와 인사이트를 공유합니다". 갤러리 아이템 3개를 3컬럼 그리드(라운드 20px)로 배치. 호버 시 이미지 확대 + 하단 오버레이에 제목 + 카테고리 표시.

아이템1: 2025 웹 디자인 트렌드 / Design Trends, 이미지 https://cdn.midjourney.com/1de7a57d-8f2c-4a21-882d-695cc25f5272/0_3.png
아이템2: AI와 디자인의 미래 / Technology, 이미지 https://cdn.midjourney.com/1de7a57d-8f2c-4a21-882d-695cc25f5272/0_0.png
아이템3: 성공적인 브랜딩 전략 / Branding, 이미지 https://cdn.midjourney.com/f40d3e40-066c-4451-9955-dc9e52ae8997/0_1.png 배경 이미지: https://cdn.midjourney.com/1de7a57d-8f2c-4a21-882d-695cc25f5272/0_2.png
(10) Contact 중앙 정렬 레이아웃. 섹션 번호 "10" 워터마크. 타이틀 2줄("Let's" / "Connect"), 한글 부제 "함께 미래를 만들어갑시다", 한글 설명문. 아래에 문의 폼(이름 + 이메일 2컬럼, 메시지 full-width). CTA 버튼 2개("메시지 보내기" primary submit + "hello@vertex.com" secondary mailto 링크). 배경 이미지: https://cdn.midjourney.com/f40d3e40-066c-4451-9955-dc9e52ae8997/0_2.png

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

4-2. CSS 관련 CSS 변수(Custom Properties)로 컬러, 전환 시간 등 모두 관리해줘. html에 overflow:hidden, height:100% 적용해서 기본 스크롤 완전 차단. body에도 overflow:hidden, cursor:none 적용. 반응형은 1400px, 1200px, 768px 세 구간으로 미디어쿼리 작성해줘. 700px 이하 높이에 대한 미디어쿼리도 추가.

4-3. JavaScript 관련 파티클 동적 생성(30개, 랜덤 위치/딜레이/속도), mousemove로 커스텀 커서 + 팔로워 위치 업데이트 + 패럴랙스, wheel 이벤트(preventDefault)로 섹션 전환, touchstart/touchend로 모바일 스와이프, keydown으로 방향키/스페이스/숫자키 처리, 섹션 전환 시 내부 애니메이션 리셋 로직. 이벤트 위임과 querySelectorAll 등 기본 DOM API만 사용. touchmove에 preventDefault(passive:false)로 모바일 스크롤도 차단.

추가 조건 언어는 한국어 위주, 섹션 태그·메뉴·버튼 텍스트 등은 영어 혼용. HTML lang="ko"로 설정해줘. 모든 transition에 일관된 이징 커브 적용하고 호버 효과는 0.3~0.5초 사이로 부드럽게. 실제 서버 없이 로컬에서 HTML 파일 하나만 열어도 완전하게 동작해야 해.