스페이셜 이머시브 히어로

# Spatial Immersive Hero — web 디자인 팩

## 이 스타일의 정체성
스크롤이 곧 카메라다. 페이지는 풀스크린(100vh) 히어로 패널의 수직 스택이고, 스크롤하면 배경색이 한 패널에서 다음 패널로 천천히 보간되며 텍스트가 페이드+상승으로 들고난다. 각 패널 중앙에는 거대 헤드라인 한 줄과 미니멀 캡션만 있고, 그 위로 반투명 글래스 패널·부유 카드 같은 추상 입체 오브제가 패럴랙스로 떠 깊이를 만든다. 거의 검은 베이스에서 시작해 영화 시퀀스처럼 색이 흐른다.

## 색
- 배경: 패널마다 다른 딥 톤을 스크롤로 보간한다. 패널1 `#0a0a0f`(니어블랙) → 패널2 `#10131c`(딥 슬레이트) → 패널3 `#0d1714`(딥 파인) → 패널4 `#161018`(딥 플럼) → 푸터 `#070709`. 인접 패널 명도차는 작게(L* 차 8 이내) — 전환이 급변이 아니라 흐름이어야 한다.
- 텍스트: 헤드라인 `#f4f4f6`, 본문/캡션 `#a6a8b2`. 본문 대비 4.5:1 이상 유지(모든 딥 배경에서 검증할 것).
- 강조: 단 하나. 시그널 시안 `#5fd0d8` — CTA 보더·링크 밑줄·오브제 엣지 글로우에만. 전체 화면 면적의 4% 이하.
- 글래스 오브제 표면: `rgba(255,255,255,0.06)` 채움 + `rgba(255,255,255,0.14)` 1px 보더.

## 타이포그래피
- 폰트: 디스플레이·본문 모두 `Inter`(Google Fonts), 대체 `system-ui, sans-serif`. 단일 패밀리로 통일.
- 히어로 헤드라인: `clamp(2.8rem, 7vw, 6.5rem)`, weight 600, letter-spacing `-0.03em`, line-height 1.05. 한 패널당 최대 6단어.
- 캡션/태그라인: `clamp(1rem, 1.4vw, 1.25rem)`, weight 400, letter-spacing `0`, line-height 1.6, 색 `#a6a8b2`. 헤드라인 아래 24px.
- 오버라인(작은 라벨): 0.8125rem, weight 500, letter-spacing `0.16em`, 전부 대문자, 색 `#5fd0d8`.
- 본문 측정 폭(measure)은 52ch로 제한 — 히어로는 문단이 아니라 선언이다.

## 레이아웃 / 그리드
- 각 히어로 패널: `min-height: 100vh`, `display:flex`, 콘텐츠 수직·수평 중앙 정렬.
- 콘텐츠 최대 폭 720px(텍스트 블록). 입체 오브제는 이 폭을 넘어 패널 가장자리까지 자유 배치.
- 브레이크포인트: 1024px 이상 데스크탑(오브제 패럴랙스 풀), 640~1024px 태블릿(오브제 축소·패럴랙스 약화), 640px 미만 모바일(오브제 1개로 축소, 헤드라인 `clamp` 하한 적용).
- 패널 간 간격 0 — 패널이 곧 섹션이고 경계는 배경색 보간으로만 표현. 패딩은 좌우 `clamp(24px, 5vw, 80px)`.
- 헤더: 고정(`position:fixed`), 높이 64px, 배경 투명 → 스크롤 16px 후 `rgba(10,10,15,0.72)` + `backdrop-filter: blur(12px)`. 로고 텍스트 좌측, 메뉴 3개 우측, 우측 끝 CTA.

## 형태 / 질감
- 카드/오브제: radius 16px, 보더 1px `rgba(255,255,255,0.14)`, 채움 `rgba(255,255,255,0.06)`, `backdrop-filter: blur(20px)`. 그림자는 `0 24px 60px rgba(0,0,0,0.5)` 하나만.
- 입체 오브제는 추상 형태만 — 사각 글래스 패널, 둥근 카드, 가는 링. 일러스트나 캐릭터·blob 금지.
- CTA 버튼: 채움 없는 고스트 스타일. 보더 1px `#5fd0d8`, 텍스트 `#5fd0d8`, radius 999px(알약), 패딩 14px 28px. 호버 시 채움 `rgba(95,208,216,0.12)`.
- 이미지가 필요하면 어둡게 처리(`filter: brightness(0.7)`)하고 글래스 오브제 안에 끼워 넣는다.

## 모션 (웹)
- 스크롤 배경 보간: 패널 진입 진행도에 따라 `background-color`를 인접 두 톤 사이로 lerp. 60fps 목표, `requestAnimationFrame` 기반.
- 텍스트 등장: 패널이 뷰포트 60% 이상 들어오면 헤드라인 `opacity 0→1` + `translateY(32px→0)`, duration 700ms, easing `cubic-bezier(0.16,1,0.3,1)`. 캡션은 120ms 지연.
- 패럴랙스: 입체 오브제는 스크롤 속도의 0.2~0.5배로 역이동. 깊이가 다른 오브제는 배율을 다르게.
- 호버: CTA·링크 200ms ease-out. 오브제는 호버 시 `translateZ` 없이 미세 회전(`rotate(0.5deg)`)만.
- `prefers-reduced-motion: reduce`이면 — 패럴랙스·배경 보간·등장 모션 전부 끄고 각 패널 배경색을 정적 적용, 텍스트는 즉시 표시.

## 하지 말 것
- 보라/인디고 그라디언트 메시 배경 금지 — 배경은 단색 딥 톤의 스크롤 보간이다.
- 그라디언트 텍스트 금지. 헤드라인은 단색 `#f4f4f6`.
- 중앙 정렬 히어로를 "기본 SaaS 3카드 그리드" 섹션으로 잇지 말 것 — 모든 섹션이 풀스크린 패널이어야 한다.
- 시그널 시안을 강조 외에 넓은 면으로 칠하지 말 것. 4% 면적 상한 엄수.
- blob 도형·이모지·정체불명 일러스트 금지. 오브제는 기하학적 글래스 형태만.
- 균일한 soft drop-shadow를 모든 요소에 바르지 말 것 — 그림자는 부유 오브제에만.
- 모션을 끄면 페이지가 깨지는 구조 금지 — reduced-motion에서도 완결적으로 읽혀야 한다.

## 적용 예
- **히어로(패널1):** `#0a0a0f` 배경, 중앙 오버라인 "INTRODUCING", 그 아래 거대 헤드라인 "A browser that thinks with you", 캡션 한 줄, 고스트 CTA. 헤드라인 뒤 우상단·좌하단에 반투명 글래스 패널 2개가 패럴랙스로 부유.
- **카드(패널 내부):** 글래스 카드 — radius 16px, 1px 흰 반투명 보더, blur 20px 배경, 안에 어둡게 처리한 제품 스크린샷 placeholder. 호버 시 0.5도 회전.
- **푸터:** `#070709` 배경, 풀스크린 아님(높이 auto). 좌측 로고+한 줄 카피, 우측 3열 링크 그룹, 상단에 1px `rgba(255,255,255,0.1)` 분할선. 시그널 시안은 링크 호버 밑줄에만.