웹 화면을 캡쳐 하는 아름다운 방법 (Feat. 개발자 모드)

개발자 모드

웹 화면을 캡쳐하는 방법에는 여러 가지가 있습니다.

그중에서 웹 브라우저의 개발자 모드를 활용하여 캡쳐하는 방법을 포스팅을 하겠습니다.

 

ctrl + shift + I 또는 F12를 누루면 왼쪽에 다음 그림과 같이 개발자 모드 패널이 출력됩니다.

 

 

html 코드가 출력되는데 png 파일로 출력하고 싶은 범위의 태그를 선택해서 우클릭 후 "Capture node screenshot"를 클릭하면 png 파일로 다운로드할 수 있습니다.

 

 

빨간색으로 표시된 버튼을 클릭하면 브라우저에서 마우스가 위치한 곳의 태그를 알수 있습니다.

이해를 돕기위해 동영상을 준비해봤습니다.

파란색으로 표시한 버튼을 클릭하면 모바일에서 출력되는 화면을 볼수 있습니다.

 

 

확장프로그램

크롬을 사용하시는 분들은 구글에서 '크롬 화면 캡쳐 확장프로그램'을 검색하시면, 여기서 소개한 복잡한 과정 없이 화면 캡쳐를 하실 수 있습니다. 하지만 저는 아직 제 미음에 맞는 캡쳐 프로그램을 찾지 못해서, 조금 번거롭더라도 위에서 소개한 방식으로 캡쳐하고 있습니다.