크롬 스크린 캡쳐 꿀팁 | 스크롤 / 모바일 화면

맥이나 윈도우를 사용하시면 운영체제에 내장된 스크린 캡쳐 방법을 사용하는 것이 대부분입니다. 하지만 먄약, 웹페이지에 있는 컨텐츠를 캡쳐하고 싶으시다면, 아래 방법이 유용하게 사용될 수 있습니다. 웹페이지 화면 전체 스크롤을 캡쳐하는 방법과 PC에서 모바일 화면으로 캡쳐하는 방법으로 나누어 적어놓았으니, 필요한 부분 참조하시기 바랍니다.

크롬이 아닌 다른 브라우저에서도 확장 프로그램을 사용하면 충분히 구현할 수 있는 기능이나, 보편적으로 많이 사용되는 크롬 브라우저로 작성되었습니다.


크롬에서 스크롤 캡쳐하는 방법

브라우저(크롬)에 표시되는 전체 페이지를 캡쳐하는 방법입니다. ‘Full Page Screen Capture’가 요즘 보편적으로 사용되기에 이 확장 프로그램으로 적어놓았습니다. 이외에도 ‘FireShot‘이나 ‘Awesome Screenshot‘을 활용하셔도 무방합니다.

 

1) 확장 프로그램을 추가합니다. ▼

 

2) 캡쳐를 원하는 페이지로 가셔서, 우측 상단의 카메라 버튼을 누릅니다. ▼

 

3) 페이지가 캡쳐되면 우측 상단의 버튼으로 PDF 혹은 PNG 확장자로 저장하실 수 있습니다. ▼

혹, 이미지가 제대로 표시되지 않는 것은 웹페이지에 있는 리소스가 아직 다운로드되지 않았기 때문입니다. 웹페이지 리소스가 정확하게 다운로드된 후에 캡쳐를 진행하시면 됩니다.

 

4) 톱니바퀴 버튼을 누르시면, 이미지 포멧을 ‘PNG’에서 다른 포멧으로 변경 가능하며, 자동 다운로드 설정으로 변경하실 수도 있습니다. ▼


크롬에서 모바일 화면 캡쳐하기

아래 순서대로 진행하시어 원하는 모바일 화면을 얻으신 후에,

 

1) 윈도우의 경우 F12, 맥의 경우 cmd + option + i를 눌러 개발자 도구를 엽니다.

2) 좌측 하단에 있는 모바일 모드를 선택하시면, 각종 모바일 화면에 최적화된 웹페이지를 보실 수 있습니다. ▼

  • 회전 버튼
  • Edit… : 원하는 모바일 기기의 규격이 보이지 않을 때 선택합니다.

물론, m.xxx.com과 같이 모바일 버전의 도메인이 따로 존재하는 페이지의 경우 다르게 표시될 수 있습니다.

 

3) 2)에서 언급한 ‘Edit…’ 버튼을 누르시면 아래와 같이 다른 규격의 기기를 선택하실 수 있습니다.

 

4) 마지막으로 깔끔하게 캡쳐하기 위해, 우측 상단의 ‘삼점 버튼’을 누르시고 ‘Capture screenshot’을 선택하시면 됩니다. ▼

  • 기기의 프레임도 함께 캡쳐하시려면, 아래 그림에 표시된 ‘Show device frame’을 선택하시면 됩니다.

  • 캡쳐 화면 ▼


이상입니다.

댓글 남기기