이미지에 그림자 추가

이미지에 그림자 추가 도구는 부드러운 자연스러운 그림자로 어떤 사진이든 페이지에서 띄워 주며, 모든 작업은 브라우저 안에서만 이루어집니다. 사진, 스크린샷, 로고 또는 오려낸 PNG를 올린 뒤 광원을 드래그해 각도를 정하고 블러, 스프레드, 불투명도, 색을 조절하세요. 투명 PNG에서는 그림자가 이미지의 알파 채널로 만들어지므로, 제품이나 스티커가 사각형이 아니라 자신의 윤곽으로 그림자를 드리웁니다. 투명 배경 PNG, 단색 또는 그라데이션 배경 JPG로 내보내거나, 같은 설정의 CSS box-shadow 코드를 복사할 수 있습니다. 아무것도 업로드되지 않습니다. 이미지는 기기를 떠나지 않습니다.

그림자를 만드는 세 숫자: 오프셋, 블러, 스프레드

거의 모든 나쁜 그림자는 이 셋 중 하나를 잘못 잡은 결과입니다. 오프셋은 그림자가 피사체에서 얼마나 밀려 나가는지로, 빛이 어디에 있고 물체가 얼마나 떠 있는지를 알려 줍니다. 블러는 가장자리가 얼마나 부드러운지입니다. 작은 블러는 단단하고 직접적인 빛(햇빛, 플래시)으로 읽히고, 큰 블러는 확산된 빛(흐린 날, 소프트박스)으로 읽힙니다. 스프레드는 블러를 적용하기 전에 그림자 모양을 키우거나 줄이므로, 두꺼운 후광이나 물체 아래로 살짝 들어간 그림자를 만들 수 있습니다.

이미지에 그림자를 추가하는 방법

1. 이미지 업로드: 사진을 업로드 상자로 끌어다 놓거나 탭하여 고르세요. 아무것도 업로드되지 않습니다. 파일이 브라우저로 바로 읽힙니다.
2. 광원 배치: 광원 패드의 태양을 드래그하세요. 그림자는 반대쪽으로 떨어지며, 중심에서 더 멀리 끌수록 그림자도 더 멀어집니다. 화살표 키도 됩니다.
3. 그림자 모양 잡기: 유형을 고르세요 — 드롭, 레이어드, 롱 또는 글로우 — 그런 다음 블러, 스프레드, 불투명도, 그림자 색을 설정하세요.
4. 배경 고르기: PNG라면 투명으로 두거나, 단색 또는 그라데이션으로 채우세요. 추가 여백은 결과 주위에 숨 쉴 공간을 더합니다.
5. 다운로드 또는 복사: 원본, 절반 또는 2× 크기의 PNG 또는 JPG를 저장하거나, 생성된 CSS를 복사해 웹 요소에 같은 그림자를 재사용하세요.

상자가 아니라 피사체를 따라가는 그림자

대부분의 온라인 그림자 도구는 파일 뒤에 사각형을 그립니다. 사진에는 괜찮지만, 오려낸 제품 샷, 로고 또는 스티커에는 맞지 않습니다. 둥근 병이 네모난 그림자를 드리우면 안 됩니다. 이 도구는 이미지의 알파 채널을 읽고 실제 실루엣으로 그림자를 만들므로, 투명한 영역에는 그림자가 생기지 않습니다. 투명 PNG를 올리면 이를 확인하는 초록색 안내가 보입니다. 일반적인 불투명 사진에서는 실루엣이 사진의 사각형이며, 모서리 반경을 설정했다면 먼저 둥글게 잘립니다.

어떤 그림자 유형을 써야 하나요?

픽셀이 아니라 비율인 이유

여기 슬라이더는 모두 이미지 짧은 변의 비율입니다. 9% 블러는 400 px 썸네일과 4000 px 사진에서 같아 보이므로, 마음에 드는 프리셋은 더 큰 이미지로 바꿔도 다시 계산할 필요 없이 그대로 작동합니다. 실제 숫자가 필요할 때를 위해, 도구는 블러 슬라이더 옆과 CSS 패널 안에 해당하는 픽셀 값을 보여 줍니다.

자연스러운 그림자를 위한 팁

내 이미지는 비공개인가요?

네. 처리를 위해 사진을 서버에 올리는 온라인 편집기와 달리, 이 도구는 HTML5 캔버스를 사용해 웹 브라우저에서만 실행됩니다. 이미지는 기기를 떠나지 않고, 저장되지 않으며, 만들 계정도 없습니다. 탭을 닫으면 이미지는 사라집니다.

자주 묻는 질문

이 그림자 추가 도구는 무료이고 비공개인가요?

네. 완전히 무료이며 HTML5 캔버스를 사용해 웹 브라우저에서만 실행되므로, 이미지가 어떤 서버에도 업로드되지 않고 내 기기에 남습니다. 다운로드한 이미지에는 워터마크가 없고 가입도 필요 없습니다.

그림자가 투명 PNG의 모양을 따라가나요?

네. 그림자는 이미지의 알파 채널로 만들어지므로, 오려낸 제품, 로고 또는 스티커가 사각형이 아니라 자신의 윤곽으로 그림자를 드리웁니다. 일반적인 불투명 사진이라면 실루엣은 사진의 사각형이며, 선택적으로 모서리를 둥글게 할 수 있습니다.

배경을 투명하게 유지하려면 어떻게 하나요?

배경을 투명으로 설정하고 PNG로 다운로드하세요. 그림자와 피사체만 그려지므로 나중에 어떤 색 위에도 올릴 수 있습니다. JPG는 투명도를 저장할 수 없어 JPG로 내보내면 배경이 흰색으로 채워집니다.

블러와 스프레드의 차이는 무엇인가요?

블러는 그림자 가장자리를 부드럽게 하여 거리에 따라 흐려지게 합니다. 스프레드는 블러를 적용하기 전에 그림자 모양 자체를 키우거나 줄이므로, 스프레드가 크고 블러가 작으면 단단한 후광이 되고, 스프레드가 작고 블러가 크면 부드러운 구름처럼 됩니다.

그림자가 이미지 가장자리에서 잘리는 이유는 무엇인가요?

그림자는 사진 바깥에 공간이 필요합니다. 이 도구는 오프셋, 블러, 스프레드로부터 여백을 자동으로 더하고, 추가 여백 슬라이더로 더 넣을 수 있습니다. 색이 있는 배경 위에 JPG로 내보내면, 그 여백이 그림자가 떨어지는 자리입니다.

같은 그림자의 CSS를 받을 수 있나요?

네. CSS 패널은 현재 설정과 맞는, 이미지에서 측정한 픽셀 단위의 바로 붙여넣을 수 있는 box-shadow 및 filter drop-shadow 규칙을 보여 줍니다. 파일을 내보내지 않고 웹 요소에 같은 느낌을 주려면 복사하세요.

추가 자료

• CSS box-shadow — MDN
• filter: drop-shadow() — MDN
• 알파 합성 — Wikipedia