# Neumorphism

> 소프트 UI라고도 불리며, 요소가 배경에서 부드럽게 돌출된 듯한 효과를 만듭니다.

- 층: 스타일 (디자인 스타일)
- ID: neumorphism
- 연도: 2019
- 무드 태그: 미니멀, 따뜻한
- 출처: 빌더스게이트 디자인 피팅룸 — https://ui.buildersgate.com/styles/neumorphism

## 정의

소프트 UI라고도 불리며, 요소가 배경에서 부드럽게 돌출된 듯한 효과를 만듭니다.

## 역사·배경

2019년 말 Alexander Plyuto의 Dribbble 포스트에서 시작. 스큐어모피즘과 플랫 디자인의 중간 형태로 주목받았으나 접근성 문제로 실서비스 채택은 제한적.

## 주요 특징

- 소프트 섀도우
- 단색 배경
- 부드러운 엠보싱
- 최소한의 대비
- 3D 착시 효과

## 핵심 원칙

- 부드러움
- 통일성
- 미니멀리즘

## 컬러 시스템

배경색과 거의 동일한 단색 기반. 명도만 미세하게 조절해서 입체감을 만드는 모노크로매틱 시스템

### 색상 역할

- 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 기본값 유지 또는 약간 넓게

## 설계 제약

### 하면 안 되는 것

- flat shadow 또는 drop-shadow 사용 금지 — 반드시 양방향 이중 그림자(box-shadow 2개)
- 어두운 배경 사용 금지 (라이트 모드 기준) — 소프트 임베싱 효과가 사라짐
- 여러 색상 혼합 금지 — 단색 배경 기반 유지
- border로 요소 구분 금지 — 그림자만으로 구분해야 함
- 고채도·비비드 컬러 사용 금지

### 반드시 포함할 것

- 이중 box-shadow (밝은 방향 + 어두운 방향 동시에)
- 배경과 거의 동일한 색상의 surface
- 인터랙션 시 그림자 방향 반전 (누른 느낌)

### 모션 가이드

버튼 클릭 시 외부 그림자→내부 그림자(inset) 전환으로 눌리는 느낌 표현. transition 100~150ms linear. 과도한 애니메이션 금지.

## 무드 프로파일

4축 각각 −2 ~ +2 정수. 취향 테스트(/fit)와 비교 페이지가 같은 좌표를 쓴다.

- 밀도: -1 (여백 −2 ↔ +2 빽빽)
- 온도감: +1 (차가움 −2 ↔ +2 따뜻함)
- 시대감: 0 (레트로 −2 ↔ +2 미래적)
- 격식: 0 (자유분방 −2 ↔ +2 격식)

## 사용 사례

- 대시보드 카드
- 앱 아이콘
- 설정 UI
- 포트폴리오·쇼케이스

## 추천 프로젝트 유형

- 포트폴리오·쇼케이스
- 앱 아이콘 디자인
- 인터랙티브 데모
- 컨셉 프로토타입

## 장단점

### 장점

- 독특하고 고급스러운 입체감
- 단색 배경에서 강력한 시각적 효과
- CSS box-shadow만으로 구현 가능

### 단점·한계

- 낮은 색상 대비로 접근성 최악 수준
- 실제 서비스에 쓰기엔 가독성 문제
- 어두운 배경이나 다양한 색상에 적용 어려움

## 실제 사용 제품·서비스

- 일부 계산기·날씨 앱 스킨
- Dribbble 컨셉 디자인

## 접근성

색상 대비가 매우 낮아 시력 약자·저시력 사용자에게 심각한 문제. 실서비스 적용 시 반드시 별도 접근성 검증 필요.

## 자주 묻는 질문

### Q1. Neumorphism이란 무엇인가요?

소프트 UI라고도 불리며, 요소가 배경에서 부드럽게 돌출된 듯한 효과를 만듭니다. 2019년 말 Alexander Plyuto의 Dribbble 포스트에서 시작. 스큐어모피즘과 플랫 디자인의 중간 형태로 주목받았으나 접근성 문제로 실서비스 채택은 제한적.

### Q2. Neumorphism의 핵심 디자인 원칙은 무엇인가요?

Neumorphism의 핵심 원칙은 부드러움, 통일성, 미니멀리즘입니다.

### Q3. Neumorphism은 어떤 프로젝트에 적합한가요?

Neumorphism은 대시보드 카드, 앱 아이콘, 설정 UI, 포트폴리오·쇼케이스, 포트폴리오·쇼케이스, 앱 아이콘 디자인, 인터랙티브 데모, 컨셉 프로토타입 등의 프로젝트에 적합합니다.

### Q4. Neumorphism의 장단점은 무엇인가요?

장점으로는 독특하고 고급스러운 입체감, 단색 배경에서 강력한 시각적 효과, CSS box-shadow만으로 구현 가능이 있습니다. 단점으로는 낮은 색상 대비로 접근성 최악 수준, 실제 서비스에 쓰기엔 가독성 문제, 어두운 배경이나 다양한 색상에 적용 어려움이 있습니다.

### Q5. Neumorphism에서 색상은 어떻게 사용하나요?

배경색과 거의 동일한 단색 기반. 명도만 미세하게 조절해서 입체감을 만드는 모노크로매틱 시스템 색상 역할은 background: 시스템 전체 기준색 — 중간 명도의 단색 (너무 밝거나 어둡지 않게), surface: background와 동일하거나 ±5% 명도 차이 이내, shadow-light: background보다 밝은 그림자 (HSL 명도 +15~20)입니다. 주의사항: 배경과 surface 명도 차이 5% 이내 — 그 이상이면 뉴모피즘 아님, 그라데이션·패턴·이미지 배경 사용 금지 — 단색만 허용.

### Q6. Neumorphism에 어울리는 폰트 스타일은 무엇인가요?

Neumorphism에는 둥글고 부드러운 기하학 산세리프. 뉴모피즘의 소프트한 입체감과 조화 폰트가 적합합니다. 최대 1개 폰트 패밀리 사용을 권장합니다. 제약 사항: 날카로운 느낌의 condensed 폰트 사용 금지, font-weight 300~500 권장 — 너무 굵으면 soft UI 느낌 파괴.

### Q7. Neumorphism 디자인에서 하면 안 되는 것은 무엇인가요?

Neumorphism에서 피해야 할 것: flat shadow 또는 drop-shadow 사용 금지 — 반드시 양방향 이중 그림자(box-shadow 2개), 어두운 배경 사용 금지 (라이트 모드 기준) — 소프트 임베싱 효과가 사라짐, 여러 색상 혼합 금지 — 단색 배경 기반 유지, border로 요소 구분 금지 — 그림자만으로 구분해야 함, 고채도·비비드 컬러 사용 금지.

### Q8. Neumorphism을 사용하는 실제 서비스나 제품은 무엇이 있나요?

Neumorphism을 적용한 대표적인 제품·서비스로는 일부 계산기·날씨 앱 스킨, Dribbble 컨셉 디자인 등이 있습니다.

## 참고 디자인 토큰

> 아래 토큰은 이 스타일의 참고 구현 예시다. 프로젝트의 브랜드 컬러·폰트에 맞게 조정하되, 위 컬러 시스템·타이포그래피·설계 제약은 지킨다.

### 색상

- primary: #E0E5EC
- secondary: #D1D9E6
- accent: #A0B4C8
- background: #E0E5EC
- surface: #E0E5EC
- text: #4A5568
- textSecondary: #718096
- border: #E0E5EC

### 타이포그래피

- fontFamily: Poppins, 'Noto Sans KR', sans-serif
- headingWeight: 600
- bodyWeight: 400
- letterSpacing: 0.01em

### 간격·반경·그림자·테두리

- spacing: unit 8px × scale 1.2
- borderRadius: sm 12px / md 20px / lg 32px / full 9999px
- shadow sm: 4px 4px 8px #b8bec5, -4px -4px 8px #ffffff
- shadow md: 9px 9px 16px #b8bec5, -9px -9px 16px #ffffff
- shadow lg: 15px 15px 30px #b8bec5, -15px -15px 30px #ffffff
- border: 0px none transparent

### 컴포넌트 형태

- button: pill / hover inset / text none
- card: neumorphic / hover inset
- input: neumorphic / focus inset
- badge: pill / subtle
- icon: lucide / stroke 1.5 / size 24px
- layout: boxed / section spacious
- animation: 300ms ease

## 관련 링크

### 관련 스타일

- [Glassmorphism](https://ui.buildersgate.com/styles/glassmorphism)
- [Claymorphism](https://ui.buildersgate.com/styles/claymorphism)
- [Minimalism](https://ui.buildersgate.com/styles/minimalism)

### 데모 (같은 화면, 이 스타일로)

- [브랜드 랜딩 데모](https://ui.buildersgate.com/demo/brand/neumorphism)
- [SaaS 대시보드 데모](https://ui.buildersgate.com/demo/saas/neumorphism)
- [커머스 데모](https://ui.buildersgate.com/demo/commerce/neumorphism)

### 비교

- [Neumorphism vs Claymorphism](https://ui.buildersgate.com/compare/claymorphism-vs-neumorphism)
- [Neumorphism vs Glassmorphism](https://ui.buildersgate.com/compare/glassmorphism-vs-neumorphism)
- [Neumorphism vs Minimalism](https://ui.buildersgate.com/compare/minimalism-vs-neumorphism)
- [Neumorphism vs Skeuomorphism](https://ui.buildersgate.com/compare/neumorphism-vs-skeuomorphism)

### 쓰임새별 추천

- [포트폴리오](https://ui.buildersgate.com/for/portfolio)

---

HTML 버전: https://ui.buildersgate.com/styles/neumorphism

이 문서는 https://ui.buildersgate.com/styles/neumorphism.md 로 제공됩니다. 전체 목록은 https://ui.buildersgate.com/llms.txt 를 참고하세요.