Fun Illustrated

# Fun Illustrated — web 디자인 팩

## 이 스타일의 정체성
플랫한 손맛 일러스트가 화면을 채우는 명랑한 스타일이다. 채도 높은 다색 팔레트, 둥글고 굵은 산세리프, 캐릭터·아이콘 일러스트와 통통 튀는 마이크로 인터랙션. 무엇을 보면 이 스타일임을 아는가 — 모든 섹션에 단순 플랫 일러스트(블롭 배경 위의 캐릭터·소품)가 들어가고, 굵은 둥근 폰트와 알약형 버튼이 명랑하게 통통 움직인다.

## 색
- 배경: `#fff8ee` (웜 크림). 섹션 교차로 `#ffe9d6`, `#e3f4ee` 파스텔 패널.
- 텍스트: `#2d2a26` (잉크 브라운블랙).
- 강조색 5개(일러스트·버튼·배지·아이콘 자유 사용): 코랄 `#ff6b4a`, 선샤인 `#ffc24b`, 틸 `#2bb3a3`, 베리 `#7b4ddb`, 스카이 `#4aa8ff`.
- CTA 주색: 코랄 `#ff6b4a`. 텍스트 대비를 위해 코랄 위 텍스트는 `#2d2a26` 또는 흰색.
- 일러스트는 플랫 컬러(그라디언트 없음) + 1.5px `#2d2a26` 윤곽선.

## 타이포그래피
- 디스플레이: `Fredoka`(Google Fonts) weight 600~700, 대체 `'Nunito', sans-serif`. 헤드라인 `clamp(2.2rem, 5.5vw, 4rem)`, `letter-spacing: -0.005em`, line-height 1.15. 둥근 글자 그 자체가 명랑함.
- 서브헤드: `Fredoka` weight 500, `1.3rem`.
- 본문: `Nunito`(Google Fonts) `1.05rem`, weight 400, line-height 1.7, 측정 60~68자.
- 배지/라벨: `Nunito` weight 800, `0.8rem`, 대문자, 알약 배경.
- 강조 단어는 일러스트풍 둥근 하이라이트(강조색 배경 + radius 999px)로 감쌈.

## 레이아웃 / 그리드
- 콘텐츠 최대 폭: 1080px. 좌우 패딩 모바일 20px / 데스크탑 48px.
- 브레이크포인트: 640px, 1024px.
- 중앙 정렬(`centered`) 기본 — 히어로·섹션 헤더 중앙. 콘텐츠 블록은 중앙 정렬 컬럼, 일러스트가 좌우로 살짝 흘러나옴.
- 섹션 수직 리듬: 섹션 간 `clamp(72px, 9vw, 120px)`(balanced).
- 섹션 경계는 물결(SVG wavy divider) 또는 곡선 컷으로 부드럽게 — 직선 경계 지양.
- 12열 그리드는 텍스트+일러스트 분할에만(6/6 또는 7/5).

## 형태 / 질감
- 모서리: 카드·이미지 radius `24px`, 버튼 radius `999px`(알약).
- 보더: 카드·버튼 `2px solid #2d2a26` (일러스트 윤곽선과 통일).
- 그림자: 부드러운 단일 섀도 `0 8px 0 rgba(45,42,38,0.18)` 또는 오프셋 `4px 4px 0 #2d2a26` — 카드는 후자(또렷한 손맛).
- 일러스트: 플랫 컬러 + 1.5px 윤곽선 캐릭터/소품. 배경에 블롭 형태(둥근 비기하 곡선)를 강조색으로 깔고 그 위 일러스트.
- 아이콘: 채운 둥근 라인 아이콘, 같은 윤곽선 두께.

## 모션
- 전환: `playful` — `260ms cubic-bezier(0.34, 1.56, 0.64, 1)` (바운스 오버슈트).
- 호버: 버튼 `scale(1.05)` + `translateY(-3px)`, 카드 `translateY(-6px)` + 섀도 확대.
- 마이크로 인터랙션: 아이콘 호버 시 `rotate(-8deg → 8deg)` 통통 흔들림(wiggle), 강조 배지 등장 시 `scale(0 → 1)` 팝.
- 스크롤 진입: 일러스트·카드가 `translateY(24px → 0)` + `scale(0.96 → 1)`, stagger 90ms.

## 하지 말 것
- 보라-핑크 그라디언트 금지. 모든 색은 플랫 솔리드. (베리 `#7b4ddb`는 일러스트 포인트로만, 그라디언트로 쓰지 않음)
- 그라디언트 일러스트·사실적 3D 렌더 금지 — 플랫 + 윤곽선만.
- 윤곽선 없는 흐릿한 일러스트 금지. 모든 일러스트·아이콘에 1.5~2px `#2d2a26` 윤곽선.
- soft한 무채 미니멀로 후퇴 금지 — 명랑·다색이 정체성.
- 이모지를 일러스트 대용으로 쓰지 말 것 — 실제 CSS/SVG 플랫 일러스트.
- 직각 모서리(radius 0) 금지. 모든 컨테이너 둥글게.
- 정적·딱딱한 모션(linear, < 200ms) 금지 — 바운스가 필수.

## 적용 예
- **히어로:** 중앙 정렬 굵은 둥근 헤드라인(강조 단어는 알약 하이라이트) + 알약 CTA 버튼 2개. 배경에 강조색 블롭 3~4개, 그 위 캐릭터 일러스트가 우측에서 살짝 흘러나옴.
- **카드(기능 소개):** 3열 그리드, radius 24px + 2px 보더 + `4px 4px 0` 하드 섀도. 상단에 둥근 일러스트 아이콘(블롭 배경), 굵은 둥근 제목, 본문. 호버 시 -6px + 아이콘 wiggle.
- **푸터:** `#e3f4ee` 파스텔 패널, 상단 물결 디바이더. 캐릭터 일러스트가 좌하단에 앉아 있고, 알약형 링크 그룹, 강조색 소셜 아이콘 원형 버튼.