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

원본: https://www.taekwanggroup.co.kr/ko/main (태광그룹 메인)
실측일: 2026-07-11, viewport 1440×900, 페이지 총높이 10442px
실제 사용 스택: **GSAP + ScrollTrigger + Lenis + Swiper + AOS + 커스텀 커서/스크롤바** (canvas/three.js 없음)

## 한 줄 요약

풀스크린 **영상 배경**이 스크롤로 전환되는 시네마틱 히어로 + 단일 이징(cubic-bezier(0.33,1,0.68,1) 500ms)으로
통일된 절제된 모션 + 골드 포인트의 대기업 아이덴티티. 콘텐츠 섹션은 화이트 미니멀.

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

- **Hero: 풀스크린 영상 4개** (1440×900 mp4, loop+muted, 데스크탑/모바일 소스 분리 운용)
  - 항공 드론(산업단지) / 문화(미술관 공연) 등 그룹 사업을 보여주는 실사 영상
  - 스크롤에 따라 슬라이드 전환 (인터랙션 1번 참조)
- 소셜 섹션에도 소형 영상(338×190) 1개
- canvas/WebGL 없음

## 타이포 스케일

| 용도 | 값 | 비고 |
|---|---|---|
| Hero 대형 타이포 | ~64-72px, 흰색, 우측 정렬 2줄 (관찰 추정 — h1/h2 태그 미사용) | "Connection The Future With Light" |
| 섹션 타이틀 | ~56-64px 잉크 + **골드 ↗ 화살표** 장식 (관찰 추정) | "Our Business", "Webzine" |
| 본문 | 13.5px / 16.2px (실측) | 본문이 매우 작음 — 비주얼 대비 극대화 |
| 폰트 | NanumSquareNeo (실측) | 각진 견고한 인상 |

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

| 색 | 값 | 어디에 쓰나 |
|---|---|---|
| 잉크 블랙/화이트 | #000 / #fff | 텍스트·배경 기본. 콘텐츠 섹션은 화이트 |
| **브랜드 골드** | **#B4985A** (rgb 180,152,90 — 유채색 1위) | 섹션 타이틀 ↗ 화살표, 대각선 라인 장식, 포인트 |
| 마젠타 | #EC008C (소량 4회) | SNS 라벨 등 미세 포인트 |
| 영상/사진 | — | 색은 사실상 풀블리드 영상·사진이 담당. UI 유채색은 골드 하나로 절제 |

## 모션 시스템 (실측 — 이 사이트의 뼈대)

- **핵심 테크닉: fixed + clip 리빌** (원본 클래스 `clip-path-rect`/`fixed-box` — 2026-07-12 DOM 실측).
  콘텐츠를 뷰포트에 고정하고 클리핑 창만 스크롤로 지나가게 해 "화면이 딱 고정된 채 다음 장면이 위로 밀고 올라오는" 질감을 만든다.
  히어로 영상 전환, ESG 원형 마스크 축소가 전부 이 패턴

- **글로벌 단일 이징: `cubic-bezier(0.33, 1, 0.68, 1)` (easeOutCubic 계열) / 500ms** — 헤더, 버튼, 모달,
  스크롤바, 리스트 hover까지 전 요소 동일. "모든 움직임이 같은 감속 곡선"이 사이트의 질감을 만든다
- 버튼 마이크로 인터랙션 세트: `zoomin-circle`(원형 확장 배경), `label-slideup`(텍스트 슬라이드업 교체), `icon-moveup/down`(아이콘 이동)
- keyframes: yoyo-horizontal/vertical(왕복 부유), floatAnimation
- 커스텀 스크롤바(.c-scrollbar-y) + 커스텀 커서(cursor-global) + sticky 사이드 네비

## 섹션 구조

1. **스크롤 영상 히어로 (0~3600px)** — 풀스크린 고정, 900px 스크롤마다 영상 슬라이드 전환(총 4개). 우측 대형 흰 타이포 + 좌하단 한글 캡션 + 우하단 스크롤 유도 화살표 → `section_01~04.png`
2. **Our Business (pin+scrub, 3600~4500 실측)** — 대형 타이틀 + 5열 세로 이미지 카드(Swiper slidesPerView:auto). pin 상태에서 scrub 연동 → `section_07.png`
3. **풀블리드 이미지 섹션** (지구/ESG 톤) → `section_05.png`
4. **스케일 리빌 (pin+scrub, 6084~6984 실측)** — 프레임 안 영상/이미지가 스크롤에 따라 확장, 배후 대형 텍스트 리빌 → `section_08.png`
5. **News + Webzine** — 화이트 배경 4열 뉴스 그리드 + 매거진 그리드. 대형 잉크 타이틀 + 골드 ↗ → `section_10.png`
6. 푸터

## 스크린샷

- `screenshots/full_1440.png`, `section_01~12.png`
- `screenshots/load_*.png` (로드 시퀀스), `mouse_left/right.png`
- 원시 실측: `tokens-raw.json`, `scrolltriggers-raw.json`