Claude Chrome MCP 확장 프로그램 스크롤 스크린샷 공백 문제 해결 방법

실용적 조언

스크롤 하단 캡처 시 document.body.style.transform = 'translateY(-1500px)'와 같은 CSS 변형을 사용하여 콘텐츠를 뷰포트 상단으로 이동시킨 후 캡처를 수행한다.

섹션별 상세

Claude Chrome MCP 확장 프로그램 사용 시 스크롤을 내리면 스크린샷이 배경색만 남고 공백으로 출력되는 현상이 보고됐다. 이는 사용자가 페이지 하단 정보를 AI에게 전달하려 할 때 심각한 정보 누락을 초래한다. 하드웨어 가속이나 특정 CSS 속성 문제로 추측되었으나 실험 결과 브라우저 API 자체의 한계로 확인됐다. 이 문제는 특정 웹사이트에 국한되지 않고 모든 사이트에서 공통적으로 발생한다.

원인 분석 결과 Chrome의 captureVisibleTab API가 페이지 로드 시 초기 뷰포트에 있던 콘텐츠만 캡처하고, 스크롤 아래의 지연 렌더링된 콘텐츠는 합성하지 못하는 것으로 밝혀졌다. 브라우저는 화면 표시를 위해 콘텐츠를 렌더링하지만 스크린샷 API를 위한 레이어 합성은 수행하지 않는다. 이는 IntersectionObserver나 스크롤 애니메이션과는 무관한 API 수준의 동작 방식이다. 결과적으로 API는 페이지 로드 시점의 정적인 뷰포트 데이터만 기억한다.

해결책으로 표준 스크롤 대신 JavaScript를 통해 CSS transform: translateY()를 적용하여 하단 콘텐츠를 초기 뷰포트 영역으로 끌어올리는 방식이 제시됐다. document.body.style.transform을 사용하여 콘텐츠를 위로 밀어 올리면 브라우저가 이미 렌더링한 영역 내에서 캡처가 수행된다. 이 과정에서 스크롤바가 나타나지 않도록 overflow: hidden 처리를 병행해야 깔끔한 이미지를 얻을 수 있다. 이는 브라우저에게 새로운 스크롤 위치를 그리라고 요청하는 대신 기존에 그려진 내용을 위치만 옮겨서 보여주는 원리이다.

javascript

// Hide overflow so you don't see a scrollbar
document.documentElement.style.overflow = 'hidden';
// Shift content up by 1500px (like scrolling to 1500px)
document.body.style.transform = 'translateY(-1500px)';
// Take your screenshot — it now captures correctly!
// Move to the next section
document.body.style.transform = 'translateY(-3500px)';
// Reset when done
document.body.style.transform = '';
document.documentElement.style.overflow = '';

CSS transform을 이용해 스크롤 하단 콘텐츠를 캡처 가능한 영역으로 이동시키는 코드

이 방식은 약 1500px 단위로 콘텐츠를 이동시키며 캡처할 때 가장 안정적으로 작동하며, 작업 완료 후 스타일을 초기화하는 과정이 포함된다. 한 번에 너무 큰 값을 이동시키기보다 구간별로 나누어 캡처하는 것이 데이터 누락을 방지하는 핵심이다. 최종적으로 transform과 overflow 속성을 빈 문자열로 되돌려 페이지 상태를 복구한다. 이러한 단계적 접근은 긴 웹페이지 전체를 AI가 정확히 인식하게 만드는 실질적인 해결책이다.

용어 해설

모델 컨텍스트 프로토콜(MCP): — Anthropic에서 제안한 모델 컨텍스트 프로토콜이다. AI 모델이 외부 도구나 데이터 소스와 표준화된 방식으로 상호작용할 수 있게 돕는 규격이다. 이를 통해 다양한 확장 프로그램과 모델 간의 연결성을 확보한다.
뷰포트(Viewport): — 웹 브라우저에서 사용자에게 실제로 보이는 화면 영역이다. 기기마다 크기가 다르며, 웹 페이지의 전체 내용 중 현재 화면에 출력되는 부분만을 의미한다. 스크린샷 API는 종종 이 영역만을 캡처 대상으로 삼는다.
지연 렌더링(Lazy Rendering): — 페이지의 모든 요소를 한 번에 그리지 않고 사용자가 스크롤하여 해당 영역에 도달할 때만 렌더링하는 기법이다. 브라우저 성능 최적화를 위해 사용되지만, 전체 페이지를 한 번에 캡처하려는 API와 충돌을 일으킬 수 있다.
합성(Compositing): — 브라우저가 렌더링한 여러 레이어를 하나로 합쳐 최종 화면을 만드는 과정이다. 특정 API는 초기 로드 시의 레이어만 합성 대상으로 인식하여 스크롤 이후의 변경 사항을 반영하지 못하는 한계가 있다.
Chrome 캡처 API(captureVisibleTab API): — Chrome 확장 프로그램에서 현재 활성화된 탭의 가시 영역을 이미지로 캡처하는 인터페이스이다. 보안 및 성능 이유로 초기 뷰포트 외부의 콘텐츠를 캡처하는 데 제약이 따르는 경우가 많다.

언급된 도구

Claude in Chrome MCP extension중립

Chrome 브라우저 내에서 Claude와 상호작용 및 스크린샷 캡처