네움오피스모픽 생성기
무료 온라인 서비스 네움오피스모픽 생성기 설치가 필요 없는 도구
뉴모피즘 생성기 소개
뉴모피즘 생성기는 뉴모피즘(소프트 UI)으로 불리는 부드럽게 튀어나온 느낌을 만듭니다. 평면, 눌림, 볼록 중 모양을 고르고 배경색 위에서 거리, 흐림, 모서리 둥글기를 조정하면 일치하는 box-shadow CSS를 실시간으로 만듭니다. 미리보기로 요소가 정확히 어떻게 보일지 확인하고, 복사 가능한 코드 블록이 스타일을 담습니다. 모든 작업은 브라우저에서 처리됩니다.
사용 방법
1. 모양을 고릅니다: 평면, 눌림, 볼록 2. 인터페이스에 맞게 배경색을 설정합니다 3. 거리, 흐림, 모서리 둥글기 슬라이더를 조절합니다 4. 실시간으로 업데이트되는 미리보기를 확인합니다 5. 복사를 클릭해 생성된 CSS를 가져옵니다
최상의 결과를 위한 팁
뉴모피즘은 요소와 배경이 같은 색일 때 가장 잘 작동해 그림자가 부드러운 3D 효과로 녹아듭니다. 페이지에 가까운 배경색을 고르세요. 평면은 떠 있는 느낌, 눌림은 요소를 안으로 가라앉히고, 볼록은 평면 그림자 위에 미세한 그라데이션을 더해 둥근 느낌을 줍니다. 흐림이 작으면 가장자리가 선명하고 크면 더 부드럽습니다. 모서리 둥글기가 클수록 친근한 모양이 됩니다.
▶뉴모피즘이란 무엇인가요?
부드럽고 어울리는 그림자로 요소가 배경에서 튀어나오거나 눌려 보이게 하는 디자인 양식입니다. 생성기는 두 개의 box-shadow와 공유 배경색으로 그 느낌을 만듭니다.
▶여러 모양의 차이는 무엇인가요?
평면은 바깥 그림자로 떠 있는 느낌을 줍니다. 눌림은 안쪽 그림자로 요소를 가라앉힙니다. 볼록은 평면 그림자 위에 밝에서 어두운 그라데이션을 더해 둥근 느낌을 냅니다.
▶왜 배경색을 맞추나요?
효과는 요소와 주변이 같은 색인 것에 의존합니다. 색이 맞으면 이중 그림자가 떠 있는 별도 상자가 아니라 매끄러운 3D 표면으로 보입니다.
▶거리와 흐림은 무엇을 제어하나요?
거리는 그림자를 요소에서 멀어지게 하고 흐림은 부드럽게 합니다. 작고 조밀한 값은 더 선명하고, 큰 흐림은 더 부드럽고 퍼진 표면을 줍니다.
▶CSS를 복사할 수 있나요?
네. 복사 버튼이 생성된 background, border-radius, box-shadow 규칙을 클립보드에 써서 스타일시트나 스타일 블록에 바로 붙여넣을 수 있게 합니다.
이 도구가 당신에게 도움이 되었다면, 저에게 커피 한 잔 사주세요.
제게 커피 한 잔 사주세요.