웹페이지 전체를 스크린샷으로 저장하기

ALT

산을 배경으로 한 한국 잡지 표지

📝 한줄 요약

블로그 글 같은 긴 웹페이지를 한 장의 이미지로 저장하려고 크롬 개발자도구를 썼는데, 화면 배율이 100%가 아니라 오른쪽이 잘렸어요. 배율을 조정한 후 여러 방법 중 상황에 맞는 것을 고르니 깔끔하게 되었습니다.

Before: 페이지 오른쪽이 잘려서 저장됨
After: 배율 조정 → 깔끔하게 전체 저장

👥 이런 분께 추천

• 블로그 글이나 포트폴리오를 이미지로 저장해서 공유하고 싶은 분

• 긴 웹페이지를 몇 장으로 나눠서 찍는 게 번거로운 분

• 네이버 블로그처럼 iframe 때문에 제대로 캡처가 안 되는 사이트를 다루시는 분

진행 방법

1. 왜 문제가 생겼나

사례글이나 블로그 글 같은 긴 페이지를 한 장의 이미지로 저장해서 공유하고 싶었어요. 보통은 크롬 개발자도구의 “전체 페이지 캡처”를 쓰면 되는데, 저는 이상하게 오른쪽이 자꾸 잘렸습니다.

2. 첫 번째 벽: 오른쪽이 왜 잘리지?

처음엔 개발자도구 설정 문제나 사이트의 CSS 문제라고 생각했어요. 하지만 알고 보니 내 화면 배율이 100%가 아니었습니다.

윈도우의 화면 배율이 125%나 150% 같은 값으로 설정되어 있으면, 캡처 도구도 그 배율을 적용해서 화면보다 너비가 좁아져서 오른쪽이 잘리는 거였어요.

확인 방법:

• 윈도우 설정 → 시스템 → 디스플레이 → “스케일” 확인

• 크롬 개발자도구도 같은 배율을 따릅니다

3. 해결: 배율 조정 후 찍기

가장 간단한 해결책: 배율을 100%로 바꾼 뒤 전체 캡처를 하면 됩니다. 하지만 그 외에도 상황에 맞는 여러 방법이 있습니다.

방법 1. 크롬 개발자도구 전체 캡처

가장 간단합니다. 크롬에서 페이지를 열고:

1. F12(맥은 Cmd+Option+I)로 개발자도구를 엽니다

2. Ctrl+Shift+P(맥은 Cmd+Shift+P)를 누릅니다

3. “capture full size screenshot”을 입력하고 엔터를 칩니다

이 방법의 장점은 버튼 클릭만으로 끝난다는 것입니다. 다만 화면 배율이 100%일 때만 제대로 나옵니다.

ALT

구글 크롬 설정 페이지 스크린샷

방법 2. 모바일 주소로 열기 (네이버 블로그용)

네이버 블로그는 특이하게 iframe 구조라서, 위 방법으로는 겉 프레임만 잡힐 수 있습니다. 이 경우:

주소를 m.blog.naver.com/...로 바꿔서 열면 모바일 버전으로 뜹니다. 여기서 위의 캡처 방법을 쓰면 iframe 없이 본문이 깔끔하게 나옵니다.

장점:

• 실제 독자가 보는 모바일 화면 기준이라 정확합니다

• 본문만 깔끔하게 담깁니다

• 썸네일 글씨가 모바일에서 읽히는지 판단하기에도 좋습니다

방법 3. 확장 프로그램 쓰기

크롬 웹스토어에서 GoFullPage 같은 “전체 페이지 캡처” 확장을 설치하면 버튼 한 번으로 끝입니다. 자주 쓸 거라면 이게 제일 편합니다.

방법 4. 여러 장으로 나눠 찍기

사실 이것도 충분합니다. 스크롤을 조금씩 내리면서 화면이 겹치도록 4~6장 정도 캡처해서 순서대로 올려줄 수 있습니다.

윈도우는 Win+Shift+S, 맥은 Cmd+Shift+4로 원하는 영역만 잡을 수 있습니다.

꼭 포함할 부분:

• 썸네일이 나오는 맨 위쪽

• 이미지가 들어간 부분

• 해상도는 본문 글씨가 뭉개지지 않을 정도로 (소제목 서식이나 강조 색상을 확인해야 하니까)

4. 최종 정리: 상황별 추천 방법

🛠 사용한 도구

배운 점

💡 핵심 교훈

1. 시스템 설정부터 확인하세요

도구가 제대로 안 작동하면 도구 자체보다 환경 설정을 먼저 봐야 할 때가 있습니다. 화면 배율, 폰트 설정 같은 OS 레벨의 것들이 예상 못 한 문제를 만들 수 있으니까요.

2. 같은 목표도 방법은 여러 개

웹페이지 전체를 이미지로 저장한다는 목표는 같지만, 상황마다 최적의 방법이 달라집니다. 한 가지만 고집하지 말고 대안들을 알아두면 훨씬 수월합니다.

3. 모바일 버전은 생각 이상으로 유용합니다

네이버 블로그의 모바일 주소 우회처럼, 문제가 있으면 원본 말고 다른 렌더링을 시도해보는 것도 좋은 방법입니다.

적용할 점

🎯 결과

📋 앞으로 쓸 팁

블로그 글이나 웹페이지를 이미지로 저장할 때:

1. 첫 시도: 배율 100% 확인 → 크롬 개발자도구 캡처

2. iframe 문제 있으면: 모바일 버전으로 열고 찍기

3. 자주 할 거면: 확장 프로그램 설치

4. 빠르게 하고 싶으면: 해상도만 확인하고 여러 장 나눠 찍기

솔직한 소감

블로그 화면을 잘리지 않게 하나의 이미지로 캡처하는 방법을 알아보았습니다.

클로드가 알려준 방법을 활용하다가 오류가 생겼는데 처음엔 “뭐가 문제지?” 하면서 찾아헤맸어요. 개발자도구 설정을 만져보고, 사이트 CSS도 확인해보고… 근데 알고 보니 내 화면 배율이었다니.

또 웹페이지 캡처 하나도 상황마다 다른 방법을 써야 한다는 걸 배웠어요.

개발자도구가 만능은 아니고, 네이버 블로그는 모바일로, 자주 하면 확장이 편하고… 이렇게 각각의 장단점을 아는 게 결국 더 효율적이라는 생각이 듭니다.