0034

HTML, CSS, JavaScript만 사용해서 단일 HTML 파일로 크리에이티브 디지털 스튜디오 웹사이트를 만들어줘. 스튜디오 이름은 "STUDIO"이고, 영문 전용 사이트야. 전체적으로 다크 네이비 배경에 코랄·민트·옐로우 3색 포인트를 활용한 볼드하고 에너제틱한 디자인으로 만들어줘.

프로그램 개요
총 7개 섹션으로 구성된 원페이지 스크롤 웹사이트야. 섹션 순서는 아래와 같아.

(1) Hero (전체화면 인트로) (2) Works (포트폴리오 매이슨리 그리드) (3) About (스튜디오 소개 + 통계) (4) Services (서비스 카드 그리드) (5) Team (팀 멤버 소개) (6) Process (작업 프로세스 타임라인) (7) Contact (문의 폼)

그리고 맨 아래에 Footer 넣어줘. 페이지 진입 시 로딩 화면도 있어야 해.

기능
2-1. 로딩 화면 페이지 처음 열리면 다크 네이비 전체화면 배경에 "LOADING" 텍스트가 크게 중앙에 표시되고, 그 하단에 코랄색 가로 라인이 왼쪽에서 오른쪽으로 무한 반복 슬라이드하는 애니메이션을 보여줘. 약 1초 후에 로딩 화면이 페이드아웃 되면서 사라지게 해줘.

2-2. 네비게이션 상단 고정 네비게이션 바를 만들어줘. 왼쪽에 "STUDIO" 로고(Bebas Neue, letter-spacing 넓게), 오른쪽에 메뉴 링크들(Home, Works, About, Services, Team, Process, Contact) 배치해줘. mix-blend-mode: difference를 네비게이션 전체에 적용해서 배경에 상관없이 흰색 텍스트가 보이게 해줘. 스크롤 100px 이상 내려가면 네비게이션 배경이 반투명 다크 네이비 + backdrop-filter blur로 바뀌면서 패딩이 줄어드는 효과 넣어줘. 768px 이하 모바일에서는 메뉴 링크 숨기고 햄버거 버튼(3줄 → X 토글 애니메이션) 보여줘. 햄버거 누르면 전체화면 다크 네이비 모바일 메뉴가 열리고, 메뉴 항목들이 세로 중앙 정렬로 표시돼. 메뉴 링크 클릭하면 닫히게 해줘. 모든 앵커 링크에 부드러운 스크롤 적용해줘.

2-3. 스크롤 애니메이션 (Reveal) 네 가지 종류의 reveal 애니메이션을 만들어줘: 아래에서 위로(fade-in), 왼쪽에서 오른쪽(slide-in-left), 오른쪽에서 왼쪽(slide-in-right), 축소에서 원래 크기로(scale-in). IntersectionObserver 사용하고, 뷰포트 하단 100px 전에 트리거되게 해줘.

2-4. 히어로 타이틀 애니메이션 히어로 타이틀의 각 글자가 개별적으로 0.05초 간격의 딜레이를 두고 아래에서 위로 순차적으로 페이드인 되게 해줘. 각 글자에 마우스를 올리면 해당 글자가 코랄색으로 변하면서 1.1배 확대 + 약간 기울어지는(-5도) 인터랙션을 넣어줘.

2-5. 포트폴리오 카드 3D 호버 Works 섹션의 카드에 마우스를 올리면 마우스 위치에 따라 perspective 기반 3D 기울기(rotateX/rotateY) 효과가 실시간으로 적용되게 해줘. 마우스가 벗어나면 원래 상태로 부드럽게 복귀.

2-6. 통계 카운터 애니메이션 About 섹션의 숫자 통계가 뷰포트에 들어오면 0부터 목표 숫자까지 카운트업 애니메이션이 실행되게 해줘. 한 번만 실행되게 해줘.

2-7. 배경 인터랙티브 셰이프 히어로 영역 배경에 3개의 블러 처리된 컬러 원(코랄, 민트, 옐로우)이 떠다니게 해줘. 마우스 움직임에 따라 각 원이 약간씩 다른 속도로 반응하면서 위치가 미세하게 이동하는 인터랙션을 넣어줘.

2-8. 패럴랙스 효과 히어로 영역의 플로팅 셰이프들이 스크롤 시 각각 다른 속도로 아래로 이동하는 패럴랙스 효과를 넣어줘.

2-9. 문의 폼 Name(필수), Email(필수), Subject(필수), Message(필수) 4개 필드로 만들어줘. 입력 필드는 반투명 배경 + 미세한 테두리, 포커스 시 코랄색 테두리로 변하면서 배경이 약간 밝아지게 해줘. 라벨은 필드 안에 있다가 포커스 또는 입력 시 위로 올라가면서 작아지고 코랄색으로 변하는 플로팅 라벨 방식으로 해줘. 제출하면 버튼 텍스트가 "Sending..."으로 바뀌었다가 1.5초 후 "Message Sent! ✓"로 변하면서 배경이 민트색으로 바뀌고, 2초 후 원래대로 복구되면서 폼 리셋해줘.

디자인
3-1. 컬러 팔레트 코랄(메인 포인트): #FF6B6B 민트(보조 포인트): #4ECDC4 옐로우(액센트): #FFE66D 다크 네이비(주 배경): #1A1A2E 라이트 그레이(밝은 배경): #F7F7F7 텍스트: #2D3436

3-2. 서체 Google Fonts에서 아래 2개 불러와줘. Bebas Neue → 제목, 로고, 장식 텍스트용 Inter (300~900) → 본문, UI용 기본 body 서체는 'Inter', sans-serif로 해줘.

3-3. 전체 톤앤무드 대담하고 에너제틱한 디지털 스튜디오 느낌. 다크와 라이트 배경을 섹션마다 번갈아 사용해줘(Hero-다크, Works-라이트, About-다크, Services-라이트, Team-다크, Process-라이트, Contact-다크). 제목은 Bebas Neue로 크고 임팩트 있게 표현하고, 본문은 Inter로 깔끔하게. 카드와 이미지에 border-radius 20px 적용. ::selection 색상은 따로 지정하지 않아도 돼.

3-4. 이미지 처리 스타일 이미지 호버 시 1.05~1.1배 확대 효과, overflow: hidden으로 카드 밖으로 안 넘치게. 팀 멤버 이미지는 원형(border-radius: 50%)이고 기본 흑백(grayscale 100%) → 호버 시 컬러 복원. 호버 시 이미지 뒤에 코랄-민트 그라디언트 테두리가 나타나게 해줘.

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

(1) Hero 전체 화면(100vh), 다크 네이비 배경, 중앙 정렬. 배경에 3개의 블러 처리된 큰 컬러 원(코랄 300px, 민트 200px, 옐로우 150px)이 각기 다른 위치에서 느리게 떠다니는 애니메이션. 중앙에 "CREATIVE STUDIO" 타이틀(Bebas Neue, 매우 크게 clamp(4rem,15vw,12rem), 투명 텍스트에 흰색 2px 외곽선 스트로크), "CREATIVE"와 "STUDIO"는 줄바꿈으로 분리. 각 글자를 span으로 감싸서 개별 인터랙션 가능하게. 타이틀 아래에 서브타이틀 "Where Design Meets Innovation"(대문자, letter-spacing 넓게, 흰색 80% 투명). 하단 중앙에 스크롤 인디케이터(흰색 테두리 마우스 아이콘 안에서 작은 흰색 원이 위에서 아래로 반복 이동하는 애니메이션).

사용할 이미지: 없음 (배경은 순수 CSS로 처리)

(2) Works 라이트 그레이 배경, 중앙 정렬 섹션 헤더("Selected Works" 타이틀 + 서브텍스트). 매이슨리 스타일 그리드(auto-fit, minmax 300px) + grid-auto-flow: dense로 6개 프로젝트 카드 배치. 3n+1번째 카드는 grid-row: span 2로 세로로 길게. 각 카드는 border-radius 20px, 다크 네이비 배경, 호버 시 위로 10px 이동 + 그림자. 이미지 호버 시 1.1배 확대. 하단에서 올라오는 그라디언트 오버레이 위에 프로젝트명 + 카테고리(코랄색) 표시, 기본 투명 → 호버 시 나타남.

사용할 이미지:

Project 1 "Digital Dreams" (Web Design): https://cdn.midjourney.com/e2961bd3-5f3e-4df5-97b0-372cde33881e/0_3.png
Project 2 "Brand Evolution" (Branding): https://cdn.midjourney.com/921d92cb-996f-4d3a-aa06-257595ab9574/0_1.png
Project 3 "Motion Magic" (Animation): https://cdn.midjourney.com/7e67b738-f518-4963-ab7f-0f6aee68631f/0_0.png
Project 4 "Tech Forward" (Development): https://cdn.midjourney.com/a727665f-52bb-4f12-8ab5-a14de7d37fa0/0_1.png
Project 5 "Visual Story" (UI/UX): https://cdn.midjourney.com/6f1e16bb-1c36-4d96-a63a-07d287befbb5/0_2.png
Project 6 "Future Vision" (Concept): https://cdn.midjourney.com/435bc734-6093-48be-8671-a03dac8c0646/0_0.png
(3) About 다크 네이비 배경, 흰색 텍스트. 2컬럼 그리드(텍스트 / 비주얼), gap 80px. 왼쪽에 제목 "We are creators of digital experiences"("creators"만 코랄색 강조), 설명 문단(Founded in 2020, 디지털 디자인 경계를 넓혀왔다는 내용), 2×2 통계 그리드(150+ Projects Completed, 50+ Happy Clients, 25+ Team Members, 15+ Awards Won). 각 통계는 왼쪽에 코랄색 세로 3px 바가 있는 스타일. 오른쪽에 3개의 이미지가 겹쳐진(absolute position) 비주얼 영역(높이 600px). 첫 번째 이미지 300×400px 좌상단, 두 번째 250×350px 우하단, 세 번째 200×300px 중앙. 호버 시 z-index 올라가면서 약간 확대.

사용할 이미지:

About 이미지 1: https://cdn.midjourney.com/24bf6d75-335f-4e3e-a0ac-51f1b596650d/0_0.png
About 이미지 2: https://cdn.midjourney.com/b20cfa8a-047e-4cc9-9cb1-fd00cf5b6868/0_1.png
About 이미지 3: https://cdn.midjourney.com/deb55a2f-c5dd-4f0e-91ae-a4a29a82ed7c/0_2.png
(4) Services 라이트 그레이 배경, 중앙 정렬 헤더("What We Do" + 서브텍스트). auto-fit minmax(300px) 그리드로 6개 서비스 카드. 각 카드는 흰색 배경, border-radius 20px, 패딩 50px 40px, 미세 그림자. 상단에 코랄→민트 그라디언트 라인(5px)이 기본 숨겨져 있다가 호버 시 왼쪽에서 오른쪽으로 슬라이드인. 호버 시 위로 10px 이동 + 그림자 강화. 이모지 아이콘(60px 코랄 배경 라운드 사각형 안에 흰색), 서비스명, 설명. 서비스: Brand Design(🎨), Web Development(💻), UI/UX Design(📱), Motion Design(🎬), Digital Strategy(📈), Product Launch(🚀).

사용할 이미지: 없음 (이모지 아이콘 사용)

(5) Team 다크 네이비 배경, 흰색 텍스트, 중앙 정렬 헤더("Meet Our Team" + 서브텍스트). auto-fit minmax(250px) 그리드로 4명 배치. 각 카드 중앙 정렬, 원형 이미지(200×200px), 기본 흑백 → 호버 시 컬러. 호버 시 이미지 뒤에 코랄→민트 45도 그라디언트 테두리(3px)가 나타남(::after 의사요소, border-radius 50%, inset -3px). 이름 + 역할(코랄색, 대문자). 팀원: Alex Chen/Creative Director, Sarah Johnson/Lead Developer, Mike Williams/UX Designer, Emma Davis/Brand Strategist.

사용할 이미지:

팀원 1 Alex Chen: https://cdn.midjourney.com/d88cbb51-1d35-4110-8c22-a159348485cf/0_0.png
팀원 2 Sarah Johnson: https://cdn.midjourney.com/d88cbb51-1d35-4110-8c22-a159348485cf/0_1.png
팀원 3 Mike Williams: https://cdn.midjourney.com/d88cbb51-1d35-4110-8c22-a159348485cf/0_2.png
팀원 4 Emma Davis: https://cdn.midjourney.com/d88cbb51-1d35-4110-8c22-a159348485cf/0_3.png
(6) Process 라이트 그레이 배경, 중앙 정렬 헤더("Our Process" + 서브텍스트). 세로 타임라인 레이아웃(중앙에 2px 세로 라인, 20% 투명도). 5단계를 교대 배치(홀수는 왼쪽 텍스트+오른쪽 아이콘, 짝수는 반대). 각 단계에 큰 번호(Bebas Neue, 5rem, 코랄색 30% 투명), 제목, 설명. 중앙에 80px 코랄색 원형 아이콘(이모지). 단계: 01 Discovery(🔍), 02 Strategy(📊), 03 Design(🎨), 04 Development(💻), 05 Launch(🚀). 768px 이하에서는 타임라인 라인 숨기고 세로 1컬럼으로 중앙 정렬.

사용할 이미지: 없음 (이모지 아이콘 사용)

(7) Contact 다크 네이비 배경, 흰색 텍스트, 중앙 정렬. 제목 "Let's Create Something Amazing"(Bebas Neue, 코랄→민트 그라디언트 텍스트, background-clip: text). 서브텍스트, 그 아래 폼. 상단 2컬럼(Name/Email), 그 아래 Subject 1컬럼, 그 아래 Message textarea. 제출 버튼은 코랄→민트 45도 그라디언트, 라운드 50px, 대문자, 호버 시 위로 3px + 코랄 그림자.

사용할 이미지: 없음

Footer 다크 네이비 배경, 상단에 흰색 10% 투명도 보더. 중앙 정렬. 소셜 링크 4개(이모지: 📷, 🐦, 💼, 🎨, 호버 시 코랄색 + 위로 5px 이동), 하단에 "© 2025 STUDIO. All rights reserved."

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

4-2. CSS 관련 CSS 변수(Custom Properties)로 컬러 관리해줘. 반응형은 768px 한 구간으로 미디어쿼리 작성해줘. 768px 이하: 햄버거 메뉴 활성화, About/Form 1컬럼, Process 타임라인 라인 숨기고 세로 중앙 정렬, About 비주얼 영역 높이 축소(400px).

4-3. JavaScript 관련 IntersectionObserver로 스크롤 reveal 애니메이션 및 통계 카운터 트리거, scroll 이벤트로 네비게이션 상태 변화 및 패럴랙스 처리, mousemove 이벤트로 히어로 플로팅 셰이프 반응 및 포트폴리오 카드 3D 기울기 처리. 이벤트 위임과 querySelectorAll 등 기본 DOM API만 사용.

추가 조건 영문 전용 사이트, HTML lang="ko"로 설정. 콘텐츠 최대 너비는 1400px(섹션별로 다름). 모든 transition은 0.3~0.5초, 부드러운 ease-out 기본. 코드에 영역별로 주석은 별도로 넣지 않아도 됨. 실제 서버 없이 로컬에서 HTML 파일 하나만 열어도 완전하게 동작해야 해.