Chrome DevTools에서 스크린샷을 찍으려면 어떻게 하나요?

DevTools를 열고(Mac은 Cmd+Option+I, Windows는 Ctrl+Shift+I), Command Menu를 엽니다(Mac은 Cmd+Shift+P, Windows는 Ctrl+Shift+P). 'Capture full size screenshot' 또는 'Capture screenshot'을 입력하면 이미지가 다운로드 폴더에 저장됩니다.

DevTools에서 모바일 기기를 시뮬레이션할 수 있나요?

네. Mac에서는 Cmd+Shift+M, Windows에서는 Ctrl+Shift+M을 눌러 기기 툴바와 반응형 모드를 여세요. iPhone이나 Pixel 프리셋을 고르거나 크기와 기기 픽셀 비율을 직접 설정합니다.

DevTools 스크린샷이 실제 모바일 화면과 같나요?

완전히 같지는 않습니다. DevTools는 뷰포트 크기와 기기 픽셀 비율을 흉내 내지만 데스크톱 브라우저 엔진으로 렌더링합니다. 터치 동작, 모바일 전용 CSS, 브라우저의 기본 기능은 실제 기기와 다를 수 있습니다.

DevTools에서 전체 페이지 스크린샷도 찍을 수 있나요?

네. Command Menu(Mac은 Cmd+Shift+P, Windows는 Ctrl+Shift+P)에서 'Capture full size screenshot'을 선택하세요. 현재 보이는 영역만이 아니라 스크롤 가능한 전체 페이지를 캡처합니다.

개발자 도구가 있는 브라우저는 무엇인가요?

Chrome(DevTools), Firefox(Developer Tools), Safari(Web Inspector), Edge(Chromium 기반 DevTools) 등 주요 브라우저에 모두 들어 있습니다. 요소 검사, 반응형 모드, 스크린샷 같은 핵심 기능은 비슷하지만 단축키와 화면은 다릅니다.

브라우저 개발자 도구란? | 용어집

브라우저 개발자 도구는 Chrome, Firefox, Edge, Safari에 내장된 도구입니다. 확장 프로그램을 설치하지 않고 페이지를 검사하고, 기기를 시뮬레이션하고, 스크린샷을 캡처하고, 레이아웃을 디버깅합니다.

스크린샷에 활용하는 DevTools 기능

브라우저 DevTools는 주로 디버깅에 쓰지만 스크린샷 캡처와 시각적 테스트에도 바로 활용할 기능이 있습니다.

스크린샷 명령으로 현재 보이는 뷰포트, 스크롤 가능한 전체 페이지, 특정 DOM 요소를 브라우저 안에서 캡처합니다. 확장 프로그램이나 타사 도구가 필요하지 않습니다. 결과는 현재 기기 픽셀 비율을 적용한 PNG입니다. Retina 디스플레이에서는 2배 해상도의 이미지가 만들어집니다.

DOM 검사기에서는 캡처 전에 페이지 내용을 임시로 바꿉니다. 쿠키 배너와 겹치는 요소를 숨기거나 글자를 바꾸고 스타일을 조절한 뒤 필요 없는 요소가 없는 스크린샷을 찍을 수 있습니다. 변경은 현재 브라우저에만 적용되고 새로고침하면 사라지므로 실제 페이지에는 영향을 주지 않습니다.

네트워크 속도 제한은 느린 연결을 시뮬레이션해 로딩 상태, 스켈레톤 화면, 시간 초과 동작을 캡처합니다. 네트워크 상태가 좋지 않을 때 페이지가 어떻게 반응하는지 문서로 남길 때 유용합니다.

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

반응형 모드인 기기 툴바에서는 실제 기기 없이 여러 뷰포트 크기와 특성을 시뮬레이션합니다. Mac에서는 Cmd+Shift+M, Windows에서는 Ctrl+Shift+M으로 전환합니다.

반응형 모드에서는 iPhone, iPad, Pixel, Galaxy 같은 기기 프리셋을 선택하거나 너비, 높이, 기기 픽셀 비율을 직접 입력합니다. 브라우저가 뷰포트 크기와 사용자 에이전트 문자열을 바꿔 반응형 분기점과 기기별 CSS를 적용합니다.

여러 화면 크기의 스크린샷을 캡처할 때 특히 편리합니다. 실제 기기를 여러 대 관리하는 대신 하나의 브라우저 세션에서 뷰포트를 바꾸며 각각 캡처합니다. 화면 크기별 마케팅 이미지나 문서를 만들 때 빠르게 미리 보는 데 알맞지만, 픽셀 단위의 최종 정확도는 실제 기기에서도 확인하는 편이 좋습니다.

DevTools로 스크린샷 캡처하기

Chrome DevTools는 Command Menu에서 여러 방식으로 화면을 캡처합니다.

DevTools를 엽니다. Mac은 Cmd+Option+I, Windows는 Ctrl+Shift+I를 누릅니다.
Command Menu를 엽니다. Mac은 Cmd+Shift+P, Windows는 Ctrl+Shift+P를 누릅니다.
다음 명령 중 하나를 입력합니다.
- "Capture screenshot": 현재 보이는 뷰포트를 캡처합니다.
- "Capture full size screenshot": 스크롤 가능한 전체 페이지를 캡처합니다.
- "Capture node screenshot": 선택한 DOM 요소를 캡처합니다.
- "Capture area screenshot": 드래그한 영역을 캡처합니다.

Firefox에는 점 세 개로 된 페이지 메뉴나 브라우저 콘솔의 :screenshot 명령으로 여는 내장 스크린샷 기능이 있습니다. Safari의 Web Inspector에서는 Elements 탭의 단축 메뉴로 캡처합니다.

같은 캡처를 반복하려면 DevTools Protocol이나 헤드리스 브라우저 스크립트로 자동화하세요. 한 번만 빠르게 캡처할 때는 Command Menu가 브라우저에서 이미지 파일로 가는 가장 짧은 방법입니다.

실제 스크린샷 작업에서는 자동 캡처 규칙을 만들기 전에 DevTools로 구도, 반응형 분기점, 일회성 수정 사항을 빠르게 확인합니다. 뷰포트 크기를 점검하고 방해되는 요소를 숨긴 뒤 반복 가능한 헤드리스 캡처로 만들 가치가 있는지 판단합니다.

흔한 실수

기기 픽셀 비율을 설정하지 않습니다. DevTools의 반응형 모드는 기본으로 1배 DPR을 사용합니다. Retina 화질이 필요하다면 기기 툴바 설정에서 DPR을 2나 3으로 바꾸세요. 그렇지 않으면 실제 디스플레이와 상관없이 표준 밀도의 이미지가 만들어집니다.
에뮬레이션을 실제 기기와 같다고 봅니다. DevTools는 뷰포트 크기와 DPR을 시뮬레이션하지만 실제 기기의 렌더링 엔진, 글꼴 렌더링, 터치 동작까지 재현하지는 않습니다. 빠른 미리 보기와 초안에는 에뮬레이션을 쓰고 최종 확인은 실제 기기에서 진행하세요.
DevTools 패널을 화면에 둔 채 캡처합니다. 검사기 패널이 화면 공간을 차지해 실제 뷰포트 너비를 바꿉니다. DevTools를 별도 창으로 분리하거나 캡처 전에 패널을 닫아 정확한 뷰포트 크기를 확보하세요.
스크롤 위치를 무시합니다. "Capture screenshot"은 현재 보이는 부분만 기록합니다. 화면 아래 내용이 필요하면 먼저 해당 위치로 이동하거나 "Capture full size screenshot"으로 전체 페이지를 캡처하세요.

브라우저 개발자 도구