Google 크롬을 사용하여 특정 치수로 웹 사이트 스크린 샷을 찍는 방법
온라인으로 공유하고 싶은 사이트나 페이지의 포트폴리오가 있는 대행사나 회사라면 각 사이트의 균일한 스크린샷을 캡처하는 데 어려움을 겪었을 것입니다.
우리와 함께 작업하고 있는 클라이언트 중 하나는 회사 범위 내에서 내부적으로 호스팅할 수 있는 호스팅된 인트라넷 솔루션을 빌드합니다. 인트라넷은 기업이 회사 소식을 전달하고, 마케팅 정보를 배포하고, 혜택 정보를 제공하는 등의 작업에 매우 유용합니다.
우리는 이 클라이언트가 모회사의 웹 사이트에서 인트라넷 솔루션 제품을 마이그레이션하도록 도왔습니다. 새로운 소셜 프로필 구축, Marketo 업데이트, 사이트 결합을 위해 수행한 일부 맞춤 개발 분해 등 모든 것을 통합하는 광범위한 프로젝트였습니다.
한 가지 중요한 단계는 고객의 새 웹 사이트에서 눈에 잘 띄는 고객 인트라넷 사이트의 멋진 제품 사진을 확보하는 것이었습니다. 각 스크린샷이 사이트 전체에서 일관되게 동일한 너비와 높이를 유지하고 싶었습니다. Google 크롬을 사용하지 않는 한 어려울 수 있습니다.
Google 크롬을 사용한 클라이언트 스크린 샷
잘 모를 수도 있지만 Google 크롬에 내장된 강력한 개발자 도구 세트를 사용하여 완벽한 스크린샷을 캡처할 수 있습니다. 흥미롭게도 놀라운 유연성에도 불구하고 잘 알려진 기능은 아닙니다. 이 기능을 사용하면 특정 크기 및 화면 크기에 대한 반응형 사이트의 사진을 찍을 수도 있습니다.
다음은 Google 크롬을 사용하여 웹 페이지의 완벽하고 특정 크기의 스크린샷을 찍는 방법에 대한 간단한 비디오 자습서입니다.
Google 크롬으로 스크린 샷을 찍는 단계
Google 크롬의 개발자 도구는 장치 툴바를 사용하여 사이트를 미리 볼 수 있습니다. 이 도구는 개발자가 다양한 장치에서 다양한 뷰포트 크기로 사이트가 어떻게 보이는지 확인할 수 있도록 제작되었지만 웹 페이지의 완벽한 크기의 스크린샷을 얻는 완벽한 방법이기도 합니다.
이 경우 아름다운 인트라넷 사이트를 구축한 산업 전반에 걸쳐 클라이언트의 각 주요 클라이언트가 스크린샷을 찍어 웹 사이트의 포트폴리오 내에서 모두 표시할 수 있기를 바랍니다. 우리는 페이지의 너비가 정확히 1200px, 높이가 800px이기를 원합니다. 이를 달성하려면 다음을 수행하십시오.
- 맨 오른쪽 탐색 버튼 (세로 점 3 개)에서 사용자 정의 및 제어 메뉴.
- 선택 추가 도구> 개발자 도구
- 토글 장치 도구 모음 장치 옵션 및 치수를 불러옵니다.
- 첫 번째 옵션을 반응형 (Responsive), 그런 다음 크기를 1200 x 800으로 설정하고 Enter 키를 누르십시오. 이제 페이지가 해당 치수로 표시됩니다.
- 장치 도구 모음의 오른쪽에서 탐색 버튼 (세로 점 3 개)을 클릭하고 캡처 화면 캡처.
- Google 크롬은 완벽한 스크린 샷을 캡처하여 다운로드 첨부하여 이메일로 보낼 수 있는 폴더입니다. 전체 크기 스크린샷은 전체 페이지 길이를 차지하고 높이 제한을 무시하므로 전체 크기 스크린샷을 선택하지 않도록 하십시오.
스크린 샷용 Google 크롬 키보드 단축키
키보드 단축키 마스터라면 이러한 단축키를 사용하여 전체 페이지 스크린샷을 찍을 수 있습니다. 뷰포트의 최대 높이를 설정할 수 없기 때문에 이 접근 방식이 마음에 들지 않습니다. 하지만 전체 페이지의 스크린샷이 필요한 경우 유용합니다.
키보드 단축키(Mac)
1. Alt + Command + I
2. Command + Shift + P
키보드 단축키(Win / Linux)
1. Ctrl + Shift + I
2. Ctrl + Shift + P