본문 바로가기
기초 IT

[Tip] WebPage Full ScreenShot

by 민트코코넛 2023. 10. 30.
728x90
반응형

 우리가 바라보는 화면을 스크린샷 하기 위하여 사용하는 방법은 다양하다.

 키보드의 "Print Screen"Key 를 사용하여, 캡처를 할 범위를 지정하는 방법이 있는가 하면, window나 mac os 각각의 방식의 단축키에 따라, 스크린샷을 획득하는 방법도 있다.
* Window의 단축키: "Win" + "Shift" + "s"
* Mac의 단축키: ???

 그 외에도, "캡처도구"를 활용하여 화면을 캡처할 수도 있다.

 여기에세 나는 또 다른 방식의 스크린샷 방법을 작성하고자 한다.
 이 방법은 컴퓨터 활용능력이 좋거나 개발도구가 익숙한 사람이라면 익숙하게 사용하겠지만, 그 외의 기타 사용자에겐 있는지도 모르거나 또는 있는 것은 알지만, 나처럼 익숙하지 않아서 쓸 때마다 찾아야 하는 경우가 있어서 기록을 남긴다.
 해당 방법의 명칭은 "개발도구"를 활용한 "웹페이지 풀 스크린샷"이라고 할 수 있다.\
 사용하는 방법은 다음과 같으며, 크롬 환경과 엣지 환경 모두 사용가능하고, 기타 웹브라우저도 가능할 것이다.

 사실상... 개발 도구에서 어떤 언어를 쓰고, 검색을 하는가의 문제인것 같다.. 크롬에서도 영어로 하면, capture를 검색하지만, 한글로 하면, 캡처를 검색하면 되더라...

(크롬 환경)
1. 크롬 웹 브라우저를 동작하고, 스크린샷을 획득할 페이지로 이동한다.

2. 획득할 화면의 페이지 영역 내부를 마우스로 클릭하여, 포커스를 맞춘다.

3. 키보드에서 "F12" key를 입력하여 "개발도구"를 연다.

4. 개발도구 화면에서 명령어 단축키 "Ctrl" + "Shift" + "p"를 클릭하여, 명령 프롬포트를 실행한다.

5. "Capture"를 입력하여, 검색되는 목록(리스트)에서 "Capture full size screenshot"을 선택한다.

F12 개발도구의 명령 프롬포트에서 "전체화면 스크린샷" 명령어를 선택하는 모습

Capture async stack traces : 음... 얘는.. 캡처의 영역이 아니였다... >> 찐 웹개발자들이 함수를 추적할 때, 쓰는 용도라고...
Capture area screenshot : 특정 영역을 선택해서 캡처
Capture full size screenshot : 스크롤 범위를 포함한, 해당 페이지가 제공하는 전체 화면 캡처
Capture node screenshot : 개발 도구에서, 특정 요소를 선택하고, 해당 요소만 캡처할 때, 사


Capture screenshot : 현재 확인하고 있는 화면의 캡처

6. 폴더 다운로드에서 캡처된 이미지를 확인한다.

개발도구를 활용하여 획득한 "전체화면 스크린샷의 결과물" PNG 이미지

7. 해당 페이지의 풀 스크린 이미지를 원래의 목적에 맞춰서 사용한다.

<끝>

728x90