크롬 자체 기능으로 스크린샷 찍기

크롬자체기능으로스크린샷찍기_1


구글 크롬 브라우저에서 웹페이지를 캡처할 때 대부분 부가기능인 확장 프로그램의 도움을 받고 있는 것으로 알고 있습니다.


저도 캡처 샷 대부분은 윈도우 자체 기능과 Nimbus Screenshot...이라는 툴을 사용하는데요.


크롬은 확장 프로그램이 없어도 내장된 기능만으로 웹페이지를 캡처할 수 있습니다.

바로 개발자 도구를 실행해 주기만 하면 되는데요.


1.

개발자 도구 창을 여는 방법은 브라우저 오른쪽 상단 툴바의 세로 3점 크롬 맞춤설정 및 제어 아이콘을 누르고, 도구 더보기 > 개발자 도구를 탭하면 웹페이지 오른쪽으로 창이 열립니다.

크롬자체기능으로스크린샷찍기_2


개발자 도구를 더 쉽게 여는 방법은 단축키 사용인데요.

F12 키를 누르거나 Ctrl + Shift +I 조합을 동시에 누르면 개발자 도구를 불러올 수 있습니다.


2.


개발자 도구가 열리면 다시 Ctrl + Shift + P 키를 눌러 검색창을 연 후 입력란에 Screenshot이라고 입력합니다.

그러면 아래 샷처럼 네가지 메뉴의 캡처 도구가 열리는데요.

맨위 Capture area screenshotScreenshot 버튼을 누른 후 캡처하고 픈 웹페이지 영역을 마우스 드래그 & 드롭으로 사용하는 용도이고, 두번째 Capture foll size screenshot은 웹페이지 전체를 캡처할 수 있는 옵션입니다.

Screenshot 버튼을 누르기만 하면 알아서 전체 웹페이지가 캡처되고 PNG 파일로 PC에 자동 저장됩니다.

세번째 Capture node screenshot 옵션은 우리와 같은 일반인은 거의 사용할 일이 없는 개발자용이므로 패스하고, 네번째 Capture screenshot은 현재 화면에 보여지는 페이지를 캡처하는 버튼인데요.

크롬자체기능으로스크린샷찍기_3


어떤 스크린샷을 선택하든 사각형의 PNG 이미지 파일로 다운로드됨을 브라우저 하단에 표시되며 사용자가 지정한 폴더에 정확히 저장됩니다.


3.

또 개발자 도구 왼쪽 상단 휴대폰 모양 아이콘에 마우스를 올려 놓으면 Toggle device toolbar라는 도구가 표시되는데요.

Toggle device toolbar를 마우스로 한번 클릭하거나, 단축키로 Ctrl + Shift + M 조합을 눌러 보시길요.

크롬자체기능으로스크린샷찍기_4


주소창 바로 아래 별도의 메뉴가 표시되고 해당 웹페이지는 모바일 화면으로 전환되는데요.

여기서 Responsive로 되어있는 드롭 다운 버튼을 누르고 원하는 폰 기종을 선택하여 위 2번 설명처럼 Ctrl + Shift + P 후, Screenshot을 입력하고 캡처할 옵션을 선택하면 폰 기종에 맞는 해상도로 화면을 스크린샷할 수 있습니다.

크롬자체기능으로스크린샷찍기_5


이제 이 글을 요약하자면 크롬 개발자 도구로 스크린샷을 찍으려 한다면...

Ctrl + Shift + I (F12)

Ctrl + Shift + P

Screenshot 만 기억하면 될 듯 합니다.



댓글

Designed by JB FACTORY