전체 웹 페이지 스크린샷 스크롤 캡처 찍는 방법 모두 알려드려요
본문 바로가기
이런저런정보

전체 웹 페이지 스크린샷 스크롤 캡처 찍는 방법 모두 알려드려요

by 2022. 7. 5.

웹 서핑하다가 마음에 드는 내용이 있으면 캡쳐하시죠? 한 화면 안에 들어오는 내용이면 클릭 한 번으로 캡쳐하기가 쉬운데 만약 전체 내용을 캡쳐하고 싶을 때는 어떻게 하시나요? 전체 페이지 캡쳐 방법을 몰라 한 화면에 내용을 옮겨가며 여러 번 캡쳐를 하셨나요? 이번 포스팅에서는 웹 페이지 전체 스크린샷을 찍는 방법을 알려드리겠습니다. 플러그인, 크롬, 사파리, 파이어폭스 등 다양한 방법으로 전체 캡쳐하는 방법을 알려드릴 테니 아래에서 확인해 주세요.

 

아이폰에서 전체 페이지 캡쳐를 하려면?

아이폰 전체 화면 캡쳐 - 스크롤 길게 스크린샷 찍는 초간단 방법

 

awesome screenshot 확장 프로그램

확장 프로그램을 사용하여 클릭 한 번으로 웹페이지 전체를 길게 저장하는 방법을 알려드리겠습니다. 사용하려는 플러그인은 Awesome Screenshot이며 크롬, 사파리, 파이어폭스 등 대부분의 브라우저에서 사용할 수 있습니다. 클릭 한 번으로 전체 페이지를 길게 이미지로 저장하고 싶으면 이 방법을 이용해 보세요.

 

 

 

사용 방법은 크롬 기준으로 설명하겠습니다. 사파리, 파이어폭스도 플러그인만 설치하면 모두 같은 방식으로 작동합니다.

 

-우선 크롬 웹스토어에서 awesome screenshot 확장 프로그램을 다운받아 주세요.

 

전체화면-캡처-확장-프로그램
Awesome Screenshot

-확장 프로그램이 설치되었다면 주소창 옆에 awesome screenshot 아이콘이 나타납니다. 만약 보이지 않는다면 퍼즐 모양을 클릭해 설치한 확장 프로그램 목록에서 awesome screenshot 아이콘을 찾아 눌러주세요.

 

-캡처할 옵션이 나타납니다. 이때 ‘Full Page’를 클릭하여 전체 페이지를 캡쳐합니다.

 

Awesome-Screenshot-스크린샷-찍기-full-page
Awesome Screenshot

-잠시 후 웹 사이트 전체 캡처가 완료되고 스크린샷을 편집할 수 있는 창이 나타납니다. 필요한 경우 자르기, 텍스트 입력, 브러쉬 입력 등 간단한 편집을 마치고 완료되었으면 맨 오른쪽 DONE을 누릅니다.

 

Awesome-Screenshot-전체화면
Awesome Screenshot

-다음 나타나는 창에서 Download를 누르면 저장할 파일의 위치와 이름을 설정한 후 Save를 누르면 해당 경로로 전체 웹페이지 스크린샷이 내 컴퓨터에 저장됩니다.

 

크롬 개발자 도구 - 전체 화면 캡쳐

 

만약 크롬 브라우저를 이용하고 있다면 개발자 도구를 이용하여 전체 페이지를 캡처하는 방법도 있습니다. 별도의 확장 프로그램을 설치하지 않고도 간단한 설정으로 캡처를 할 수 있기 때문에 빠르게 페이지 전체 캡쳐를 하려는 분은 시도해볼 수 있습니다.

 

-전체 스크린샷을 찍을 페이지 위에 오른쪽 마우스를 클릭합니다.

 

-검사 (Inspect)를 눌러주세요

크롬-개발자-도구-들어가기
크롬 개발자 도구

-단축키 Command+Shift+P를 동시에 누릅니다. 윈도우 사용자는 Command 대신 Ctrl 키를 눌러 주세요.

 

-아래와 같이 나타나는 창에서 screenshot을 입력합니다.

크롬-스크롤-캡처-개발자-도구
크롬 전체 스크롤 캡처

-전체 페이지 캡쳐를 위해 Capture Full Size Screenshot을 선택합니다. 즉시 전체 화면 캡처가 완료되며 내 컴퓨터에 이미지가 저장됩니다.

 

크롬 개발자 도구로 이동하면 전체 화면 스크롤 캡쳐가 가능합니다. 하지만 오른쪽 마우스가 막혀있는 사이트에서는 오른쪽 마우스가 작동하지 않기 때문에 개발자 도구로 들어가려면 크롬 오른쪽 상단의 점 세 개 아이콘 > 도구 더보기 > 개발자 도구로 이동하면 됩니다. 

 

사파리 개발자 도구 - 전체 화면 캡쳐

맥북에서 크롬 대신 사파리 브라우저를 이용하고 계신다고요? 사파리에서도 크롬처럼 개발자 도구로 들어가 전체 페이지를 캡쳐하는 방법이 있습니다. 위 방법과 거의 같지만 살짝 다른 부분이 있어 그 방법도 소개해 드릴게요.

 

-사파리 브라우저에서 캡쳐하려는 사이트에 들어간 후 상단 메뉴에서 Safari > 환경 설정에 들어갑니다.

 

- 고급 탭으로 들어가 주세요.

사파리-개발자도구-활성화
사파리 개발자 도구 활성화

-화면 하단의 '메뉴 막대에서 개발자용 메뉴 보기'에 체크해 주세요.

 

-이제 다시 웹 페이지로 돌아가면 아래와 같이 상단에 '개발자용'이라는 메뉴가 생성됩니다. 이곳을 누른 후 '웹 속성 연결'을 누릅니다. 

 

사파리-개발자용-스크린샷-찍기
사파리 개발자 도구 불러오기

- 나타나는 개발자 도구 창에서 '요소' 탭으로 이동한 후 아래와 같이 html로 시작하는 곳에 마우스를 올려놓고 오른쪽 버튼을 눌러 ‘스크린샷 캡처'를 선택합니다.

 

사파리-스크린샷-찍기
사파리 개발자 도구 스크린샷 캡처

-캡처본의 이름과 저장 경로를 선택한 후 저장을 누르면 전체 스크린샷이 내 컴퓨터에 저장됩니다.

 

사실 사파리 개발자 도구에서 전체 화면을 캡처하는 것은 상당히 번거로워 awesome screenshot 확장 프로그램을 활용하거나 다른 브라우저를 사용하는 것이 낫습니다. 

 

파이어폭스 - 전체 화면 캡쳐

파이어폭스 사용자라면 좀 더 쉽게 전체 웹페이지를 스크린샷 찍을 수 있습니다. 크롬이나 사파리와 다르게 전체 페이지 캡처 기능이 기본으로 제공되기 때문인데요. 복잡하게 개발자 도구에 들어가지 않아도 전체 페이지를 캡처할 방법은 무엇일까요?

 

-파이어폭스에서 캡쳐하려는 페이지로 이동 후 주소창 쪽에서 오른쪽 마우스를 클릭 후 '도구 모음 사용자 지정'을 눌러주세요.

 

-나타나는 화면에서 ‘스크린샷' 아이콘을 클릭한 후 브라우저 상단 메뉴로 쭉 끌어옵니다.

파이어폭스-전체-스크린샷
파이어폭스 스크린샷

-이 탭을 닫아준 후 캡쳐하려는 웹 페이지로 이동합니다.

 

-좀 전에 끌어놓은 스크린샷 도구 아이콘을 누르면 아래와 같이 캡처 옵션이 뜨며, 전체 페이지 저장을 선택합니다. 지금 화면에 보이는 내용만 캡쳐하고 싶으면 그 옆의 보이는 내용 저장을 눌러주세요. 

 

파이어폭스-전체-페이지-캡처
파이어폭스 스크롤 캡처

-캡처본이 화면에 나타납니다. Download를 클릭하면 전체 페이지가 내 컴퓨터에 저장됩니다.

 

엣지 - 전체 화면 캡쳐

엣지 브라우저를 이용하고 있다면 더 간단합니다. 단축키를 이용하면 전체 페이지 캡쳐가 가능합니다.

 

-엣지 브라우저에서 원하는 페이지로 이동합니다.

 

-단축키 Command (Ctrl) + Shift + S를 누릅니다.

 

-아래와 같이 캡쳐 옵션이 뜹니다. 전체 페이지 캡처를 누르면 페이지 전체를 길게 이미지로 캡처합니다.

 

-저장을 눌러 내 컴퓨터에 이미지로 저장합니다. 기본적으로 저장본은 윈도우의 경우 C:\Users\<user name>\Downloads 맥북의 경우 다운로드 폴더에 저장됩니다.

 

전체 웹페이지를 스크린샷 찍는 방법에 대해 알아보았습니다. 도움이 되셨나요? 크롬이나 사파리는 개발자 도구에 들어가 전체 페이지를 캡쳐해야 하는 번거로움이 있습니다. 그에 반해 파이어폭스나 엣지의 경우 전체 페이지를 캡처할 수 있는 기능이 기본으로 내장되어있기 때문에 훨씬 더 빠르고 편리하게 페이지를 길게 캡쳐할 수 있습니다. 위에서 소개한 방법 모두 무료로 이용할 수 있는 방법이니 본인이 사용하는 브라우저에 맞게 웹 페이지를 캡쳐해 보세요.

 

댓글