크롬 노드 스크린 샷 - keulom nodeu seukeulin syas

웹 탐험에 필요한 모든 기능을 갖추고 있는 구글 크롬 브라우저에 한 가지 빠진 핵심 기능이 있다. 바로 사용자가 현재 방문한 웹 사이트의 스크린샷을 캡처하는 기능이다.

설사 있다고 하더라도 없는 것처럼 보인다.

여기에는 한 가지 잘 알려지지 않은 비밀이 있다. 크롬은 실제로 스크린샷을 캡처하는 극히 유용한 내장 명령어가 있다. 확장 프로그램도 필요없다. 유연하고 효과적이며 사용하기도 쉽다. 그리고 이 명령어는 윈도우에서도 맥에서도 크롬OS에서도 크롬 브라우저만 있다면 사용할 수 있다.

한 가지 문제라면, 보통 사람이라면 도저히 찾지 못할 이상한 곳에 숨겨져 있다는 것이다.

이 멋진 기능을 제대로 활용하기 전에 한 가지 주의할 것이 있다. 크롬의 이 스크린샷 캡처 기능은 일반 사용자가 가까이 가서는 안되는 브라우저의 특정 영역에 들어간다. 명령어가 크롬 개발자 툴 영역 내에 숨겨져 있고, 이 영역에는 조심하지 않으면 브라우징 세션을 망가뜨릴 수 있는 기술 요소가 가득하기 때문이다. 딱 한 가지 명령어만 사용하고 다른 것은 절대 건드리지 않는다면 괜찮을 것이다.

이해가 됐다면, 이제 이 간단하고 편리하며 확장 프로그램도 필요없는 단축키를 사용해 보자.

1. Ctrl-Shift-I
2. Ctrl-Shift-P
3. Screenshot

이제 화면 오른쪽 패널에서 여러 가지 스크린샷 옵션을 볼 수 있다. 남은 것은 어떤 스크린샷을 캡처할 것인지 선택하는 것이다.

현재 페이지의 특정 영역을 캡처하려면, 그냥 엔터를 입력하면 된다. 기본값이 ‘Capture area screenshot’인데, 저장하고자 하는 영역을 마우스로 선택할 수 있다. 화면 제일 위에서 제일 밑까지 전체 페이지를 캡처하려면 화살표 키나 마우스로 ‘Capture full size screenshot’을 선택하면 된다. 현재 보이는 페이지만 선택하려면 ‘Capture screenshot’을 선택한다. 네 번째로 ‘Capture node screenshot’ 옵션이 있지만, 일반 사용자가 쓸 일은 없을 것이다.

어떤 스크린샷을 다운로드하건 사각형 이미지 파일이 다운로드됐음이 브라우저 창 아래에 나타난다. 이미지 파일은 크롬브라우저의 다운로드 폴더에 저장된다.

좀 더 고급스러운 기능도 있다. 이 방법으로 사각형 스크린샷을 캡처하는 것은 물론, 해당 사이트의 모바일 인터페이스 스크린샷을 컴퓨터에서 바로 캡처할 수도 있다. 방법은 거의 똑같다.

먼저 Ctrl-Shift-I로 시작한다. 소스 코드 창 상단의 아이콘 2개 중 오른쪽 ‘Toggle Device toolbar’를 선택하면 주소창 바로 아래에 별도의 선택 메뉴가 나타난다. 여기서 ‘Responsive’를 클릭하면, 드롭다운 메뉴에서 사용자가 원하는 디바이스에 표시되는 반응형 웹 화면을 볼 수 있다.

원하는 화면을 선택한 다음에는 앞서와 같이 Ctrl-Shift-P와 screenshot을 입력해 스크린샷을 저장할 수 있다. 캡처한 화면은 선택한 디바이스에 표시되는 크기와 모양의 이미지이다.

ⓒ

Ctrl-Shift-I, Ctrl-Shift-P, screenshot을 기억해 두기 바란다. 이제 크롬 브라우저에서 스크린샷을 캡처하는 방법이 완전히 바뀔 것이다.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

① Ctrl + Shift + I (F12)

② Ctrl + Shift + P

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