브라우저 개발자 도구

브라우저 개발자 도구는 웹 브라우저에 내장된 개발용 도구입니다. Chrome DevTools, Firefox Developer Tools, Safari Web Inspector가 여기에 해당합니다. 페이지 구조와 스타일을 보여주고, JavaScript 출력을 기록하고, 네트워크 요청을 기록하고, 성능을 분석합니다.

대부분의 개발자 도구는 기기 에뮬레이션을 제공합니다. 뷰포트의 너비와 높이, 기기 픽셀 비율, 사용자 에이전트 문자열을 설정하므로, 데스크톱 브라우저가 페이지를 휴대폰처럼 렌더링합니다. 에뮬레이션은 실제 기기의 브라우저 엔진, 글꼴, 터치 동작을 재현하지 않습니다.

Mac의 Chrome에서 Option+Command+I를 누르면 개발자 도구가 열립니다. Safari에서는 Web Inspector를 쓰기 전에 설정에서 Develop 메뉴를 켜야 합니다.

스크린샷에 쓰는 개발자 도구 기능

• 화면에 보이는 뷰포트, 스크롤 가능한 전체 페이지, 선택한 영역 또는 요소 하나를 캡처함.
• 캡처 전에 정확한 뷰포트 크기와 기기 픽셀 비율을 설정함.
• 캡처 전에 쿠키 배너나 채팅 위젯 같은 요소를 숨기거나 수정함.
• 네트워크 속도를 제한해서 페이지가 로드되는 동안의 모습을 확인함.

반응형 모드와 기기 에뮬레이션

Chrome에서는 device toolbar라고 부르는 반응형 모드가 페이지 영역을 선택한 너비와 높이로 조정합니다. 일반적인 휴대폰과 태블릿 프리셋이 있으며, 사용자 지정 크기도 설정할 수 있습니다. 기기 픽셀 비율은 CSS 픽셀 하나가 이미지 픽셀을 몇 개로 만드는지 정합니다. 따라서 비율 3에서 너비 390픽셀 뷰포트는 너비 1170픽셀 스크린샷이 됩니다.

개발자 도구로 스크린샷 캡처하는 방법

1. 개발자 도구를 열고, 특정 크기가 필요하면 device toolbar를 켭니다.
2. Shift+Command+P로 Command Menu를 엽니다.
3. "screenshot"을 입력하고 뷰포트, 전체 크기, 영역 또는 노드 명령을 선택합니다.
4. 브라우저가 PNG를 다운로드합니다.

자주 하는 실수

• 개발자 도구를 창 안에 도킹한 채로 두어, 일반 캡처에서 뷰포트가 줄어듦.
• 에뮬레이션을 초기화하지 않아서 이후 캡처가 휴대폰 크기로 찍힘.
• 지연 로드되는 이미지가 나타나기 전에 캡처함.
• 에뮬레이션 결과를 실제 기기에서 페이지가 동작한다는 증거로 간주함.

같은 스크린샷을 반복해서 찍나요?

Temposhot Website Capture는 URL 목록에 대해 Desktop 1920×1080, Tablet 768×1024, Mobile 390×844 크기로 같은 캡처를 반복합니다. 웹사이트 스크린샷 자동화를 참고하십시오.

자주 묻는 질문

개발자 도구로 페이지 전체를 이미지 한 장에 담을 수 있나요?

Chrome의 "Capture full size screenshot" 명령은 페이지 전체 높이를 렌더링합니다. 매우 긴 페이지나 지연 로드가 많은 페이지는 여전히 불완전할 수 있습니다.

페이지 한 개만 캡처하는 더 간단한 방법이 있나요?

Chrome 116 이상에서 Temposhot 전체 페이지 스크린샷 확장 프로그램은 활성 페이지를 스크롤하며 PNG 한 장을 다운로드합니다.

출처

• Chrome DevTools documentation
• Web development tools (Wikipedia)

관련 자료

• Website Capture 옵션: 기기, 영역, 대기 설정.
• 코드 없이 웹사이트 스크린샷 자동화하기: 단계별 안내.
• Screenshot Resolution Checker: 캡처의 픽셀 크기 확인.