0026

HTML, CSS, JavaScript만 사용해서 단일 HTML 파일로 실험적 타이포그래피 중심의 크리에이티브 스튜디오 포트폴리오 웹사이트를 만들어줘. 스튜디오 이름은 "TYPΞ"이고, 전체적으로 검정 배경에 흰색 텍스트, 핑크(#ff0066) 포인트를 활용한 다크 미니멀 디자인으로 만들어줘. 타이포그래피 자체가 주인공인 사이트야.

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

(1) Hero (전체화면 타이포그래피 인트로) (2) Distorted Text (글리치 텍스트 효과 구간) (3) Gallery Grid 1 (이미지/영상 갤러리 9개) (4) Rotating Text (회전하는 대형 텍스트 구간) (5) Text Reveal (스크롤 시 순차 등장하는 문장) (6) Morphing Text (자동으로 단어가 바뀌는 구간) (7) Gallery Grid 2 (이미지/영상 갤러리 6개) (8) Contact (연락처)

그리고 맨 아래에 Footer 넣어줘. 페이지 진입 시 로딩 화면도 있어야 해. 마우스 커서는 crosshair 스타일로 바꿔줘.

2. 기능
2-1. 로딩 화면
페이지 처음 열리면 검정 배경에 "LOADING" 텍스트가 화면 중앙에 크게 보여. 텍스트에 RGB 색상 분리(글리치) text-shadow 애니메이션이 계속 반복돼. 약 1.5초 후에 로딩 화면이 페이드아웃 되면서 사라지게 해줘.

2-2. 네비게이션
상단 고정 네비게이션 바를 만들어줘. 왼쪽에 "TYPΞ" 로고(산세리프, 대문자, 볼드), 오른쪽에 메뉴 링크들(HOME, WORK, ABOUT, CONTACT) 배치해줘. mix-blend-mode: difference를 적용해서 배경과 자연스럽게 섞이게 해줘. 각 메뉴 링크에 호버 시 왼쪽에서 오른쪽으로 핑크색(#ff0066)이 채워지는 텍스트 오버레이 효과를 넣어줘. 768px 이하 모바일에서는 메뉴 링크 숨겨줘. 모든 앵커 링크에 부드러운 스크롤 적용해줘.

2-3. Hero 타이포그래피 애니메이션
"TYPOGRAPHY" 각 글자를 개별 span으로 감싸서, 각 글자마다 시간차를 두고 위아래로 부드럽게 떠다니는(float) 애니메이션을 적용해줘. 6초 주기, 글자마다 0.1초씩 딜레이. 미세한 회전도 포함해줘.

2-4. 글리치/디스토션 텍스트
"EXPERIMENTAL" 텍스트를 5도 기울여서(skewY) 배치하고, ::before와 ::after 가상요소로 같은 텍스트를 복제해 핑크색과 시안색으로 각각 미세하게 어긋나며 진동하는 글리치 효과를 만들어줘. data-text 속성으로 텍스트를 가상요소에 전달해줘.

2-5. 갤러리 호버 효과
각 갤러리 아이템은 정사각형(aspect-ratio: 1) 비율이고, 호버 시 이미지가 1.1배 확대되면서 어두운 오버레이(80% 불투명)가 나타나고, 그 위에 세리프 이탤릭 볼드체 키워드가 아래에서 위로 슬라이드인 되게 해줘. 전환은 부드러운 cubic-bezier 이징으로.

2-6. 회전 텍스트
화면 중앙을 기준으로 3개의 대형 텍스트("CREATIVE", "STUDIO", "DESIGN")가 각각 다른 크기, 속도, 방향으로 360도 무한 회전하게 해줘. 바깥 것이 가장 크고 빠르게, 안쪽으로 갈수록 작고 느리게, 투명도도 점점 낮아지게 해줘. 하나는 역방향 회전.

2-7. 스크롤 텍스트 리빌
"We are not just designers. We are storytellers, crafting narratives through type." 문장을 단어 단위로 분리해서, 각 단어가 아래에서 위로 올라오면서 나타나는 reveal 애니메이션을 적용해줘. IntersectionObserver로 화면에 보일 때만 재생되게 하고, 각 단어마다 0.05초씩 순차 딜레이를 줘.

2-8. 모핑 텍스트
'INNOVATE', 'CREATE', 'DESIGN', 'INSPIRE', 'TRANSFORM' 5개 단어가 3초 간격으로 페이드아웃 → 텍스트 교체 → 페이드인 되면서 자동으로 순환해줘.

2-9. 패럴랙스 효과
Hero 섹션의 배경 이미지가 스크롤 시 절반 속도로 따라오는 패럴랙스 효과를 넣어줘. 이미지에 대비 높이기 + 밝기 낮추기 필터를 적용하고 불투명도 30%로 해줘.

3. 디자인
3-1. 컬러 팔레트
메인 배경: #0a0a0a (거의 검정) 텍스트: #ffffff (순백) 포인트 컬러: #ff0066 (핫핑크) 보조 포인트: cyan (시안, 글리치 효과용)

3-2. 서체
Google Fonts에서 아래 3개 불러와줘.

Playfair Display (400, 700, 900 + italic) → 제목, 갤러리 오버레이 텍스트, 장식 텍스트용
Inter (100~900) → 본문, 서브타이틀, UI용
Space Grotesk (300~700) → 로고, 네비게이션, 연락처, 푸터용
기본 body 서체는 'Inter', sans-serif로 해줘.

3-3. 전체 톤앤무드
어둡고 실험적인 타이포그래피 스튜디오 / 디지털 아트 갤러리 느낌. 텍스트 자체가 시각적 오브제 역할을 해야 해. letter-spacing을 극단적으로 좁히거나(-0.05em) 넓히는(0.3em) 대비 활용해줘. 스크롤바는 2px 얇은 흰색으로 커스터마이징해줘. 전체 커서는 crosshair로 바꿔줘.

3-4. 이미지 처리 스타일
갤러리 이미지는 별도 라운딩 없이 직각으로 처리하고, 그리드 간격은 2px로 아주 좁게 해줘. 호버 시 이미지 1.1배 확대 + 어두운 오버레이 + 중앙 텍스트 등장.

3-5. 각 섹션 디자인 상세
(1) Hero 전체 화면(100vh), 검정 배경 위에 반투명(30%) 배경 이미지를 깔아줘. 화면 중앙에 "TYPOGRAPHY" 대형 타이틀(세리프, 900 웨이트, line-height 0.9, letter-spacing -0.05em, 반응형 사이즈 clamp(4rem, 15vw, 12rem))을 배치하고, 그 아래에 "Where Letters Dance" 서브타이틀(산세리프, 300 웨이트, letter-spacing 0.3em, 대문자, 투명도 0.7)을 넣어줘.

사용 이미지:

배경: https://cdn.midjourney.com/e2961bd3-5f3e-4df5-97b0-372cde33881e/0_3.png
(2) Distorted Text "EXPERIMENTAL" 텍스트를 세리프 이탤릭 900 웨이트로 화면 중앙에 배치하고, skewY(-5deg) 기울임 + RGB 글리치 효과 적용. 상하 여백 100px.

(3) Gallery Grid 1 auto-fit, minmax(300px, 1fr) 반응형 그리드로 9개 아이템 배치. 간격 2px, 최대 너비 1400px. 각 아이템은 정사각형 비율. 8개는 이미지, 1개는 자동재생 무음 루프 비디오. 호버 시 오버레이 + 키워드 텍스트 등장.

사용 미디어:

https://cdn.midjourney.com/e2961bd3-5f3e-4df5-97b0-372cde33881e/0_0.png → "VISION"
https://cdn.midjourney.com/e2961bd3-5f3e-4df5-97b0-372cde33881e/0_1.png → "DREAM"
https://cdn.midjourney.com/e2961bd3-5f3e-4df5-97b0-372cde33881e/0_2.png → "CREATE"
https://cdn.midjourney.com/921d92cb-996f-4d3a-aa06-257595ab9574/0_0.png → "INSPIRE"
https://cdn.midjourney.com/921d92cb-996f-4d3a-aa06-257595ab9574/0_1.png → "EVOLVE"
https://cdn.midjourney.com/921d92cb-996f-4d3a-aa06-257595ab9574/0_2.png → "TRANSFORM"
https://cdn.midjourney.com/video/8c31b1e5-f7c1-488d-8eb2-3afff61b32a8/0.mp4 (비디오) → "MOTION"
https://cdn.midjourney.com/7e67b738-f518-4963-ab7f-0f6aee68631f/0_0.png → "EXPLORE"
https://cdn.midjourney.com/a727665f-52bb-4f12-8ab5-a14de7d37fa0/0_1.png → "DISCOVER"
(4) Rotating Text 높이 100vh, 화면 중앙 기준으로 "CREATIVE"(가장 크고, 20초 주기), "STUDIO"(중간, 30초 주기, 역방향), "DESIGN"(가장 작고, 25초 주기, 투명도 낮음) 3개 텍스트가 겹쳐서 회전. 대문자 산세리프 900 웨이트.

(5) Text Reveal 상하 패딩 200px, 최대 너비 1200px. 세리프 폰트, clamp(2rem, 5vw, 4rem) 사이즈로 3줄의 문장을 단어 단위 순차 리빌.

(6) Morphing Text 높이 100vh, 화면 정중앙에 세리프 900 웨이트 대형 텍스트. 배경에 radial-gradient(원형, 중앙 투명 → 바깥 검정)로 비네팅 효과. 5개 단어 자동 순환.

(7) Gallery Grid 2 Gallery Grid 1과 동일한 그리드 구조로 6개 아이템 배치. 4개 이미지 + 2개 비디오.

사용 미디어:

https://cdn.midjourney.com/6f1e16bb-1c36-4d96-a63a-07d287befbb5/0_0.png → "MINIMAL"
https://cdn.midjourney.com/video/8c31b1e5-f7c1-488d-8eb2-3afff61b32a8/1.mp4 (비디오) → "FLOW"
https://cdn.midjourney.com/435bc734-6093-48be-8671-a03dac8c0646/0_2.png → "BOLD"
https://cdn.midjourney.com/24bf6d75-335f-4e3e-a0ac-51f1b596650d/0_0.png → "FUTURE"
https://cdn.midjourney.com/b20cfa8a-047e-4cc9-9cb1-fd00cf5b6868/0_1.png → "ABSTRACT"
https://cdn.midjourney.com/video/8c31b1e5-f7c1-488d-8eb2-3afff61b32a8/2.mp4 (비디오) → "DYNAMIC"
(8) Contact 상하 패딩 150px, 중앙 정렬. "LET'S TALK" 대형 세리프 제목 아래에 밑줄이 왼쪽에서 오른쪽으로 펼쳐지는 애니메이션. 그 아래 이메일(hello@typestudio.com)과 전화번호(+1 (234) 567-890) 링크. 호버 시 핑크색으로 변경.

Footer 상단에 아주 옅은 흰색(10% 투명도) 보더. 중앙 정렬, "© 2025 TYPE STUDIO. ALL RIGHTS RESERVED." 텍스트. 산세리프, letter-spacing 넓게, 투명도 0.6.

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

4-2. CSS 관련
CSS 변수(Custom Properties)로 서체, 컬러 등 관리해줘. 반응형은 768px 한 구간으로 미디어쿼리 작성해줘. 768px 이하: 네비 메뉴 숨김, 갤러리 1컬럼, 회전 텍스트 크기 축소. CSS 애니메이션(@keyframes)을 적극 활용해줘.

4-3. JavaScript 관련
IntersectionObserver로 텍스트 리빌 애니메이션의 재생 제어, setInterval로 모핑 텍스트 순환, scroll 이벤트로 패럴랙스 처리, 로딩 화면 타이머 처리. 부드러운 앵커 스크롤도 JS로 구현해줘.

5. 추가 조건
HTML lang="ko"로 설정해줘. 전체 overflow-x: hidden 적용. 비디오는 autoplay, muted, loop 속성 필수. 갤러리 그리드 최대 너비 1400px. 코드에 영역별로 주석 넣어줘. 실제 서버 없이 로컬에서 HTML 파일 하나만 열어도 완전하게 동작해야 해.