표본
이 스타일의 기본형
버튼·입력·배지를 이 스타일의 규칙 그대로 그린 카드입니다.
Claymorphism
점토나 플라스틱 같은 질감을 디지털로 재현한 3D 스타일입니다.
- YEAR
- 2021
- MOOD
- 따뜻한 · 친근·발랄
- PRIMARY#FF6B9D
- SECONDARY#C9A0FF
- ACCENT#FFD93D
- BG#F5F5F5
- SURFACE#FFFFFF
취급 표시
- 크게 둥근 모서리
- 테두리 없음
- 보통 아이콘 선
표본
이 스타일의 규칙을 그대로 적용한 UI 컴포넌트입니다.
버튼
입력과 토글
배지
중립강조긍정
탭
스탯과 차트
2,480주간 방문증가+12%
1.8%이탈률감소-0.4%p
여덟 달의 지표 흐름을 담은 표본 차트입니다.
아바타와 아이콘
김서이하박지윤채+1
카드
기본 카드
서피스 토큰이 그대로 정하는 기본 상태의 카드입니다.
강조 카드
강조 상태에서 서피스가 어떻게 달라지는지 보여줍니다.
무드와 이웃
밀도여백빽빽여백에서 빽빽 사이 5단계 중 3단계
온도감차가움따뜻함차가움에서 따뜻함 사이 5단계 중 5단계
시대감레트로미래적레트로에서 미래적 사이 5단계 중 3단계
격식자유분방격식자유분방에서 격식 사이 5단계 중 2단계
- 따뜻한
- 친근·발랄
어디에 쓰나
실제로 쓰는 곳
- Apple iOS 16 위젯 스타일
- Duolingo 일부 일러스트
- Notion AI 프로모션
사용 사례
- 어린이·가족 앱
- 게임 UI
- 크리에이티브 툴 온보딩
- 테크 스타트업 랜딩
이런 프로젝트에 맞습니다
- 어린이·가족 앱
- 게임 UI
- 테크 스타트업 랜딩
- 크리에이티브 도구
더 읽기
원칙·제약·역사처럼 적용할 때 필요한 내용입니다. 필요한 항목만 펼쳐 보세요.
역사와 배경
2021년경 피그마 커뮤니티와 Dribbble에서 급부상. 3D 렌더링 도구(Blender 등)의 대중화와 맞물려 확산.
핵심 원칙
- 촉감
- 플레이풀함
- 친근함
주요 특징
- 부드러운 3D 형태
- 풍선같은 느낌
- 부드러운 그림자
- 밝고 화사한 색상
- 플레이풀한 분위기
장점과 한계
장점
- 친근하고 귀여운 시각적 느낌
- 3D 소프트웨어 없이 CSS로도 구현 가능
- 높은 시각적 독창성
한계
- 텍스트 가독성 주의 필요
- 진지한 기업 제품에는 어울리지 않음
- 트렌드성이 강해 빠르게 낡을 수 있음
컬러 시스템
밝고 채도 있는 파스텔+흰색 기반. 점토 장난감처럼 부드럽고 통통 튀는 색감
색의 역할
- 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 폰트 권장
설계 제약
반드시 포함
- 두꺼운 다중 그림자 (3D 입체감)
- 큰 border-radius (16px 이상)
- 밝고 통통한 색감
하지 말 것
- flat shadow 사용 금지 — 반드시 multi-layer 3D 그림자
- 날카로운 모서리 사용 금지 — border-radius 충분히
- 어두운 배경 금지
- 딱딱하고 기업적인 분위기 금지
모션 — spring 물리 기반 bounce 애니메이션. 눌리면 scale-down 후 spring back. 귀엽고 물리적인 느낌. ease-in-out보다 spring(stiffness 높게).
접근성
밝은 배경에 밝은 색상 사용 시 대비 주의. 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 프로모션 등이 있습니다.