기기 목업 이미지 화질 저하, 이유와 확인법
스크린샷 한 장을 브라우저 창이나 스마트폰 프레임에 끼워 목업으로 만들었는데, 막상 다운로드한 파일을 열어 보면 원본보다 흐릿하게 나오는 경우가 있습니다. 옵션을 잘못 고른 게 아니라 목업을 만드는 방식 자체에 이유가 있습니다. 원리를 알면 발표 자료나 포트폴리오에 쓰기 전에 실제 해상도를 미리 확인할 수 있습니다.
요약 ① 스크린샷을 브라우저·폰 프레임에 합성할 때 화면에 그려지는 폭에는 상한이 있어, 원본이 그보다 크면 줄어듭니다 ② 원본보다 작은 스크린샷은 확대되지 않고 그대로 들어가므로, 애초에 작은 원본은 오히려 그대로 유지됩니다 ③ 다운로드한 목업 이미지의 실제 픽셀 크기는 운영체제 기본 기능만으로 바로 확인할 수 있습니다
목업으로 만들면 화질이 떨어져 보이는 이유
레티나 디스플레이에서 캡처한 스크린샷은 가로 폭이 2000px가 넘는 경우가 흔합니다. 이런 고해상도 이미지를 그대로 프레임에 합성하면 브라우저가 매 순간 큰 캔버스를 다시 그려야 해서 미리보기가 느려지거나 버벅일 수 있습니다.
그래서 브라우저에서 동작하는 이미지 합성 도구들은 대부분 화면에 표시할 폭에 상한을 두고, 그 상한보다 큰 원본은 비율을 유지한 채 줄여서 그립니다. 결과물을 다운로드해도 이 축소된 크기 그대로 저장되므로, 원본 해상도를 기대했다면 실제 파일은 그보다 작게 나옵니다.
반대로 원본 스크린샷의 폭이 이 상한보다 작다면 이야기가 다릅니다. 작은 이미지를 억지로 키우지는 않으므로, 저해상도 캡처는 저해상도인 채로 프레임에 들어갑니다.
원본 해상도를 유지하려면 — 확인하는 방법부터
가장 확실한 대안은 캔버스 표시 상한이 없는 일반 디자인 도구를 쓰는 것입니다. 파워포인트·키노트·피그마 같은 도구에 스크린샷과 프레임 이미지를 직접 얹어 내보내면, 표시용 축소 없이 원본 해상도 그대로 목업을 만들 수 있습니다. 다만 프레임 이미지를 따로 구하고 그림자·모서리·정렬을 일일이 맞춰야 하는 수고가 따릅니다.
수고를 들이지 않고도 결과물의 실제 크기는 확인할 수 있습니다. 먼저 원본 스크린샷의 픽셀 크기를 봅니다. macOS는 미리보기 앱에서 '도구 > 크기 조정'을 열면, Windows는 파일 속성의 '자세히' 탭에서 '크기(가로x세로)' 값을 보면 바로 나옵니다.
그다음 목업을 만들어 다운로드한 파일도 같은 방법으로 크기를 확인합니다. 두 값을 비교했을 때 다운로드 파일의 가로 폭이 원본보다 작다면, 그 차이만큼 화면 표시 단계에서 줄어든 것입니다. 인쇄물이나 정확한 픽셀 규격이 필요한 곳에 쓰기 전에 이 비교부터 해 두면 나중에 다시 작업하는 일을 줄일 수 있습니다.
저희 도구로 확인하기. 스크린샷을 끌어다 놓기만 하면 브라우저·스마트폰 프레임과 그림자, 배경까지 자동으로 맞춰 줍니다. 다만 다운로드한 파일의 실제 크기는 위 방법으로 한 번 확인해 보는 것이 안전합니다.
무료 · 가입 불필요 · 브라우저에서만 처리(서버 업로드 없음)
자주 막히는 지점
목업을 만들 때 실제로 자주 헷갈리는 지점을 정리했습니다.
| 상황 | 실제로 일어나는 일 |
|---|---|
| 레티나 캡처처럼 폭이 큰 스크린샷을 넣음 | 화면 표시 폭에 맞춰 축소되고, 다운로드 파일도 그 크기로 저장됩니다 |
| 원본 폭이 표시 상한보다 작음 | 확대하지 않고 원본 크기 그대로 프레임에 들어갑니다 |
| 바깥 여백(패딩)을 늘림 | 프레임 바깥 배경만 넓어질 뿐, 스크린샷 자체의 화질은 그대로입니다 |
| 브라우저 대신 스마트폰 프레임을 고름 | 베젤이 추가돼 전체 이미지 크기는 달라지지만 스크린샷이 줄어드는 기준은 동일합니다 |
정리
브라우저·스마트폰 프레임에 스크린샷을 끼워 넣는 목업 도구는 화면에 바로 그려서 보여줘야 하므로, 표시할 폭에 상한을 두고 그보다 큰 원본은 비율대로 줄여서 합성합니다. 반대로 원본이 상한보다 작으면 확대하지 않고 그대로 유지됩니다.
그래서 목업 이미지를 인쇄물이나 특정 픽셀 규격이 필요한 곳에 쓰기 전에는 다운로드한 파일의 실제 가로x세로 픽셀 값을 원본과 한 번 비교해 보는 습관이 필요합니다. 블로그 글이나 발표 자료처럼 화면으로만 보는 용도라면 이 정도 해상도로도 충분한 경우가 대부분입니다.
무료 · 가입 불필요 · 브라우저에서만 처리(서버 업로드 없음)
자주 묻는 질문
목업 이미지를 앱스토어 등록이나 인쇄물에 그대로 써도 되나요?
등록 화면이나 인쇄처마다 요구하는 정확한 픽셀 규격이 다르므로, 다운로드한 파일의 실제 가로x세로 크기를 먼저 확인해 그 규격과 맞는지 비교해야 합니다. 규격에 못 미친다면 여백을 줄이는 것만으로는 해결되지 않고, 애초에 더 큰 원본 스크린샷을 다시 캡처해서 넣어야 합니다.
다운로드한 파일의 실제 픽셀 크기는 어떻게 확인하나요?
macOS는 파일을 미리보기 앱으로 연 뒤 '도구 > 크기 조정' 메뉴를 열면 현재 가로x세로 픽셀 값이 표시됩니다. Windows는 파일을 우클릭해 '속성 > 자세히' 탭을 열면 '크기' 항목에 같은 값이 나옵니다.
여백(패딩)을 늘리면 화질이 좋아지나요?
아니요. 여백은 프레임 바깥의 배경 영역을 넓히는 값일 뿐, 스크린샷 자체를 다시 그리는 것이 아니므로 화질에는 영향을 주지 않습니다. 오히려 여백이 커질수록 전체 이미지에서 스크린샷이 차지하는 비중만 작아져 보일 수 있습니다.
원본보다 더 높은 해상도로 목업을 만들 수는 없나요?
아니요. 이 도구는 원본보다 작은 스크린샷을 확대하지 않고, 원본보다 큰 스크린샷만 화면 표시 폭에 맞춰 줄입니다. 더 높은 해상도의 결과물이 필요하다면 애초에 더 큰 해상도로 화면을 캡처한 뒤 넣어야 합니다.