Responsive Screenshot

반응형 스크린샷은 특정 뷰포트 너비와 높이에서 렌더링된 웹 페이지를 캡처한 이미지입니다. 보통 여러 크기로 한 세트를 만듭니다. 반응형 사이트는 CSS 미디어 쿼리, 컨테이너 쿼리, 유연한 레이아웃을 사용하므로, 같은 URL이라도 너비마다 내비게이션, 열 수, 이미지 자르기가 달라집니다.

브라우저는 뷰포트 자체가 좁을 때만 휴대폰 레이아웃을 표시합니다. 데스크톱 스크린샷을 줄여도 레이아웃은 바뀌지 않습니다. 따라서 도구는 페이지를 로드하기 전에 뷰포트 크기를 설정하고, 대부분 기기 배율과 user agent도 함께 설정합니다.

반응형 스크린샷이 필요한 이유

디자인 검토, 고객 승인, QA에는 각 브레이크포인트에서 페이지가 어떻게 보이는지에 대한 증거가 필요합니다. 레이아웃 오류는 특정 너비에서만 나타나는 경우가 많습니다. 예를 들어 태블릿에서만 메뉴가 로고와 겹칠 수 있습니다. 고정된 크기의 캡처 세트는 이런 오류를 한 번의 검토에서 보이게 합니다.

자주 쓰는 뷰포트 크기

분류	예시 뷰포트
데스크톱	1920×1080, 1440×900, 1366×768
태블릿	768×1024 세로 방향
휴대폰	390×844, 360×800

크기는 CSS 픽셀 기준입니다. 3배 배율의 휴대폰은 390×844 CSS 픽셀을 1170×2532 물리 픽셀로 렌더링합니다.

반응형 스크린샷을 캡처하는 방법

• 브라우저에서 개발자 도구를 열고 기기 모드로 전환한 뒤 크기를 선택합니다.
• 코드에서는 이동하기 전에 Playwright나 Puppeteer로 뷰포트를 설정합니다.
• Temposhot Website Capture(Command+2)에서는 Device를 선택합니다. Desktop 1920×1080, Tablet 768×1024, Mobile 390×844 중 하나입니다. URL 행마다 기기와 Area를 따로 설정할 수 있고, Render preview로 전체 실행 전에 한 행을 미리 볼 수 있습니다.

반응형 스크린샷의 흔한 실수

• 목표 너비에서 렌더링하지 않고 데스크톱 캡처를 축소함.
• 한 비교 세트에 뷰포트 캡처와 전체 페이지 캡처를 섞음.
• 휴대폰 레이아웃의 절반을 가리는 쿠키 배너를 남겨 둠.
• 서로 다른 배율로 찍은 캡처를 비교함.

같은 스크린샷을 반복해서 찍고 있나요?

Website Capture에서 기기마다 URL을 한 번씩 추가하고, 목록을 한 번에 실행합니다. 자세한 내용은 캡처 옵션을 참고하십시오.

자주 묻는 질문

반응형 스크린샷과 모바일 스크린샷은 같은가요?

아닙니다. 모바일 스크린샷은 크기가 하나입니다. 반응형 스크린샷은 여러 크기에 걸친 세트입니다.

실제 휴대폰이 필요한가요?

레이아웃 점검에는 휴대폰 뷰포트로 설정한 브라우저로 충분한 경우가 많습니다. 기기에 따라서만 나타나는 오류는 실제 기기로 확인해야 합니다.

출처

• Responsive web design on Wikipedia
• Viewport (MDN glossary)

관련 자료

• Website Capture 빠른 시작: 첫 URL 목록 실행.
• 실행과 결과: 행 상태와 재시도.
• 종횡비 계산기: 크기의 비율 확인.