0014

HTML, CSS, JavaScript만 사용해서 단일 HTML 파일로 인터랙티브 크리에이티브 스튜디오 포트폴리오 웹사이트를 만들어줘. 스튜디오 이름은 "STUDIO"이고, 전체적으로 블랙 배경 다크 테마에 옐로우 골드(#ffcc00) 포인트를 활용한 모던 미니멀 디자인으로 만들어줘. 영문 사이트야.

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

(1) Hero (전체화면 인트로 - 인터랙티브 배경 전환) (2) About (스튜디오 소개) (3) Work (포트폴리오 그리드) (4) Services (서비스 목록 - 넘버링 리스트형) (5) Team (팀 멤버 소개) (6) Contact (문의 정보 + CTA 버튼)

그리고 맨 아래에 Footer 넣어줘.

기능
2-1. 네비게이션 상단 고정 네비게이션 바를 만들어줘. 왼쪽에 "STUDIO" 로고(볼드, 1.5rem), 오른쪽에 메뉴 링크들(Home, About, Work, Services, Team, Contact) 배치해줘. 배경은 반투명 블랙(rgba(0,0,0,0.8)) + backdrop-filter blur(10px) 처리해줘. 스크롤을 아래로 내리면 네비게이션이 위로 슬라이드되어 숨겨지고, 위로 스크롤하면 다시 나타나는 show/hide 동작을 넣어줘. 모든 앵커 링크에 부드러운 스크롤 적용해줘. 768px 이하 모바일에서는 메뉴 링크를 숨겨줘.

2-2. Hero 인터랙티브 배경 전환 Hero 섹션 중앙에 큰 텍스트 "We create digital experiences that inspire"를 배치하되, 각 단어("We", "create", "digital", "experiences", "that", "inspire")를 개별 span 요소로 감싸줘. 각 단어에 마우스를 올리면(hover) 해당 단어에 매핑된 배경 이미지가 전체 화면에 크로스페이드(opacity 트랜지션 0.6초)로 전환되게 해줘. 단어 hover 시 텍스트 색상이 #ffcc00으로 변하게 해줘. 텍스트 아래에 "Hover over the words to explore our work" 안내 문구를 넣어줘. 하단 중앙에 아래 방향 화살표 SVG를 넣고, 위아래로 바운스하는 무한 애니메이션을 적용해줘. 모바일에서는 터치(touchstart)로도 배경 전환이 동작하게 해줘.

2-3. 스크롤 애니메이션 (Reveal) 모든 섹션(.section)에 IntersectionObserver를 사용한 페이드인 + 위로 슬라이드 등장 애니메이션을 적용해줘. 초기 상태는 opacity: 0, translateY(50px)이고, 뷰포트에 진입하면 opacity: 1, translateY(0)으로 0.8초에 걸쳐 전환되게 해줘. rootMargin은 하단 -100px로 설정해줘.

디자인
3-1. 컬러 팔레트 메인 배경: #000000 (순수 블랙) 보조 배경 1: #0a0a0a (About, Services, Contact 섹션) 보조 배경 2: #111111 (Work, Team 섹션) 포인트 컬러: #ffcc00 (옐로우 골드 - 호버, 서비스 번호, 팀 역할, 연락처 라벨 등에 사용) 텍스트: #ffffff (기본) 보조 텍스트: rgba(255,255,255,0.8) (설명, 서브텍스트) 구분선: rgba(255,255,255,0.1)

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

3-3. 전체 톤앤무드 어둡고 세련된 크리에이티브 에이전시 분위기. 여백을 넉넉하게 쓰고 콘텐츠 최대 너비 1200~1400px로 제한해줘. 모든 인터랙티브 요소에 0.3초 ease 트랜지션을 기본 적용하고, 호버 시 부드러운 반응을 줘. 카드나 항목에는 border-radius 8px 정도로 약간의 라운딩을 적용해줘.

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

(1) Hero 전체 화면(100vh), 중앙 정렬 텍스트. 뒤에 6장의 배경 이미지가 겹쳐 있고(모두 absolute, cover), 활성화된 이미지만 opacity: 1로 보여줘. 메인 텍스트는 clamp(3rem, 8vw, 6rem)으로 반응형 크기, font-weight 700, letter-spacing -0.02em. 텍스트 컨테이너의 z-index를 배경보다 위로 설정해줘.

사용할 배경 이미지 (각 단어에 매핑):

"We" → https://cdn.midjourney.com/6e78f622-3077-4d19-a40d-2c34e21b757a/0_2.png
"create" → https://cdn.midjourney.com/6e78f622-3077-4d19-a40d-2c34e21b757a/0_1.png
"digital" → https://cdn.midjourney.com/6e78f622-3077-4d19-a40d-2c34e21b757a/0_3.png
"experiences" → https://cdn.midjourney.com/6e78f622-3077-4d19-a40d-2c34e21b757a/0_0.png
"that" → https://cdn.midjourney.com/6f1e16bb-1c36-4d96-a63a-07d287befbb5/0_2.png
"inspire" → https://cdn.midjourney.com/6f1e16bb-1c36-4d96-a63a-07d287befbb5/0_1.png
(2) About #0a0a0a 배경, 2컬럼 그리드(텍스트 / 이미지), 4rem 갭. 왼쪽에 제목 "About Our Studio"(clamp 2.5rem~4rem), 설명 3단락(1.25rem, line-height 1.8). 오른쪽에 높이 600px 이미지 영역(border-radius 8px).

사용할 이미지:

About 이미지 → https://images.unsplash.com/photo-1497366216548-37526070297c?w=800&h=600&fit=crop
(3) Work #111 배경, 중앙 정렬 헤더("Selected Work" + 서브텍스트). auto-fit 반응형 그리드(minmax(350px, 1fr)), 2rem 갭. 각 카드는 높이 400px, overflow hidden, border-radius 8px. 이미지는 object-fit cover, 호버 시 1.1배 확대(0.5초). 카드 호버 시 전체가 위로 10px 이동. 하단에서 올라오는 그라디언트 오버레이(translateY 100% → 0) 위에 프로젝트명 + 카테고리 표시.

6개 프로젝트 및 사용할 이미지:

"Brand Evolution" (Branding & Identity) → https://cdn.midjourney.com/435bc734-6093-48be-8671-a03dac8c0646/0_0.png
"Digital Platform" (Web Development) → https://cdn.midjourney.com/435bc734-6093-48be-8671-a03dac8c0646/0_1.png
"Creative Campaign" (Digital Marketing) → https://cdn.midjourney.com/435bc734-6093-48be-8671-a03dac8c0646/0_2.png
"Mobile Experience" (App Design) → https://cdn.midjourney.com/435bc734-6093-48be-8671-a03dac8c0646/0_3.png
"Data Visualization" (Interactive Design) → https://cdn.midjourney.com/1e2ede52-3046-4a89-a939-1bdda700e141/0_0.png
"Tech Innovation" (Product Design) → https://cdn.midjourney.com/a7628a18-e245-4414-85b4-31b80bf7c4a5/0_2.png
(4) Services #0a0a0a 배경, 중앙 정렬 헤더. 서비스 4개를 세로 리스트로 나열해줘. 각 항목은 2컬럼 그리드(번호 / 콘텐츠)로 구성하고 하단에 rgba(255,255,255,0.1) 보더 구분선을 넣어줘. 번호는 3rem 크기 #ffcc00 색상 opacity 0.5로 표시. 호버 시 왼쪽 패딩이 2rem 들어가면서 구분선 색상이 #ffcc00으로 변하게 해줘. 서비스 4개: Strategy & Consulting, Design & Branding, Development & Technology, Digital Marketing. 각각 영문 설명 1~2줄.

(5) Team #111 배경, 중앙 정렬 헤더. auto-fit 반응형 그리드(minmax(300px, 1fr)). 각 멤버 카드는 중앙 정렬, 호버 시 위로 10px 이동. 원형 이미지(250×250px, border-radius 50%, overflow hidden), 호버 시 이미지 1.1배 확대. 이름(1.5rem) + 역할(#ffcc00 색상, 1.1rem).

4명의 팀원 및 사용할 이미지:

Alex Chen / Creative Director → https://cdn.midjourney.com/e588da72-eaa5-4c52-800b-42f90e78a209/0_3.png
Sarah Johnson / Lead Designer → https://cdn.midjourney.com/95c2f67e-0953-4e8-82ed-2dfddc2a85bb/0_1.png
Michael Park / Tech Lead → https://cdn.midjourney.com/b77d1153-e105-4381-8856-4c9431b967e0/0_1.png
Emma Davis / Strategy Director → https://cdn.midjourney.com/b77d1153-e105-4381-8856-4c9431b967e0/0_2.png
(6) Contact #0a0a0a 배경, 중앙 정렬. 제목 "Let's Create Something Amazing", 서브텍스트 "Ready to transform your digital presence?". 3컬럼 반응형 그리드로 연락처 정보(Email: hello@studio.com, Phone: +1 (234) 567-890, Location: Seoul, South Korea) 배치. 각 항목의 라벨은 #ffcc00. 하단에 "Start a Project" CTA 버튼(#ffcc00 배경, 검정 텍스트, border-radius 50px, 호버 시 위로 3px 이동 + 골드 박스 쉐도우).

Footer #000 배경, 상단 rgba(255,255,255,0.1) 보더, 중앙 정렬 저작권 텍스트 "© 2024 Studio. All rights reserved." (opacity 0.6).

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

4-2. CSS 관련 반응형은 768px 한 구간으로 미디어쿼리 작성해줘. 768px 이하: 네비 메뉴 숨김, About 그리드 1컬럼(이미지 높이 400px), Work 그리드 1컬럼, Services 그리드 1컬럼(번호 2rem 크기).

4-3. JavaScript 관련 Hero 배경 전환: querySelectorAll로 텍스트 아이템과 배경 이미지를 가져와서, mouseenter 이벤트에 100ms setTimeout 디바운스를 적용하여 배경 이미지의 active 클래스를 토글해줘. 페이지 로드 시 첫 번째 배경 이미지를 active로 초기화해줘. 네비게이션 show/hide: scroll 이벤트에서 이전 스크롤 위치와 비교하여 아래로 스크롤 시(100px 이상) translateY(-100%)로 숨기고, 위로 스크롤 시 translateY(0)으로 보여줘. IntersectionObserver: threshold 0.1, rootMargin '0px 0px -100px 0px'으로 설정하고 모든 .section 요소를 관찰해줘. 터치 지원: touchstart 이벤트로 모바일에서도 Hero 배경 전환이 동작하게 해줘.

추가 조건 언어는 영문으로 해줘. HTML lang="ko"로 설정해줘. 콘텐츠 최대 너비는 1200px, 섹션 좌우 패딩 2rem 기본. scroll-behavior: smooth를 html에 적용해줘. 모든 transition에 ease 이징 적용. 코드에 간단한 주석 넣어줘. 실제 서버 없이 로컬에서 HTML 파일 하나만 열어도 완전하게 동작해야 해.