0035

HTML, CSS, JavaScript만 사용해서 단일 HTML 파일로 볼드한 타이포그래피 중심의 디지털 크리에이티브 스튜디오 웹사이트를 만들어줘. 스튜디오 이름은 "TYPOGRAPHIC"이고, 전체적으로 어두운 블랙 다크 테마에 네온 핑크·블루·옐로우 포인트를 활용한 글리치 감성의 모던 디자인으로 만들어줘.

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

(1) Hero (전체화면 인트로) (2) Gallery (작업물 이미지·비디오 그리드) (3) Marquee (키워드 무한 흐름 띠) (4) Features (서비스 소개 카드) (5) CTA (프로젝트 유도 섹션)

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

기능
2-1. 로딩 화면 페이지 처음 열리면 블랙 배경에 "LOADING" 텍스트가 크게 표시되고, opacity가 1↔0.5로 반복 펄스되는 애니메이션을 보여줘. 약 1초 후에 로딩 화면이 페이드아웃 되면서 사라지게 해줘.

2-2. 네비게이션 상단 고정 네비게이션 바를 만들어줘. 왼쪽에 "TYPOGRAPHIC" 로고(font-weight 900, letter-spacing 좁게, 보라~남색 그라데이션 텍스트), 가운데에 메뉴 링크들(HOME, WORK, ABOUT, CONTACT), 오른쪽에 햄버거 메뉴 버튼(모바일 전용) 배치해줘. 배경은 반투명 블랙 + backdrop-filter blur(20px)로 해줘. 아래로 스크롤하면 네비게이션이 위로 숨고, 위로 스크롤하면 다시 나타나는 hide/show 토글 효과를 넣어줘. 768px 이하 모바일에서는 메뉴 링크 숨기고 햄버거 버튼 보여줘. 햄버거 누르면 전체화면 모바일 메뉴가 나타나고, 메뉴 링크 사이즈를 크게(2rem) 해서 세로로 중앙 정렬해줘. 메뉴 클릭하면 닫히게 해줘. 모든 앵커 링크에 부드러운 스크롤 적용해줘. 메뉴 링크에 호버 시 하단에서 그라데이션 언더라인이 좌→우로 펼쳐지는 효과 넣어줘.

2-3. 스크롤 애니메이션 (Reveal) IntersectionObserver를 사용해서, 갤러리 아이템과 피처 카드가 뷰포트에 들어올 때 아래에서 위로(translateY 30px→0) 페이드인 되게 해줘. 각 요소마다 0.1초씩 딜레이를 줘서 순차적으로 나타나게 해줘.

2-4. 마우스 패럴랙스 히어로 섹션의 배경 플로팅 요소들이 마우스 위치에 반응해서 움직이는 패럴랙스 효과를 넣어줘. 각 요소마다 이동 속도를 다르게(인덱스 기반) 줘서 입체감을 만들어줘.

2-5. 마키 (Marquee) 키워드들(DESIGN, CREATE, INNOVATE, INSPIRE, TRANSFORM)이 가로로 무한 반복 스크롤되는 띠 배너를 만들어줘. 텍스트는 매우 크게(clamp 3rem~6rem), 아웃라인 스트로크 스타일(글자 내부 투명, 흰색 테두리)로 해줘. 호버 시 해당 텍스트만 내부가 흰색으로 채워지게 해줘. 동일 콘텐츠를 2세트 나란히 놓아 끊김 없이 반복되게 해줘.

2-6. 갤러리 동적 생성 JavaScript 배열 데이터로 갤러리 아이템들을 동적으로 DOM에 생성해줘. 이미지와 비디오를 혼합 지원하고, 비디오는 autoplay, muted, loop, playsinline 속성 적용해줘. 각 아이템에 호버 시 이미지/비디오가 1.1배 확대되고, 하단에서 올라오는 그라데이션 오버레이 위에 제목 + 설명이 페이드인 되게 해줘. 카드 자체는 호버 시 scale(0.95)로 살짝 줄어드는 효과 적용해줘.

2-7. 히어로 타이틀 순차 애니메이션 히어로 타이틀의 각 줄(span)이 페이지 로드 시 아래에서 위로(translateY 50px→0) 순차적으로 페이드인 되게 해줘. 각 줄마다 0.2초씩 딜레이를 줘서 캐스케이드 효과를 만들어줘.

디자인
3-1. 컬러 팔레트 메인 배경: #0A0A0A (깊은 블랙) 포인트 핑크: #FF006E 포인트 블루: #3A86FF 포인트 옐로우: #FFBE0B 순백: #FFFFFF 그라데이션 1: linear-gradient(135deg, #667eea 0%, #764ba2 100%) — 보라~남색 그라데이션 2: linear-gradient(135deg, #f093fb 0%, #f5576c 100%) — 핑크 그라데이션 3: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%) — 시안블루

3-2. 서체 Google Fonts에서 Inter (100~900) 불러와줘. 모든 텍스트에 'Inter', sans-serif 적용해줘.

3-3. 전체 톤앤무드 대담하고 실험적인 타이포그래피 스튜디오 느낌. 글자가 주인공이 되는 디자인이야. 히어로 타이틀은 매우 크게(clamp 3rem~10rem), font-weight 900, letter-spacing -0.05em으로 꽉 찬 느낌을 줘. 글리치 텍스트 쉐도우 애니메이션을 히어로 타이틀에 적용해줘 — 핑크·블루·옐로우 3색이 미세하게 어긋나며 깜빡이는 효과야. 히어로 배경에 핑크·블루·옐로우 컬러의 큰 원형 블러(300px, filter: blur 80px, opacity 0.5)를 3개 띄우고, 느리게 떠다니는 float 애니메이션을 줘. 히어로 중앙 라인은 아웃라인(stroke) 스타일로 차별화해줘.

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

(1) Hero 전체 화면(100vh), 블랙 배경 + 중앙에 방사형 핑크 글로우(매우 옅은). 중앙 정렬로 3줄 타이틀("BOLD" / "CREATIVE"(아웃라인) / "DIGITAL"), 아래에 서브타이틀 "Where Typography Meets Innovation" (font-weight 300, letter-spacing 넓게, opacity 0.8). 배경에 3개의 큰 컬러 블러 원이 느리게 떠다니고, 마우스 움직임에 패럴랙스 반응해줘.

(2) Gallery "SELECTED WORKS" 제목(시안블루 그라데이션 텍스트, clamp 2.5rem~6rem). 반응형 그리드(auto-fit, minmax 300px). 각 아이템 높이 400px, border-radius 20px. 아래 3-5에 명시된 이미지·비디오 URL 사용해줘.

(3) Marquee 상하에 핑크 글로우 그라데이션 배경(매우 옅은). 위 2-5에서 설명한 대로 키워드 무한 흐름.

(4) Features "WHAT WE DO" 제목(시안블루 그라데이션 텍스트). 3개 카드를 반응형 그리드(auto-fit, minmax 350px)로 배치해줘. 각 카드: 반투명 흰색 배경(rgba 5%) + 미세한 흰색 테두리 + border-radius 30px + 패딩 50px 40px. 상단에 80px 정사각형 아이콘 영역(핑크 그라데이션 배경, border-radius 20px, 이모지 사용). 호버 시 카드가 translateY(-10px) 올라가고, 배경에 보라 그라데이션이 은은하게(opacity 0.1) 깔리고, 테두리가 투명해지게 해줘. 서비스 3개: Visual Design(🎨), Web Development(💻), Brand Strategy(🚀). 각각 영문 설명 1~2줄.

(5) CTA 양쪽에 핑크·블루 방사형 글로우가 blur 100px로 깔린 배경. 중앙에 3줄 큰 타이틀 "LET'S CREATE / SOMETHING / AMAZING" (clamp 3rem~8rem, font-weight 900). 아래에 "START A PROJECT" 버튼(보라 그라데이션 배경, 100px border-radius 캡슐형, 호버 시 scale 1.05 + 보라색 box-shadow).

Footer 상단에 미세한 흰색 반투명 보더. 중앙에 소셜 링크 4개(IG, TW, BE, DR)를 50px 원형 테두리 버튼으로 배치. 호버 시 배경 흰색 채움 + 텍스트 블랙 + translateY(-5px). 하단에 © 2024 TYPOGRAPHIC STUDIO. All rights reserved.

3-5. 이미지/비디오 갤러리에 아래 리소스를 사용해줘. JavaScript 배열에 type(image/video), src, title, description을 담아서 동적으로 생성해줘.

이미지:

https://cdn.midjourney.com/e2961bd3-5f3e-4df5-97b0-372cde33881e/0_3.png (Abstract Dreams / Exploring digital landscapes)
https://cdn.midjourney.com/e2961bd3-5f3e-4df5-97b0-372cde33881e/0_2.png (Color Theory / Vibrant visual experiments)
https://cdn.midjourney.com/921d92cb-996f-4d3a-aa06-257595ab9574/0_1.png (Future Vision / Tomorrow's aesthetics today)
https://cdn.midjourney.com/7e67b738-f518-4963-ab7f-0f6aee68631f/0_0.png (Digital Nature / Organic meets synthetic)
https://cdn.midjourney.com/a727665f-52bb-4f12-8ab5-a14de7d37fa0/0_2.png (Neon Dreams / Illuminated experiences)
https://cdn.midjourney.com/6f1e16bb-1c36-4d96-a63a-07d287befbb5/0_1.png (Geometric Play / Shapes and forms)
https://cdn.midjourney.com/435bc734-6093-48be-8671-a03dac8c0646/0_0.png (Minimal Maximal / Less is more, more or less)
https://cdn.midjourney.com/24bf6d75-335f-4e3e-a0ac-51f1b596650d/0_2.png (Texture Study / Tactile digital surfaces)
비디오:

https://cdn.midjourney.com/video/8c31b1e5-f7c1-488d-8eb2-3afff61b32a8/0.mp4 (Motion Study / Dynamic visual narratives)
https://cdn.midjourney.com/video/8c31b1e5-f7c1-488d-8eb2-3afff61b32a8/1.mp4 (Fluid Dynamics / Movement in design)
https://cdn.midjourney.com/video/8c31b1e5-f7c1-488d-8eb2-3afff61b32a8/2.mp4 (Time Lapse / Evolution of ideas)
https://cdn.midjourney.com/video/8c31b1e5-f7c1-488d-8eb2-3afff61b32a8/3.mp4 (Particle System / Chaos and order)
기술
4-1. 기본 구조 단일 HTML 파일 하나에 CSS(style 태그)와 JavaScript(script 태그) 모두 포함해줘. 외부 라이브러리나 프레임워크 절대 사용하지 말고, 순수 HTML + CSS + Vanilla JS로만 만들어줘. Google Fonts CDN만 외부 링크 허용.

4-2. CSS 관련 CSS 변수(Custom Properties)로 컬러, 그라데이션 등 모두 관리해줘. 반응형은 768px 한 구간으로 미디어쿼리 작성해줘. 768px 이하: 햄버거 메뉴 활성화, 갤러리·피처 그리드 1컬럼, 히어로 타이틀 축소, 마키 텍스트 축소.

4-3. JavaScript 관련 IntersectionObserver로 스크롤 reveal 애니메이션, mousemove 이벤트로 히어로 패럴랙스, scroll 이벤트로 네비게이션 hide/show 처리. 갤러리 데이터 배열로 DOM 동적 생성. 히어로 타이틀 순차 등장 애니메이션. 별도 번들러 없이 전역 스코프에서 동작.

추가 조건 HTML lang="ko"로 설정해줘. 콘텐츠 최대 너비는 1400px. 모든 transition에 cubic-bezier(0.4, 0, 0.2, 1) 이징 커브를 기본으로 적용해줘. 실제 서버 없이 로컬에서 HTML 파일 하나만 열어도 완전하게 동작해야 해.