표본
이 스타일의 기본형
버튼·입력·배지를 이 스타일의 규칙 그대로 그린 카드입니다.
Neumorphism
소프트 UI라고도 불리며, 요소가 배경에서 부드럽게 돌출된 듯한 효과를 만듭니다.
- YEAR
- 2019
- MOOD
- 미니멀 · 따뜻한
- PRIMARY#E0E5EC
- SECONDARY#D1D9E6
- ACCENT#A0B4C8
- BG#E0E5EC
- SURFACE#E0E5EC
취급 표시
- 크게 둥근 모서리
- 테두리 없음
- 가는 아이콘 선
표본
이 스타일의 규칙을 그대로 적용한 UI 컴포넌트입니다.
버튼
입력과 토글
배지
중립강조긍정
탭
스탯과 차트
2,480주간 방문증가+12%
1.8%이탈률감소-0.4%p
여덟 달의 지표 흐름을 담은 표본 차트입니다.
아바타와 아이콘
김서이하박지윤채+1
카드
기본 카드
서피스 토큰이 그대로 정하는 기본 상태의 카드입니다.
강조 카드
강조 상태에서 서피스가 어떻게 달라지는지 보여줍니다.
무드와 이웃
밀도여백빽빽여백에서 빽빽 사이 5단계 중 2단계
온도감차가움따뜻함차가움에서 따뜻함 사이 5단계 중 4단계
시대감레트로미래적레트로에서 미래적 사이 5단계 중 3단계
격식자유분방격식자유분방에서 격식 사이 5단계 중 3단계
- 미니멀
- 따뜻한
어디에 쓰나
실제로 쓰는 곳
- 일부 계산기·날씨 앱 스킨
- Dribbble 컨셉 디자인
사용 사례
- 대시보드 카드
- 앱 아이콘
- 설정 UI
- 포트폴리오·쇼케이스
이런 프로젝트에 맞습니다
- 포트폴리오·쇼케이스
- 앱 아이콘 디자인
- 인터랙티브 데모
- 컨셉 프로토타입
이런 프로젝트에 권합니다
더 읽기
원칙·제약·역사처럼 적용할 때 필요한 내용입니다. 필요한 항목만 펼쳐 보세요.
역사와 배경
2019년 말 Alexander Plyuto의 Dribbble 포스트에서 시작. 스큐어모피즘과 플랫 디자인의 중간 형태로 주목받았으나 접근성 문제로 실서비스 채택은 제한적.
핵심 원칙
- 부드러움
- 통일성
- 미니멀리즘
주요 특징
- 소프트 섀도우
- 단색 배경
- 부드러운 엠보싱
- 최소한의 대비
- 3D 착시 효과
장점과 한계
장점
- 독특하고 고급스러운 입체감
- 단색 배경에서 강력한 시각적 효과
- CSS box-shadow만으로 구현 가능
한계
- 낮은 색상 대비로 접근성 최악 수준
- 실제 서비스에 쓰기엔 가독성 문제
- 어두운 배경이나 다양한 색상에 적용 어려움
컬러 시스템
배경색과 거의 동일한 단색 기반. 명도만 미세하게 조절해서 입체감을 만드는 모노크로매틱 시스템
색의 역할
- background: 시스템 전체 기준색 — 중간 명도의 단색 (너무 밝거나 어둡지 않게)
- surface: background와 동일하거나 ±5% 명도 차이 이내
- shadow-light: background보다 밝은 그림자 (HSL 명도 +15~20)
- shadow-dark: background보다 어두운 그림자 (HSL 명도 -15~20)
- text: background 대비 충분한 색 — 이 스타일의 유일한 대비 확보 포인트
- accent: 선택적으로 단 하나의 강조색 (인터랙션 상태에만 사용)
제약
- 배경과 surface 명도 차이 5% 이내 — 그 이상이면 뉴모피즘 아님
- 그라데이션·패턴·이미지 배경 사용 금지 — 단색만 허용
- 강조색(accent)은 최소화 — 없어도 됨, 있다면 인터랙션 상태에만
- 어두운 배경(HSL L<30)에서는 shadow 효과가 약해지므로 주의
- 채도 높은 색상 배경 사용 금지 — 흰색, 회색, 베이지, 파스텔만 권장
다크모드 — background를 어두운 회색(HSL L 20~30)으로 변경. shadow-light와 shadow-dark 방향 유지하되 명도 차이를 light mode보다 약하게 (±10 수준). 텍스트 색 반전
명도 대비 — 구조적으로 대비 낮음 — 텍스트만큼은 WCAG AA 4.5:1 필수 확보. 색상 외 형태·크기로 상태 구분 병행
타이포그래피
둥글고 부드러운 기하학 산세리프. 뉴모피즘의 소프트한 입체감과 조화
글꼴은 최대 1종 · 스케일 비율 1.2~1.25 (Minor Third ~ Major Third) — 과도한 크기 차이는 소프트한 느낌을 해침
- 날카로운 느낌의 condensed 폰트 사용 금지
- font-weight 300~500 권장 — 너무 굵으면 soft UI 느낌 파괴
- 텍스트 색이 background와 너무 가까우면 안 됨 — 대비 최우선
- letter-spacing 기본값 유지 또는 약간 넓게
설계 제약
반드시 포함
- 이중 box-shadow (밝은 방향 + 어두운 방향 동시에)
- 배경과 거의 동일한 색상의 surface
- 인터랙션 시 그림자 방향 반전 (누른 느낌)
하지 말 것
- flat shadow 또는 drop-shadow 사용 금지 — 반드시 양방향 이중 그림자(box-shadow 2개)
- 어두운 배경 사용 금지 (라이트 모드 기준) — 소프트 임베싱 효과가 사라짐
- 여러 색상 혼합 금지 — 단색 배경 기반 유지
- border로 요소 구분 금지 — 그림자만으로 구분해야 함
- 고채도·비비드 컬러 사용 금지
모션 — 버튼 클릭 시 외부 그림자→내부 그림자(inset) 전환으로 눌리는 느낌 표현. transition 100~150ms linear. 과도한 애니메이션 금지.
접근성
색상 대비가 매우 낮아 시력 약자·저시력 사용자에게 심각한 문제. 실서비스 적용 시 반드시 별도 접근성 검증 필요.
자주 묻는 질문
Neumorphism이란 무엇인가요?
소프트 UI라고도 불리며, 요소가 배경에서 부드럽게 돌출된 듯한 효과를 만듭니다. 2019년 말 Alexander Plyuto의 Dribbble 포스트에서 시작. 스큐어모피즘과 플랫 디자인의 중간 형태로 주목받았으나 접근성 문제로 실서비스 채택은 제한적.
Neumorphism의 핵심 디자인 원칙은 무엇인가요?
Neumorphism의 핵심 원칙은 부드러움, 통일성, 미니멀리즘입니다.
Neumorphism은 어떤 프로젝트에 적합한가요?
Neumorphism은 대시보드 카드, 앱 아이콘, 설정 UI, 포트폴리오·쇼케이스, 포트폴리오·쇼케이스, 앱 아이콘 디자인, 인터랙티브 데모, 컨셉 프로토타입 등의 프로젝트에 적합합니다.
Neumorphism의 장단점은 무엇인가요?
장점으로는 독특하고 고급스러운 입체감, 단색 배경에서 강력한 시각적 효과, CSS box-shadow만으로 구현 가능이 있습니다. 단점으로는 낮은 색상 대비로 접근성 최악 수준, 실제 서비스에 쓰기엔 가독성 문제, 어두운 배경이나 다양한 색상에 적용 어려움이 있습니다.
Neumorphism에서 색상은 어떻게 사용하나요?
배경색과 거의 동일한 단색 기반. 명도만 미세하게 조절해서 입체감을 만드는 모노크로매틱 시스템 색상 역할은 background: 시스템 전체 기준색 — 중간 명도의 단색 (너무 밝거나 어둡지 않게), surface: background와 동일하거나 ±5% 명도 차이 이내, shadow-light: background보다 밝은 그림자 (HSL 명도 +15~20)입니다. 주의사항: 배경과 surface 명도 차이 5% 이내 — 그 이상이면 뉴모피즘 아님, 그라데이션·패턴·이미지 배경 사용 금지 — 단색만 허용.
Neumorphism에 어울리는 폰트 스타일은 무엇인가요?
Neumorphism에는 둥글고 부드러운 기하학 산세리프. 뉴모피즘의 소프트한 입체감과 조화 폰트가 적합합니다. 최대 1개 폰트 패밀리 사용을 권장합니다. 제약 사항: 날카로운 느낌의 condensed 폰트 사용 금지, font-weight 300~500 권장 — 너무 굵으면 soft UI 느낌 파괴.
Neumorphism 디자인에서 하면 안 되는 것은 무엇인가요?
Neumorphism에서 피해야 할 것: flat shadow 또는 drop-shadow 사용 금지 — 반드시 양방향 이중 그림자(box-shadow 2개), 어두운 배경 사용 금지 (라이트 모드 기준) — 소프트 임베싱 효과가 사라짐, 여러 색상 혼합 금지 — 단색 배경 기반 유지, border로 요소 구분 금지 — 그림자만으로 구분해야 함, 고채도·비비드 컬러 사용 금지.
Neumorphism을 사용하는 실제 서비스나 제품은 무엇이 있나요?
Neumorphism을 적용한 대표적인 제품·서비스로는 일부 계산기·날씨 앱 스킨, Dribbble 컨셉 디자인 등이 있습니다.