0028

HTML, CSS, JavaScript만 사용해서 단일 HTML 파일로 타이포그래피 중심의 몰입형 크리에이티브 스튜디오 포트폴리오 웹사이트를 만들어줘. 스튜디오 이름은 "TYPECRAFT"이고, 전체적으로 다크 테마(거의 블랙 배경)에 네온 컬러 포인트를 활용한 볼드하고 실험적인 디자인으로 만들어줘. 영문 전용 사이트야.

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

(1) Hero (전체화면 타이포그래피 인트로) (2) Gallery (비정형 메이슨리 포트폴리오 그리드) (3) About (철학 인용구 텍스트 섹션) (4) Contact (문의 섹션)

그리고 맨 아래에 Footer 넣어줘. 페이지 진입 시 로딩 화면도 있어야 하고, 커스텀 커서도 포함해줘. 상단 고정 네비게이션도 넣어줘.

기능
2-1. 로딩 화면 페이지 처음 열리면 완전 블랙 배경에 "LOADING" 텍스트가 중앙에 표시돼. 텍스트에 글리치 효과(text-shadow로 마젠타/시안 색상이 번갈아 어긋나는 애니메이션)를 넣어줘. 약 1.5초 후에 로딩 화면이 페이드아웃 되면서 사라지게 해줘. 폰트는 Bebas Neue, letter-spacing 넓게, font-size는 4rem 정도.

2-2. 커스텀 커서 마우스 포인터를 흰색 원형(20px)으로 대체해줘. mix-blend-mode: difference 적용해줘. body의 기본 cursor는 crosshair로 해줘. 인터랙티브 텍스트 요소 위에 올리면 커서가 2배로 커지는 효과 넣어줘.

2-3. 네비게이션 상단 고정 네비게이션 바를 만들어줘. mix-blend-mode: difference 적용. 왼쪽에 "TYPECRAFT" 로고(Bebas Neue, letter-spacing 넓게, 미세한 떨림 글리치 애니메이션), 오른쪽에 메뉴 링크들(Home, Gallery, About, Contact). 메뉴 링크는 14px 대문자, letter-spacing 넓게. 768px 이하 모바일에서는 메뉴 링크 숨겨줘. 모든 앵커 링크에 부드러운 스크롤 적용해줘.

2-4. 흩뿌려지는 글자 효과 (Scattered Letters) Hero 섹션 배경에 알파벳, 숫자, 특수문자(A-Z, 0-9, @#$%&*)가 랜덤 위치에서 아래에서 위로 천천히 떠오르는 효과를 넣어줘. 각 글자는 Playfair Display 이탤릭 볼드, 랜덤한 색상(HSL 랜덤 hue), 투명도 낮게(0.1), 랜덤한 속도(15~25초)와 딜레이로 떠오르면서 360도 회전해. 초기에 20개 생성하고 이후 1초마다 1개씩 추가 생성, 25초 후 자동 제거해줘.

2-5. 마우스 반응형 3D 타이틀 Hero의 메인 타이틀이 마우스 위치에 따라 perspective 기반 rotateX/rotateY가 변하는 3D 틸트 효과를 넣어줘. 마우스가 화면 중앙에서 벗어날수록 기울기가 커지게(최대 ±20도 정도).

2-6. 패럴랙스 효과 스크롤 시 Hero의 배경 대형 텍스트("CREATE")가 스크롤 속도의 50%로 느리게 따라오는 패럴랙스 효과를 넣어줘.

2-7. 스크롤 애니메이션 IntersectionObserver를 사용해서 About 섹션의 인용구와 Gallery의 그리드 아이템들이 뷰포트에 들어올 때 애니메이션이 시작되게 해줘. 인용구는 아래에서 위로 페이드인(처음에는 paused 상태).

디자인
3-1. 컬러 팔레트 메인 배경: #0a0a0a (거의 블랙) 순수 블랙: #000000 (Hero 배경, Contact 배경) 텍스트: #FFFFFF 네온 핑크: #ff006e (첫 번째 타이틀 워드 + 인터랙티브 텍스트 hover 색상) 네온 오렌지: #fb5607 (두 번째 타이틀 워드) 네온 옐로우: #ffbe0b (세 번째 타이틀 워드) 네온 마젠타: #ff00ff (글리치 효과용) 네온 시안: #00ffff (글리치 효과용)

3-2. 서체 Google Fonts에서 아래 4개 불러와줘. Bebas Neue → 메인 타이틀, 로고, 그리드 제목, Contact 제목 등 대형 디스플레이용 Playfair Display (400, 900, italic 포함) → 흩뿌려지는 글자, 인용구용 Space Mono (400, 700) → 본문, UI, 네비게이션, 스크롤 인디케이터 등 모노스페이스 텍스트용 Oswald (200, 400, 700) → 배경 대형 텍스트, 인터랙티브 텍스트용 기본 body 서체는 'Space Mono', monospace로 해줘.

3-3. 전체 톤앤무드 어둡고 실험적인 디지털 아트 스튜디오 느낌. 타이포그래피 자체가 비주얼의 핵심이야. 각 타이틀 워드에 강렬한 네온 glow(text-shadow 다중 레이어, 0~80px 범위)를 적용해서 빛나는 효과를 내줘. mix-blend-mode: screen을 타이틀에 적용해줘. 전체적으로 요소 간 간격을 넓게 쓰고, cubic-bezier(0.4, 0, 0.2, 1) 이징 커브를 기본으로 써줘.

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

(1) Hero 전체 화면(100vh), 블랙 배경. 배경에 비디오를 깔되 opacity 0.3으로 어둡게 처리해줘. 비디오 위에 거대한 배경 텍스트 "CREATE"를 Oswald 볼드 40vw 크기로, opacity 0.02 정도로 아주 희미하게 깔아줘. 이 텍스트는 letter-spacing이 -0.5em ↔ 0.5em 사이를 오가면서 blur도 함께 변하는 morphing 애니메이션(10초 주기)을 적용해줘. 중앙에 메인 타이틀 3줄: "TYPE" (네온 핑크), "CRAFT" (네온 오렌지, 약간 오른쪽 이동), "STUDIO" (네온 옐로우, 약간 왼쪽 이동). 폰트는 Bebas Neue, 크기는 clamp(8rem, 20vw, 25rem), line-height 0.8, letter-spacing -0.05em. 각 워드는 6초 주기로 위아래 float + 미세한 3D 회전 애니메이션(각각 딜레이 다르게). 하단 중앙에 "SCROLL" 텍스트를 세로 쓰기(writing-mode: vertical-lr)로, 12px 대문자 letter-spacing 넓게, 위아래 바운스 애니메이션(2초 주기) 적용해줘. 그리고 2-4에서 설명한 흩뿌려지는 글자 효과를 Hero 전체에 깔아줘.

(2) Gallery #0a0a0a 배경. 상단 중앙에 섹션 제목 "VISUAL SYMPHONY"를 Playfair Display 볼드로 clamp(4rem, 10vw, 8rem) 크기로. 제목에 outline 효과(원본 위에 -webkit-text-stroke 2px 흰색의 복제 텍스트가 10px 대각선 방향으로 어긋나며 왕복하는 애니메이션). 제목 아래에 "EXPLORE OUR CREATIVE UNIVERSE" 인터랙티브 텍스트(Oswald 대문자, 호버 시 텍스트가 투명해지면서 -webkit-text-stroke 2px 흰색 아웃라인으로 바뀌고, 동시에 네온 핑크 색상의 복제 텍스트가 왼쪽에서 오른쪽으로 clip-path 와이프 효과로 나타남). 그 아래에 반응형 메이슨리 그리드(auto-fit, minmax 300px, gap 30px, max-width 1600px). 10개의 그리드 아이템을 배치하되 일부는 tall(grid-row span 2), 일부는 wide(grid-column span 2)로 비정형 레이아웃. 각 아이템은 border-radius 10px, 기본 scale 0.95 → 호버 시 scale 1로 확대, 이미지도 호버 시 1.1배 확대. 하단에서 올라오는 어두운 그라디언트 오버레이 위에 Bebas Neue 2rem 프로젝트명 + 카테고리 설명 표시(호버 시에만 페이드인 + 슬라이드업). 768px 이하 모바일에서는 1컬럼, wide 아이템도 span 1로.

이미지는 아래 URL을 순서대로 사용해줘:

아이템 1: https://cdn.midjourney.com/e2961bd3-5f3e-4df5-97b0-372cde33881e/0_3.png (NEON DREAMS / Digital Art Collection)
아이템 2 (tall): https://cdn.midjourney.com/921d92cb-996f-4d3a-aa06-257595ab9574/0_1.png (ABSTRACT REALITY / Experimental Design)
아이템 3 (wide): https://cdn.midjourney.com/7e67b738-f518-4963-ab7f-0f6aee68631f/0_0.png (FUTURE VISION / Conceptual Series)
아이템 4: https://cdn.midjourney.com/a727665f-52bb-4f12-8ab5-a14de7d37fa0/0_2.png (CHROMATIC FLOW / Color Studies)
아이템 5: https://cdn.midjourney.com/6f1e16bb-1c36-4d96-a63a-07d287befbb5/0_1.png (GEOMETRIC POETRY / Form Exploration)
아이템 6 (tall): https://cdn.midjourney.com/435bc734-6093-48be-8671-a03dac8c0646/0_0.png (LIGHT SYMPHONY / Luminous Art)
아이템 7: https://cdn.midjourney.com/24bf6d75-335f-4e3e-a0ac-51f1b596650d/0_2.png (DIGITAL ESSENCE / Tech Art Fusion)
아이템 8 (wide): https://cdn.midjourney.com/b20cfa8a-047e-4cc9-9cb1-fd00cf5b6868/0_1.png (MOTION STATIC / Dynamic Stills)
아이템 9: https://cdn.midjourney.com/deb55a2f-c5dd-4f0e-91ae-a4a29a82ed7c/0_3.png (ETHEREAL SPACE / Atmospheric Design)
아이템 10: https://cdn.midjourney.com/d88cbb51-1d35-4110-8c22-a159348485cf/0_0.png (QUANTUM LEAP / Future Forward)
(3) About (Text Section) 최대 너비 1200px, 상하 패딩 200px. 중앙 정렬 인용구: "We don't just create designs, we craft experiences that transcend the digital realm and touch the soul of imagination." Playfair Display 이탤릭, clamp(3rem, 8vw, 6rem), line-height 1.2. 초기에 opacity 0 + translateY(50px) 상태에서 뷰포트 진입 시 페이드인 + 슬라이드업 애니메이션(1초).

(4) Contact 블랙 배경, overflow hidden. 배경에 "CONTACT" 텍스트를 Bebas Neue 20vw 크기로 opacity 0.05, -45도 회전시켜 중앙에 장식으로 깔아줘. 중앙에 "LET'S CREATE MAGIC" 제목(Bebas Neue, clamp 3~6rem, 3초 주기로 skewY 0deg ↔ -5deg 왕복 애니메이션). 그 아래에 "hello@typecraft.studio" 인터랙티브 텍스트(Gallery와 동일한 hover 효과).

Footer 하단 중앙에 "© 2024 TYPECRAFT STUDIO. ALL RIGHTS RESERVED." 12px, letter-spacing 넓게, opacity 0.5.

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

4-2. CSS 관련 반응형은 768px 한 구간으로 미디어쿼리 작성해줘. 768px 이하: Hero 타이틀 축소, Gallery 1컬럼(wide span 해제), 네비게이션 메뉴 숨김, 섹션 패딩 축소.

4-3. JavaScript 관련 window load 이벤트로 로딩 화면 제어, mousemove로 커스텀 커서 추적 + 3D 타이틀 틸트, setInterval/setTimeout으로 흩뿌려지는 글자 생성/제거, scroll 이벤트로 패럴랙스, IntersectionObserver로 스크롤 reveal 애니메이션, querySelectorAll로 부드러운 스크롤 및 인터랙티브 요소 hover 시 커서 확대. 별도 번들러 없이 전역 스코프에서 동작.

추가 조건 HTML lang="ko"로 설정해줘. 모든 transition은 0.3~0.5초 사이로 부드럽게. 코드에 영역별로 주석 넣어줘. 실제 서버 없이 로컬에서 HTML 파일 하나만 열어도 완전하게 동작해야 해.