0029

HTML, CSS, JavaScript만 사용해서 단일 HTML 파일로 실험적 타이포그래피 포트폴리오 웹사이트를 만들어줘. 스튜디오 이름은 "TYPECRAFT"이고, 전체적으로 순수 블랙 다크 테마에 글리치/네온 효과를 활용한 볼드 실험적 디자인으로 만들어줘. 언어는 영어 전용이야.

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

(1) Hero (전체화면 타이포그래피 인트로) (2) Scrolling Text Gallery (무한 흐름 텍스트 띠 3줄) (3) Image Grid (이미지 갤러리 + 타이포그래피 오버레이) (4) Typography Animation (회전 텍스트 섹션) (5) Video (비디오 배경 + 텍스트 오버레이) (6) Contact (연락처)

페이지 진입 시 로딩 화면도 있어야 하고, 화면 전체에 계속 내리는 글자 비(Letter Rain) 효과도 포함해줘.

기능
2-1. 로딩 화면 페이지 처음 열리면 순수 검정 배경에 "LOADING" 텍스트가 중앙에 크게 표시돼. 이 텍스트에 글리치 효과를 적용해줘 — 마젠타(#ff00ff)와 시안(#00ffff) 두 색상의 text-shadow가 서로 반대 방향으로 번갈아 흔들리는 애니메이션이야. 약 1.5초 후에 로딩 화면이 opacity + visibility 트랜지션으로 페이드아웃 되면서 사라지게 해줘. 로딩이 끝난 후에 히어로 텍스트 애니메이션과 글자 비 효과가 시작돼.

2-2. 글자 비 (Letter Rain) 화면 전체를 덮는 고정(fixed) 레이어에 알파벳, 숫자, 특수문자(@#$%&* 등)가 랜덤 위치에서 위에서 아래로 떨어지는 효과를 만들어줘. 100ms 간격으로 새 글자를 생성하고, 각 글자는 랜덤한 가로 위치, 랜덤한 낙하 속도(2~5초), 랜던한 크기(1~3rem)를 갖게 해줘. 글자 색상은 흰색 10% 투명도에 살짝 흰색 글로우(text-shadow)를 줘서 은은하게 보이게 해줘. pointer-events: none으로 클릭 방해 안 되게 하고, 각 글자는 떨어지면서 360도 회전하고, 5초 후 DOM에서 제거해줘.

2-3. 네비게이션 상단 고정(fixed) 네비게이션 바를 만들어줘. 왼쪽에 "TYPECRAFT" 로고, 오른쪽에 메뉴 링크(Home, Gallery, About, Contact). mix-blend-mode: difference를 네비게이션 전체에 적용해서 배경과 자동 대비되게 해줘. 768px 이하에서는 메뉴 링크를 숨겨줘. 모든 앵커 링크에 부드러운 스크롤(scroll-behavior: smooth) 적용해줘.

2-4. 마우스 인터랙션 히어로 섹션의 배경 장식 텍스트("CREATIVE")가 마우스 위치에 따라 살짝 이동하는 패럴랙스 효과를 넣어줘. 마우스가 화면 중앙 기준으로 얼마나 벗어났는지 계산해서 최대 ±20px만큼 이동시켜줘.

디자인
3-1. 컬러 팔레트 메인 배경: #0a0a0a (거의 검정) 순수 검정: #000000 약간 밝은 검정: #1a1a1a 텍스트: #ffffff 글리치 마젠타: #ff00ff 글리치 시안: #00ffff 글자 비 색상: rgba(255, 255, 255, 0.1)에 흰색 글로우

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

3-3. 전체 톤앤무드 어둡고 실험적인 타이포그래피 스튜디오 느낌. 텍스트 자체가 주인공이야. 글자가 움직이고, 떨어지고, 흐르고, 왜곡되고, 회전하는 등 타이포그래피를 시각적 오브제처럼 다루는 느낌이야. 전체적으로 대비가 강하고, 여백보다는 텍스트의 크기와 움직임으로 임팩트를 줘. ::selection 색상은 흰색 배경 + 검정 글씨로 해줘.

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

(1) Hero 전체 화면(100vh), 검정 배경에 중앙으로 방사형 그라데이션(#1a1a1a → #000). 배경 장식으로 "CREATIVE"라는 거대한 텍스트(30vw, Playfair Display, 900, italic)가 5% 투명도로 깔려 있고, skewX와 scaleY가 번갈아 변하는 10초 주기 왜곡 애니메이션이 적용돼. 중앙에 "TYPECRAFT" 타이틀을 한 글자씩 span으로 감싸서, 각 글자가 시차를 두고 위아래로 둥실거리는(float) 애니메이션을 적용해줘. 클램프로 반응형 폰트 사이즈(clamp 5rem~25rem). 아래에 "Where Typography Meets Art" 서브타이틀(letter-spacing 넓게, font-weight 200, 1초 딜레이로 페이드인).

(2) Scrolling Text Gallery 검정 배경, 3줄의 거대한 텍스트 띠(15vw 크기). 각 줄은 키워드들이 " • " 구분자로 이어져 있고 동일 텍스트를 2번 반복해서 끊김 없는 무한 스크롤을 만들어줘. 홀수 줄은 왼쪽으로, 짝수 줄은 오른쪽으로 흐르게 해줘(20초 주기). 첫째 줄: DESIGN • TYPOGRAPHY • CREATIVE • INNOVATION 둘째 줄: EXPERIMENTAL • MODERN • BOLD • UNIQUE 셋째 줄: ARTISTIC • VISUAL • DYNAMIC • POWERFUL

(3) Image Grid 가변 그리드(auto-fit, minmax 400px, 1fr), 간격 2px, 검정 배경. 각 아이템은 높이 60vh. 이미지는 object-fit: cover로 꽉 채우고, 호버 시 1.1배 확대(0.6초 cubic-bezier 트랜지션). 호버하면 70% 투명도 검정 오버레이가 페이드인 되면서, 그 위에 타이틀(Bebas Neue, 3rem)과 서브타이틀(font-weight 200, letter-spacing 넓게, 대문자)이 스케일 0.8→1로 나타나줘. 총 12개 이미지 아이템을 JavaScript로 동적 생성해줘.

이미지 데이터는 아래와 같아:

https://cdn.midjourney.com/e2961bd3-5f3e-4df5-97b0-372cde33881e/0_3.png / ABSTRACT / Digital Art
https://cdn.midjourney.com/e2961bd3-5f3e-4df5-97b0-372cde33881e/0_2.png / MINIMAL / Clean Design
https://cdn.midjourney.com/e2961bd3-5f3e-4df5-97b0-372cde33881e/0_1.png / BOLD / Typography
https://cdn.midjourney.com/e2961bd3-5f3e-4df5-97b0-372cde33881e/0_0.png / CREATIVE / Exploration
https://cdn.midjourney.com/921d92cb-996f-4d3a-aa06-257595ab9574/0_1.png / DYNAMIC / Motion
https://cdn.midjourney.com/921d92cb-996f-4d3a-aa06-257595ab9574/0_0.png / FLUID / Organic
https://cdn.midjourney.com/921d92cb-996f-4d3a-aa06-257595ab9574/0_2.png / GEOMETRIC / Structure
https://cdn.midjourney.com/921d92cb-996f-4d3a-aa06-257595ab9574/0_3.png / VIBRANT / Color
https://cdn.midjourney.com/7e67b738-f518-4963-ab7f-0f6aee68631f/0_0.png / ETHEREAL / Dreams
https://cdn.midjourney.com/7e67b738-f518-4963-ab7f-0f6aee68631f/0_1.png / SURREAL / Fantasy
https://cdn.midjourney.com/7e67b738-f518-4963-ab7f-0f6aee68631f/0_2.png / COSMIC / Universe
https://cdn.midjourney.com/7e67b738-f518-4963-ab7f-0f6aee68631f/0_3.png / MYSTIC / Unknown
(4) Typography Animation 배경 #0a0a0a, 전체 화면(100vh), 중앙 정렬. 4개의 문구("We Create", "We Design", "We Inspire", "We Innovate")가 같은 위치에서 순차적으로 나타났다 사라지는 회전 워드 애니메이션을 구현해줘. 각 문구는 absolute 포지셔닝, Playfair Display 900, 클램프(3rem~8rem). 12초 주기로 4등분해서 3초씩 각 문구가 아래에서 올라오며 페이드인 → 잠시 머물기 → 위로 올라가며 페이드아웃 되는 rotateX 3D 느낌의 전환 애니메이션이야.

(5) Video 전체 화면(100vh), 배경에 비디오(autoplay, muted, loop, playsinline)가 object-fit: cover로 깔리고, 그 위에 50% 투명도 검정 오버레이, 그 위에 "MOTION" 텍스트(Bebas Neue, clamp 4rem~12rem, letter-spacing 넓게)가 mix-blend-mode: overlay로 표시돼. 텍스트에 2초 주기로 opacity와 scale이 미세하게 맥동(pulse)하는 애니메이션 적용해줘. 비디오 URL: https://cdn.midjourney.com/video/8c31b1e5-f7c1-488d-8eb2-3afff61b32a8/0.mp4

(6) Contact 검정 배경, 전체 화면(100vh), 중앙 정렬. "LET'S TALK" 타이틀(Bebas Neue, clamp 3rem~8rem)에 아웃라인 더블 효과를 넣어줘 — ::before 가상요소로 동일 텍스트를 -webkit-text-stroke 2px 흰색 + 투명 fill로 복제하고, 이것이 원본 대비 5px, -5px만큼 살짝 어긋나며 4초 주기로 흔들리는 애니메이션을 적용해. data-text 속성을 활용해줘. 아래에 이메일 주소 "hello@typecraft.studio" (font-weight 200, letter-spacing).

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

4-2. CSS 관련 CSS 애니메이션(@keyframes)을 적극 활용해줘 — 글리치, 낙하, 좌우 스크롤, 글자 부유, 워드 회전, 맥동, 아웃라인 흔들림, 왜곡 등. CSS 변수(custom property) --i를 활용해서 각 글자/문구에 animation-delay를 calc로 시차 적용해줘. 반응형은 768px 한 구간으로 미디어쿼리 작성해줘 — 768px 이하에서 히어로 텍스트 축소, 네비 메뉴 숨김, 스크롤 텍스트 크기 축소, 그리드 텍스트/회전 텍스트 축소.

4-3. JavaScript 관련 로딩 화면 타이머(setTimeout), 히어로 텍스트 글자별 span 래핑(동적 생성), 글자 비 setInterval + setTimeout(생성/제거), 이미지 그리드 동적 DOM 생성(배열 데이터 기반 forEach), 마우스 위치 기반 패럴랙스(mousemove 이벤트). 별도 번들러 없이 전역 스코프에서 동작.

추가 조건 HTML lang="ko"로 설정해줘. 모든 콘텐츠 텍스트는 영어야. overflow-x: hidden을 body에 적용해서 가로 스크롤 방지해줘. 코드에 영역별로 주석 넣어줘. 실제 서버 없이 로컬에서 HTML 파일 하나만 열어도 완전하게 동작해야 해.