# design-type-03 — 스타일 프로파일 (출처: hanwha.co.kr)

원본: https://www.hanwha.co.kr/ (한화그룹 메인)
실측일: 2026-07-12, viewport 1440×900, 페이지 총높이 13011px
실제 사용 스택: **Lenis + 자체 클래스 토글 엔진(in/out) + Swiper + canvas 2d** — GSAP/ScrollTrigger 없음 (재현은 GSAP 사용 무방, 시각 결과 기준)

## 한 줄 요약

**얇은 웨이트(300) 대형 타이포 + 다크↔라이트 교차 + fixed 패럴랙스 영상** 위에
스크롤리텔링(3줄 카피 하이라이트 + 미디어 확장 전환)을 얹은 대기업 시네마틱. 유채색은 한화 오렌지 하나.

## 배경 매체 (중요 — 시안 반영 대상)

- **video 4종**: fixed 히어로 KV 영상(1440×900, loop/muted) + 비전 섹션 배경 영상 2개(motion2/3) — 데스크탑/모바일 소스 분리
- **canvas 2d 사용**: 비전 섹션의 미디어 프레임(`__video` 래퍼)이 canvas로 렌더됨 (이미지/비디오 프레임 드로잉).
  재현 시 동일 시각 결과면 video/img로 충분 — canvas 필수 아님
- 참조: `probe_canvas_y2200.png`

## 타이포 스케일 (실측)

| 용도 | 값 | 비고 |
|---|---|---|
| 히어로/섹션 대형 카피 | **48px / weight 300 / 행간 1.35 / 자간 -1.44px** | **얇은 웨이트가 정체성** — 볼드 아님 |
| 비전 3줄 카피 | 45px / 300 / 행간 1.45 / 자간 -1.8px | 활성 줄만 흰색+언더라인 |
| 강조(브랜드명 등) | 54px / 300 / 자간 -2.16px | Hanwha 전용 폰트 |
| 폰트 | **HanwhaGothic** (전용 서체) | 재현 시 Pretendard Light(300)로 대응 |

- 타입1(hanmir)·타입2(태광)의 굵은 타이포와 정반대 — **가늘고 우아한 대형 타이포**
- **⚠ 300 웨이트는 대형 디스플레이 타이포(40px+) 전용이다. 본문·캡션·리스트 등 소형 텍스트는 400 이상 필수** —
  전역 300 적용 시 가독성 붕괴 (2026-07-12 레몬 1157 시안에서 사용자 지적으로 확정)

## 컬러 사용 방식 (실측)

| 색 | 값 | 어디에 쓰나 |
|---|---|---|
| **한화 오렌지** | **#F37321** (rgb 243,115,33 — 유채색 1위, 사실상 유일) | 사이드 도트 활성, 섹션 라벨(사업분야 ↗), 보도자료 라벨, 포인트 |
| 다크/라이트 | #000 ↔ #fff | **섹션 단위 다크↔라이트 교차**가 페이지 리듬 (다크: 인트로·비전 / 라이트: 사업분야·뉴스룸) |
| 영상/사진 | — | 색은 미디어가 담당, UI는 무채+오렌지 절제 |

## 모션 시스템 (실측)

- 구현: GSAP 없이 **클래스 토글(in/out, txt-in/txt-out keyframes) + Lenis**
- 기본 전환 0.3~0.5s ease 계열, **사이드/메뉴 전환은 800ms cubic-bezier(0.77, 0, 0.175, 1)** (무겁고 극적)
- keyframes: in / out / txt-in / txt-out / progress / arrow-up-down(스크롤 유도 부유)
- **fixed + 패럴랙스**: 히어로 KV가 fixed 상태로 스크롤의 **0.5배속**으로 밀려 올라감 (실측: scroll 450 → translateY -225)

## 섹션 구조 (스크린샷 참조)

1. **fixed 영상 히어로** — KV 영상 + 좌하단 얇은 대형 카피 + 우하단 스크롤 화살표. 콘텐츠가 0.5x 패럴랙스로 위를 덮음 → `section_01.png`, `probe_hero_scroll450.png`
2. **다크 인트로 문장** — 중앙 정렬 4줄 선언문 (txt-in 리빌) → `section_02.png`
3. **비전 스크롤리텔링 (시그니처)** — 좌측 3줄 카피 고정·줄별 하이라이트, 미디어(이미지→선박 영상→불꽃 영상)가 라운드 프레임으로 등장→풀블리드 확장→위로 밀려남 → `section_03~09.png`
4. **사업분야** — 화이트, 오렌지 ↗ 라벨 + 잉크 카피 + 4열 풀블리드 세로 카드(정적, hover 폭 변화 없음) → `probe_biz_idle.png`
5. **뉴스룸** — 3열 뉴스 카드 (이미지 + 보도자료 라벨 + 제목) → `section_10.png`
6. **지속가능경영** — 인셋 프레임(별하늘)이 풀블리드로 확장 + 텍스트 오버레이 (스케일 리빌 계열) → `section_12~14.png`
7. 배너 2개(채용/우주시대, 다크 네이비) + 푸터

## 사이드 도트 내비

- 좌측 고정 도트 5개 — 현재 섹션에 오렌지 도트 + 라벨 칩("그룹소개/비전/뉴스룸/지속가능경영") 표시. 페이지 전체의 위치 감각을 만드는 요소

## 스크린샷

- `screenshots/full_1440.png`, `section_01~15.png`, `load_*.png`
- `probe_*.png` (canvas·hero 패럴랙스·사업분야 hover)
- 원시 실측: `tokens-raw.json`, `scrolltriggers-raw.json`