# Neumorphism — 디자인 스타일 가이드 ## 기본 정보 - **ID**: neumorphism - **카테고리**: design-style - **연도**: 2019 ## 설명 소프트 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. 과도한 애니메이션 금지. ## 사용 사례 - 대시보드 카드 - 앱 아이콘 - 설정 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 ## 자주 묻는 질문 (FAQ) ### Q: Neumorphism이란 무엇인가요? A: 소프트 UI라고도 불리며, 요소가 배경에서 부드럽게 돌출된 듯한 효과를 만듭니다. 2019년 말 Alexander Plyuto의 Dribbble 포스트에서 시작. 스큐어모피즘과 플랫 디자인의 중간 형태로 주목받았으나 접근성 문제로 실서비스 채택은 제한적. ### Q: Neumorphism의 핵심 디자인 원칙은 무엇인가요? A: Neumorphism의 핵심 원칙은 부드러움, 통일성, 미니멀리즘입니다. ### Q: Neumorphism은 어떤 프로젝트에 적합한가요? A: Neumorphism은 대시보드 카드, 앱 아이콘, 설정 UI, 포트폴리오·쇼케이스, 포트폴리오·쇼케이스, 앱 아이콘 디자인, 인터랙티브 데모, 컨셉 프로토타입 등의 프로젝트에 적합합니다. ### Q: Neumorphism의 장단점은 무엇인가요? A: 장점으로는 독특하고 고급스러운 입체감, 단색 배경에서 강력한 시각적 효과, CSS box-shadow만으로 구현 가능이 있습니다. 단점으로는 낮은 색상 대비로 접근성 최악 수준, 실제 서비스에 쓰기엔 가독성 문제, 어두운 배경이나 다양한 색상에 적용 어려움이 있습니다. ### Q: Neumorphism에서 색상은 어떻게 사용하나요? A: 배경색과 거의 동일한 단색 기반. 명도만 미세하게 조절해서 입체감을 만드는 모노크로매틱 시스템 색상 역할은 background: 시스템 전체 기준색 — 중간 명도의 단색 (너무 밝거나 어둡지 않게), surface: background와 동일하거나 ±5% 명도 차이 이내, shadow-light: background보다 밝은 그림자 (HSL 명도 +15~20)입니다. 주의사항: 배경과 surface 명도 차이 5% 이내 — 그 이상이면 뉴모피즘 아님, 그라데이션·패턴·이미지 배경 사용 금지 — 단색만 허용. ### Q: Neumorphism에 어울리는 폰트 스타일은 무엇인가요? A: Neumorphism에는 둥글고 부드러운 기하학 산세리프. 뉴모피즘의 소프트한 입체감과 조화 폰트가 적합합니다. 최대 1개 폰트 패밀리 사용을 권장합니다. 제약 사항: 날카로운 느낌의 condensed 폰트 사용 금지, font-weight 300~500 권장 — 너무 굵으면 soft UI 느낌 파괴. ### Q: Neumorphism 디자인에서 하면 안 되는 것은 무엇인가요? A: Neumorphism에서 피해야 할 것: flat shadow 또는 drop-shadow 사용 금지 — 반드시 양방향 이중 그림자(box-shadow 2개), 어두운 배경 사용 금지 (라이트 모드 기준) — 소프트 임베싱 효과가 사라짐, 여러 색상 혼합 금지 — 단색 배경 기반 유지, border로 요소 구분 금지 — 그림자만으로 구분해야 함, 고채도·비비드 컬러 사용 금지. ### Q: Neumorphism을 사용하는 실제 서비스나 제품은 무엇이 있나요? A: Neumorphism을 적용한 대표적인 제품·서비스로는 일부 계산기·날씨 앱 스킨, Dribbble 컨셉 디자인 등이 있습니다. ## API 엔드포인트 - 스타일 상세: https://ui.buildersgate.com/api/styles?id=neumorphism - 디자인 토큰: https://ui.buildersgate.com/api/themes?id=neumorphism&merged=true

이 페이지 주소를 AI에게 보여주고 "디자인 시스템 문서를 만들어줘"라고 해보세요.

Neumorphism

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

연도

2019

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

#E0E5EC

핵심 원칙

부드러움

통일성

미니멀리즘

주요 특징

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

장단점

장점

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

단점 / 한계

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

적합한 사용처

사용 사례

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

이런 프로젝트에 추천

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

접근성

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

실제 사용 예시

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

UI 컴포넌트 예제

이 디자인 스타일의 특징을 반영한 실제 UI 컴포넌트들입니다.

Soft UI Buttons

부드러운 그림자로 돌출된 듯한 버튼

Soft UI Cards

엠보싱 효과가 있는 카드

🎨

Design

부드러운 그림자로 3D 효과를 만듭니다.

💡

Innovation

배경과 같은 색상으로 통일감을 줍니다.

Neumorphic Toggle

소프트 UI 스타일의 토글 스위치

Soft UI Input

엠보싱된 입력 필드

Soft UI Icon Buttons

아이콘 버튼에 적용된 뉴모피즘

자주 묻는 질문

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 컨셉 디자인 등이 있습니다.