스크롤을 한참 내려야 하는 긴 뉴스 기사나 웹페이지를 통째로 저장하고 싶을 때가 많습니다. 보통 별도 캡처 프로그램을 깔거나 확장 프로그램을 찾아 헤매곤 하죠. 하지만 크롬 기본 기능만으로 단 3초 만에 스크롤 전체를 저장할 수 있다는 사실, 알고 계셨나요?
한눈에 보기
- 개발자 도구 열기: 키보드
F12또는Ctrl + Shift + I(Mac은Cmd + Option + I)- 명령 메뉴 호출:
Ctrl + Shift + P(Mac은Cmd + Shift + P) 입력 후full검색Capture full size screenshot선택 시 페이지 전체가.png파일로 다운로드 폴더에 자동 저장- 크롬(Chrome) 및 마이크로소프트 엣지(Edge) 브라우저에서 모두 동일하게 사용 가능
프로그램 설치 없이 단축키 두 번으로 전체 화면 캡처하기
마치 긴 두루마리 종이를 한 번에 펼쳐 복사기에 넣듯, 크롬 개발자 도구를 활용하면 보이지 않는 페이지 끝까지 한 장으로 저장할 수 있습니다. 크로미움 기반의 마이크로소프트 엣지(Edge) 브라우저에서도 동일하게 작동합니다.
캡처 순서는 매우 단순합니다. 단축키로 개발자 도구와 명령 메뉴를 차례로 연 뒤 명령어만 선택하면 끝납니다.
| 단계 | Windows / Linux 단축키 | macOS 단축키 | 실행 내용 |
|---|---|---|---|
| 1단계 | F12 또는 Ctrl + Shift + I | Cmd + Option + I | 개발자 도구(Chrome DevTools) 열기 |
| 2단계 | Ctrl + Shift + P | Cmd + Shift + P | 명령 메뉴(Command Menu) 호출 |
| 3단계 | screenshot 또는 full 입력 | screenshot 또는 full 입력 | Capture full size screenshot 선택 |
명령을 실행하면 화면 아래 보이지 않는 영역까지 페이지 전체가 하나의 .png 이미지 파일로 자동 생성되어 기본 ‘다운로드’ 폴더에 저장됩니다.
상황에 맞춰 골라 쓰는 개발자 도구 4가지 캡처 모드
크롬 명령 메뉴에서는 전체 화면 외에도 목적에 맞는 4가지 스크린샷 기능을 제공합니다. 용도에 맞는 명령어를 입력해 필요한 영역만 골라 담을 수 있습니다.
| 캡처 모드 명칭 | 한글 메뉴 표기 | 기능 설명 |
|---|---|---|
Capture full size screenshot | 전체 크기 스크린샷 캡처 | 보이지 않는 하단 끝까지 페이지 전체 캡처 |
Capture screenshot | 스크린샷 캡처 | 현재 모니터 화면에 보이는 영역(Viewport)만 캡처 |
Capture area screenshot | 영역 스크린샷 캡처 | 마우스로 직접 드래그하여 지정한 사각 영역 캡처 |
Capture node screenshot | 노드 스크린샷 캡처 | Elements 패널에서 선택한 특정 HTML 태그 요소만 캡처 |
웹페이지의 특정 박스나 표 하나만 깔끔하게 따내고 싶다면 Capture node screenshot을, 화면에 보이는 부분만 빠르게 남기려면 Capture screenshot을 활용하면 편리합니다.
빈 화면 없이 깔끔하게 저장하는 실전 꿀팁과 주의사항
스크롤을 내려야 이미지가 뒤늦게 나타나는 지연 로딩(Lazy loading) 방식의 웹페이지는 캡처 전 주의가 필요합니다. 단축키를 누르기 전에 마우스 스크롤을 페이지 맨 아래까지 한 번 내렸다 올려 이미지를 모두 불러와야 빈칸 없이 온전하게 저장됩니다.
결과물은 클립보드에 복사되지 않고 파일 다운로드 방식으로 즉시 저장됩니다. 현재 기본 개발자 도구 기능에서는 클립보드 바로 복사는 공식 지원되지 않습니다.
또한 상단 메뉴 바가 화면을 따라다니는 고정 헤더(Sticky/Fixed Header) 사이트의 경우, 웹사이트별 CSS 구조에 따라 상단 메뉴가 중복 출력되거나 상단에만 고정될 수 있으니 저장된 파일을 확인해 보는 것이 좋습니다.
지금 보고 있는 긴 웹페이지에서 F12를 누르고 Ctrl + Shift + P를 누른 뒤 full을 검색해 보세요.
답글 남기기