0027

HTML, CSS, JavaScript만 사용해서 단일 HTML 파일로 볼드 타이포그래피 중심의 크리에이티브 포트폴리오 웹사이트를 만들어줘. 스튜디오 이름은 "CREATIVE"이고, 전체적으로 올블랙 다크 테마에 네온 컬러(마젠타/시안) 포인트를 활용한 대담하고 역동적인 디자인으로 만들어줘.

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

(1) Hero (전체화면 비디오 배경 인트로) (2) Showcase (프로젝트 카드 그리드) (3) Quote (대형 인용구 섹션) (4) Dynamic Text (인터랙티브 타이포그래피 섹션) (5) Gallery (정사각형 포트폴리오 갤러리) (6) Contact (CTA 문의 섹션) (7) Footer

그리고 페이지 진입 시 로딩 화면도 있어야 해.

2. 기능
2-1. 로딩 화면
페이지 처음 열리면 올블랙 배경에 "LOADING" 텍스트가 중앙에 표시돼. 텍스트에 글리치 효과를 적용해줘 — 마젠타(#ff00ff)와 시안(#00ffff) 색상의 text-shadow가 좌우로 번갈아 흔들리는 애니메이션이야. 페이지 로드 완료 후 약 1.5초 뒤에 로딩 화면이 페이드아웃 되면서 사라지게 해줘.

2-2. 네비게이션
상단 중앙에 플로팅 네비게이션 바를 만들어줘. 반투명 흰색 배경 + backdrop-filter blur + 둥근 캡슐형(border-radius: 50px) 스타일이야. 메뉴 링크는 Home, Work, About, Gallery, Contact 5개야. 링크 호버 시 하단에 밑줄이 좌에서 우로 펼쳐지는 효과 넣어줘. 스크롤 방향 감지해서 아래로 스크롤하면 네비게이션이 위로 사라지고, 위로 스크롤하면 다시 나타나게 해줘. 호버 시 네비게이션 바 자체가 살짝 위로 떠오르면서 그림자가 생기는 효과도 넣어줘. 모든 앵커 링크에 부드러운 스크롤 적용해줘.

2-3. 스크롤 애니메이션 (Reveal)
IntersectionObserver를 사용해서, .scroll-reveal 클래스가 붙은 섹션들이 뷰포트에 진입하면 아래에서 위로 50px 슬라이드업 + 페이드인 되는 애니메이션을 적용해줘. threshold는 0.1, rootMargin은 하단 -100px로 설정해줘.

2-4. 마우스 패럴랙스
마우스 위치에 따라 .parallax 클래스가 붙은 요소들이 미세하게 움직이는 패럴랙스 효과를 넣어줘. 마우스가 화면 중앙에서 벗어날수록 요소가 반대 방향으로 살짝 이동하는 방식이야.

2-5. 갤러리 인접 아이템 효과
갤러리 아이템에 마우스를 올리면, 해당 아이템의 바로 옆(좌/우) 및 위/아래 행에 해당하는 인접 아이템들이 scale(0.95)로 축소되면서 opacity가 0.7로 낮아지는 효과를 넣어줘. 마우스가 벗어나면 원래대로 복구돼.

2-6. Hero 타이틀 글자 인터랙션
Hero 섹션의 "CREATIVE" 타이틀 각 글자가 독립적으로 마우스 호버 시 float 애니메이션이 리셋되면서 다시 시작되는 효과를 넣어줘. 각 글자에 딜레이를 다르게 줘서 물결치듯 떠다니는 기본 애니메이션도 적용해줘.

2-7. 비디오 모바일 최적화
768px 이하 모바일 환경에서는 Hero 배경 비디오의 autoplay를 제거하고 일시정지 시켜서 성능을 최적화해줘.

3. 디자인
3-1. 컬러 팔레트
메인 배경: #000000 (순수 블랙) 보조 배경: #111111 (짙은 그레이) 세 번째 배경: #0a0a0a (거의 블랙) 네온 마젠타: #ff00ff (포인트 색상 1) 네온 시안: #00ffff (포인트 색상 2) 네온 옐로: #ffff00 (보조 포인트) 텍스트: #ffffff (흰색) 반투명 흰: rgba(255, 255, 255, 0.1) ~ rgba(255, 255, 255, 0.2) 반투명 텍스트: rgba(255, 255, 255, 0.02) (거대 배경 텍스트용)

3-2. 서체
Google Fonts에서 아래 4개 불러와줘. Bebas Neue → 거대 배경 장식 텍스트용 Oswald (200, 400, 700) → 본문, UI용 Anton → 제목, 타이틀용 Playfair Display (400, 900, italic 포함) → 인용구, 서브타이틀용 기본 body 서체는 'Oswald', sans-serif로 해줘.

3-3. 전체 톤앤무드
어둡고 대담한 크리에이티브 스튜디오 느낌. 타이포그래피가 디자인의 핵심이야 — 거대한 글씨, 극단적인 사이즈 대비, 좁은 행간(line-height 0.8~0.9)을 적극 활용해줘. 호버 인터랙션에 네온 컬러 글로우와 다층 text-shadow를 적극 사용해줘. 이미지 위에는 항상 어두운 그라디언트 오버레이를 깔아줘. 반응형에서 모바일은 768px 기준으로 그리드를 1~2컬럼으로 변환해줘.

3-4. 각 섹션 디자인 상세
(1) Hero 전체 화면(100vh), 블랙 배경 위에 비디오가 30% 불투명도로 깔려 있어. 중앙에 "CREATIVE" 타이틀을 clamp(80px, 20vw, 300px) 크기로 거대하게 배치해줘. Anton 서체, line-height 0.8, letter-spacing -0.05em. 각 글자를 <span>으로 감싸서 개별 애니메이션을 줘 — CSS 변수 --i로 딜레이를 0.1초씩 차등 적용한 물결 float 효과. 타이틀 아래에 "Where Typography Meets Art" 서브타이틀을 Playfair Display, letter-spacing 0.3em, 대문자로 넣어줘. 타이틀은 로드 시 아래에서 위로 올라오면서 blur에서 선명해지는 reveal 애니메이션, 서브타이틀은 1초 딜레이 후 페이드인.

비디오 URL: https://cdn.midjourney.com/video/8c31b1e5-f7c1-488d-8eb2-3afff61b32a8/0.mp4

(2) Showcase 블랙 배경, 뒤에 "CREATE" 텍스트가 40vw 크기로 2% 불투명도 흰색 워터마크처럼 깔려 있어 (Bebas Neue, CSS ::before 의사요소). 2컬럼 반응형 그리드(minmax 400px), gap 40px, 최대 너비 1400px. 각 카드는 높이 500px, border-radius 20px, overflow hidden. 호버 시 카드 자체는 scale(0.95)로 살짝 축소, 내부 이미지는 scale(1.1) + brightness(0.7)로 확대+어둡게. 호버 시 하단에서 올라오는 반투명 검정 그라디언트 오버레이 위에 Anton 서체 프로젝트명 + 대문자 카테고리 태그가 translateY 애니메이션으로 나타나. 6개 프로젝트:

BOLD VISION / Brand Identity
FUTURE FORWARD / Digital Design
MINIMAL IMPACT / Web Experience
COLOR THEORY / Visual Art
MOTION MAGIC / Animation
TECH AESTHETICS / UI/UX Design
이미지 URL 순서대로:

https://cdn.midjourney.com/e2961bd3-5f3e-4df5-97b0-372cde33881e/0_3.png
https://cdn.midjourney.com/921d92cb-996f-4d3a-aa06-257595ab9574/0_1.png
https://cdn.midjourney.com/7e67b738-f518-4963-ab7f-0f6aee68631f/0_0.png
https://cdn.midjourney.com/a727665f-52bb-4f12-8ab5-a14de7d37fa0/0_1.png
https://cdn.midjourney.com/6f1e16bb-1c36-4d96-a63a-07d287befbb5/0_2.png
https://cdn.midjourney.com/435bc734-6093-48be-8671-a03dac8c0646/0_0.png
(3) Quote #111111 배경, 최소 높이 100vh, 중앙 정렬. Playfair Display 900 이탤릭, clamp(40px, 8vw, 120px) 크기로 "Design is not just what it looks like and feels like. Design is how it works." 인용문 배치. 인용문 좌상단과 우하단에 200px 크기의 10% 불투명도 큰따옴표 장식(Anton 서체). 아래에 "— Steve Jobs" 저자명을 Oswald 200, letter-spacing 0.3em, 70% 불투명도로.

(4) Dynamic Text 블랙 배경, 전체 높이 100vh, 중앙 정렬. Bebas Neue 서체로 "WE MAKE / IMPACT" 2줄 텍스트를 clamp(60px, 15vw, 200px) 크기로 배치. 각 글자를 <span>으로 감싸서, 호버 시 해당 글자만 scale(1.2) + rotate(-5deg) + 마젠타 색상 + 다층 text-shadow(시안 5px, 옐로 10px, 마젠타 글로우 15px) 효과 적용.

(5) Gallery #0a0a0a 배경. 상단에 "PORTFOLIO" 타이틀을 Anton 서체, clamp(60px, 10vw, 150px)로 배치하되, 45도 그라디언트(흰→마젠타→시안→흰, background-size 200%) 텍스트 클리핑 + 무한 좌우 흐르는 애니메이션 적용. 3컬럼 반응형 그리드(minmax 300px), gap 2px, aspect-ratio 1:1 정사각형 아이템. 호버 시 이미지 scale(1.2) + rotate(3deg). 좌상단에 Anton 서체 4rem 크기 번호(01~09)가 호버 시 페이드인 + 위로 슬라이드.

이미지 URL 순서대로:

https://cdn.midjourney.com/24bf6d75-335f-4e3e-a0ac-51f1b596650d/0_0.png
https://cdn.midjourney.com/b20cfa8a-047e-4cc9-9cb1-fd00cf5b6868/0_1.png
https://cdn.midjourney.com/deb55a2f-c5dd-4f0e-91ae-a4a29a82ed7c/0_2.png
https://cdn.midjourney.com/d88cbb51-1d35-4110-8c22-a159348485cf/0_3.png
https://cdn.midjourney.com/e2961bd3-5f3e-4df5-97b0-372cde33881e/0_0.png
https://cdn.midjourney.com/921d92cb-996f-4d3a-aa06-257595ab9574/0_3.png
https://cdn.midjourney.com/7e67b738-f518-4963-ab7f-0f6aee68631f/0_1.png
https://cdn.midjourney.com/a727665f-52bb-4f12-8ab5-a14de7d37fa0/0_2.png
https://cdn.midjourney.com/6f1e16bb-1c36-4d96-a63a-07d287befbb5/0_3.png
(6) Contact 블랙 배경, 뒤에 "CONTACT" 텍스트가 30vw 크기로 2% 불투명도 흰색 워터마크(-10도 회전)로 깔려 있어. 중앙에 "LET'S TALK" 타이틀(Anton, clamp 60px~120px) + "Ready to create something extraordinary together?" 서브타이틀(Playfair Display, 300, 80% 불투명도). 아래에 2개 버튼을 가로로 배치 — "Email Us"(mailto:hello@studio.com 링크)와 "Start Project". 버튼은 2px 흰색 테두리, Oswald 18px 대문자 letter-spacing 3px. 호버 시 ::before 의사요소로 흰색 배경이 왼쪽에서 오른쪽으로 채워지면서 텍스트가 검정으로 반전.

(7) Footer 블랙 배경, 상단에 10% 불투명도 흰색 보더. 중앙 정렬로 "© 2024 CREATIVE STUDIO. ALL RIGHTS RESERVED." 텍스트를 Oswald 200, letter-spacing 2px, 50% 불투명도로 배치.

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

4-2. CSS 관련
clamp()로 폰트 사이즈 반응형 처리해줘. 반응형은 768px 한 구간으로 미디어쿼리 작성해줘. 768px 이하: Showcase 그리드 1컬럼, Gallery 2컬럼, Hero 타이틀 축소, Quote 큰따옴표 장식 축소 및 위치 조정, 네비게이션 패딩/간격/글자 축소.

4-3. JavaScript 관련
IntersectionObserver로 스크롤 reveal 애니메이션, mousemove 이벤트로 패럴랙스, 스크롤 방향 감지로 네비게이션 show/hide, matchMedia로 모바일 비디오 최적화. 이벤트 위임과 querySelectorAll 등 기본 DOM API만 사용.

5. 추가 조건
HTML lang="ko"로 설정해줘. 전체적으로 cubic-bezier(0.4, 0, 0.2, 1) 이징 커브를 기본으로 써줘. 모든 transition은 0.3~0.8초 사이로 부드럽게. 코드에 영역별로 주석 넣어줘. 실제 서버 없이 로컬에서 HTML 파일 하나만 열어도 완전하게 동작해야 해.