사흘 이내 로스팅
주문이 모이면 그때 볶습니다. 미리 볶아 쌓아두지 않습니다.
Claymorphism vs Neumorphism
커피 구독 브랜드 LUMA 의 같은 랜딩 한 페이지를 두 스타일 규칙으로 각각 다시 지어 나란히 놓았습니다. 콘텐츠는 같고, 규칙만 다릅니다.
같은 씬, 두 벌
무드 대비
4축 좌표(-2 ~ +2)를 같은 눈금 위에 겹쳐 놓았습니다. 축은 정규화하지 않습니다 — 두 점이 붙어 있으면 실제로 가까운 것입니다.
무드 4축 수치(−2에서 +2 사이): 밀도 — Claymorphism 0, Neumorphism -1. 온도감 — Claymorphism 2, Neumorphism 1. 시대감 — Claymorphism 0, Neumorphism 0. 격식 — Claymorphism -1, Neumorphism 0.
나란히 놓고 보기
Claymorphism
- YEAR
- 2021
- MOOD
- 따뜻한 · 친근·발랄
Neumorphism
- YEAR
- 2019
- MOOD
- 미니멀 · 따뜻한
주요 특징
Claymorphism
- 부드러운 3D 형태
- 풍선같은 느낌
- 부드러운 그림자
- 밝고 화사한 색상
- 플레이풀한 분위기
Neumorphism
- 소프트 섀도우
- 단색 배경
- 부드러운 엠보싱
- 최소한의 대비
- 3D 착시 효과
장점과 한계
Claymorphism
장점
- 친근하고 귀여운 시각적 느낌
- 3D 소프트웨어 없이 CSS로도 구현 가능
- 높은 시각적 독창성
한계
- 텍스트 가독성 주의 필요
- 진지한 기업 제품에는 어울리지 않음
- 트렌드성이 강해 빠르게 낡을 수 있음
Neumorphism
장점
- 독특하고 고급스러운 입체감
- 단색 배경에서 강력한 시각적 효과
- CSS box-shadow만으로 구현 가능
한계
- 낮은 색상 대비로 접근성 최악 수준
- 실제 서비스에 쓰기엔 가독성 문제
- 어두운 배경이나 다양한 색상에 적용 어려움
역사와 배경
Claymorphism
2021년경 피그마 커뮤니티와 Dribbble에서 급부상. 3D 렌더링 도구(Blender 등)의 대중화와 맞물려 확산.
Neumorphism
2019년 말 Alexander Plyuto의 Dribbble 포스트에서 시작. 스큐어모피즘과 플랫 디자인의 중간 형태로 주목받았으나 접근성 문제로 실서비스 채택은 제한적.
접근성
Claymorphism
밝은 배경에 밝은 색상 사용 시 대비 주의. 3D 깊이 효과는 특별한 접근성 문제 없음.
Neumorphism
색상 대비가 매우 낮아 시력 약자·저시력 사용자에게 심각한 문제. 실서비스 적용 시 반드시 별도 접근성 검증 필요.
자주 묻는 질문
Claymorphism vs Neumorphism, 무엇이 다른가요?
Claymorphism — 점토나 플라스틱 같은 질감을 디지털로 재현한 3D 스타일입니다. Neumorphism — 소프트 UI라고도 불리며, 요소가 배경에서 부드럽게 돌출된 듯한 효과를 만듭니다. 무드 좌표에서 가장 벌어지는 축은 밀도입니다 — Claymorphism 쪽은 중간 쪽에, Neumorphism 쪽은 여백 쪽에 서 있습니다.
언제 Claymorphism 쪽, 언제 Neumorphism 쪽을 골라야 하나요?
어린이·가족 앱 · 게임 UI · 테크 스타트업 랜딩 같은 화면이라면 Claymorphism 쪽이 오래 버팁니다. 반대로 포트폴리오·쇼케이스 · 앱 아이콘 디자인 · 인터랙티브 데모 쪽 그림이라면 Neumorphism 쪽으로 기웁니다. 둘 다 걸린다면 같은 씬을 입힌 두 데모를 나란히 보고 결정하는 편이 빠릅니다.
Claymorphism vs Neumorphism, 장단점은 어떻게 갈리나요?
Claymorphism 쪽 — 강점은 친근하고 귀여운 시각적 느낌 · 3D 소프트웨어 없이 CSS로도 구현 가능, 짚고 갈 한계는 텍스트 가독성 주의 필요 · 진지한 기업 제품에는 어울리지 않음입니다. Neumorphism 쪽 — 강점은 독특하고 고급스러운 입체감 · 단색 배경에서 강력한 시각적 효과, 짚고 갈 한계는 낮은 색상 대비로 접근성 최악 수준 · 실제 서비스에 쓰기엔 가독성 문제입니다.