# Neumorphism — 디자인 스타일 가이드
## 기본 정보
- **ID**: neumorphism
- **카테고리**: design-style
- **연도**: 2019
## 설명
소프트 UI라고도 불리며, 요소가 배경에서 부드럽게 돌출된 듯한 효과를 만듭니다.
## 역사·배경
2019년 말 Alexander Plyuto의 Dribbble 포스트에서 시작. 스큐어모피즘과 플랫 디자인의 중간 형태로 주목받았으나 접근성 문제로 실서비스 채택은 제한적.
## 핵심 원칙
- 부드러움
- 통일성
- 미니멀리즘
## 주요 특징
- 소프트 섀도우
- 단색 배경
- 부드러운 엠보싱
- 최소한의 대비
- 3D 착시 효과
## 사용 사례
- 대시보드 카드
- 앱 아이콘
- 설정 UI
- 포트폴리오·쇼케이스
## 추천 프로젝트 유형
- 포트폴리오·쇼케이스
- 앱 아이콘 디자인
- 인터랙티브 데모
- 컨셉 프로토타입
## 장점
- 독특하고 고급스러운 입체감
- 단색 배경에서 강력한 시각적 효과
- CSS box-shadow만으로 구현 가능
## 단점·한계
- 낮은 색상 대비로 접근성 최악 수준
- 실제 서비스에 쓰기엔 가독성 문제
- 어두운 배경이나 다양한 색상에 적용 어려움
## 실제 사용 제품·서비스
- 일부 계산기·날씨 앱 스킨
- Dribbble 컨셉 디자인
## 접근성
색상 대비가 매우 낮아 시력 약자·저시력 사용자에게 심각한 문제. 실서비스 적용 시 반드시 별도 접근성 검증 필요.
## 관련 스타일
- [glassmorphism](https://ui.buildersgate.com/styles/glassmorphism)
- [claymorphism](https://ui.buildersgate.com/styles/claymorphism)
- [minimalism](https://ui.buildersgate.com/styles/minimalism)
## 디자인 토큰
### 색상
- primary: #E0E5EC
- secondary: #D1D9E6
- accent: #A0B4C8
- background: #E0E5EC
- surface: #E0E5EC
- text: #4A5568
- textSecondary: #718096
- border: #E0E5EC
### 헤더
- background: #E0E5EC
- textColor: #4A5568
- accentColor: #A0B4C8
### 타이포그래피
- fontFamily: Poppins, 'Noto Sans KR', sans-serif
- headingWeight: 600
- bodyWeight: 400
- letterSpacing: 0.01em
### 스페이싱
- unit: 8px
- scale: 1.2
### 그림자 (Shadows)
- sm: 4px 4px 8px #b8bec5, -4px -4px 8px #ffffff
- md: 9px 9px 16px #b8bec5, -9px -9px 16px #ffffff
- lg: 15px 15px 30px #b8bec5, -15px -15px 30px #ffffff
- xl: 20px 20px 40px #b8bec5, -20px -20px 40px #ffffff
### Border Radius
- none: 0
- sm: 12px
- md: 20px
- lg: 32px
- full: 9999px
### 테두리 (Borders)
- width: 0px
- style: none
- color: transparent
### 이펙트
- blur: 0px
- opacity: 1
- transition: all 0.3s ease
### 애니메이션
- duration: 300ms
- easing: ease
### 컴포넌트 토큰
- 버튼: shape=pill / hoverEffect=inset / textTransform=none
- 카드: style=neumorphic / hoverEffect=inset
- 인풋: style=neumorphic / focusEffect=inset
- 배지: shape=pill / style=subtle
- 아이콘: package=lucide / strokeWidth=1.5 / defaultSize=24
### 레이아웃
- containerStyle: boxed
- sectionSpacing: spacious
### 특수 효과
- glassmorphism: false
- gradientText: false
- animatedBackground: false
- scanlines: false
- noise: false
## API 엔드포인트
- 스타일 상세: https://ui.buildersgate.com/api/styles?id=neumorphism
- 디자인 토큰: https://ui.buildersgate.com/api/themes?id=neumorphism&merged=true
Neumorphism
소프트 UI라고도 불리며, 요소가 배경에서 부드럽게 돌출된 듯한 효과를 만듭니다.
2019년 말 Alexander Plyuto의 Dribbble 포스트에서 시작. 스큐어모피즘과 플랫 디자인의 중간 형태로 주목받았으나 접근성 문제로 실서비스 채택은 제한적.
주요 특징
- 소프트 섀도우
- 단색 배경
- 부드러운 엠보싱
- 최소한의 대비
- 3D 착시 효과
장단점
장점
- +독특하고 고급스러운 입체감
- +단색 배경에서 강력한 시각적 효과
- +CSS box-shadow만으로 구현 가능
단점 / 한계
- −낮은 색상 대비로 접근성 최악 수준
- −실제 서비스에 쓰기엔 가독성 문제
- −어두운 배경이나 다양한 색상에 적용 어려움
적합한 사용처
사용 사례
- 대시보드 카드
- 앱 아이콘
- 설정 UI
- 포트폴리오·쇼케이스
이런 프로젝트에 추천
포트폴리오·쇼케이스앱 아이콘 디자인인터랙티브 데모컨셉 프로토타입
접근성색상 대비가 매우 낮아 시력 약자·저시력 사용자에게 심각한 문제. 실서비스 적용 시 반드시 별도 접근성 검증 필요.
실제 사용 예시
일부 계산기·날씨 앱 스킨Dribbble 컨셉 디자인
UI 컴포넌트 예제
이 디자인 스타일의 특징을 반영한 실제 UI 컴포넌트들입니다.
Soft UI Buttons
부드러운 그림자로 돌출된 듯한 버튼
Soft UI Cards
엠보싱 효과가 있는 카드
🎨
Design
부드러운 그림자로 3D 효과를 만듭니다.
💡
Innovation
배경과 같은 색상으로 통일감을 줍니다.
Neumorphic Toggle
소프트 UI 스타일의 토글 스위치
Soft UI Icon Buttons
아이콘 버튼에 적용된 뉴모피즘