# design-type-04 — 인터랙션 인벤토리 (출처: yungjin.co.kr)

전부 실측 기반 (Playwright 스크롤 스텝 300px 단위 상태 추적 + hover 전/후 computed style 비교).
스크럽 타임라인의 스크롤 좌표는 1440×900 뷰포트 기준. 재현 시 progress 비율로 환산할 것.

우선순위: 이 사이트의 시그니처는 **① 필-확장 히어로 스크럽 ② 커튼 와이프 씬 스택 ③ 대형 워드 scale 인트로 + 원형 콜라주**.

---

## 1. future-area — 필(pill) 확장 스크럽 ★시그니처

- **위치**: KV 직후 첫 콘텐츠 섹션 / **트리거**: pin(900→5400, 4500px = 뷰포트 5배), scrub: 1
- **움직임** (pin 진행도 p 기준, 실측):
  | p | 스크롤(실측) | 상태 |
  |---|---|---|
  | 0~0.13 | 900–1500 | 중앙 카피(f-d2, 잉크색) fade-up: opacity 0→1, y +138px→0 |
  | 0.13~0.33 | 1500–2400 | 원형 이미지(135×135, radius 50%)가 화면 하단 밖(y+400)에서 카피 아래로 상승 |
  | 0.33~0.4 | 2400–2700 | **원 → 알약**: width 135→326 (height 135 유지, radius pill 유지) |
  | 0.4~0.67 | 2700–3600 | 알약 상태 유지 (호흡 구간 — hold가 리듬을 만든다) |
  | 0.67~0.8 | 3600–4500 | **알약 → 풀블리드**: 326×135 → 1440×900, radius→0. 동시에 카피 잉크색→화이트 |
  | 0.8~1.0 | 4500–5400 | 풀블리드 hold. 설명문+pill 버튼 노출. 이후 pin 해제되어 통째로 위로 밀림 |
- **타이밍**: scrub: 1 (스크롤 속도에 1초 관성 추종). 이미지 내부는 cover
- **재현 난이도**: 중 — sticky + width/height/borderRadius 트윈. `components/PillExpandHero.tsx`

## 2. esg-area 인트로 — 초대형 워드 scale + 원형 콜라주 통과 ★시그니처

- **위치**: 두 번째 pin 시퀀스 도입부 / **트리거**: pin(6300→15300, 9000px = 뷰포트 10배), scrub: 1
- **움직임** (실측):
  - p 0~0.1 (6300–7200): 중앙 "ESG" 워드(f-d1 200px Bold)가 **scale 2 → 1**로 수축 (체감 400px→200px). 서브 카피 1줄 고정
  - p 0.1~0.2 (7200–8100): **원형 이미지 5개(지름 90~600px)가 서로 다른 속도로 상승 통과** — 차등 속도가 만드는 깊이감:
    실측 y 이동량(동일 구간): eq1 1265px, eq2 1273px(시차 늦음), eq3 1273px, eq4/eq5 1273px(가장 늦게 출발).
    작은 원이 먼저·빠르게, 큰 원이 늦게·무겁게 지나간다
  - 타이틀은 콜라주 통과 중 고정 → 콜라주가 다 지나가면 함께 위로 밀림
- **재현 난이도**: 중 — 절대배치 원 5개에 서로 다른 y 트윈 스태거. `components/EsgIntroCollage.tsx`

## 3. secne — E/S/G 풀스크린 씬 커튼 와이프 ★시그니처 (이 사이트의 백미)

- **위치**: esg-area pin 후반 70% / **트리거**: 같은 pin의 scrub 타임라인
- **구조**: 씬 3개(eq1/eq2/eq3)가 **absolute로 완전 겹침**, z-index 3/2/1 (첫 씬이 최상단)
- **움직임** (실측):
  1. **스택 진입** (p 0.2~0.33, 8100–9300): 스택 전체가 y+1125→0 상승하며 `.img` 컨테이너가 **가운데서 가로로 확장** (width 365→1440, 중앙 고정) — 세로 진입과 가로 확장이 동시
  2. **씬1 정착** (p 0.33~0.48, 9300–10600): 대형 워드 "ENVIRONMENTAL"(180px 실측/1920환산 240px)이 중앙(y150)에서 **좌상단(60,60)으로 이동하며 18px 라벨로 수축** (실측: fontSize 180→18px 보간). 우측에 국문 카피(f-h3)+설명+pill 버튼 fade-in
  3. **씬 전환 = 커튼 와이프** (p ~0.68~0.77, 12400–13200): **위 씬(eq1)의 height를 900→0으로 스크럽** (inline style, overflow hidden, 위쪽 고정) → 아래 씬(SOCIAL)이 **하단부터 위로 드러남**. transform이 아니라 height 컬랩스가 포인트 — 아래 씬은 정지한 채 "커튼이 걷힌다"
  4. **Ken Burns 정착**: 드러나는 씬의 이미지가 **scale 1.2 → 1.0**으로 정착 (실측: eq2 12400–13200, eq3 13600–14400 — 와이프와 동기)
  5. 씬2→씬3 (GOVERNANCE) 동일 패턴 반복. 씬 2/3의 대형 워드는 재확대 없이 코너 라벨 상태로 등장
- **씬 무드**: E=녹색 잎(다크) / S=흑백 건축(다크) / G=화분 정물(라이트 그레이) — 명도 교차
- **재현 난이도**: 상 — 하지만 메커니즘은 단순(height 스크럽 + scale). `components/CurtainSceneStack.tsx`

## 4. KV 히어로 (Swiper)

- 풀스크린 영상 슬라이드(현재 1장), fraction 페이지네이션("1/1") + **오토플레이 프로그레스 바** + play/pause 버튼
- 로드 인트로: 텍스트 블록 스태거 fade-up (0.4s 시점 opacity ~0.3 → 1.0s 완료), 헤더도 함께 페이드
- 마우스 패럴랙스 **없음** (mousemove 전후 transform 무변화 실측)
- 재현: 영상 1장이면 Swiper 불필요 — 로드 스태거만 FadeUp으로

## 5. 헤더

- 최상단: 투명 배경 + `.wht` 상태 (영상 위 화이트 로고/메뉴)
- 스크롤 다운: **translateY(-150px)로 숨김** — 우리 취향 프로파일의 hide/show 헤더와 동일 패턴. 복귀 시 화이트 배경+잉크 텍스트
- **GNB hover = 전체 펼침 메가메뉴**: header에 `.hover` 클래스 → 배경 화이트로 확장되며 **모든 1뎁스 아래 2뎁스가 동시에** 세로로 펼쳐짐 (개별 드롭다운이 아님) → `hover/gnb_hover.png`

## 6. view-more 버튼 hover

- 정지: 투명 배경 + 1px 화이트(또는 잉크) 보더 pill + 텍스트/화살표
- **hover: 배경이 브랜드 블루 #0099D9로 채워짐** (실측 rgb 0,153,217), 텍스트 화이트 유지, ~0.3s ease
- 브랜드 유채색이 hover에서만 면적을 갖는 절제 — 이 사이트 컬러 운용의 핵심

## 7. LATEST NEWS — hover 이미지 리빌

- 리스트 3건(타이틀+날짜, 얇은 구분선). 각 li에 숨은 썸네일(`.img` opacity 0, 359×225)
- **hover: 리스트 좌측의 고정 슬롯에 해당 기사 썸네일이 opacity 0→1 + `.on` 클래스로 리빌** (커서 추종 아님, 고정 위치) → `hover/news_hover.png`
- 재현 난이도: 하 — `components/HoverRevealList.tsx`

## 8. 뉴스/푸터 등장

- `.scroll-motion` 클래스: 뷰포트 진입 시 fade-up 1회 (우리 FadeUp과 동일 계열)

## 배경 매체

- **video**: KV 풀스크린 mp4(autoplay/loop/muted, cover) 1개 — 시안에서는 업종에 맞는 무료 스톡 영상 + 이미지 폴백
- canvas/WebGL: 없음

## CSS 모션 토큰 (stylesheet 실측)

- transition-duration 분포: 0.2 / 0.25 / 0.3 / 0.4 / 0.5 / 0.6 / 0.7s — UI 전환은 0.3~0.4s이 주력
- timing-function: ease, ease-out (커스텀 베지어 없음 — 관성은 전부 scrub: 1이 담당)
- 스크럽 전 구간 **scrub: 1 통일** (즉답이 아니라 1초 추종 — 무게감의 근원)

## 재현 시 주의 (우리 규칙과의 접점)

- pin 재현은 GSAP pin 대신 **CSS sticky + 높이 확보(뷰포트 N배) + scrub 타임라인** (취향 프로파일 확정 규칙)
- 씬 와이프는 1157에서 확정한 좌표계 규칙 적용: 크기(%)와 위치는 **다른 기준 단위로 분리** — height는 vh, 원형 콜라주 y는 px/vh
- 대형 워드 200px는 tailwind fontSize 토큰(display 계열)으로 등록해 사용, 임의 px 금지
- 스크롤 예산이 큰 패턴(뷰포트 5~10배)이므로 시안에서는 구간별 hold를 줄여 3~4배로 압축 권장