핵심 요약
- 점 세 개 '설정 및 기타' 메뉴 > 도구 더보기 > 개발자 도구를 차례로 선택한 후, 오른쪽 상단의 줄임표 아이콘 > 명령 실행(Run command)을 클릭하고 "screenshot"을 입력합니다.
- 네 가지 캡처 유형 중 하나를 선택합니다: 영역 캡처(Area screenshot), 전체 크기 캡처(Full size screenshot), 노드 캡처(Node screenshot), 화면 캡처(Screenshot).
이 글에서는 Microsoft Edge의 개발자 도구 안에 숨겨져 있는 유틸리티를 활용해 스크린샷을 찍는 방법을 소개합니다.
Edge에서 웹페이지 스크린샷 찍는 방법
모든 화면 캡처 프로그램이 스크롤되는 콘텐츠를 깔끔하게 담아내지 못하기 때문에, 브라우저 자체에서 웹페이지 전체를 스크린샷으로 저장할 수 있는 기능은 매우 유용합니다. Edge의 개발자 도구를 사용하면 전체 페이지 캡처를 비롯해 총 네 가지 유형의 스크린샷을 찍을 수 있습니다.
캡처된 이미지 파일은 컴퓨터의 기본 다운로드 폴더에 저장되거나, 저장 위치를 직접 지정하라는 안내가 표시됩니다.
Windows에서는 키보드의 F12 키 또는 Ctrl + Shift + I를 눌러 Microsoft Edge의 개발자 도구를 엽니다. macOS 사용자라면 Command + Option + I 단축키를 사용하세요. Edge 툴바에서도 접근할 수 있습니다. 점 세 개 '설정 및 기타' > 도구 더보기 > 개발자 도구를 선택하면 됩니다.
개발자 도구 패널에서 오른쪽 상단의 줄임표(점 세 개) 아이콘을 클릭해 DevTools 사용자 지정 및 제어 메뉴를 엽니다.
세로 메뉴에서 명령 실행(Run command)을 선택하거나 Ctrl + Shift + P를 누릅니다.
명령 실행 패널에 "screenshot"을 입력하면 네 가지 명령이 나타납니다. 이 명령들을 통해 캡처하고 싶은 웹페이지의 영역을 선택할 수 있습니다.
웹페이지의 특정 영역만 캡처하려면 목록에서 Capture area screenshot(영역 캡처)을 선택합니다. 십자선 커서로 마우스 왼쪽 버튼을 클릭한 상태에서 드래그해 캡처할 영역의 윤곽을 그리면 됩니다.
전체 크기 스크린샷을 원한다면 Capture full size screenshot(전체 크기 캡처)을 선택합니다. 이 옵션은 화면에 현재 보이지 않는 스크롤 콘텐츠까지 모두 포함해 웹페이지 전체를 한 번에 캡처합니다.
개발자 도구 Elements 탭에서 선택한 HTML 노드만 캡처하려면 Capture node screenshot(노드 캡처)을 선택합니다. 선택한 노드를 마우스 오른쪽 버튼으로 클릭한 뒤 Capture node screenshot을 고르는 방법도 있습니다. 예를 들어 'header class'를 선택하면 웹페이지의 헤더 부분만 따로 캡처할 수 있습니다.
현재 화면에 보이는 영역의 스크린샷을 찍으려면 Capture screenshot(화면 캡처)을 선택합니다. 이 옵션은 브라우저 창 안에 실제로 보이는 부분만 캡처하며, 스크롤해야 볼 수 있는 숨겨진 영역은 포함하지 않습니다.
팁: 기기 에뮬레이션과 함께 활용하기
Chrome과 Edge 같은 Chromium 기반 브라우저에서는 다른 기기와 그 기기의 화면 해상도를 에뮬레이션하는 기능도 제공합니다. 이 기능을 스크린샷 명령과 함께 사용하면 특정 기기에서 웹페이지가 어떻게 보이는지 그대로 캡처할 수 있습니다.
개발자 도구 툴바에서 기기 에뮬레이션 전환(Toggle device emulation) 아이콘을 클릭하거나 Ctrl + Shift + M을 누르세요.