# Claymorphism — 디자인 스타일 가이드
## 기본 정보
- **ID**: claymorphism
- **카테고리**: design-style
- **연도**: 2021
## 설명
점토나 플라스틱 같은 질감을 디지털로 재현한 3D 스타일입니다.
## 역사·배경
2021년경 피그마 커뮤니티와 Dribbble에서 급부상. 3D 렌더링 도구(Blender 등)의 대중화와 맞물려 확산.
## 핵심 원칙
- 촉감
- 플레이풀함
- 친근함
## 주요 특징
- 부드러운 3D 형태
- 풍선같은 느낌
- 부드러운 그림자
- 밝고 화사한 색상
- 플레이풀한 분위기
## 사용 사례
- 어린이·가족 앱
- 게임 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
## API 엔드포인트
- 스타일 상세: https://ui.buildersgate.com/api/styles?id=claymorphism
- 디자인 토큰: https://ui.buildersgate.com/api/themes?id=claymorphism&merged=true
Claymorphism
점토나 플라스틱 같은 질감을 디지털로 재현한 3D 스타일입니다.
2021년경 피그마 커뮤니티와 Dribbble에서 급부상. 3D 렌더링 도구(Blender 등)의 대중화와 맞물려 확산.
주요 특징
- 부드러운 3D 형태
- 풍선같은 느낌
- 부드러운 그림자
- 밝고 화사한 색상
- 플레이풀한 분위기
장단점
장점
- +친근하고 귀여운 시각적 느낌
- +3D 소프트웨어 없이 CSS로도 구현 가능
- +높은 시각적 독창성
단점 / 한계
- −텍스트 가독성 주의 필요
- −진지한 기업 제품에는 어울리지 않음
- −트렌드성이 강해 빠르게 낡을 수 있음
적합한 사용처
사용 사례
- 어린이·가족 앱
- 게임 UI
- 크리에이티브 툴 온보딩
- 테크 스타트업 랜딩
이런 프로젝트에 추천
어린이·가족 앱게임 UI테크 스타트업 랜딩크리에이티브 도구
접근성밝은 배경에 밝은 색상 사용 시 대비 주의. 3D 깊이 효과는 특별한 접근성 문제 없음.
실제 사용 예시
Apple iOS 16 위젯 스타일Duolingo 일부 일러스트Notion AI 프로모션
UI 컴포넌트 예제
이 디자인 스타일의 특징을 반영한 실제 UI 컴포넌트들입니다.
Clay Buttons
부드러운 3D 점토 느낌의 버튼
Clay Cards
3D 돌출 효과가 있는 카드
🎨
Playful Design
점토나 플라스틱 같은 질감으로 친근하고 플레이풀한 느낌을 줍니다.
✨
3D Effect
부드러운 그림자로 3D 돌출 효과를 만듭니다.
Clay Icon Buttons
아이콘 버튼에 적용된 클레이모피즘
Clay Input Fields
입력 필드에 적용된 클레이 효과
Clay Typography
둥글고 친근한 클레이모피즘 타이포그래피 스타일
Claymorphism
점토처럼 부드럽고 둥글게
플레이풀하고 친근한 디자인
Claymorphism은 2021년 등장한 3D 스타일로, 점토나 플라스틱 같은 질감을 디지털로 재현합니다. 밝은 색상과 부드러운 그림자, 풍선 같은 형태가 특징입니다.
친근함플레이풀촉감