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

# 페이퍼 컷아웃 (Paper Cutout)

> 한 줄 정의
> 색종이를 가위로 오려 풀로 붙인 콜라주 — blur 없는 통짜 그림자, 비정형 절단면, 살짝 돌아간 조각들. 화면인데 공작 시간의 물성이 난다.

![[preview-paper-cutout.jpg]]

## 언제 쓰나 / 피하나

| 적합 | 부적합 |
|------|--------|
| 키즈·교육·공예·로컬 브랜드 | 밀도 높은 데이터 UI·시스템 크롬 |
| 초대장·이벤트·시즌 캠페인 | 차가운 테크 톤이 필요한 곳 |
| 스토리텔링 랜딩(스크롤마다 조각이 붙는) | 대비·정밀도가 생명인 폼 중심 화면 |

## 스타일 DNA

### 팔레트 — 문방구 색종이

| 토큰 | 값 | 역할 |
|------|-----|------|
| kraft | `#E7D8BD` | 크라프트지 바탕 |
| paper | `#FDF6EA` | 흰 도화지 카드 |
| teal | `#2A9D8F` | 색종이 1 |
| coral | `#E76F51` | 색종이 2 |
| sun | `#F4A261` | 색종이 3 |
| ink | `#264653` | 텍스트 (남색 잉크) |
| shadow | `rgba(60,40,10,.22)` | 통짜 그림자 (갈색조!) |

- 그림자는 검정이 아니라 **바탕이 어두워진 갈색조** — 종이가 종이 위에 뜬 것이므로.

### 형태 — 오린 티의 문법

- `box-shadow`는 항상 `blur 0`: `10px 12px 0 rgba(60,40,10,.22)`. 흐리는 순간 일반 카드로 회귀한다.
- 모든 조각에 1~4deg 회전 — 완벽히 수평인 조각은 기계가 붙인 것.
- 절단면: 8값 border-radius(둥근 가위질) 또는 `clip-path` 지그재그(핑킹가위).
- 종이 섬유 노이즈를 저주파 turbulence로 살짝.

### 타이포

- 디스플레이: 두껍고 둥근 것 (Baloo 2, 한글: 배민 을지로체·여기어때 잘난체 등 — 라이선스 확인).
- 본문: 일반 산세리프로 내려온다. 본문까지 둥근 폰트면 유아용으로 좁아진다.

## 핵심 레시피 (CSS)

```css
/* 오린 색종이 조각 */
.piece {
  background: #2A9D8F;
  border-radius: 38% 62% 55% 45% / 48% 42% 58% 52%;  /* 가위 곡선 */
  transform: rotate(-4deg);
  box-shadow: 10px 12px 0 rgba(60,40,10,.22);          /* blur 0 = 시그니처 */
}
/* 핑킹가위 지그재그 스트립 */
.zigzag {
  background: #F4A261;
  clip-path: polygon(0 40%, 4% 12%, 8% 40%, 12% 12%, 16% 40%, 20% 12%,
    24% 40%, 28% 12%, 32% 40%, 36% 12%, 40% 40%, 44% 12%, 48% 40%, 52% 12%,
    56% 40%, 60% 12%, 64% 40%, 68% 12%, 72% 40%, 76% 12%, 80% 40%, 84% 12%,
    88% 40%, 92% 12%, 96% 40%, 100% 12%, 100% 100%, 0 100%);
}
/* 종이 섬유 질감 — baseFrequency를 낮게 (0.08) */
.board::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  opacity: .25; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.08' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 0.6 0 0 0 0 0.55 0 0 0 0 0.45 0 0 0 0.35 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
}
```

- 절취선 + ✂ 아이콘(`border-top: 2px dashed` + pseudo-element)은 싸고 효과 좋은 디테일.
- 모션은 "붙이는 손": 등장 시 `rotate(±6deg) scale(1.06) → 제자리`, 종이가 팔랑 내려앉는 느낌. drop 그림자도 함께 줄어들면 완벽.

## 흔한 실수

- 그림자에 blur → 즉시 Material 카드. 이 스타일의 존폐가 그림자 하나에 걸려 있다.
- 회전 5deg 초과 → 어질러진 책상. 삐뚤함은 미세해야 귀엽다.
- 색종이마다 채도 제각각 → 같은 문방구에서 산 색종이 세트처럼 채도 톤을 맞춘다.
- 노이즈 생략 → 종이가 아니라 벡터 일러스트로 보인다.

## 실물 레퍼런스

**갤러리 — 오린 것들의 수집처**
- [Awwwards — Collage 컬렉션](https://www.awwwards.com/websites/collage/) — 수상작 중 콜라주·컷아웃 계열만 모아 보기. 통짜 그림자·회전 문법을 실전에서 확인.
- 에릭 칼(Eric Carle) 그림책 — 이 화풍의 원전. 색종이 질감·절단면 참고는 여전히 여기가 최고.

**도구**
- [Paper Animation](https://paper-animation.com) — 사진을 찢긴 모서리·통짜 그림자의 종이 오림 그래픽으로 바꿔주는 무료 브라우저 도구. 에셋 제작용.

**폰트**
- [Baloo 2](https://fonts.google.com/specimen/Baloo+2) — 두껍고 둥근 디스플레이. 한글은 배민 을지로체·잘난체 계열 (라이선스 확인).

- 검색 키워드: `paper cutout illustration`, `paper collage web design`
- 로컬 데모: `스타일/_previews/스타일-데모.html`

## 관련 문서

- [[디자인 스타일 카탈로그]] · 인접 스타일: [[나이브 디자인]] (그린 것 vs 오린 것), [[택타일 아날로그]] (같은 물성 축, 어른 버전), [[하프톤 도트]] (인쇄 공작 축)