이리데센트 마케팅 플로우

# 이리데센트 마케팅 플로우 — web 디자인 팩

## 이 스타일의 정체성
밝은 화이트 배경 위에 섹션마다 곡면형 컬러 블록(파스텔 라임·코랄·스카이)이 흐르듯 끼어들어 페이지에 움직임을 만든다. 곡면 블록은 직사각형이 아니라 부드러운 비대칭 곡선 경계(`border-radius`로 비대칭 처리하거나 SVG 곡선)로 잘려 다음 섹션으로 흘러간다. 굵은 산세리프 헤드라인, 큼직한 둥근 알약 버튼, 큰 마진의 풀폭 일러스트 배너로 즐겁고 자신감 있는 마케팅 톤을 낸다. 스크롤 시 컬러 블록이 살짝 패럴랙스로 흐른다. 한눈에 "발랄하고 자신감 있는 컬러 블록 마케팅 페이지"로 읽혀야 한다.

## 색
- 배경: `#ffffff` (밝은 화이트)
- 텍스트: `#191a23` (잉크 차콜) / 보조 `#5a5b6a` / 컬러 블록 위 텍스트는 같은 차콜 유지(대비 AA 확보)
- 곡면 컬러 블록 3색 (면적 크게, 섹션 배경으로): `#c7e86b`(파스텔 라임) · `#ff8b6a`(코랄) · `#8fc9f0`(스카이) — 채도 중간, 파스텔이되 또렷하게.
- 강조 CTA: 차콜 `#191a23` 배경 + 흰 텍스트의 알약 버튼이 1차. 컬러 블록 위에서는 흰 배경 + 차콜 텍스트 알약.
- 컬러 블록은 솔리드 단색 — 블록 안에서 그라디언트는 쓰지 않는다. 색끼리 인접 배치해 명랑한 대비를 만든다.

## 타이포그래피
- 디스플레이/헤딩: `Space Grotesk, "Clash Display 대체", Inter, sans-serif` (Space Grotesk = Google Fonts 공개, 굵게 사용)
- 본문/라벨: `Inter, Pretendard, sans-serif` (Google Fonts)
- H1: `clamp(2.8rem, 7vw, 5.5rem)`, weight 700, letter-spacing `-0.03em`, line-height 1.0
- H2: `clamp(2rem, 4vw, 3.2rem)`, weight 700, letter-spacing `-0.02em`, line-height 1.08
- 본문: `1.125rem`, weight 400, line-height 1.6
- 라벨/eyebrow: `0.875rem`, weight 600, letter-spacing `0.02em`, 대문자
- 헤드라인은 굵게(700) 자신감 있게 — 일부 단어를 컬러 블록 색으로 하이라이트(배경 칠) 처리할 수 있다.

## 레이아웃 / 그리드
- 콘텐츠 최대 폭 `1200px`, 좌우 패딩 `24px`. 곡면 컬러 블록은 풀폭(`100vw`)으로 깔린다.
- 브레이크포인트: `<768px` 1열 / `768–1024px` 2열 / `>1024px` 풀 다단
- 섹션 수직 간격 `0` — 섹션이 곡면 경계로 직접 맞물려 흐른다(분리 여백 대신 곡선 전환). 섹션 내부 패딩은 상하 `96px`.
- 풀폭 일러스트 배너: 컬러 블록 안에 좌우 한쪽으로 큰 일러스트, 반대쪽에 헤드라인+본문+CTA를 큰 마진으로.
- 곡면 경계: 섹션 상/하단을 `border-radius: 50% 50% 0 0 / 8% 8% 0 0` 류의 비대칭 곡률 또는 SVG `path`로 흐르게 잘라낸다.

## 형태 / 질감
- radius: 버튼 알약 `999px`(완전 둥근), 카드 `24px`, 이미지 프레임 `28px`
- 곡면 컬러 블록: 큰 비대칭 곡선 경계. 직각 섹션 경계를 쓰지 않는다.
- 보더: 거의 쓰지 않음 — 분리는 색 블록 자체로. 카드는 보더 없이 색 면으로 구분.
- 그림자: 알약 버튼·떠있는 카드에 `0 8px 20px rgba(25,26,35,0.10)` — 부드럽고 또렷한 한 단계. 호버 시 깊어진다.
- 일러스트: 평면적이고 명랑한 컬러 일러스트(곡선·둥근 형태 위주), 채도는 컬러 블록 팔레트와 맞춤. 라인 일러스트가 아니라 컬러 면 일러스트.
- 아이콘: 둥근 형태의 굵은 라인 또는 면 아이콘.

## 모션
- playful. 트랜지션 `260ms cubic-bezier(0.34,1.56,0.64,1)` (살짝 오버슈트하는 바운시).
- 호버: 알약 버튼은 `scale(1.04)` + 그림자 깊어짐. 카드는 `translateY(-6px)` + 살짝 회전(`rotate(-1deg)`).
- 스크롤 패럴랙스: 곡면 컬러 블록은 스크롤 속도의 약 0.85배로 움직여 본문보다 천천히 흐른다. 일러스트는 1.1배로 살짝 앞서 흐른다.
- 스크롤 진입: 헤드라인·카드가 `opacity 0→1` + `translateY(24px→0)`, 320ms 바운시.
- `prefers-reduced-motion: reduce` 시 패럴랙스·오버슈트·회전 제거, opacity 전환만.

## 하지 말 것
- 직각 섹션 경계 금지 — 섹션 전환은 곡면 곡선으로 흐른다. 평범한 풀폭 색 띠를 직사각형으로 쌓지 말 것.
- 보라/인디고 그라디언트 금지. 컬러 블록 안 그라디언트 금지 — 블록은 솔리드 단색.
- 어두운 다크 배경 금지 — 캔버스는 항상 밝은 화이트, 컬러 블록은 파스텔.
- 이모지 금지 — 즐거움은 컬러 블록과 면 일러스트로 표현.
- 모든 카드를 같은 soft shadow로 균일하게 두지 말 것. blob 도형을 무의미하게 흩뿌리지 말 것 — 곡면은 섹션 경계에 한정.
- 가는(400 이하) 디스플레이 헤드라인 금지 — 헤드라인은 굵은 700.
- 컬러 3색을 넘는 색 추가 금지. 모션을 아예 빼지 말 것 — 패럴랙스 흐름이 정체성.

## 적용 예
- **히어로**: 화이트 배경에 굵은 700 H1(일부 단어를 라임/코랄 배경 하이라이트), 차콜 알약 CTA. 하단을 코랄 곡면 블록이 곡선으로 받치고 그 안에 면 일러스트 배너.
- **카드/피처 섹션**: 스카이 컬러 블록을 풀폭으로, 위에 흰 카드 2~3개(24px radius, 보더 없음, 부드러운 그림자). 호버 시 들리며 살짝 회전.
- **푸터**: 라임 곡면 블록으로 마무리, 차콜 텍스트. 큰 알약 CTA 한 개를 중앙에, 링크 그룹을 그 아래 정렬. 곡면 상단 경계로 본문과 흐르듯 연결.