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

원본: https://www.hanmir.co.kr/ (해외마케팅 에이전시)
실측일: 2026-07-10, viewport 1440×900, 페이지 총높이 9083px
실제 사용 스택: **GSAP + ScrollTrigger + Lenis + Swiper + AOS + Pretendard** (우리 시안 스택과 동일)

## 한 줄 요약

거대한 타이포(80~110px)와 넉넉한 여백 위에 오렌지(#FA4C16) 포인트 하나만 얹은 미니멀 구성.
움직임은 "스크롤에 비례해 미끄러지는" scrub 기반이고, 등장 모션은 fade-up 800ms 하나로 통일되어 있다.

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

| 용도 | 크기 | 굵기 | 행간 | 자간 |
|---|---|---|---|---|
| 초대형 디스플레이 (pinned 타이포) | 110px | 700 | 110px (1.0) | -0.5px |
| 섹션 대제목 (Hero 포함) | 80px | 700 | 80px (1.0) | **-5px (매우 타이트)** |
| 통계 숫자 | ~90-100px (관찰 추정) | 700 | 1.0 | — |
| 아이브로우 라벨 (COMPANY 등) | ~18px (관찰 추정) | 600 | — | 오렌지, 대문자 영문 |
| 본문 | 16px | 400 | 24px (1.5) | normal |

- 전체 폰트: Pretendard 단일
- **제목은 행간 1.0 + 음수 자간**이 이 사이트 타이포 감각의 핵심. 크기 대비가 극단적(16px 본문 vs 80px 제목)이고 중간 크기를 거의 안 쓴다.
- 제목 패턴: 한글 카피 + 영문 대형 타이포 병기 (예: "한미르, 소통에 마케팅을 더하다" 소제목 → "Adding Marketing to Communication" 대제목)

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

| 색 | 값 | 어디에 쓰나 |
|---|---|---|
| 잉크 블랙 | #151515 | 제목·본문·다크 푸터 배경. 순수 #000 안 씀 |
| 화이트/라이트 그레이 | #FFFFFF / #F5F5F5 | 섹션 배경 2단 교차, 통계 카드 배경 |
| **오렌지 (유일한 accent)** | **#FA4C16** | 아이브로우 라벨, 강조 카드 그라데이션, TOP 버튼, 링크 하이라이트. 유채색 사용처의 사실상 전부 |
| 뮤트 그레이라벤더 | #C0C2D2 | 다크 푸터의 보조 텍스트 |
| 홀로그래픽 그라데이션 | 시안·옐로·마젠타·오렌지·퍼플 | Hero 배경 전용 (섹션에서는 안 씀). **CSS 그라데이션 블러 뭉치가 아니라 슬라이드별로 확실한 그래픽 패턴 3종**(아래 참조) — 2026-07-16 사용자 제공 캡처로 재확인

- 규칙: **본문 구간은 무채색만, accent는 한 색으로 좁게.** 면적이 큰 오렌지는 그라데이션(밝은 오렌지→#FA4C16)으로만 등장.
- pinned 쇼케이스 구간은 스크롤에 따라 배경이 화이트 → 피치/오렌지 틴트 그라데이션으로 서서히 전환.

## Hero 배경 패턴 3종 (실측 정정, 2026-07-16)

기존에 "홀로그래픽 그라데이션 이미지"로 뭉뚱그려 학습해 재현 시 흐릿한 blur 뭉치(그라데이션 메시)로 잘못 단순화된 적이 있음. **실제로는 슬라이드마다 뚜렷이 다른 그래픽 패턴**이며, 같은 슬라이드 내에서도 색상이 서서히 순환(hue shift)한다.

| 슬라이드 | 패턴 | 색 순환 | 참조 |
|---|---|---|---|
| 01/03 | **대각선 컬러 밴드** — 세로 줄무늬가 대각선으로 빗겨 흐르며 옐로→마젠타→시안 경계가 부드럽게 섞임 | 같은 패턴에서 옐로 우세 ↔ 블루 우세로 서서히 순환 | `probe_hero_slide1_stripe.png`, `probe_hero_slide1_stripe_blue.png` |
| 02/03 | **동심원 링 그라데이션** — 우측 하단 한 점에서 퍼지는 동심원, 링마다 옐로→마젠타→퍼플→오렌지 순 | 중심점 고정, 색만 순환 추정 | `probe_hero_slide2_rings.png` |
| 03/03 | **체커보드 모자이크** — 큰 대각선 그라데이션(라이트블루→마젠타→옐로) 위에 격자 단위로 밝기를 미세하게 교차시켜 타일 질감을 냄 | — | `probe_hero_slide3_checker.png` |

재현 가이드(CSS만으로 가능, WebGL/캔버스 불필요):
- 대각선 밴드: `repeating-linear-gradient(105deg, 색1, 색2 6%, 색3 12% ...)` 다색 반복 + `background-size`를 크게 잡고 `background-position`을 느리게 애니메이션
- 동심원 링: `repeating-radial-gradient(circle at 78% 65%, 색1 0, 색2 8%, 색3 16% ...)`
- 체커보드: 위 대각선 밴드 위에 `conic-gradient` 또는 `linear-gradient` 격자(예: 40~60px 타일)를 `mix-blend-mode: overlay`로 겹쳐 밝기 교차
- 브랜드 적용 시: 원본은 시안대로 옐로/마젠타/시안 다색이지만, **업체 시안에 그대로 다색을 쓰지 말고** 취향 프로파일의 "무채색+단일 accent" 규칙에 맞춰 톤을 브랜드 accent 1색 + 잉크 톤 그라데이션으로 재해석할 것 (다색은 hanmir 고유 아이덴티티)

⚠ **실전 우선순위 정정 (2026-07-16, 동진하이텍 1113 적용 경험)**: 위 CSS 재현은 참고용 기법일 뿐, **기본 선택지가 아니다.**
Claude가 직접 그리는 그래픽 패턴은 실제로 만들어보면 밴드 색 배분·리듬이 원본만큼 안 나오고 손이 많이 가는 데 비해 완성도가 낮다.
**업체 리드에 크롤링으로 확보한 실사(원본 사이트/유사 현장 사진)가 있으면 그쪽을 최우선으로 쓴다.**
- Hero 배경 = 확보된 실사 이미지(다크 오버레이 그라데이션으로 텍스트 가독성 확보) + 위 슬라이더 구조(타이머/화살표/카운터)
- 위 3종 CSS 패턴 재현은 **실사가 전혀 없을 때의 최후 대안**으로만 사용
- 실사가 1장뿐이어도 슬라이더 구조(HeroFadeCarousel 패턴)는 그대로 만들어두고, 이후 이미지가 추가되면 슬라이드만 늘리면 되게 구성할 것

## 여백 리듬 (실측)

- 컨테이너: **~1400px (거의 풀블리드, 좌우 여백 ~20px)** — 좁은 컨테이너를 안 쓰고 화면을 넓게 쓴다
- 섹션 높이: 823 / 913 / 1147px — 콘텐츠 대비 매우 넉넉함 (콘텐츠는 상단 1/3에 몰고 나머지는 여백)
- pinned 쇼케이스 섹션: 4280px (약 4.7 뷰포트 분량의 스크롤 거리)
- Hero: 정확히 100vh
- 카드 간격: 15px (row gap-15px), 카드 radius ~24px

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

1. **Hero (100vh)** — 홀로그래픽 그라데이션 풀블리드 + 좌하단 텍스트 블록(한글 소제목→영문 대제목→설명 2줄) + Swiper 슬라이더 컨트롤(일시정지 원형 버튼 + 01/03 + 좌우 화살표). 헤더는 투명, 검정 메뉴. → `section_01.png`
2. **Company 통계** — 아이브로우(오렌지) + 2줄 대제목 + VIEW MORE 필 버튼(outline, radius 30px) / 아래 통계 카드 4장: 첫 장만 오렌지 그라데이션, 나머지 #F5F5F5. 숫자 카운트업. → `section_02.png`
3. **지원사업 3단 밴드** — 풀폭 가로 밴드 3개(수출바우처/혁신바우처/지자체)가 스크롤에 따라 차례로 밀려 올라옴(scrub:1). 좌 텍스트(오렌지 라벨+60~80px 제목) / 우 이미지 카드. 배경 화이트→#F5F5F5→오렌지 그라데이션 순 변주. → `section_04.png`, `full_1440.png`
4. **ONE-STOP SERVICE (pinned, 4280px)** — 중앙 타이포(오렌지 한 줄 + 110px 2줄) 고정, 좌/중/우 3열의 이미지 카드들이 서로 다른 속도로 위로 흐름. 배경은 진행도에 따라 화이트→피치 그라데이션. → `pin_frame_*.png` 시퀀스
   ⚠ 이건 **원본 실측값**이며 참고용으로만 보존한다. **2026-08-13부터 이 섹션 슬롯 자체를 기본 시안에서
   쓰지 않는다** — 무관한 스톡 이미지 콜라주가 텍스트를 가리는 구성이 산만하다는 피드백으로,
   `components/PinnedWipeShowcase.tsx`(씬 핀 + 와이퍼 clip-path 텍스트 전환)로 교체. 상세는
   `interactions.md` 4번·9번 항목 참조
5. **CONTACT 다크 푸터** — #151515 배경, "CONTACT US!" 대형 타이포 + 우측 문의하기/이메일 링크(↗ 화살표), 아래 주소/연락처 그리드 + 최하단 로고. → `section_10.png`, `full_1440.png`

## 스크린샷

- `screenshots/full_1440.png` — 전체 (pinned 구간은 비어 보임: 스크롤 상태 의존)
- `screenshots/section_01~11.png` — 뷰포트 단위
- `screenshots/pin_frame_1~6_y*.png` — pinned 쇼케이스 스크롤 상태 시퀀스
- 원시 실측값: `tokens-raw.json`, `scrolltriggers-raw.json`