뉴모피즘 그림자가 안 예뻐 보이는 이유와 계산법
뉴모피즘(소프트 UI) 카드를 만들어봤는데 예시 이미지처럼 부드럽게 튀어나온 느낌이 아니라 그냥 흐릿한 얼룩처럼 보인 적이 있을 겁니다. box-shadow 값을 그대로 복사해 붙였는데도 결과가 다르게 나온다면, 슬라이더 숫자가 아니라 배경색 설정이 원인일 가능성이 큽니다.
뉴모피즘 그림자는 하나가 아니라 밝은 그림자와 어두운 그림자 두 개가 반대 방향으로 겹쳐 만들어집니다. 이 두 그림자가 왜 필요한지, 그리고 배경색이 왜 결과를 좌우하는지를 계산 원리로 짚어보겠습니다.
요약 ① 뉴모피즘 그림자는 밝은 그림자와 어두운 그림자 두 개가 서로 반대 방향에 겹쳐야 완성됩니다. ② 요소 배경색과 부모(바깥) 배경색이 정확히 같아야 튀어나오거나 눌린 느낌이 살아납니다. ③ 평면·볼록·오목의 차이는 그림자 방향이 아니라 표면 자체에 넣는 그라디언트 유무입니다.
그림자가 있는데도 밋밋해 보이는 이유
일반적인 box-shadow는 그림자를 한 개만 씁니다. 어두운 그림자 하나를 한쪽 방향으로 깔아 요소가 배경 위에 살짝 떠 있는 것처럼 보이게 합니다.
뉴모피즘은 여기서 그림자를 하나 더 추가합니다. 어두운 그림자는 오른쪽 아래로, 밝은 그림자는 왼쪽 위로 동시에 배치해서 하나의 광원이 위에서 비친다는 착시를 만듭니다. 두 그림자 중 하나라도 배경에 묻혀 안 보이면, 남은 그림자 한 개만 눈에 띄어 그냥 평범한 드롭섀도로 보입니다.
밝은 그림자는 흰색에 가까운 색이라 흰 배경 위에서는 거의 보이지 않습니다. 결국 어두운 그림자만 남아 "밋밋한 얼룩"처럼 느껴지는 것입니다.
손으로 계산해서 확인하는 방법
이 그림자 값은 공식 문서 없이도 색상 계산기 하나로 직접 만들 수 있습니다. 순서는 다음과 같습니다.
그림자 색 두 개를 만드는 계산
먼저 카드에 쓸 기준 색의 HEX 값을 RGB 숫자로 바꿉니다. 예를 들어 연회색 e0e5ec는 R 224, G 229, B 236입니다.
그다음 명암 강도를 퍼센트로 정합니다(예: 15%). 어두운 그림자 색은 이 RGB 값을 검정(0, 0, 0) 쪽으로 15%만큼 섞은 색이고, 밝은 그림자 색은 같은 RGB 값을 흰색(255, 255, 255) 쪽으로 15%만큼 섞은 색입니다.
마지막으로 원하는 그림자 거리와 흐림 값을 정해 box-shadow에 두 그림자를 콤마로 나열합니다. 어두운 그림자는 (거리, 거리, 흐림, 어두운색)으로, 밝은 그림자는 (-거리, -거리, 흐림, 밝은색)으로 부호만 반대로 적으면 됩니다.
배경색을 맞춰야 그림자가 완성됩니다
여기서 가장 중요한 조건 하나가 남습니다. 카드 자신의 배경색과, 그 카드를 감싸는 바깥 요소의 배경색이 정확히 같은 기준 색이어야 합니다. 색이 다르면 그림자 계산이 맞아도 한쪽이 배경에 묻혀 사라집니다.
저희 도구로 확인하기. 색을 RGB로 바꾸고 두 번 섞어서 계산하는 과정을 매번 손으로 하기는 번거롭습니다. 기준 색과 강도만 정하면 두 그림자 값을 자동으로 계산해 CSS로 보여줍니다.
무료 · 가입 불필요 · 기준 색과 강도만 정하면 이중 그림자 CSS를 자동 계산해 복사
자주 막히는 지점
| 증상 | 원인 |
|---|---|
| 그림자가 있는데 밋밋해 보임 | 카드 배경색과 부모(바깥) 배경색이 서로 다름 |
| 흰 배경에서 그림자가 이상하게 보임 | 밝은 그림자가 흰색과 겹쳐 사실상 안 보이는 상태 |
| 볼록·오목을 눌러도 그림자 방향이 그대로임 | 정상 동작. 그림자 방향은 고정이고 표면 그라디언트만 바뀜 |
| 강도를 올려도 부드러운 느낌이 안 남 | 흐림(blur) 값이 너무 작으면 강도를 올릴수록 오히려 딱딱한 그림자가 됨 |
정리
- 뉴모피즘 그림자는 어두운 그림자(검정 쪽으로 혼색)와 밝은 그림자(흰색 쪽으로 혼색)를 반대 방향에 겹쳐서 만듭니다.
- 카드 배경색과 부모 배경색이 정확히 같아야 두 그림자가 모두 드러나 튀어나오거나 눌린 느낌이 완성됩니다.
- 평면·볼록·오목은 그림자 자체가 아니라 표면에 넣는 밝기 그라디언트 방향 차이로 구분됩니다.
- 배경색이 다르면 밝은 그림자부터 배경에 묻혀 사라지므로, 그림자가 밋밋해 보일 때는 슬라이더보다 배경색 일치 여부를 먼저 확인합니다.
무료 · 가입 불필요 · 기준 색과 강도만 정하면 이중 그림자 CSS를 자동 계산해 복사
자주 묻는 질문
뉴모피즘 카드가 흰 배경 위에서 이상해 보이는 이유는 무엇인가요?
밝은 그림자는 기준 색을 흰색 쪽으로 섞은 색이라 흰 배경과 명도 차이가 거의 없습니다. 그래서 흰 배경 위에서는 어두운 그림자만 눈에 띄어 일반 그림자처럼 보입니다. 카드를 감싸는 배경도 기준 색(예: 연회색)으로 맞추면 두 그림자가 모두 드러납니다.
볼록(convex)과 오목(concave)은 그림자 방향이 다른가요?
그림자 방향과 색은 두 형태에서 동일합니다. 차이는 카드 표면 자체에 들어가는 그라디언트입니다. 볼록은 밝은색에서 어두운색으로, 오목은 어두운색에서 밝은색으로 표면 그라디언트가 흐르도록 순서만 뒤바뀝니다.
명암 강도(intensity)를 몇 %로 설정해야 하나요?
정해진 정답은 없고, 이 값은 기준 색을 검정·흰색 쪽으로 섞는 비율입니다. 값을 낮추면 그림자가 배경과 가까워 은은해지고, 값을 높이면 대비가 커져 뚜렷해지는 대신 부드러운 느낌은 줄어듭니다. 배경색과 카드 색이 같다는 조건이 지켜진 상태에서 비율을 조절하며 눈으로 비교하는 것이 가장 정확합니다.