브라우저를 코드로 조종해 웹 작업을 자동화하는 방법
브라우저 창이 뜨지 않는 상태에서 웹페이지를 자동으로 열고, 검색어를 입력하며, 원하는 링크를 클릭하는 장면을 상상해 보세요. 이 도구는 개발자가 브라우저의 동작을 직접 제어할 수 있게 해주는 JavaScript 라이브러리입니다. 기본적으로 화면에 브라우저 창을 띄우지 않고 백그라운드에서 작업을 수행합니다.
브라우저를 조종하는 방식
이 도구는 Chrome과 Firefox를 DevTools Protocol 또는 WebDriver BiDi 프로토콜을 통해 제어합니다. 브라우저가 실행되는 동안 페이지 이동, 키보드 입력, 마우스 클릭, 화면 크기 설정 같은 작업을 코드 명령으로 수행할 수 있습니다. 예제 코드에서는 브라우저를 시작하고 새 탭을 연 뒤, 특정 URL로 이동하여 검색 메뉴를 열고 결과를 클릭하는 과정을 보여줍니다. 이러한 조작은 사람이 직접 마우스를 움직이는 것과 동일한 효과를 내지만, 코드로 반복 가능하게 만들어 줍니다.
설치 시 알아야 할 점
설치 명령을 실행하면 필요한 브라우저 버전이 자동으로 다운로드됩니다. npm i puppeteer을 사용하면 Chrome이 함께 설치되며, npm i puppeteer-core를 사용하면 브라우저 없이 라이브러리만 설치할 수 있습니다. 최근 패키지 매니저들은 보안상 설치 스크립트 실행을 기본적으로 차단하므로, 브라우저가 다운로드되지 않을 수 있습니다.
MCP 서버와의 연계
이 저장소는 chrome-devtools-mcp라는 MCP 서버를 제공합니다. 이 서버는 브라우저 자동화와 디버깅을 위해 설계되었으며, Puppeteer 기반입니다. 또한 실험 단계인 WebMCP API도 지원합니다. 이를 통해 브라우저 자동화 작업을 더 구조화된 방식으로 처리할 수 있는 기반을 마련합니다.
사용 전 확인 사항
이 도구는 TypeScript로 작성되어 있으며, Node.js 환경에서 동작합니다. 브라우저 자동화 테스트나 웹 스크래핑, PDF 생성 등 브라우저 조작이 필요한 작업에 적합합니다. README에는 구체적인 성능 수치나 지원되는 브라우저 버전 목록이 명시되어 있지 않으므로, 최신 브라우저와의 호환성은 직접 테스트를 통해 검증하는 것이 좋습니다.