🔘 뉴모피즘 CSS 생성기
밝은 그림자와 어두운 그림자 두 겹으로 만드는 부드러운 입체 효과 CSS를 생성합니다.
사용 방법
- 요소가 놓일 바탕 색상을 먼저 정합니다. 뉴모피즘은 요소와 바탕이 같은 색이어야 합니다.
- 입체 형태(플랫·볼록·오목·눌림)를 선택합니다.
- 그림자 거리·강도·모서리 둥글기를 슬라이더로 조절합니다.
- 미리보기 확인 후 'CSS 복사'를 누릅니다.
이럴 때 유용해요
- 음악 플레이어·스마트홈 앱 스타일의 부드러운 버튼을 만들 때
- 토글·슬라이더 등 컨트롤에 눌림(pressed) 상태를 표현할 때
- 미니멀한 대시보드 카드에 은은한 입체감을 줄 때
알아두면 좋은 팁
- 뉴모피즘은 순백(#fff)이나 순검정 바탕에서는 그림자가 보이지 않습니다. #e0e5ec처럼 살짝 톤이 있는 밝은 회색 계열이 가장 잘 어울립니다.
- 빛은 왼쪽 위에서 온다는 관례를 따라 어두운 그림자는 오른쪽 아래, 밝은 그림자는 왼쪽 위에 배치됩니다.
- 버튼이라면 기본은 볼록, :active 상태는 눌림 코드로 바꿔 끼우면 실제로 눌리는 느낌이 납니다.
자주 묻는 질문
뉴모피즘 그림자의 원리가 뭔가요?
바탕색보다 밝은 그림자와 어두운 그림자를 서로 반대 방향으로 겹쳐, 요소가 바탕에서 튀어나오거나 파인 것처럼 보이게 하는 기법입니다. box-shadow 하나에 쉼표로 두 그림자를 함께 선언합니다.
볼록과 오목은 어떻게 다르게 만드나요?
그림자는 동일하고 배경 그라데이션 방향만 다릅니다. 볼록은 왼쪽 위가 밝은 linear-gradient(145deg, 밝음, 어두움), 오목은 그 반대입니다. 눌림은 그림자에 inset을 붙여 안쪽으로 파이게 합니다.
뉴모피즘의 단점은 없나요?
명도 대비가 낮아 접근성에 불리하고, 상태 구분(활성/비활성)이 흐릿해질 수 있습니다. 중요한 버튼에는 색상 변화나 아이콘을 병행하고, 텍스트 대비는 '명도 대비 검사' 도구로 확인하는 것을 권장합니다.
그림자 강도는 얼마가 적당한가요?
바탕색 대비 15% 내외로 밝히고 어둡히는 것이 자연스럽습니다. 30%를 넘으면 그림자 경계가 도드라져 뉴모피즘 특유의 부드러움이 사라집니다. 거리와 블러는 1:2 비율이 기본값입니다.
