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

# 클레이모피즘 (Claymorphism)

> 한 줄 정의
> 점토 장난감처럼 통통하게 부푼 3D 형태 — 큰 radius + 이중 inset 그림자 + 파스텔 — 로 만드는 말랑한 친근함. 뉴모피즘의 실패(저대비·배경 융합)를 색과 부피로 극복한 후계자다 (Malewicz가 2021년 명명).

![[preview-claymorphism.jpg]]

## 언제 쓰나 / 피하나

| 적합 | 부적합 |
|------|--------|
| 키즈·교육·헬스 온보딩 | 정보 밀도 높은 프로 도구 (부푼 요소가 자리를 먹음) |
| 게임화 요소 (배지·아바타·리워드) | 진지한·럭셔리 톤 |
| 통통한 3D 일러스트와 함께 가는 랜딩 | 텍스트 위주 화면 |

## 스타일 DNA

### 팔레트 — 파스텔 배경 + 채도 중간 본체

| 토큰 | 값 | 역할 |
|------|-----|------|
| bg | `#EEF3FF` | 바탕 (파스텔 — 순백 금지) |
| clay-1 | `#A5B4FF` | 점토 1 (라벤더) |
| clay-2 | `#FFB8D0` | 점토 2 (핑크) |
| clay-3 | `#B9F3D8` | 점토 3 (민트) |
| ink | `#3A3F58` | 텍스트 (먹색 아닌 남보라 잉크) |

- 본체는 **배경보다 진하게** — 배경과 같은 색 본체는 뉴모피즘의 무덤(저대비 접근성 실패)으로 돌아가는 길이다.
- 그림자도 검정이 아니라 **본체 색의 어두운 버전**(유채색)이어야 점토로 보인다.

### 형태 — 부풀음의 공식

- radius 32px+ (혹은 999px). 12px짜리 소심한 radius는 부풀지 않는다.
- 그림자 3중 구성: ① 바깥 소프트(바닥) ② inset 밝음(상단 — 말랑 광) ③ inset 어두움(하단 — 점토 두께). **inset 두 개의 방향이 생명** — 반대로 하면 눌린 구멍이 된다.
- 아이콘·일러스트도 통통한 3D(Spline 계열)로 통일해야 세계관이 완성된다.

### 타이포

- 둥근 산세리프 (Nunito, Baloo 2 — [[페이퍼 컷아웃]]과 공유). 한글도 둥근 계열.
- 본문은 일반 산세리프로 내려온다 — 전부 둥글면 유아용으로 좁아진다.

## 핵심 레시피 (CSS)

```css
.clay {
  background: #A5B4FF;
  border-radius: 32px;
  box-shadow:
    0 24px 40px rgba(96,112,208,.28),        /* 바닥 — 그림자도 유채색 */
    inset 0 -10px 18px rgba(58,63,120,.30),   /* 아래 어둡게 = 점토 두께 */
    inset 0 10px 16px rgba(255,255,255,.65);  /* 위 밝게 = 말랑 광 */
}
/* 눌리면 정말 눌린다 — 말랑한 것의 의무 */
.clay:active {
  transform: translateY(3px) scale(.99);
  box-shadow:
    0 10px 20px rgba(96,112,208,.22),
    inset 0 -4px 8px rgba(58,63,120,.25),
    inset 0 6px 10px rgba(255,255,255,.5);
}
```

- 배경이 파스텔이어야 바깥 그림자가 부드럽게 녹는다 — 순백 배경 + 진한 그림자는 스티커처럼 뜬다.
- 호버는 살짝 떠오르기(`translateY(-2px)` + 바깥 그림자 확대), 액티브는 눌림 — 점토의 물성 피드백이 이 스타일의 절반.

## 흔한 실수

- 배경색 = 본체색 (뉴모피즘 회귀) → 저대비 접근성 실패의 재방송. 클레이는 본체가 진하다.
- radius 소심 (12~16px) → 부풀지 않은 그냥 카드. 32px부터.
- 그림자 검정 → 점토가 아니라 플라스틱. 그림자는 본체 색의 어두운 유채색.
- 전 요소 클레이 → 버튼·카드·배지 포인트만. 본문 영역은 평평하게 쉬게 하라.
- 얇은 폰트 → 통통한 형태에 얇은 글자는 따로 논다. 웨이트 600+.

## 실물 레퍼런스

**원전**
- [Claymorphism in User Interfaces (hype4.academy)](https://hype4.academy/articles/design/claymorphism-in-user-interfaces) — 용어를 만든 Malewicz의 정의 글(2021.12). 뉴모피즘과의 차이가 정리돼 있다.
- [Claymorphism CSS Generator](https://hype4.academy/tools/claymorphism-generator) — 이중 inset 그림자 값을 슬라이더로 뽑는 공식 생성기.

**도구**
- [clay.css](https://github.com/codeAdrian/clay.css) — 클래스 하나·SASS 믹스인으로 클레이 그림자 적용하는 마이크로 라이브러리.
- [Spline](https://spline.design) — 통통한 3D 에셋 제작의 표준 브라우저 도구. 클레이 일러스트는 사실상 여기서 나온다.
- [3dicons](https://3dicons.co) — realvjy의 CC0 3D 아이콘 1,500+ (Blender 제작, Figma·GitHub 배포). 직접 못 빚을 때의 표준 출발점 — 출처 표기도 불필요.

**갤러리**
- [Dribbble — claymorphism 태그](https://dribbble.com/tags/claymorphism) — 컨셉 대량 관찰용 (실구현 아님 주의).

**폰트**
- [Nunito](https://fonts.google.com/specimen/Nunito) · [Baloo 2](https://fonts.google.com/specimen/Baloo+2) — 둥근 것들.

- 검색 키워드: `claymorphism ui`, `clay 3d illustration`

- 로컬 데모(코드=이 문서 레시피): `스타일/_previews/스타일-데모.html`

## 관련 문서

- [[디자인 스타일 카탈로그]] · 인접 스타일: [[리퀴드 글라스]] (재질 축 — 유리 vs 점토), [[페이퍼 컷아웃]] (같은 공작 감성 — 2D 오림 vs 3D 빚음), [[나이브 디자인]] (친근함 축)