용어
반응형 스크린샷
반응형 스크린샷은 데스크톱, 태블릿, 모바일처럼 여러 뷰포트 너비에서 웹페이지를 캡처해 화면 크기에 따라 레이아웃이 바뀌는 모습을 보여 줍니다.
반응형 스크린샷이 중요한 이유
반응형 웹 디자인에서는 뷰포트 너비에 따라 페이지의 모습과 동작이 달라집니다. 1440px에서 잘 보이는 레이아웃이 375px에서는 깨질 수 있습니다. 여러 크기의 스크린샷을 남기면 디자이너, 개발자, QA 팀이 모든 대상 화면에서 레이아웃이 작동하는지 확인할 수 있습니다.
브라우저 창 크기를 바꾸며 눈으로만 확인하는 것과는 다릅니다. 반응형 스크린샷은 비교하고 공유하고 보관할 수 있는 영구적인 시각 기록을 만듭니다. 실시간 페이지를 보지 않는 사람의 승인이 필요할 때 특히 유용합니다.
자주 쓰는 뷰포트 크기
대부분의 반응형 스크린샷 작업은 몇 가지 표준 중단점을 대상으로 합니다.
- 1440px — 큰 데스크톱 모니터
- 1280px — 일반 데스크톱 또는 노트북
- 1024px — 작은 데스크톱 또는 가로 방향 큰 태블릿
- 768px — 세로 방향 태블릿
- 375px — iPhone 계열 모바일
- 360px — Android 계열 모바일
정확한 크기는 프로젝트의 중단점에 따라 달라집니다. 임의의 너비가 아니라 실제로 레이아웃이 바뀌는 너비에서 캡처하는 것이 중요합니다.
반응형 스크린샷 캡처 방법
수동 방식은 브라우저 창 크기를 바꾸거나 DevTools 기기 에뮬레이션을 사용해 너비마다 스크린샷을 찍습니다. 한 번 확인할 때는 충분하지만 규모를 늘리기 어렵습니다.
자동 방식은 뷰포트 너비 목록을 받아 같은 URL을 한 번의 일괄 작업으로 각각 캡처하는 헤드리스 브라우저나 스크린샷 도구를 사용합니다. 일부 웹사이트 크롤러에도 이 기능이 있어 URL과 원하는 뷰포트를 주면 모든 크기의 캡처 묶음을 만듭니다.
흔한 실수
- 데스크톱 너비만 캡처합니다. 모바일과 태블릿에서 시험하지 않으면 작은 뷰포트의 레이아웃 문제를 사용자가 알릴 때까지 놓칩니다.
- 프로젝트와 관계없는 너비를 사용합니다. 임의의 창 너비는 실제 사용자가 만나는 레이아웃 중단점을 활성화하지 않을 수 있습니다. 프로젝트의 CSS 중단점이나 널리 쓰는 기기 너비를 사용하세요.
- 변경 전후를 비교하지 않습니다. 반응형 스크린샷은 변경 전과 후를 나란히 볼 때 가장 유용합니다. 비교가 없으면 새 레이아웃이 올바른지 회귀했는지 판단하기 어렵습니다.
- 가로 방향을 잊습니다. 스마트폰과 태블릿은 가로로도 사용합니다. 두 방향을 모두 지원해야 한다면 둘 다 캡처하세요.
자주 묻는 질문
몇 가지 뷰포트 크기를 캡처해야 하나요?
최소한 데스크톱(1440px 또는 1280px), 태블릿(768px), 모바일(375px)을 캡처하세요. 디자인이 다른 너비에서도 바뀐다면 해당 중단점을 추가합니다.
반응형 스크린샷을 자동화할 수 있나요?
네. 자동 스크린샷 도구와 헤드리스 브라우저는 같은 URL을 여러 뷰포트 너비로 한 번에 캡처합니다. 브라우저 창을 직접 바꾸는 것보다 훨씬 빠릅니다.
반응형 스크린샷은 전체 페이지와 뷰포트 중 무엇을 캡처하나요?
둘 다 가능합니다. 목적에 따라 반응형 캡처를 전체 페이지 또는 뷰포트 스크린샷과 조합하세요. 반응형은 캡처 길이가 아니라 뷰포트 너비를 가리킵니다.
1x와 2x 중 어떤 해상도로 캡처해야 하나요?
검토와 문서에는 보통 1x로 충분합니다. Retina 화면에서 픽셀 단위 QA가 필요하다면 2x 캡처가 실제 렌더링 세부 정보를 보여 줍니다.
출처
- 뷰포트 개념 — MDN