뉴모피즘 생성기
소프트 UI 돌출 스타일 제작: 명암 듀얼 섀도, 4가지 형태 모드, 빛·깊이·부드러움 완전 제어.
팁: 뉴모피즘은 요소 배경과 페이지 배경이 일치해야 합니다. 생성기가 둘 다 설정합니다.
뉴모피즘 생성기 사용법
- 베이스 색상을 고르세요. 소프트 UI에는 밝고 살짝 채도가 낮은 색이 가장 좋습니다.
- 광원 방향을 선택하세요. 섀도는 반대편에 생깁니다.
- 거리와 블러로 깊이를, 강도로 명암 섀도의 대비를 조정합니다.
- 플랫, 오목, 볼록, 눌림 형태를 전환해 버튼, 카드, 입력 필드에 맞추세요.
- CSS(background + box-shadow 쌍) 또는 Tailwind 클래스를 프로젝트에 복사하세요.
이 뉴모피즘 생성기에 대해
뉴모피즘(소프트 UI)은 두 개의 섀도를 결합해 요소가 배경에서 돌출된 것처럼 보이게 합니다: 한쪽은 어두운 섀도, 다른 쪽은 밝은 하이라이트. 요소 자체는 페이지 배경과 같은 색으로 채워집니다. 결과는 카드, 버튼, 토글을 위한 부드럽고 촉각적이며 거의 물리적인 인터페이스 스타일입니다.
이 생성기는 베이스 색상에서 명암 섀도 색상을 자동 계산하고 4가지 형태 모드와 결합합니다: 플랫(클래식 돌출), 오목과 볼록(곡면 그라디언트 채우기), 눌림(밀려 들어간 상태의 인셋 섀도). 기억하세요: 착시가 성립하려면 요소 배경이 페이지 배경과 일치해야 합니다. 미리보기는 둘을 함께 보여줍니다.
뉴모피즘 자주 묻는 질문
내 페이지에서 뉴모피즘이 작동하지 않는 이유는?
이 스타일은 요소가 배경에 섞이는 것에 의존합니다: 요소는 뒤의 표면과 같거나 매우 가까운 배경색을 사용해야 합니다. 페이지 배경이 선택한 베이스 색상과 다르면 둘 중 하나를 업데이트하세요. 생성기가 미리보기 스테이지를 같은 색으로 칠하는 이유입니다.
소프트 UI에 가장 좋은 색상은?
밝고 살짝 채도가 낮은 색(명도 약 85~95%)이 가장 좋습니다. 더 밝은 하이라이트와 더 어두운 섀도가 모두 보이기 때문입니다. 순백색은 하이라이트를 죽이고 순흑색은 섀도를 죽입니다. 강도 슬라이더가 두 톤이 베이스 색상에서 퍼지는 정도를 조절합니다.
오목과 볼록의 차이는?
둘 다 듀얼 섀도 위에 은은한 선형 그라디언트 채우기를 추가합니다. 볼록은 보는 사람 쪽으로 부풀어(광원 쪽이 더 밝게) 솟은 버튼처럼 보입니다. 오목은 얕은 접시처럼 안쪽으로 휘어 웅덩이와 입력 필드에 유용합니다. 눌림은 인셋 섀도를 사용해 활성/눌린 상태를 표현합니다.
뉴모피즘은 접근성이 좋은가요?
소프트 UI는 본질적으로 저대비이므로 중요한 컨트롤보다 장식용 컨테이너에 사용하세요. 텍스트와 아이콘이 WCAG 대비 비율을 충족하는지 확인하고 인터랙티브 요소에 포커스 아웃라인 추가를 고려하세요.
명암 섀도 색상은 어떻게 계산되나요?
생성기는 베이스 색상을 흰색 쪽으로 밝게 해 하이라이트를, 검은색 쪽으로 어둡게 해 섀도를 만들고 강도 슬라이더로 스케일합니다. 이로써 두 톤이 같은 색상 계열에 남아 효과가 부드럽고 자연스럽게 느껴집니다.