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

원본: https://www.yungjin.co.kr/kr/main (영진약품 메인)
실측일: 2026-07-13, viewport 1440×900, 페이지 총높이 17299px
실제 사용 스택: **GSAP + ScrollTrigger(pin+scrub:1) + Swiper + jQuery** — Lenis 없음, canvas/three 없음
루트 폰트가 vw 비례(1920 기준 16px → 1440에서 12px)라 **모든 실측값은 1920 환산값 병기**

## 한 줄 요약

**페이지의 76%가 pin+scrub 시퀀스인 "스크롤 시네마"** — 화이트 여백 + 초대형 볼드 타이포(200px) 위에서
이미지가 원→알약→풀블리드로 자라나고, E/S/G 풀스크린 씬이 커튼 와이프로 교체되는 제약사 브랜딩 사이트.
유채색은 브랜드 블루(#0099D9) 하나, hover에서만 면적을 갖는다.

## 페이지 구성 (스크롤 예산: 총 17299px)

| 구간 | 스크롤 범위 | 비중 | 내용 |
|---|---|---|---|
| KV 히어로 | 0–900 | 5% | 풀스크린 영상 스와이퍼 (1슬라이드, fraction + 오토플레이 프로그레스) |
| **future-area pin** | 900–5400 (4500px) | 26% | 카피 등장 → 원형 이미지 상승 → 알약 확장 → 풀블리드 확장 |
| **esg-area pin** | 6300–15300 (9000px) | 52% | ESG 타이포 scale 2→1 → 원형 콜라주 통과 → E/S/G 씬 3개 커튼 와이프 |
| 뉴스 + 푸터 | 15300–17299 | 12% | scroll-motion fade-up, hover 이미지 리빌 리스트 |

pin 2개가 화면 5배 + 10배 분량의 스크롤을 소비한다. **"섹션을 쌓는" 사이트가 아니라 "장면을 재생하는" 사이트.**

## 타이포 스케일 (실측 — 1440 실측값 / 1920 환산)

폰트: **Pretendard** (Bold/SemiBold/Regular 웨이트별 패밀리 분리). 자간은 전 스케일 **-0.04em** 통일이 시그니처.

| 토큰(원본 클래스) | 1440 실측 | 1920 환산 | 웨이트 | 용도 |
|---|---|---|---|---|
| f-d1 | 149.76px / lh 1.2 / ls -0.04em | **200px** | Bold | "ESG" 초대형 워드 (scale 2 상태에선 300~400px 체감) |
| f-d2 | 53.9px / lh 1.2 / ls -0.04em | **72px** | SemiBold | future-area 메인 카피, 씬 카피 |
| f-h2 | 41.9px / lh 1.3 | **56px** | SemiBold | LATEST NEWS 등 섹션 타이틀 |
| f-h3 | 35.9px / lh 1.2 | **48px** | SemiBold | 씬 내부 카피 |
| f-b1-r | 18px / lh 1.5 | **24px** | Regular | 뉴스 리스트 타이틀 |
| f-b1 | 12px / lh 1.5 | 16px | Regular | 본문 |
| f-b3-r | 13.5px / lh 1.5 | 18px | Regular | 설명문/캡션 |

- 타입3(한화)의 얇은 300과 반대로 **볼드·세미볼드 대형 타이포** (타입1 hanmir 계열의 무게감)
- 크기 대비 극단화: 200px 워드 ↔ 16px 본문, 중간 크기 거의 없음 — 우리 취향 프로파일과 일치

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

| 색 | 값 | 어디에 쓰나 |
|---|---|---|
| 잉크 | #1A1A1A (rgb 26,26,26) | 텍스트 기본, 화이트 구간의 타이포 |
| 페이퍼 | #FFFFFF | 기본 배경 — 다크 섹션 없음, **어두움은 전부 사진/영상이 담당** |
| **브랜드 블루** | **#0099D9** (rgb 0,153,217) | view-more 버튼 hover 채움, 우하단 퀵버튼. **정지 상태에선 거의 안 보이고 상호작용 시에만 등장** |
| 회색 | #F2F2F2 | grey 버튼 배경 |
| 미디어 오버레이 | 검정 계열 dim | 풀블리드 이미지 위 화이트 타이포 대비 확보 |

## 여백/레이아웃

- 콘텐츠 폭: inner 클래스 기준 좌우 60px(1440) 마진, 뉴스 영역은 좌(타이틀)/우(리스트) 2단
- 섹션 패딩 개념이 희박 — pin 시퀀스가 뷰포트를 통째로 쓰고, 여백은 "장면 안"에서 연출
- 버튼: pill형(radius full), 1px 보더, 120×42(1440). 텍스트+화살표 아이콘

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

- **KV 풀스크린 영상 1개**: mp4, autoplay/loop/muted, 2016×1260으로 렌더(뷰포트 대비 1.4배 — cover 스케일)
  라이프스타일 실사(주방/러닝 등 "생활 속 건강" 무드). 시안에서는 업종 맞는 무료 스톡 영상으로 대응
- canvas/WebGL 없음 — 모든 연출이 DOM+GSAP

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

1. **KV 영상 히어로** — 좌하단 영문+국문 2단 카피, pill 버튼. 로드 시 텍스트 스태거 fade-up (~0.6s) → `load_intro_1.0s.png`
2. **future-area** (pin 5화면 분량) — 화이트 배경 중앙 카피 + 이미지 확장 시퀀스 → `scrub/y02700~y05400.png`
3. **esg-area** (pin 10화면 분량) — ESG 워드 + 원형 콜라주 + E/S/G 풀스크린 씬 3개 → `scrub/y06300~y15300.png`
4. **LATEST NEWS** — 좌 타이틀/우 리스트 3건, hover 시 좌측 슬롯에 썸네일 리빌 → `hover/news_hover.png`
5. **푸터** — 화이트, 로고 + 링크 컬럼

## 스크린샷/데이터 파일

- `screenshots/full_1440.png` — 전체 페이지 (pin 구간은 최종 상태로 찍힘)
- `screenshots/section_00~20.png` — 850px 간격 뷰포트 캡처
- `screenshots/scrub/y00000~y17100.png` — **900px 간격 스크럽 상태 시퀀스 (인터랙션 타임라인의 프레임)**
- `screenshots/hover/` — GNB 메가메뉴, view-more hover, 뉴스 hover 전/후
- `screenshots/load_intro_*.png` — 로드 인트로 3프레임
- `recordings/scroll_journey.webm` — 전체 스크롤 여정 녹화 (1280×800)
- `tokens-raw.json` / `font-tokens.json` / `scrolltriggers.json` / `scrub-states.json` / `scene-states.json` / `dom-skeleton.json` — 실측 원본 데이터