# design-type-05 — 스타일 프로파일 (출처: cmesrobotics.ai) ★풀사이트 학습

원본: https://www.cmesrobotics.ai/ (씨메스로보틱스 — 피지컬 AI·산업 자동화)
실측일: 2026-07-14, viewport 1440×900. **최초의 전체 사이트 학습** — 메인 + 서브 템플릿 14종.
실제 사용 스택: **GSAP + ScrollTrigger(pin+scrub) + Swiper 11 + jQuery + canvas 2d(이미지 시퀀스)** — Lenis/three 없음.

## 한 줄 요약

**화이트 ↔ 딥블랙을 오가는 "테크 프레젠테이션"**: 방사형 보라 그라데이션·파티클 위 초대형 헤드라인,
캔버스 이미지 시퀀스로 재생되는 See./Think./Move. 8화면 핀 스토리텔링, 3D 제품 렌더 중심의 다크 상세 페이지.
유채색은 보라(#3B0694~#4B2FE0 계열) 그라데이션 하나로 통일, 버튼은 그라데이션 보더가 아이덴티티.

## 사이트 구조 (풀사이트, 총 18페이지 → 템플릿 14종 학습)

| 템플릿 | 페이지 | 높이 | 특징 |
|---|---|---|---|
| main | / | 13727px | pin 8화면 + canvas 시퀀스 (상세: pages/main.md) |
| solution 상세 | palletizing 외 7종 | ~9800px | 다크, 파티클 링 히어로 + 가로 카드 캐러셀 + 스텝 핀 (pin 2) |
| product 상세 | palletizer, cubimeazure | ~6800px | 다크, 좌 렌더 이미지(그라데이션 보더) + 우 카피 슬라이더 |
| rental / application | 2종 | 7~9천px | 다크 상세 변형 |
| about-mission | mission_vision | 4235px | 다크, 기울어진 미디어 패널 + 고스트 텍스트 + 퍼플 밴드 (scrub 6, canvas) |
| about-value / people | 2종 | 10~12천px | 롱폼 스토리 (value: pin 2 / people: pin 1) |
| about-cibi | ci_bi | 3727px | 라이트, CI 프레젠테이션 + Guideline 다운로드 버튼 |
| 리스트형 | news, ir, story, video, download | 2.5~4.7천px | 라이트, 정적(스크럽 없음) 카드/게시판 |
| contact | contact | 2114px | 라이트, 폼 중심 |

**다크/라이트 배분**: 스토리텔링·제품·솔루션 = 딥블랙(#000~#0E0E11), 정보성(리스트·IR·컨택) = 화이트.
콘텐츠의 "온도"로 배경을 가르는 것이 사이트 전체의 리듬.

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

폰트: Pretendard 계열 산세리프. 자간은 타이트(-0.02~-0.04em 관찰).

| 용도 | 실측 | 비고 |
|---|---|---|
| 히어로 헤드라인 | ~105px/줄 (h3 p 기준 105px 행) | 뷰포트보다 넓게 흐르는 가로 드리프트 |
| See./Think./Move. 워드 | ~105px Bold 화이트 | 다크 씬 좌측 고정 |
| 섹션 타이틀 (Solution 등) | 80~90px 관찰 추정 | 라이트 구간은 잉크색 |
| 서브페이지 히어로 (Palletizing Solution) | ~90px | 좌우로 갈라지는 배치 |
| 본문/카피 | 16~18px | 행간 1.6~1.7, 화이트 구간 회색 #555 계열 |

## 컬러 사용 방식

| 색 | 값(실측/관찰) | 어디에 쓰나 |
|---|---|---|
| 딥블랙 | #000 ~ #0E0E11 | 스토리텔링·상세 페이지 배경 (页 전체의 절반 이상) |
| 화이트 | #FFF | 메인 앞뒤·리스트·IR·컨택 |
| **브랜드 퍼플** | 로고 #3B0694, 버튼/포인트 #4B2FE0~#6B4EFF 관찰 | CTA 채움, 번호 라벨(01/02), 링크 포인트 |
| 그라데이션 | 보라→시안 (버튼 보더), 방사형 보라 블러(히어로 배경) | **면적을 채우기보다 태두리·빛으로 사용** |
| 3D 렌더 | — | 색은 미디어(제품 렌더·영상)가 담당, UI는 무채+퍼플 절제 |

## 여백/레이아웃

- 다크 상세: 좌 텍스트/우 미디어 2단, 미디어에 그라데이션 1px 보더 + 라운드
- 가로 스크롤 카드 캐러셀(솔루션 특징 01/02/03…)이 반복 패턴 — 카드가 뷰포트를 벗어나 흐름
- 카드/패널 라운드 12~20px, 콘텐츠 폭 넓게(거의 풀블리드에 좌우 36~60px)

## 배경 매체 (중요)

- **canvas 2d 이미지 시퀀스**: 메인 pinBx(900×810)에서 See./Think./Move. 3D 렌더 장면을 스크롤 연동 재생 (마우스 반응 없음)
- **방사형 그라데이션 + 파티클**: 히어로 — CSS 블러 그라데이션 + floating/scale keyframes 20종의 도트 파티클
- **video**: 메인 s8 풀스크린 mp4(1920×1080 loop) + 솔루션/뉴스 카드 영상 다수
- 시안 재현 시: canvas 시퀀스는 이미지 크로스페이드로 대응 가능, 파티클은 CSS keyframes로 재현

## 스크린샷/데이터

- `screenshots/full_1440.png`, `section_00~07.png`(메인 대표), `main/scrub_*.png`(850px 간격), `main/canvas_mouse_*.png`
- `screenshots/pages/{템플릿}/full.png + step_*.png + hover_*_before/after.png` — 14종
- `recordings/scroll_journey.webm`
- `tokens-raw.json`(메인 실측), `pin-states.json`(핀 타임라인), `pages-report.json`(템플릿별 실측), `crawl-nav.json`, `pin-skeleton.json`