# Claymorphism — 디자인 스타일 가이드
## 기본 정보
- **ID**: claymorphism
- **카테고리**: design-style
- **연도**: 2021
## 설명
점토나 플라스틱 같은 질감을 디지털로 재현한 3D 스타일입니다.
## 역사·배경
2021년경 피그마 커뮤니티와 Dribbble에서 급부상. 3D 렌더링 도구(Blender 등)의 대중화와 맞물려 확산.
## 핵심 원칙
- 촉감
- 플레이풀함
- 친근함
## 주요 특징
- 부드러운 3D 형태
- 풍선같은 느낌
- 부드러운 그림자
- 밝고 화사한 색상
- 플레이풀한 분위기
## 컬러 시스템 가이드
밝고 채도 있는 파스텔+흰색 기반. 점토 장난감처럼 부드럽고 통통 튀는 색감
### 색상 역할
- primary: 채도 있는 파스텔 — 하늘색·분홍·라임·코럴 등 밝고 귀여운 색
- background: 흰색 또는 매우 연한 그레이
- surface: primary보다 더 연한 버전 또는 흰색
- text: 어두운 회색 (#333~#555) — 순수 검정보다 부드럽게
### 색상 제약 조건
- 어두운 배경 사용 금지 — 점토 장난감은 밝은 환경이 기본
- 순수 검정 사용 금지 — 텍스트도 진한 회색으로
- 무채색만 사용 금지 — 반드시 컬러 있는 point가 필요
### 다크모드 전략
Dark clay: 배경을 짙은 남색·보라로. 점토 요소 색상은 밝게 유지. 전체 분위기는 여전히 귀여워야 함
### 대비 요구사항
밝은 배경 위 밝은 텍스트 위험 — 텍스트 색상은 충분히 어둡게
## 타이포그래피 가이드
- **폰트 성격**: 둥글고 친근한 기하학 산세리프. 귀엽고 가벼운 느낌
- **권장 폰트 수**: 최대 2개
- **타입 스케일**: 1.25 (Major Third) — 귀엽고 균형 잡힌 리듬
### 타이포그래피 제약
- 날카롭거나 딱딱한 느낌의 폰트 금지 (condensed, angular 등)
- font-weight 400~600 범위 — 너무 bold하면 clay의 부드러움 파괴
- 둥근 letter-form 폰트 권장
## 하면 안 되는 것 (안티패턴)
- flat shadow 사용 금지 — 반드시 multi-layer 3D 그림자
- 날카로운 모서리 사용 금지 — border-radius 충분히
- 어두운 배경 금지
- 딱딱하고 기업적인 분위기 금지
## 반드시 포함해야 하는 것
- 두꺼운 다중 그림자 (3D 입체감)
- 큰 border-radius (16px 이상)
- 밝고 통통한 색감
## 모션 가이드
spring 물리 기반 bounce 애니메이션. 눌리면 scale-down 후 spring back. 귀엽고 물리적인 느낌. ease-in-out보다 spring(stiffness 높게).
## 사용 사례
- 어린이·가족 앱
- 게임 UI
- 크리에이티브 툴 온보딩
- 테크 스타트업 랜딩
## 추천 프로젝트 유형
- 어린이·가족 앱
- 게임 UI
- 테크 스타트업 랜딩
- 크리에이티브 도구
## 장점
- 친근하고 귀여운 시각적 느낌
- 3D 소프트웨어 없이 CSS로도 구현 가능
- 높은 시각적 독창성
## 단점·한계
- 텍스트 가독성 주의 필요
- 진지한 기업 제품에는 어울리지 않음
- 트렌드성이 강해 빠르게 낡을 수 있음
## 실제 사용 제품·서비스
- Apple iOS 16 위젯 스타일
- Duolingo 일부 일러스트
- Notion AI 프로모션
## 접근성
밝은 배경에 밝은 색상 사용 시 대비 주의. 3D 깊이 효과는 특별한 접근성 문제 없음.
## 관련 스타일
- [neumorphism](https://ui.buildersgate.com/styles/neumorphism)
- [glassmorphism](https://ui.buildersgate.com/styles/glassmorphism)
- [aurora-design](https://ui.buildersgate.com/styles/aurora-design)
## 참고 구현 예시 (디자인 토큰)
> 아래 토큰은 이 스타일의 참고 구현 예시입니다. 프로젝트의 브랜드 컬러·폰트에 맞게 조정하되, 위 컬러 시스템/타이포그래피 가이드의 제약 조건을 준수하세요.
### 색상
- primary: #FF6B9D
- secondary: #C9A0FF
- accent: #FFD93D
- background: #F5F5F5
- surface: #FFFFFF
- text: #2D3748
- textSecondary: #718096
- border: rgba(0,0,0,0.1)
### 헤더
- background: linear-gradient(135deg, #FF6B9D 0%, #C9A0FF 100%)
- textColor: #FFFFFF
- accentColor: #FFD93D
### 타이포그래피
- fontFamily: Nunito, 'Noto Sans KR', sans-serif
- headingWeight: 700
- bodyWeight: 400
- letterSpacing: 0em
### 스페이싱
- unit: 8px
- scale: 1.2
### 그림자 (Shadows)
- sm: 0 4px 8px rgba(0,0,0,0.1), inset 0 -2px 4px rgba(0,0,0,0.1)
- md: 0 8px 16px rgba(0,0,0,0.15), inset 0 -4px 8px rgba(0,0,0,0.1)
- lg: 0 16px 32px rgba(0,0,0,0.2), inset 0 -8px 16px rgba(0,0,0,0.15)
- xl: 0 24px 48px rgba(0,0,0,0.25), inset 0 -12px 24px rgba(0,0,0,0.2)
### Border Radius
- none: 0
- sm: 16px
- md: 24px
- lg: 40px
- full: 9999px
### 테두리 (Borders)
- width: 0px
- style: none
- color: transparent
### 이펙트
- blur: 0px
- opacity: 1
- transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1)
### 애니메이션
- duration: 400ms
- easing: cubic-bezier(0.34, 1.56, 0.64, 1)
### 컴포넌트 토큰
- 버튼: shape=pill / hoverEffect=bounce / textTransform=none
- 카드: style=clay / hoverEffect=bounce
- 인풋: style=clay / focusEffect=ring
- 배지: shape=pill / style=solid
- 아이콘: package=lucide / strokeWidth=2 / defaultSize=24
### 레이아웃
- containerStyle: boxed
- sectionSpacing: spacious
### 특수 효과
- glassmorphism: false
- gradientText: false
- animatedBackground: false
- scanlines: false
- noise: false
## 자주 묻는 질문 (FAQ)
### Q: Claymorphism이란 무엇인가요?
A: 점토나 플라스틱 같은 질감을 디지털로 재현한 3D 스타일입니다. 2021년경 피그마 커뮤니티와 Dribbble에서 급부상. 3D 렌더링 도구(Blender 등)의 대중화와 맞물려 확산.
### Q: Claymorphism의 핵심 디자인 원칙은 무엇인가요?
A: Claymorphism의 핵심 원칙은 촉감, 플레이풀함, 친근함입니다.
### Q: Claymorphism은 어떤 프로젝트에 적합한가요?
A: Claymorphism은 어린이·가족 앱, 게임 UI, 크리에이티브 툴 온보딩, 테크 스타트업 랜딩, 어린이·가족 앱, 게임 UI, 테크 스타트업 랜딩, 크리에이티브 도구 등의 프로젝트에 적합합니다.
### Q: Claymorphism의 장단점은 무엇인가요?
A: 장점으로는 친근하고 귀여운 시각적 느낌, 3D 소프트웨어 없이 CSS로도 구현 가능, 높은 시각적 독창성이 있습니다. 단점으로는 텍스트 가독성 주의 필요, 진지한 기업 제품에는 어울리지 않음, 트렌드성이 강해 빠르게 낡을 수 있음이 있습니다.
### Q: Claymorphism에서 색상은 어떻게 사용하나요?
A: 밝고 채도 있는 파스텔+흰색 기반. 점토 장난감처럼 부드럽고 통통 튀는 색감 색상 역할은 primary: 채도 있는 파스텔 — 하늘색·분홍·라임·코럴 등 밝고 귀여운 색, background: 흰색 또는 매우 연한 그레이, surface: primary보다 더 연한 버전 또는 흰색입니다. 주의사항: 어두운 배경 사용 금지 — 점토 장난감은 밝은 환경이 기본, 순수 검정 사용 금지 — 텍스트도 진한 회색으로.
### Q: Claymorphism에 어울리는 폰트 스타일은 무엇인가요?
A: Claymorphism에는 둥글고 친근한 기하학 산세리프. 귀엽고 가벼운 느낌 폰트가 적합합니다. 최대 2개 폰트 패밀리 사용을 권장합니다. 제약 사항: 날카롭거나 딱딱한 느낌의 폰트 금지 (condensed, angular 등), font-weight 400~600 범위 — 너무 bold하면 clay의 부드러움 파괴.
### Q: Claymorphism 디자인에서 하면 안 되는 것은 무엇인가요?
A: Claymorphism에서 피해야 할 것: flat shadow 사용 금지 — 반드시 multi-layer 3D 그림자, 날카로운 모서리 사용 금지 — border-radius 충분히, 어두운 배경 금지, 딱딱하고 기업적인 분위기 금지.
### Q: Claymorphism을 사용하는 실제 서비스나 제품은 무엇이 있나요?
A: Claymorphism을 적용한 대표적인 제품·서비스로는 Apple iOS 16 위젯 스타일, Duolingo 일부 일러스트, Notion AI 프로모션 등이 있습니다.
## API 엔드포인트
- 스타일 상세: https://ui.buildersgate.com/api/styles?id=claymorphism
- 디자인 토큰: https://ui.buildersgate.com/api/themes?id=claymorphism&merged=true
Claymorphism은 2021년 등장한 3D 스타일로, 점토나 플라스틱 같은 질감을 디지털로 재현합니다. 밝은 색상과 부드러운 그림자, 풍선 같은 형태가 특징입니다.
친근함플레이풀촉감
자주 묻는 질문
Claymorphism이란 무엇인가요?
점토나 플라스틱 같은 질감을 디지털로 재현한 3D 스타일입니다. 2021년경 피그마 커뮤니티와 Dribbble에서 급부상. 3D 렌더링 도구(Blender 등)의 대중화와 맞물려 확산.
Claymorphism의 핵심 디자인 원칙은 무엇인가요?
Claymorphism의 핵심 원칙은 촉감, 플레이풀함, 친근함입니다.
Claymorphism은 어떤 프로젝트에 적합한가요?
Claymorphism은 어린이·가족 앱, 게임 UI, 크리에이티브 툴 온보딩, 테크 스타트업 랜딩, 어린이·가족 앱, 게임 UI, 테크 스타트업 랜딩, 크리에이티브 도구 등의 프로젝트에 적합합니다.
Claymorphism의 장단점은 무엇인가요?
장점으로는 친근하고 귀여운 시각적 느낌, 3D 소프트웨어 없이 CSS로도 구현 가능, 높은 시각적 독창성이 있습니다. 단점으로는 텍스트 가독성 주의 필요, 진지한 기업 제품에는 어울리지 않음, 트렌드성이 강해 빠르게 낡을 수 있음이 있습니다.
Claymorphism에서 색상은 어떻게 사용하나요?
밝고 채도 있는 파스텔+흰색 기반. 점토 장난감처럼 부드럽고 통통 튀는 색감 색상 역할은 primary: 채도 있는 파스텔 — 하늘색·분홍·라임·코럴 등 밝고 귀여운 색, background: 흰색 또는 매우 연한 그레이, surface: primary보다 더 연한 버전 또는 흰색입니다. 주의사항: 어두운 배경 사용 금지 — 점토 장난감은 밝은 환경이 기본, 순수 검정 사용 금지 — 텍스트도 진한 회색으로.
Claymorphism에 어울리는 폰트 스타일은 무엇인가요?
Claymorphism에는 둥글고 친근한 기하학 산세리프. 귀엽고 가벼운 느낌 폰트가 적합합니다. 최대 2개 폰트 패밀리 사용을 권장합니다. 제약 사항: 날카롭거나 딱딱한 느낌의 폰트 금지 (condensed, angular 등), font-weight 400~600 범위 — 너무 bold하면 clay의 부드러움 파괴.
Claymorphism 디자인에서 하면 안 되는 것은 무엇인가요?
Claymorphism에서 피해야 할 것: flat shadow 사용 금지 — 반드시 multi-layer 3D 그림자, 날카로운 모서리 사용 금지 — border-radius 충분히, 어두운 배경 금지, 딱딱하고 기업적인 분위기 금지.
Claymorphism을 사용하는 실제 서비스나 제품은 무엇이 있나요?
Claymorphism을 적용한 대표적인 제품·서비스로는 Apple iOS 16 위젯 스타일, Duolingo 일부 일러스트, Notion AI 프로모션 등이 있습니다.