스크린샷 뒤에 배경을 넣는 것은 완성도를 높이는 가장 빠른 방법입니다. 밋밋한 사각형이던 스크린샷이 어떤 표면 위에 놓인 하나의 오브젝트로 바뀝니다. 주변에 여백이 생기고, 모서리가 부드러워지고, 약간의 깊이감이 더해지죠. 이 가이드에서는 세 가지 배경 옵션(그라데이션, 단색, 투명)을 언제 골라야 하는지, 그리고 스크린샷을 서버에 넘기지 않고 이 결과를 얻는 방법을 다룹니다.
배경 하나가 모든 것을 바꾸는 이유
원본 스크린샷에는 여백이 없고, 놓이는 배경과 분리되지도 않습니다. 배경을 더하면 여백(패딩) — 스크린샷 주변을 둘러싼 색 띠 — 이 생기고, 이것만으로도 곧바로 "의도된" 결과처럼 보입니다. 스크린샷의 모서리를 둥글게 하고 뒤에 희미한 그림자를 넣으면, 평평하게 누워 있던 이미지가 배경에서 떠오릅니다. 이 요소들이 함께 작동하는 겁니다. 배경은 캔버스, 여백은 숨 쉴 공간, 그림자는 깊이입니다.
그라데이션 배경
은은한 투톤 그라데이션은 앱 출시나 변경 사항 안내용 스크린샷이 고급스러워 보이는 비결입니다. 여백을 부드러운 색으로 채워, 스크린샷과 경쟁하지 않으면서도 시선을 끌어줍니다. 이미지를 출시 공지나 히어로 이미지처럼 — 조금 에너지가 느껴지게 — 만들고 싶을 때 그라데이션을 고르세요.
캔버스 위에 스크린샷을 올리고, 프리셋 그라데이션 중 하나를 고른 다음, 색 띠가 균형 있게 보일 때까지 여백을 조정하세요. 미리보기가 실시간으로 업데이트되므로 PNG로 내보내기 전에 스크린샷, 모서리, 그림자, 배경까지 전체 구성을 한눈에 확인할 수 있습니다.
단색 배경
단색은 더 차분하고 브랜드에 어울리는 선택입니다. 브랜드 색이 있고 그 안에 스크린샷을 깔끔하게 얹고 싶을 때, 평평한 단색 채우기는 초점을 오롯이 스크린샷에 두고 화려하기보다 정돈된 느낌을 줍니다. 문서, 진중한 공지, 또는 서로 통일감이 필요한 이미지 묶음에 무난한 선택입니다.
투명 배경
배경을 투명으로 설정하면 여백 영역이 색으로 채워지지 않고 비어 있는 상태로 PNG가 내보내집니다. 이 이미지를 여기서 마무리하지 않을 때 — 둥근 모서리와 그림자가 있는 스크린샷을 Figma, Keynote, 썸네일, 또는 직접 만든 레이아웃으로 가져가 이미 준비한 배경 위에 올릴 때 — 바로 이 옵션이 필요합니다. 여백, 모서리 반경, 그림자는 그대로 유지되고, 그림자 뒤의 채우기만 사라집니다. 최종 표면을 다시 여러분에게 넘겨주므로 가장 유연한 옵션입니다.
여백, 모서리, 그림자
어떤 배경을 고르든, 세 가지 조절값이 결과를 결정합니다.
- 여백(패딩) 은 스크린샷 주변에 색이 얼마나 놓일지를 정합니다. 여백이 많을수록 스크린샷이 더 작고 의도적으로 보이고, 적을수록 가깝고 빽빽하게 보입니다.
- 둥근 모서리 는 스크린샷의 딱딱한 가장자리를 부드럽게 합니다. 작은 반경은 세련되게 보이니, 은은하게 유지하세요.
- 은은한 그림자 는 스크린샷을 배경에서 분리합니다. 무거워 보이지 않도록 희미하게 유지해 깊이만 더하세요.
출력을 정해진 화면비 — 자동, 16:9, 4:3, 1:1, 3:4 — 로 고정할 수도 있습니다. 그러면 여백이 프레임에 맞게 채워져 내보낸 결과가 어디에 쓰이든 딱 맞습니다.
모든 것은 여러분의 기기 안에서
합성은 브라우저 안의 캔버스에서 이루어지므로 스크린샷은 절대 업로드되지 않습니다. 이는 들리는 것보다 훨씬 중요합니다. 스크린샷에는 사적인 메시지, 청구서, 대시보드, 또는 URL 속 토큰이 담겨 있을 수 있습니다. 배경을 더하는 일이 그런 것들을 서버로 보내는 일이 되어서는 안 되고, 여기서는 그렇지 않습니다. 업로드도, 계정도 없으며, 페이지가 로드된 뒤에는 오프라인에서도 작동합니다.
한 가지 솔직히 말씀드리면, 이 도구는 그라데이션-여백-그림자 느낌만 더할 뿐 그 이상은 하지 않습니다. 스크린샷을 브라우저나 폰 프레임 목업으로 감싸주지 않고, 화살표나 주석도 추가하지 않습니다. 한 장의 스크린샷 뒤에 깔끔한 배경을 넣는 것, 딱 그 일에는 정확히 맞습니다.