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

관찰 방법: ScrollTrigger/Swiper 인스턴스 실측 + video/canvas 전수 조사 + mousemove 프로브 + 스크롤 상태 캡처.

## 배경 매체

- **video**: Hero 풀스크린 mp4 4개 (1440×900, loop+muted, 활성 슬라이드만 재생) + 소셜 섹션 소형 1개.
  데스크탑/모바일 소스 분리(`MAIN_MOVIE` / `MAIN_MOVIE_MO`)
- **canvas**: 없음
- → 시안 반영: 업종 맥락에 맞는 무료 스톡 영상으로 동등 구현 (design-draft 스킬 배경 매체 규칙)

## 1. 스크롤 영상 히어로 — fixed + clip 리빌 (시그니처 A, 2026-07-12 DOM 실측으로 정정)

- 위치: 페이지 최상단 0~3600px / 트리거: 스크롤 위치
- **구현 방식 (DOM 실측 — 원본 클래스 `clip-path-rect` + `fixed-box`)**:
  - 슬라이드마다 문서 흐름상 100vh 래퍼: `clip-path: inset(0px)` + overflow 클리핑
  - 래퍼 내부에 `position: fixed; inset: 0; height: 100vh` 콘텐츠(영상+타이포+캡션) — **뷰포트에 완전 고정**
  - 스크롤하면 클리핑 창(래퍼)이 지나가며 fixed 콘텐츠가 **아래에서 위로 wipe 리빌** — 콘텐츠는 1px도 안 움직임 ("딱 고정" 질감)
  - **텍스트도 fixed 콘텐츠에 포함되어 슬라이드 경계에서 잘리며 리빌됨** (hero_wipe_ref_1~3.png 증거)
- 페이드/크로스디졸브 아님. 이전 재현(ScrollVideoHero 페이드 방식)은 오학습 → `components/WipeVideoHero.tsx`로 교체
- 활성 영상만 play (래퍼 가시 영역 기준)
- 참조: `hero_wipe_ref_1~3.png`, `probe_hero_wipe_y*.png`

## 2. 커스텀 커서 팔로워 (시그니처 B — 마우스 상호작용)

- 실측: `cursor-global` 요소가 mousemove에 matrix(0.8704, 0, 0, 0.8704, x, y)로 추적 — **커서 위치를 따라오되 scale ~0.87 상태 유지**, lerp 지연 이동
- pointer-events: none 오버레이. hover 대상 위에서 확대되는 패턴으로 추정 (관찰 추정 — 헤드리스에서 비주얼 미확인, 통상 원형 링)
- 재현 난이도: 하 → `components/CursorFollower.tsx`

## 3. Our Business — hover 아코디언 확장 (시그니처 C, 2026-07-12 hover 실측으로 정정)

- **스크롤 슬라이딩이 아니라 마우스오버 아코디언이다** (business_hover_ref_idle/expanded.png):
  - 5열 세로 카드. **확장 카드 720px / 나머지 489px (실측)**, 전환 `0.5s cubic-bezier(0.33,1,0.68,1)` (실측)
  - hover된 카드가 넓어지며 상세 리빌: 소제목("미디어 콘텐츠 리더") + 계열사 태그 버튼들 + 원형 + 버튼
  - 비확장 카드는 어둡게 딤, 라벨만 유지
- Swiper는 컨테이너로만 쓰임(slidesPerView auto). pin+scrub(3600~4500)은 섹션 자체 등장용
- 이전 재현(PinnedCardRail 스크롤 가로이동)은 오학습 → `components/HoverAccordionCards.tsx`로 교체
- 재현 난이도: 하

## 3.5. ESG 원형 마스크 시퀀스 (2026-07-12 사용자 캡처로 추가 — circle_mask_ref_1~4.png)

- 히어로와 같은 **fixed + clip 리빌 계열**: 풀블리드 fixed 이미지(지구) 위로
  1. 풀블리드 → 2. **clip-path circle 반경이 스크럽으로 축소**되며 흰 배경 드러남 → 3. 원이 더 작아지며 좌측 이동
  → 4. "Sustainability Management" 섹션으로 착지: 좌측 잉크 타이포+골드 강조 설명, 중앙 **원형 이미지 카드 슬라이더**(카드 안 흰 타이포, 4/5 페이지네이션 + 좌우 화살표)
- 재현: sticky + scrub으로 `clip-path: circle(r% at x y)` 보간 → `components/CircleMaskReveal.tsx`

## 4. 스케일 리빌 — "Social Contribution" 섹션 (정밀 스펙, 2026-07-12 사용자 제공 원본 캡처 3장 기준)

- 실측: ScrollTrigger pin+scrub:1, start 6084 / end 6984 (900px). 참조: `scale_reveal_ref_1_start/2_mid/3_full.png`
- **시작 상태**: 화이트 배경 + 골드 대각선 라인 장식. 좌측에 초대형 잉크 타이포 2줄("Social Contribution").
  **우측 상단에 작은 영상 프레임**(가장자리에서 떨어진 위치, 가로형). 중앙 하단에 설명 2줄 + 필 버튼("태광 사회공헌 →")
- **진행**: 프레임이 **우상단 앵커 기준으로 비대칭 확장** (가운데 대칭 확장 아님).
  동시에 좌측 타이포는 **잉크 → 연회색으로 opacity 페이드** (물리적으로 가려지는 게 아니라 흐려짐).
  설명 텍스트·버튼은 **이미지 위 레이어에 유지**되어 흰색 톤으로 남음
- **종단**: 영상이 풀블리드, 타이포는 완전히 사라짐, 버튼만 이미지 위에 잔존
- 재현 난이도: 중 → `components/ScaleRevealSection.tsx` (하나금속 1142에서 검증)

## 4.5. 헤더 hide/show (2026-07-12 사용자 확인으로 추가 — 초기 학습 누락분)

- 스크롤 **다운 시 헤더가 위로 슬라이드되어 숨고**, 스크롤 **업 시 다시 내려와 표시**
- 전환은 글로벌 이징 500ms 계열
- 재현: 스크롤 방향 감지(임계 ~8px) + translateY(-100%) 토글. 상단 200px 이내에서는 항상 표시

## 4.7. 클립 리빌 등장 모션 (범용 — 하나금속 1142 회사소개에서 검증)

- 이미지 프레임이 진입 시 **아래에서 위로 clip-path inset 리빌**(1회, 0.9s 글로벌 이징) — fixed+clip 히어로의 단일 요소 버전
- 내부 텍스트는 0.35s 딜레이 후 fade-up
- **구현 함정**: clip으로 완전히 가려진 요소 자신을 IntersectionObserver(whileInView)로 관찰하면
  가시 영역 0으로 판정되어 영원히 발동하지 않는다 → 관찰은 부모 섹션, 클립은 자식 프레임으로 분리

## 5. 버튼 마이크로 인터랙션 세트 (실측 클래스 체계)

- `zoomin-circle`: hover 시 원형 배경이 중심에서 확장
- `label-slideup`: hover 시 라벨 텍스트가 위로 밀리며 복제 텍스트로 교체
- `icon-moveup/movedown`: hover 시 화살표 아이콘 이동
- 전부 **cubic-bezier(0.33,1,0.68,1) 500ms** — 단일 이징 통일이 핵심
- 재현 난이도: 하 (Tailwind + group-hover로 구현)

## 6. 기타

- 커스텀 스크롤바(우측, .c-scrollbar-y) + Lenis 스무스 스크롤
- sticky 사이드 네비(#sticky-side-nav) — 섹션 위치 표시
- yoyo/float keyframes — 스크롤 유도 화살표 등 부유 모션
- AOS 등장 모션 병용

## 시안 적용 우선순위

1. ScrollVideoHero (영상 배경 + 스크롤 전환) — 배경 매체 규칙 적용 대상
2. CursorFollower (마우스 상호작용)
3. 글로벌 이징 통일 (cubic-bezier(0.33,1,0.68,1) 500ms를 tailwind transition 기본값으로)
4. PinnedCardRail / 버튼 마이크로 인터랙션