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

관찰 방법: DOM 실측(fixed/clip 스캔, transform 추적, hover 프로브) + 스크롤 상태 캡처 + Swiper 인스턴스 조회.
GSAP/ScrollTrigger 미사용 사이트 — 재현은 검증된 GSAP 패턴으로 동일 시각 구현.

## 배경 매체

- **video**: fixed 히어로 KV(1440×900 loop/muted) + 비전 배경 영상 2개(motion2/3). 데스크탑/모바일 소스 분리
- **canvas 2d**: 비전 미디어 프레임(`__video`)이 canvas 렌더 — 재현은 video/img로 동일 시각 가능
- → 시안 반영: 업종 스톡 영상(히어로) + 비전형 섹션 미디어

## 1. fixed 패럴랙스 영상 히어로 (시그니처 A)

- 실측: `.kv-slider`가 **position: fixed** + 스크롤의 **0.5배속 translateY** (scroll 450 → -225px)
- 콘텐츠(다크 인트로)가 그 위로 스크롤되어 덮는다 — 태광의 clip 리빌과 다른 "패럴랙스 덮기"
- Swiper 인스턴스: autoplay 5000ms / speed 800 / loop (KV 교체용)
- 좌하단 얇은 대형 카피(48px/300) + 우하단 스크롤 화살표(arrow-up-down 부유)
- 재현 난이도: 하 → `components/ParallaxVideoHero.tsx`

## 2. 비전 스크롤리텔링 (시그니처 B — 이 사이트의 핵심)

- 구조: 다크 배경, **좌측 3줄 카피 고정** ("끊임 없는 도전 / 스스로의 혁신 / 풍요로운 미래")
- 스크롤 진행에 따라:
  1. **활성 줄만 흰색 + 언더라인**, 비활성 줄은 반투명 (줄별 하이라이트 이동)
  2. 활성 줄에 대응하는 **미디어가 하단에서 라운드 프레임으로 등장 → 풀블리드로 확장** (border-radius 보간 실측: 1.7px 중간값 포착, `__bg-wrapper` w 1426→1440)
  3. 다음 줄 활성화 시 **이전 미디어가 위로 밀려나가고 새 미디어가 아래에서 등장** (section_07.png 중간 프레임)
  4. 각 미디어에 우하단 캡션 (누리호 발사 등)
- 미디어: 이미지 1개 + 영상 2개 (motion2/3)
- 재현 난이도: 상 → `components/VisionScrollytelling.tsx`

## 3. 다크 인트로 문장

- 히어로 직후 다크 섹션: 중앙 정렬 선언문 4줄 (txt-in keyframe 리빌 — 줄 단위 순차 등장 추정)
- 재현: FadeUp(타입1) 재사용으로 충분

## 4. 지속가능경영 — 인셋 프레임 확장

- 인셋 이미지 프레임(별하늘)이 스크롤로 **풀블리드로 확장**되고 텍스트가 이미지 위에 리빌
- 하나금속에서 검증된 스케일 리빌(design-type-02 `ScaleRevealSection`) 계열 — 단 확장 앵커가 중앙, 텍스트는 우측 오버레이
- 재현: 기존 컴포넌트 변형으로 대응

## 5. 사업분야 4열 카드

- 정적 4열 풀블리드 세로 카드 (hover 폭 변화 없음 — 실측 359px 유지). 아코디언 아님 (타입2와 구별)
- 카드: 이미지 + 소분류 + 얇은 대형 제목. hover는 이미지 미세 줌 추정(관찰 추정)
- 재현 난이도: 하

## 6. 사이드 도트 내비 (초기 학습에서 자주 놓치는 요소)

- 좌측 fixed 도트 5개 — 활성 섹션에 **오렌지 도트 + 라벨 칩** ("그룹소개/비전/뉴스룸/지속가능경영")
- 메뉴 전환 계열은 800ms cubic-bezier(0.77, 0, 0.175, 1) — 무겁고 극적
- 재현 난이도: 하 → `components/SideDotNav.tsx`

## 7. 헤더

- hide/show 실측: 스크롤 다운 시 `hide` 클래스 (타입1·2와 공통 문법), 다크 섹션 위에서 `light` 모드
- 재현: 기존 헤더 hide/show 패턴 재사용

## 시안 적용 우선순위

1. VisionScrollytelling (시그니처 — 회사 비전/핵심가치 콘텐츠에 매핑)
2. ParallaxVideoHero (fixed 0.5x 패럴랙스 + 얇은 대형 카피)
3. 다크↔라이트 섹션 교차 리듬 + 얇은 웨이트(300) 타이포
4. SideDotNav + 헤더 hide/show