뉴모피즘 (Neumorphism)

디자인학
한 줄 정의: 배경과 유사한 색상에 부드러운 그림자와 하이라이트를 활용해 요소가 살짝 튀어나오거나 눌린 듯한 촉각적 인상을 주는 디자인 스타일이다.

쉽게 풀면

배경과 비슷한 색에 은은한 그림자를 줘서 버튼이 살짝 튀어나오거나 눌린 것처럼 보이게 하는 디자인이다. 배경과 똑같은 색의 버튼에 은은한 그림자만 넣어 살짝 튀어나오거나 눌린 듯한 느낌을 주는 스타일이 뉴모피즘이며, 화려한 색 없이도 입체감을 표현하려는 시도였다.

왜 중요한가

뉴모피즘은 배경과 같은 색의 요소에 밝은 그림자와 어두운 그림자를 함께 주어 표면에서 부드럽게 돌출되거나 눌린 것처럼 보이게 하는 UI 스타일로, 2019년 말 드리블에서 유행하며 플랫 디자인 이후 깊이감을 되찾으려는 시도로 주목받았습니다. 촉각적 인상과 절제된 색 사용이 결합해 '새로운 스큐어모피즘'이라는 이름을 얻었습니다.

논문에서는 이렇게 쓰입니다

본 연구는 뉴모피즘 스타일 버튼의 대비 부족이 접근성 측면에서 갖는 한계를 분석하였다.

낮은 색상 대비를 특징으로 하는 디자인 스타일이 접근성에 미치는 문제를 검토한 연구이다.

"연구는 뉴모피즘 스타일 버튼과 플랫 디자인 버튼에 대한 사용자의 클릭 성공률 차이를 시선추적으로 비교하였다."

이 문장은 두 가지 디자인 스타일의 버튼을 봤을 때 사용자가 실제로 얼마나 정확히 클릭하는지, 그리고 시선이 어디로 가는지 비교했다는 뜻입니다.

조금 더 깊게 보면

뉴모피즘은 실제 제품에 거의 채택되지 않았는데, 요소와 배경의 색이 같아 대비가 매우 낮고 비활성 상태·포커스·선택 상태를 구분할 방법이 부족해 접근성과 사용성에서 근본적 문제가 있기 때문입니다. 그림자만으로 클릭 가능성을 알리는 것은 눌린 상태와 돌출 상태의 의미가 사용자마다 달리 읽히는 문제도 낳습니다. 이 사례는 시각적 유행이 사용성 검토 없이 확산될 때의 한계를 보여 주는 교훈으로 자주 인용되며, 이후 일부 요소만 부분적으로 차용하는 절충이 남았습니다. 뉴모피즘의 이중 그림자는 빛이 한 방향에서만 비친다는 가정에 의존하는데, 다크 모드로 전환하면 그림자와 하이라이트의 관계가 뒤바뀌어 같은 규칙을 두 테마에 동시에 적용하기 어렵다는 기술적 한계도 지적된다. 뉴모피즘이 실제 서비스에 널리 채택되지 못한 결정적 이유는 버튼과 배경의 색상 대비가 웹 접근성 지침이 요구하는 최소 대비 기준에 못 미치는 경우가 많았기 때문으로, 유행과 접근성 기준이 충돌한 대표 사례로 다루어진다.

주의할 점

뉴모피즘은 색상 대비가 낮아 저시력 사용자나 접근성 기준 준수 측면에서 취약할 수 있다.

관련 용어