---
type: knowledge
domain: design
status: active
last-reviewed: 2026-07-06
---

# 나이브 디자인 (Naive Design)

> 한 줄 정의
> 어린이 그림책의 손맛 — 삐뚤빼뚤한 블롭, 손글씨, 크레용 원색, 낙서 장식. "잘 그린 것"보다 "진심으로 그린 것"이 규칙이다.

![[preview-naive.jpg]]

## 언제 쓰나 / 피하나

| 적합 | 부적합 |
|------|--------|
| 키즈·교육·놀이 제품 | 금융·의료·법률 — 신뢰가 셀링포인트인 곳 |
| 커뮤니티·이벤트, 부담을 낮추는 온보딩 | 밀도 높은 프로 도구 |
| 일러스트 자산이 있는 브랜드 | 손글씨를 장문 본문에 써야 하는 화면 |

## 스타일 DNA

### 팔레트 — 크레용 원색

| 토큰 | 값 | 역할 |
|------|-----|------|
| cream | `#FFF8EC` | 바탕 (도화지) |
| red | `#E0362C` | 크레용 빨강 |
| blue | `#4F86F7` | 크레용 파랑 |
| yellow | `#FFD23F` | 크레용 노랑 |
| green | `#43A047` | 크레용 초록 |
| ink | `#2B2B2B` | 텍스트 (순흑 대신 연필심) |

- 파스텔로 채도를 낮추면 죽는다 — 나이브는 **원색의 용기**다. 대신 바탕을 크림으로 눌러 균형.

### 타이포

- 손글씨: Gaegu(개구), Hi Melody, 나눔손글씨 시리즈 (상업용 무료 확인은 눈누 https://noonnu.cc).
- 손글씨는 헤드라인·짧은 라벨 전용 — 본문이 3줄 넘으면 일반 산세리프(Pretendard)로 내려온다.

### 형태 — 삐뚤빼뚤의 문법

- 블롭: 8값 border-radius — 완전 원/사각형 금지.
- 모든 장식 요소에 ±3~10deg 회전 — 단, 콘텐츠 텍스트는 수평 유지.
- 낙서 SVG(구불선·별·화살표)를 포인트로. stroke `4~6px`, `stroke-linecap: round`.

## 핵심 레시피 (CSS)

```css
/* 유기적 블롭 — 8값 radius가 핵심 */
.blob {
  background: #FFD23F;
  border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%;
  transform: rotate(-6deg);
}
/* 스티커 — 흰 바탕 + 점선 보더 + 회전 */
.sticker {
  background: #fff;
  border: 3px dashed #E0362C;
  border-radius: 50%;
  transform: rotate(-10deg);
  font-family: 'Gaegu', cursive;
}
```

```html
<!-- 손그림 구불선 — path 하나로 충분 -->
<svg width="180" height="60" viewBox="0 0 180 60" fill="none">
  <path d="M4 30 Q 26 4, 48 30 T 92 30 T 136 30 T 176 30"
        stroke="#E0362C" stroke-width="5" stroke-linecap="round"/>
</svg>
```

- 호버 인터랙션은 "종이 인형극"으로: `transform: rotate(±2deg) scale(1.04)` + 짧은 스프링. 그림자·글로우는 어울리지 않는다.

> [!TIP] 나이브 ≠ 무질서
> 그리드는 멀쩡히 살아 있고 **요소만 논다**. 정렬 자체를 포기하면 유치한 게 아니라 못 만든 것으로 보인다. 여백·계층 규칙([[UI 시각 체계]])은 그대로 지킨다.

## 흔한 실수

- 손글씨 폰트로 장문 본문 → 가독성 붕괴. 손맛은 제목까지만.
- 채도 낮춘 "고급스러운 나이브" → 정체성 상실. 원색이 무서우면 이 스타일이 아닌 것.
- 모든 요소 회전 → 멀미. 회전은 장식 요소에만, 본문은 수평.
- 기성 이모지 대량 사용 → 손그림 낙서와 톤 충돌.

## 실물 레퍼런스

**정석 — 나이브가 제품 정체성인 곳**
- [Gumroad — Design](https://gumroad.com/design) — 두들·스티커 감성 리브랜딩의 대표 사례. "잘 그린 것보다 진심으로 그린 것"을 상업 제품 스케일로 증명.
- [Kinopio](https://kinopio.club) — 삐뚤빼뚤이 곧 UX인 공간형 노트 도구. 나이브 인터랙션(요소가 노는 느낌)의 교과서.
- [tldraw](https://www.tldraw.com) — 손그림 화이트보드. "그리드는 멀쩡하고 요소만 논다" TIP의 실물 증거 (Excalidraw도 같은 축).

**갤러리**
- [99designs — Hand-drawn 웹](https://99designs.com/inspiration/websites/hand-drawn) — 손그림 스타일 웹 큐레이션.
- [WebFX — 손그림 웹 30선](https://www.webfx.com/blog/web-design/30-creative-examples-of-the-hand-drawn-style-in-web-designs/) — 낙서부터 일러스트까지 스타일 스펙트럼 한눈에.

**폰트**
- [Google Fonts — Gaegu](https://fonts.google.com/specimen/Gaegu) — 대표 한글 손글씨.
- [눈누](https://noonnu.cc) — 한글 손글씨 폰트의 상업용 무료 여부 확인은 여기서.

- 로컬 데모: `스타일/_previews/스타일-데모.html`

## 관련 문서

- [[디자인 스타일 카탈로그]] · 인접 스타일: [[페이퍼 컷아웃]] (공작 축 — 나이브가 "그린 것"이면 컷아웃은 "오린 것"), [[하프톤 도트]]