디자인 스타일
뉴모피즘(Neumorphism)
뉴모피즘(Neumorphism)은 배경과 같은 색의 컴포넌트에 양방향 그림자를 적용해 부드럽게 돌출되거나 들어간 표면을 만드는 UI 스타일입니다.
쉬운 설명
같은 배경색의 밝고 어두운 그림자를 조합해 표면이 눌리거나 솟아난 듯 보이게 하는 스타일.
Visual sample
눈으로 보면 이렇습니다
같은 색 표면에 양방향 그림자를 적용해 눌림과 돌출을 표현한 뉴모피즘 샘플
- 양방향 소프트 섀도
- 동일한 표면색
- 눌림과 돌출 상태
Accessible neumorphism, same-color soft surfaces, paired light and dark shadows, clear pressed states, high-contrast labels Style variations
같은 스타일도 이렇게 달라집니다
밝은 표면, 어두운 표면과 눌린 컨트롤처럼 배경 톤과 그림자 방향을 바꾸면 같은 원리로 서로 다른 상태를 표현할 수 있습니다.라이트 뉴모피즘
밝은 회청색 표면과 부드러운 양방향 그림자로 차분한 컨트롤 패널을 만듭니다.
Light neumorphism, cool gray surface, paired white and blue-gray shadows, clear dark labels 다크 뉴모피즘
짙은 남색 표면에서 하이라이트와 어두운 그림자를 절제해 야간 도구의 깊이를 만듭니다.
Dark neumorphism, charcoal navy surface, subtle paired shadows, restrained highlights, accessible light text 인셋 뉴모피즘
안쪽 그림자로 입력창과 선택 상태가 표면 아래로 눌린 듯한 피드백을 표현합니다.
Inset neumorphism, warm stone surface, recessed fields, clear selected state, subtle tactile feedback Visual DNA
스타일을 만드는 구체적인 요소
단어 하나보다 아래 요소를 함께 지정해야 AI가 더 일관된 결과를 만듭니다.선과 테두리
0–1px · Low contrast경계는 선보다 그림자와 명암으로 표현하며 포커스에는 명확한 외곽선을 추가합니다.
모서리
12–24px부드러운 표면과 어울리는 중간 이상의 라운드를 일관되게 사용합니다.
컬러 톤
Monochrome surface배경과 컴포넌트를 같은 계열로 두고 텍스트와 상태 색에서 충분한 대비를 확보합니다.
타이포그래피
Sans · 500–700낮은 표면 대비를 보완하도록 단순한 산세리프와 충분한 굵기를 사용합니다.
아이콘
Simple · 2px돌출 표면 안에서도 읽히는 단순한 선 또는 채움 아이콘을 사용합니다.
그림자
Light + Dark pair빛 방향을 기준으로 밝은 그림자와 어두운 그림자를 항상 한 쌍으로 유지합니다.
간격과 밀도
20–36px · Spacious그림자끼리 겹치지 않도록 컨트롤 사이에 충분한 여백을 둡니다.
모션
120–220ms · Press눌림 시 바깥 그림자가 안쪽 그림자로 전환되는 짧은 상태 변화를 사용합니다.
Where it works
어떤 프로젝트에 잘 어울리나요?
스타일의 강도는 제품의 목적과 사용자가 읽어야 하는 정보량에 맞춰 조절해야 합니다.적극적으로 추천
큰 버튼과 다이얼의 상태를 촉각적으로 구분하기 좋습니다.
제한된 컨트롤을 명확한 눌림 상태로 보여줄 수 있습니다.
부드러운 색과 낮은 시각적 긴장이 차분한 분위기를 만듭니다.
강도를 조절해서 적용
핵심 요약과 빠른 작업에만 적용해야 정보 밀도를 유지할 수 있습니다.
낮은 경계 대비가 입력 상태와 행 구분을 모호하게 만들 수 있습니다.
Compare
비슷한 스타일과 무엇이 다른가요?
뉴모피즘은 불투명한 동일 색 표면의 눌림과 돌출을 표현하고, 글래스모피즘은 뒤가 비치는 반투명 레이어와 블러로 깊이를 표현합니다.뉴모피즘(Neumorphism)
- 배경과 같은 불투명 표면
- 밝고 어두운 양방향 그림자
- 눌림·돌출 상태 중심
Glassmorphism
- 배경이 비치는 반투명 패널
- backdrop blur와 밝은 테두리
- 겹치는 레이어 중심
Prompt recipe
AI에게 요청할 때는 이렇게 조합하세요
Accessible neumorphism, same-color soft surfaces, paired light and dark shadows, clear pressed states, high-contrast labels. Use paired shadows from one consistent light source, 12–24px radii, clear inset pressed states, and high-contrast text; avoid low-contrast labels, tiny controls, shadow stacks on every element, and using color alone for state. Final check
완성 전에 확인하세요
- 01
밝은 그림자와 어두운 그림자의 방향이 일관적인가?
- 02
기본·hover·pressed 상태가 명확히 구분되는가?
- 03
텍스트와 아이콘 대비가 충분한가?
- 04
포커스 외곽선이 그림자와 별도로 보이는가?
- 05
작은 컨트롤에 효과를 과도하게 적용하지 않았는가?
- 06
그림자가 겹쳐 화면이 흐릿해 보이지 않는가?
Explore more
다른 스타일도 보러 가기
작은 미리보기로 분위기를 비교하고 다음 디자인 용어로 이어가세요.관계 지도
