사용 가능한 뉴모피즘

뉴모피즘(Neumorphism)은 2019년 Dribbble에서 폭발적으로 유행했지만, 실제 프로덕션에 적용된 사례는 거의 없다. "예쁘지만 쓸 수 없다"는 평가가 지배적이었다. 이 문서는 그 이유를 해부하고, 진짜 사용할 수 있는 뉴모피즘을 만들기 위한 구체적인 규칙을 정리한다.

왜 하필 뉴모피즘…?

뉴모피즘은 내가 가장 좋아하는 UI 중 하나다. 뉴모피즘의 첫 등장에 감탄을 금할 수 없었다. 시각적 착시을 활용해 평면 화면에 생기를 불어넣은 아름다운 예술작품 같았다. 하지만 뉴모피즘을 실제로 적용한 적도, 적용된 앱을 본적도 없다. 다양한 디자인 인터페이스 공부해보며, 사용 가능한 뉴모피즘을 구상해보고 싶어졌다.

디자인은 감상을 위한 것이 아니라 사용하기 위한 것이다.

1. 뉴모피즘이 실패한 이유

1.1 그림자는 깊이지, 행동유도성이 아니다

전통적인 UI에서 버튼은 색상, 테두리, 텍스트 대비로 "나를 눌러"라고 말한다. 뉴모피즘에서 버튼은 배경과 같은 색이고, 그림자만으로 돌출을 표현한다. 문제는 카드도 돌출이고, 버튼도 돌출이라는 것. 사용자는 뭘 누를 수 있는지 알 수 없다. 눈으로 보기에는 아름답지만 구분하는데 사용하는 에너지, 실제 예상과 다른 동작은 피로감을 유발시킨다.

1.2 상태 변화의 미묘함

hover에서 그림자가 줄어들고, active에서 inset으로 바뀌는 것은 마우스를 올려야만 발견할 수 있다. 모바일에서는 hover 자체가 없다. 접근성에 치명적이며 PC 사용자에 비해서 더 심각한 피로감을 유발한다.

1.3 모노톤의 함정

모든 요소가 #e0e5ec로 동일하면 시각적 계층이 무너진다. 중요한 것과 중요하지 않은 것의 구분이 불가능하다. 때때로 시각적인 중요도를 위해서 무분별한 raise로 계층을 잡기도 하는데 이때는 화면에 점토성이 만들어진다. 이때부터는 사용성을 완전히 포기한다는 선언과도 같다.

1.4 큰 요소에서 양각

작은 버튼의 양각은 자연스럽지만, 큰 카드에 강한 그림자를 주면 "플로팅" 하고 있는 부자연스러움이 생긴다. 뉴모피즘은 동일 표면에서의 돌출/함몰이 핵심 아이덴티티이며 미학인데, 큰 요소는 이 환상을 깨뜨린다.

2. 해결 방안: 컬러 하나 추가

Dribbble의 원본 뉴모피즘이 실패한 이유는 "아무것도 추가하지 않았기" 때문이다. 해결은 의외로 단순할지 모른다.

단 하나의 액센트 컬러

이것이 뉴모피즘의 모노톤 철학을 유지하면서 행동유도성을 확보하는 유일한 균형점이다. 물론 뉴모피즘에 색상이 들어가는 순간 양각의 느낌이 사라지고 만다. 위 이미지에서도 액센트 컬러가 들어간 버튼은 그저 플랫하게 보인다. 하지만 포기할건 포기해야 사용 가능한 디자인이다. “뉴모피즘스럽게 보이기” 위한게 디자인 목적이 되어선 안된다.

Primary 버튼: 액센트 색상 → “이건 누를 수 있어”, 페이지의 핵심 기능 전달
Secondary 버튼: 배경색 + 양각 → 호버 시 press 피드백으로 인터랙션 가능성 전달
토글 ON: 액센트 색상 → 상태가 바뀌었다는 시각적 확인
포커스 링: 액센트 글로우 → 키보드 사용자에게 현재 위치 전달

색상 외에는 그림자와 표면만으로 모든 것을 표현한다.

3. 물리적 물성

뉴모피즘은 "화면이 하나의 재료로 만들어져 있다"는 환상이다. 이 환상을 강화하는 디테일들을 먼저 이해해야, 이후의 그림자 수식과 깊이 체계가 의미를 갖는다.

3.1 베벨 (Bevel)

실제 양각된 물체는 모서리에서 빛을 받는다. CSS border로 이를 표현:

/* 광원 좌상단 기준 */
border-top: 1px solid rgba(255, 255, 255, 0.6);    /* 밝은 면 */
border-left: 1px solid rgba(255, 255, 255, 0.6);
border-bottom: 1px solid rgba(163, 177, 198, 0.4);  /* 어두운 면 */
border-right: 1px solid rgba(163, 177, 198, 0.4);

적용 대상: 타일, 히어로 카드 등 물리적 존재감이 필요한 요소
적용하지 않는 곳: 버튼 (그림자만으로 충분), 스티치 카드 (스티치가 경계 역할)

3.2 스티치 (Stitch)

이 문서에서 제안하는 “사용 가능한 뉴모피즘”에서는 본질적으로 인터렉션이 불가능한 카드와 인터렉션이 가능한 버튼 사이의 명확한 시각적 구분을 부여한다. 마르지엘라 디자인에서 영감받은 봉제선을 카드 안쪽에 dashed border를 넣는다. 본래 뉴모피즘은 점토의 느낌을 주지만 여기서는 실리콘처럼 다룬다.

.card::after {
  content: '';
  position: absolute;
  inset: 8px;
  border: 2px dashed rgba(163, 177, 198, 0.35);
  border-radius: 14px;   /* 부모보다 약간 작게 */
  pointer-events: none;
}

이것의 역할:

비대화형 카드의 고정감: 버튼과 같은 양각(raised) 이지만 클릭할 수 없는 요소에 스티치를 넣으면, “이것은 고정된 것” 이라는 시각적 신호가 된다.
큰 카드에 강한 그림자 없이 영역을 구분한다. 큰 카드의 그림자는 플로팅 처럼 느껴지지만 스티치 + 더 적은 그림자로 뉴모피즘 디자인 언어의 흐름을 깨지 않는다.

섹션 디바이더로서의 스티치

카드 내부뿐 아니라 섹션 간 구분선으로도 스티치를 사용할 수 있다. 중앙에 짧게 놓인 스티치 라인은 <hr>보다 강한 구분감을 주면서도 표면의 일부로 느껴진다.

/* 섹션 디바이더 — 짧고 섬세한 봉제선 */
.stitch-sep {
  height: 1px;
  width: 120px;
  margin: 0 auto;
  background: repeating-linear-gradient(
    90deg,
    rgb(163 177 198 / 0.28) 0 5px,
    transparent 5px 11px
  );
}

/* 하이라이트: 실이 표면 위로 올라온 부분 */
.stitch-sep::after {
  content: '';
  position: absolute;
  inset: 0;
  top: 1px;
  height: 1px;
  background: repeating-linear-gradient(
    90deg,
    rgb(255 255 255 / 0.5) 0 5px,
    transparent 5px 11px
  );
}

핵심은 짧게. 화면 전체를 가로지르는 선은 장식을 위한 장식이 된다. 120px 정도로 중앙에만 놓으면 "여기서 봉제가 끊겼다"는 구조적 의미를 갖는다.

3.3 양각 텍스트 (Embossed Text)

큰 숫자나 헤딩에 돌출 느낌을 준다:

.raised-text {
  text-shadow:
    1px 1px 1px rgba(255, 255, 255, 0.7),
    -1px -1px 1px rgba(163, 177, 198, 0.25);
}

적용 대상: 히어로 숫자, 진척률 같은 핵심 수치 1~2개
적용하지 않는 곳: 본문, 레이블, 작은 텍스트 (읽기 어려워짐)

3.4 이미지 프레이밍 (Image Frame)

이미지는 뉴모피즘의 단일 색상 표면을 깨뜨린다. 다채로운 픽셀이 양각 위에 올라오면 그림자가 만드는 "한 재료에서 깎아낸" 환상이 무너진다. 이미지를 어떻게 넣어야 뉴모피즘 디자인의 흐름을 깨지 않을까 고민하며 다양한 방법을 사용했는데 격리하는 방식으로 결론을 내렸다.

이중 쉐도우 액자

단순이 inset을 줘서 격리하는 방식이 아닌 raised 프레임과 inset 홈을 동시에 만들어서 액자에 넣은것 처럼 만든다.

/* raised 프레임 + inset 이미지 홈 */
.image-frame {
  padding: 8px;
  border-radius: 16px;
  background: #e0e5ec;
  box-shadow:
    4px 4px 14px rgba(163, 177, 198, 0.7),
    -4px -4px 14px rgba(255, 255, 255, 0.9);  /* 양각 프레임 */
}

.image-frame img {
  display: block;
  width: 100%;
  border-radius: 10px;
  box-shadow:
    inset 4px 4px 14px rgba(163, 177, 198, 0.5),
    inset -4px -4px 14px rgba(255, 255, 255, 0.7);  /* 이미지는 함몰 */
}

┌──────────────────┐  ← raised (양각 프레임)
│  ┌──────────────┐│
│  │  ▓▓ image ▓▓ ││  ← inset (이미지가 표면 아래로)
│  └──────────────┘│
└──────────────────┘

inset만 주면 → 구덩이가 된다. 이미지가 바닥에 빠진 것처럼 보인다.
raised + inset 이중 쉐도우 → 액자가 된다. 프레임이 돌출되고 그 안에 이미지가 끼워진 느낌이다.
padding이 프레임의 두께가 된다. 이 간격이 뉴모피즘 표면의 연속성을 유지시킨다.

4. 인터랙션 위계 — 점토덩어리 vs 조각품

아무거나 raise시켜서 계속 쌓기만 하면 점토덩어리가 되고, 필요한 곳만 돌출시키면 조각품이 된다.

뉴모피즘에서 가장 범하기 쉬운 실수는 "돋보이게 하고 싶은 것을 전부 raised로 만드는 것"이다. 일반 텍스트 영역(prose)을 카드로 감싸고, 제목도 양각 텍스트로, 버튼도 양각으로 — 전부 돌출되면 아무것도 돌출되지 않은 것과 같다.

4.1 그림자의 의미론

그림자는 장식이 아니라 인터랙션의 언어다.

inset (함몰)   → "여기에 무언가를 넣어라"  → 입력 필드, 검색창, 프로그레스 트랙
raised (돌출)  → "나를 건드릴 수 있어"    → 버튼, 클릭 가능한 타일
stitch (봉제)  → "나는 고정되어 있어"     → 비대화형 섹션 컨테이너
flat (평면)    → "나는 표면 그 자체야"    → 텍스트, prose, 레이블

4.2 위계 결정 플로우

이 요소에 사용자가 값을 입력하는가?
  → YES → inset

이 요소를 클릭/탭할 수 있는가?
  → YES → raised
         이것은 카드인가, 버튼인가?
           → 카드: 내부에 raised 버튼을 넣어 클릭 가능함을 명시하라
           → 버튼: raised + hover → press → active 3단계 피드백

클릭할 수 없지만 시각적 우선순위가 필요한가?
  → YES → raised + stitch 컨테이너 안에 배치 (고정감)
         스티치가 "봉제되어 고정된 것"임을 알리고,
         raised가 데이터의 시각적 무게를 유지한다.
  → NO  → flat. 아무 그림자도 주지 마라.

4.3 클릭 가능한 카드의 규칙

카드와 버튼은 반드시 시각적으로 구분되어야 한다. 카드가 클릭 가능하다면:

카드 자체는 raised (타일 역할)
카드 안에 raised 버튼이나 액센트 요소가 있어야 한다
또는 카드 전체가 <a> 태그로, hover 시 그림자가 미세하게 커지는 피드백을 준다

카드만 raised이고 내부에 아무 행동유도성도 없으면 → 사용자는 "예쁜 카드"로만 인식하고 클릭하지 않는다.

5. 그림자 시스템

5.1 이중 그림자의 원리

뉴모피즘의 핵심은 하나의 광원에서 나오는 두 그림자다.

광원 (좌상단)
    ↘
┌─────────┐
│ ██████  │  ← 우하단: 어두운 그림자 (빛의 부재)
│ ██████  │
└─────────┘
    ↗
좌상단: 밝은 그림자 (반사)

/* 돌출 (Raised) */
box-shadow:
  8px 8px 28px rgba(163, 177, 198, 0.7),    /* 어두운 면 */
  -8px -8px 28px rgba(255, 255, 255, 0.9);  /* 밝은 면 */

/* 함몰 (Pressed) */
box-shadow:
  inset 5px 5px 12px rgba(163, 177, 198, 0.5),
  inset -5px -5px 12px rgba(255, 255, 255, 0.7);

5.2 비율 공식

파라미터	공식	예시
blur	offset × 3.5	8px offset → 28px blur
돌출 dark opacity	0.7	`rgba(163,177,198, 0.7)`
돌출 light opacity	0.9	`rgba(255,255,255, 0.9)`
함몰 dark opacity	0.5	돌출보다 부드럽게
함몰 light opacity	0.7	돌출보다 부드럽게

이 비율이 무너지면:

blur가 너무 작으면 → 그림자가 날카롭고 딱딱함 (CSS 기본 그림자처럼 보임)
blur가 너무 크면 → 경계가 사라져서 돌출감 없음
opacity가 너무 강하면 → 불투명하고 무거움
opacity가 너무 약하면 → 평면과 구분 안됨

5.3 프리셋 스케일

위 공식에 따른 참조 크기 4단계:

xs:  2px 2px 7px   …   작은 버튼, 배지
sm:  4px 4px 14px  …   기본 버튼, 카드
md:  6px 6px 20px  …   히어로 요소 (1개만)
lg:  8px 8px 28px  …   거의 안 씀

규칙: 한 화면에서 md 이상은 1개만 사용한다. 여러 요소가 동일 레벨로 강하게 돌출되면 계층이 무너진다.

6. 깊이 체계

뉴모피즘에서 가장 중요한 설계 결정. 모든 요소의 "높이"를 미리 정의한다.

Level -1 : 함몰 (Inset)
           입력 필드, 프로그레스 트랙, 검색창
           → inset 그림자. "여기에 무언가를 넣어라"

Level 0  : 표면 (Surface)
           페이지 배경 그 자체. 그림자 없음.
           → 텍스트, 구분선 등 비물리적 요소가 위치

Level 0.5: 구역 (Zone)
           스티치 카드, 섹션 컨테이너
           → 최소 그림자 + 장식적 테두리로 영역 구분
           → 큰 요소에 강한 돌출을 주면 "떠있는 판"이 되므로 이 레벨을 사용

Level 1  : 양각 (Raised)
           카드, 타일, 배지
           → shadow-xs ~ shadow-sm

Level 1.5: 컨트롤 (Control)
           버튼, 필터 토글
           → shadow-xs. hover→press 인터랙션

Level 2  : 강조 (Hero)
           화면당 1개만 허용. 반드시 인터랙션이 있는 요소여야 한다.
           → shadow-md. 비대화형이면 Level 0.5(stitch)로 내려라.

절대 하지 말 것

큰 요소에 높은 Level: 넓은 카드에 shadow-md를 주면 떠있는 느낌을 준다. 큰 요소는 Level 0.5로 쓴다.
비대화형 요소에 inset: inset은 "입력 가능"의 시각적 신호. 장식 컨테이너에 쓰면 사용자가 클릭하려고 시도한다.

7. 배경색 규칙

7.1 하나의 색

--bg: #e0e5ec;

모든 요소의 배경색은 이것이다. gradient 금지. 카드든, 버튼이든, 배지든 전부 #e0e5ec. 뉴모피즘은 "하나의 재료에서 깎아낸 형태"이므로, 배경색이 다른 순간 환상이 깨진다.

7.2 예외: 액센트 요소

유일한 예외는 상호작용을 강조해야 하는 요소:

Primary 버튼: background: var(--accent);
토글 ON 상태: background: var(--accent);
활성 필터: 색상이 아닌 위치 변화 (raised ↔ inset)로 표현 가능

7.3 절대 하지 말 것

/* 금지: gradient 배경 */
background: linear-gradient(145deg, #e8edf5, #d8dde4);

/* 금지: 반투명 배경 (글래스모피즘 혼용) */
background: rgba(224, 229, 236, 0.5);
backdrop-filter: blur(20px);

글래스모피즘은 뉴모피즘과 다른 디자인 언어다. 혼용하면 "왜 이것만 유리야?"라는 의문이 생긴다. 단, 유일하게 떠있는 요소(플로팅 바, 모달 오버레이)는 의도적으로 다른 레이어임을 표현하기 위해 glass를 쓸 수 있다.

8. 컴포넌트별 규칙

8.1 버튼

버튼 상태에 따른 표현

[Rest] shadow - xs~sm → “나를 누를 수 있어” (양각)
[Hover] shadow 축소 → “눌리기 시작하고 있어” (표면에 근접)
[Active] inset → “눌렸어” (함몰)
[Focus] shadow + accent ring → “키보드가 여기 있어”
[Disabled] shadow 없음 + 투명 → “나는 비활성이야”

버튼 위계에 따른 표현

Primary: 액센트 배경 + 흰색 텍스트 → 색상 자체가 행동유도성
Secondary: 배경색 + 양각 → hover시 press 피드백이 유일한 행동유도성 신호
border-radius: 12px (공통)

8.2 카드

두 가지 변형만 사용:

Raised (양각): 정보 표시용, 작은~중간 크기

가능하면 버튼과의 구분을 위해서 인터렉션이 없는 카드에서는 양각 사용을 피하면 좋을 듯 하다. 필요하다면 아래 봉제선 카드를 사용한다. 봉제선 카드가 너무 많은가? 그럼 페이지를 다시 설계하자. 그래도 가장 중요한 정보를 표기해야 한다면 양각으로 표현한다. 사용자는 클릭하려 할 것이다. 트레이드 오프다. 그럼 최소한 클릭 가능한 요소(=버튼)로 만들자.

background: #e0e5ec;
border-radius: 20px;
box-shadow:
  4px 4px 14px rgba(163, 177, 198, 0.7),
  -4px -4px 14px rgba(255, 255, 255, 0.9);

Stitch (봉제선): 영역 구분용, 큰 섹션 컨테이너

background: #e0e5ec;
border-radius: 20px;
box-shadow:
  1px 1px 3px rgba(163, 177, 198, 0.7),
  -1px -1px 3px rgba(255, 255, 255, 0.9);  /* 최소 */
/* + ::after 스티치 라인 */

카드에서 절대 하지 말 것:

~~hover 시 그림자 커짐~~: 카드는 상호작용 요소가 아니다
~~shadow-md 이상~~: 큰 요소에 강한 그림자 = 떠있는 판
~~gradient 배경~~: 뉴모피즘 기본 원칙 위반

8.3 입력 필드

/* 함몰된 홈 — "여기에 값을 넣어라" */
box-shadow:
  inset 4px 4px 14px rgba(163, 177, 198, 0.5),
  inset -4px -4px 14px rgba(255, 255, 255, 0.7);
border: none;
background: #e0e5ec;
border-radius: 14px;

/* 포커스 시 — 함몰 깊어짐 + 액센트 링 */
box-shadow:
  inset 5px 5px 18px rgba(163, 177, 198, 0.5),
  inset -5px -5px 18px rgba(255, 255, 255, 0.7),
  0 0 0 2px rgba(99, 102, 241, 0.25);

입력 필드는 유일하게 inset이 의미 있는 비버튼 요소다. "움푹 들어간 곳 = 무언가를 넣는 곳"이라는 메타포.

8.4 프로그레스 바

/* 트랙: 홈(함몰) */
.track {
  height: 8px;
  border-radius: 4px;
  box-shadow:
    inset 2px 2px 7px rgba(163, 177, 198, 0.5),
    inset -2px -2px 7px rgba(255, 255, 255, 0.7);
}

/* 필: 트랙을 채우는 액체 */
.fill {
  background-color: #6366f1;
  background-image: linear-gradient(
    to bottom,
    rgba(255,255,255, 0.3) 0%,
    rgba(255,255,255, 0) 60%
  );
}

상단 하이라이트 gradient는 "빛을 받는 채워진 액체" 느낌을 준다.

8.5 배지

잠깐, 배지는 입력 요소가 아닌데 왜 inset을 사용하나?

inset + 컬러 도트 → "표면에 찍힌 도장" 메타포
배지를 input과 나란히 두는 것은 부적절한 사용 경험을 만든다.

9. 간격 규칙

뉴모피즘의 그림자는 요소 바깥으로 퍼지기 때문에, 요소 간 간격이 충분하지 않으면 그림자가 겹쳐서 지저분해진다. 빛과 그림자가 사용자에게 적절히 노출되어야 사용자는 양각 요소를 명확히 인지할 수 있다.

최소 간격 = 그림자 blur 값 × 1.5

shadow-xs (blur 7px)  → 최소 간격 12px
shadow-sm (blur 14px) → 최소 간격 28px  ← 기본 사용
shadow-md (blur 20px) → 최소 간격 32px

이것은 뉴모피즘이 전통 UI보다 더 많은 여백을 필요로 하는 이유다. 여백이 부족하면 "소프트한 깊이감" 대신 "지저분한 그림자 덩어리"가 된다.

10. 접근성

뉴모피즘의 가장 큰 약점. 반드시 보완해야 한다.

10.1 WCAG 대비

용도	최소 대비	뉴모피즘 대응
일반 텍스트	4.5:1	`#3a4250` on `#e0e5ec` = 4.8:1 (통과)
큰 텍스트 (18px+)	3:1	통과
비활성 요소	없음	`opacity: 0.4`
UI 컨트롤 경계	3:1	그림자만으로는 미달 → 베벨 or 액센트 필요

10.2 포커스 링

키보드 사용자를 위해 반드시 가시적 포커스 표시:

:focus-visible {
  outline: none;
  box-shadow:
    /* 기존 shadow 유지 + */
    0 0 0 3px rgba(99, 102, 241, 0.25),
    0 0 0 1px #6366f1;
}

outline: none을 쓸 때는 반드시 대체 표시를 제공하라.

10.3 모바일 고려

hover 없음 → Primary 버튼의 액센트 색상이 유일한 행동유도성 신호
작은 화면 → 그림자 크기 한 단계 축소 (shadow-sm → shadow-xs)
터치 타겟 → 최소 44×44px

11. 안티패턴 체크리스트

구현 후 이 목록으로 검증한다.

배경

gradient 배경을 쓴 요소가 있는가? → #e0e5ec 단색으로

위계

같은 화면에 shadow-md 이상이 2개 이상인가? → 1개만 유지
큰 컨테이너에 강한 돌출 그림자가 있는가? → 스티치 카드로 대체
비대화형 요소에 inset이 있는가? → raised나 flat으로
일반 텍스트(prose) 영역을 raised 카드로 감쌌는가? → flat으로
이미지가 raised 표면 위에 직접 놓여있는가? → raised+inset 액자로
비대화형 강조 카드에 스티치가 없는가? → 스티치 추가하여 고정감 부여

디자인

그림자가 겹치는 요소가 있는가? → 간격 확보 (blur × 1.5)
blur/offset 비율이 3~3.5× 범위인가? → 벗어나면 조정
opacity가 너무 강한가? (돌출 dark > 0.7, light > 0.9) → 낮추기

접근성

키보드 포커스 시 가시적 표시가 있는가? → focus-visible 추가
모든 상호작용 요소에 hover+active 상태가 있는가? → 추가
텍스트 대비가 WCAG AA를 충족하는가? → 확인
클릭 가능한 카드에 내부 행동유도성(버튼, 액센트)이 있는가? → 추가

12. 해부학적 접근법

이 문서의 디자인 철학은 Maison Margiela의 해체주의 패션에서 영감을 받았다. 구조(construction)를 숨기지 않고 드러내는 그들의 접근 방식을 UI에 차용한다.

Margiela가 의복에서 한 것:

안감, 봉제선, 어깨 패드를 밖으로 뒤집음
구조 자체를 디자인으로 승격
"왜 이걸 숨겨야 하지?"라는 질문

뉴모피즘에서의 적용:

스티치 라인: 카드의 "봉제선"을 의도적으로 노출 → 구조가 보인다.
베벨: 양각의 "모서리"를 숨기지 않고 강조 → 깎아낸 흔적이 보인다.
깊이 체계: UI의 "구조"를 명시적으로 설계하고 드러냄 → 위계가 보인다.
단일 재료: 하나의 표면에서 모든 형태를 깎아냄 → 재료가 보인다.

결과적으로, 잘 만들어진 뉴모피즘은 피로가 아니라 아름다움과 사용성을 모두 챙긴다.

적용 샘플 참고: https://baejino.com
디자인 가이드 참고: https://design.baejino.com/design-2019-neumorphism