스크린샷이 예상보다 두 배 큰 이유는 무엇인가요?

Retina나 고DPI 화면에서 캡처했을 가능성이 큽니다. 2x 화면은 CSS 픽셀 하나를 가로·세로 2개씩 물리 픽셀 4개로 렌더링하므로 1440x900 뷰포트가 2880x1800 스크린샷이 됩니다.

공유하기 전에 Retina 스크린샷을 줄여야 하나요?

용도에 따라 다릅니다. 표준 밀도의 웹에 표시할 때는 1x로 줄이면 지나치게 큰 이미지를 피할 수 있습니다. 인쇄나 고DPI 화면에서는 추가 픽셀이 유용하므로 유지하세요.

기기 픽셀 비율(DPR)은 물리 픽셀과 CSS 픽셀의 비율입니다. DPR 2는 CSS 픽셀 하나를 2x2 물리 픽셀로 렌더링한다는 뜻입니다. 많은 Retina 화면은 DPR 2 또는 3을 사용합니다.

표준 화면에서 전체 픽셀 크기로 표시하면 두 배 크게 보입니다. 원래 뷰포트 크기에 맞춰 줄이면 추가 픽셀 데이터 덕분에 더 선명하게 보입니다.

일부 캡처 도구와 헤드리스 브라우저는 기기 픽셀 비율을 직접 정할 수 있습니다. Retina 화면에서도 DPR을 1로 설정하면 뷰포트 크기와 정확히 같은 표준 밀도 스크린샷을 만듭니다.

Retina 스크린샷은 고DPI(Retina) 화면에서 캡처해 보이는 뷰포트보다 픽셀 크기가 2배 또는 3배인 이미지입니다. 더 선명하지만 파일도 큽니다.

표준 밀도 화면에서는 CSS 픽셀 하나가 물리 픽셀 하나에 대응합니다. 브라우저 창 너비가 1440CSS 픽셀이면 스크린샷도 1440픽셀 너비입니다.

기기 픽셀 비율(DPR)이 2인 Retina 화면에서는 CSS 픽셀 하나를 2x2 물리 픽셀로 렌더링합니다. 같은 1440CSS 픽셀 창이 너비 2880픽셀 스크린샷이 됩니다. 고급 모바일 기기에서 흔한 DPR 3에서는 너비 4320픽셀입니다.

시각 단위마다 세부 정보가 많아 이미지가 선명하지만 파일은 크게 늘어납니다. 2x Retina 스크린샷은 같은 뷰포트의 1x 캡처보다 가로·세로가 각각 두 배라 전체 픽셀은 네 배입니다. 1x에서 500KB인 PNG가 2x에서는 1.5~2MB가 될 수 있습니다.

화면의 작은 영역을 찍었는데도 큰 고해상도 이미지가 나와 놀라기 쉽습니다. 화면에 보이는 논리 픽셀보다 물리 픽셀이 훨씬 많기 때문입니다.

웹 표시 — 2x 스크린샷을 전체 픽셀 크기로 웹페이지에 넣으면 의도보다 두 배 크게 보입니다. CSS width·height나 width 속성으로 올바른 논리 크기를 정하면 Retina 화면에서 더 선명하게 표시됩니다.
인쇄 — Retina 캡처의 추가 픽셀이 장점입니다. 2x 스크린샷은 적당한 물리 크기에서 300DPI로 인쇄할 해상도를 갖지만 같은 뷰포트의 1x 캡처는 픽셀이 보일 수 있습니다.
문서 — 고DPI 화면에서는 선명하지만 웹 전송에는 필요 이상으로 클 수 있습니다. 1.5x로 줄이거나 반응형 이미지를 사용해 선명함과 크기의 균형을 맞추세요.
파일 보관 — Retina 화면에서 페이지 수백 개를 일괄 캡처하면 1x보다 데이터가 크게 늘어납니다. 저장 공간과 대역폭을 계획할 때 증가한 크기를 반영하세요.

대부분의 캡처 도구와 헤드리스 브라우저에서 기기 픽셀 비율을 직접 정할 수 있습니다.

Puppeteer와 Playwright에서는 deviceScaleFactor 옵션으로 DPR을 조절합니다. 실제 화면 하드웨어와 관계없이 1로 설정하면 표준 밀도, 2로 설정하면 Retina에 해당하는 캡처를 만듭니다.

macOS 기본 캡처 도구(Cmd+Shift+3 또는 Cmd+Shift+4)는 화면의 기본 DPR로 항상 찍습니다. Retina MacBook에서는 2x입니다. 타사 캡처 도구에는 1x로 찍는 옵션이 있을 수 있습니다.

Windows 캡처 도구(Win+Shift+S)는 시스템의 화면 배율에 맞춰 캡처합니다. 화면과 설정에 따라 100%(1x), 125%, 150%(사실상 1.5x), 200%(2x)일 수 있습니다.

일부 자동 캡처 도구는 캡처별 정확한 DPR을 지정해 일괄 작업 한 번으로 1x와 2x 버전을 함께 만들 수 있습니다.

반복 가능한 스크린샷 파이프라인에서 'Retina'는 사실상 '기기 픽셀 비율을 명시한 캡처'라는 뜻입니다. 코드로 값을 고정하면 검토용 작은 1x와 마케팅·인쇄·보관용 선명한 2x 중 필요한 결과를 선택할 수 있습니다.

Retina 스크린샷을 웹에서 전체 픽셀 크기로 표시합니다. 너비 2880픽셀 이미지를 CSS 크기 없이 표준 화면에 표시하면 2880CSS 픽셀을 차지해 의도보다 훨씬 넓습니다. 표시 크기를 명시하세요.
일괄 작업에서 파일 크기를 계산하지 않습니다. 500페이지를 1x가 아닌 2x로 캡처하면 전체 저장 공간이 대략 네 배가 됩니다. 큰 묶음을 실행하기 전에 Retina 해상도가 필요한지 정하세요.
좋지 않은 리샘플링 방식으로 줄입니다. 2x 이미지를 최근접 이웃으로 1x로 줄이면 가장자리가 거칠어집니다. 쌍삼차나 Lanczos로 부드럽게 축소하세요.
모든 캡처가 Retina라고 생각합니다. 팀원이 서로 다른 하드웨어를 쓰면 1x와 2x가 섞여 이미지 크기가 일정하지 않습니다. 팀의 DPR을 표준화하거나 값을 명시하는 자동 도구를 사용하세요.