뉴모피즘(Neumorphism) 빌더: 소프트 UI box-shadow로 입체감을 만드는 실전 가이드

뉴모피즘은 같은 배경색 위에서 밝은 그림자와 어두운 그림자를 동시에 사용해, 요소가 “살짝 솟아오른” 또는 “눌린” 듯한 부드러운 입체감을 만드는 스타일입니다. 과하면 흐리고 읽기 어려워질 수 있지만, 적절히 쓰면 미니멀하면서도 고급스러운 UI를 만들 수 있습니다. 이 페이지의 빌더는 베이스 색상, 거리(distance), 블러(blur), 강도(intensity), 라운드(radius), 형태(flat/pressed/convex/concave)를 조절해 결과 CSS를 빠르게 얻도록 돕습니다.

뉴모피즘이란 무엇인가

뉴모피즘은 “경계선을 최소화”하고, 그림자의 미세한 차이로 형태를 만드는 스타일입니다. 따라서 보더로 경계를 강하게 구분하는 UI와는 다른 느낌을 줍니다. 핵심은 배경과 요소의 색이 크게 다르지 않은 상태에서, 그림자만으로 깊이를 만드는 것입니다.

  • Raised(솟은): 밝은 하이라이트 + 어두운 그림자로 떠 있는 느낌
  • Pressed(눌린): inset 그림자로 파여 들어간 느낌
  • Convex/Concave: 그라디언트와 결합해 볼륨감을 강화
  • 활용: 토글, 버튼, 카드, 컨트롤 패널 등 “조용한” UI에 잘 어울림

추천: 뉴모피즘은 한 화면 전체에 강하게 적용하기보다, 일부 컴포넌트(버튼/컨트롤)에 제한적으로 적용하면 산만하지 않으면서 포인트가 됩니다.

생성기 사용 방법(권장 흐름)

  1. 베이스 색상: 페이지 배경과 같은 색 또는 매우 유사한 색으로 시작합니다.
  2. 형태 선택: flat/pressed/convex/concave 중 목적에 맞게 선택합니다.
  3. distance: 그림자 이동 거리. 8~18px 정도부터 시작하는 것이 무난합니다.
  4. blur: 경계의 부드러움. distance보다 조금 더 크게 주면 자연스럽습니다.
  5. intensity: 밝은/어두운 그림자 대비. 너무 높으면 지저분해질 수 있습니다.
  6. radius: 전체 라디우스 스케일과 맞춰 통일감을 만듭니다.
  7. 복사: 생성된 CSS를 복사해 실제 컴포넌트에 적용합니다.

뉴모피즘은 배경색이 바뀌면(테마 전환 등) 느낌이 크게 달라질 수 있습니다. 따라서 다크/라이트 모두에서 확인하고, 필요하면 테마별 프리셋을 따로 두는 것이 좋습니다.

이중 그림자 설계: 밝은/어두운 shadow 규칙

뉴모피즘의 핵심은 “한 방향의 빛”을 가정하는 것입니다. 예를 들어 좌상단에서 빛이 온다면, 좌상단은 밝게, 우하단은 어둡게 떨어지는 그림자를 만듭니다. 이 방향성이 없으면 입체감이 아니라 얼룩처럼 보일 수 있습니다.

  • 밝은 그림자: 보통 흰색 계열을 낮은 투명도로 사용합니다.
  • 어두운 그림자: 검정 계열을 낮은 투명도로 사용합니다.
  • 거리/블러: distance와 blur의 비율이 입체감의 성격을 결정합니다.
  • inset: pressed 형태에서는 inset을 사용해 눌린 느낌을 만듭니다.

프로젝트 전체 섀도우 스타일을 정리하려면 섀도우 프리셋 도구와 병행하는 것도 좋습니다. 다만 뉴모피즘은 일반 카드 섀도우와는 목적이 달라, 섞어 쓸 때 과해지지 않도록 범위를 나누는 편이 좋습니다.

디자인 팁: 배경색, 대비, 사용 범위

뉴모피즘은 대비가 낮은 스타일이기 때문에, 정보 밀도가 높은 화면(표/긴 본문/복잡한 폼)에서는 오히려 가독성이 떨어질 수 있습니다. 따라서 “어디에” 적용할지 기준을 정하면 결과가 좋아집니다.

  • 좋은 대상: 토글, 버튼, 슬라이더, 컨트롤 패널, 카드 포인트
  • 주의 대상: 긴 본문, 작은 텍스트, 데이터 테이블, 촘촘한 리스트
  • 대비 보강: 텍스트/아이콘은 충분히 진하게, 배경 레이어는 단순하게
  • 라디우스 통일: 보더/라디우스 규칙과 맞추면 완성도가 올라갑니다.

접근성/가독성 체크리스트

뉴모피즘은 스타일 특성상 “경계가 약해지는” 문제가 생길 수 있습니다. 따라서 접근성 체크가 중요합니다. 특히 포커스 링, 텍스트 대비, 상태(hover/disabled)에서의 구분이 핵심입니다.

  • 텍스트 대비: 본문/라벨은 대비 체크로 AA 이상을 확인합니다.
  • 포커스 표시: outline을 제거하지 말고, 디자인에 맞게 다듬습니다.
  • 상태 구분: hover/pressed/disabled가 충분히 구분되도록 값 차이를 둡니다.
  • 터치 타겟: 그림자만으로 버튼처럼 보이게 하기보다, 크기/간격도 확보합니다.

자주 묻는 질문(FAQ)

  • Q. 뉴모피즘이 흐릿해 보여요. A. intensity가 낮거나 배경이 너무 복잡할 수 있습니다. 배경을 단순하게 하고 distance/blur 비율을 조정해 보세요.
  • Q. pressed와 flat 차이가 잘 안 나요. A. inset 여부와 하이라이트 방향이 핵심입니다. pressed는 inset 그림자를 사용하고, flat은 바깥 그림자를 사용합니다.
  • Q. 라이트 모드에서 더 어색해요. A. 밝은 배경에서는 하이라이트가 튀기 쉬워 intensity를 낮추고, 보더/그림자 대비를 섬세하게 조정하는 것이 좋습니다.
알림