소프트웨어 개발자의 메카 깃허브와 주목받는 깃허브(GitHub)트렌드 “퍼펫티어(Puppeteer)”

페펫티어

「깃허브는 전세계 오픈소스의 대부분이 모여있는 소셜 코드 레파지토리입니다.
깃헙의 기술 트렌드를 따라가는 것 만으로 기술 트렌드를 따라가는 데에 좋은 도움이 됩니다. 매달 한개 혹은 두개의 깃헙트렌드를 소개하는 시간을 깃허브 연재를 통해 진행하고자 합니다.」

깃허브는 2008년 설립된 ‘깃’(Git) 전문 호스팅 업체입니다.
깃허브의 영향력은 점점 커져 2015년 기준으로 깃허브 사용자는 1200만명이 넘었으며, 3030만개가 넘는 저장소가 운영되고 있습니다. 깃허브는 오픈소스 소프트웨어의 중심지 역할을 하면서 오픈소스 프로젝트가 널리 퍼지는 데 크게 기여하고 있습니다.

이번 포스팅에서는 지난달 가장 핫한 프로젝트인 퍼펫티어(Puppeteer)에 대해 소개하겠습니다.

퍼페티어( Puppeteer)

프로젝트 링크 : https://github.com/GoogleChrome/puppeteer/

첫번째 프로젝트는 구글 크롬 프로젝트에서 Headless Chrome Node API 로 내 놓은 퍼펫티어(Puppeteer)입니다. 퍼펫이라고 하면 번역하면 인형술사이고 꼭두각시 인형을 다루는 사람을 이야기 합니다.

이 프로젝트의 배경부터 이야기 하자면 올해(2017년) 4월 경 구글프로젝트에서는 크롬에 헤드리스(Headless) 모드를 추가했습니다. 헤드리스(Headless) 브라우저라고 하면 일반적으로 CLI환경에서 브라우저가 시각적으로 보여지지 않고 백그라운드에서 작동할 수 있는 것을 이야기 하는데, 이 전까지 가장 유명한 것은 PhantomJS라는 프로젝트였습니다. 크롤링을 하고 스크린 샷을 찍어서 다운로드하고 등의 일들을 할 수 있었습니다. 그래서 데스크탑이 아닌 서버에서 DOM을 읽어야 하는 경우 등에서 많이 사용되었습니다.

필자의 경우는 테스트 환경을 꾸밀 수 있지 않을까 하는 기대에 관련된 작업들을 진행해 보았고 관련되어 링크를 남기기도 했습니다.

링크 : 헤드리스(Headless) 크롬과 selenium2의 조합을 사용해봅시다 with node
(http://keen.devpools.kr/2017/06/07/about-test/ )


그런데, 지난 한달 가장 주목받은 프로젝트가 된 이 퍼페티어(puppeteer)는 Node.js에서 헤드리스 (Headless )크롬을 사용할 수 있는 API들을 제공하는 것입니다. 헤드리스(Headless) 모드를 발표하자마자 Phantom.JS는 더 이상 개발 안하기로 선언을 한 것과 마찬가지로 Node.js 진영에 새로운 무기가 생겨버린 셈이 되었습니다.

1. 설치를 해 보자.

먼저 프로젝트를 한번 만들어 봅시다.

$mkdir puppeteer-project && cd puppeteer-project
$yarn add puppeteer

이렇게 설치를 하고 나면 프로젝트에 index.js 파일을 만듭니다.

(코드) index.js

(코드) index.js
       const puppeteer = require('puppeteer');  (async () = > {  const browser = await puppeteer.launch(); const page = await browser.newPage(); await page.goto('http://devpools.kr');  await page.screenshot({path:'devpools.png'});     browser.close();

스크린샷을 가져 오는 코드가 작성되었습니다. 개발바보들 첫 페이지의 스크린 샷을 가져오는 소스 코드를 작성한 이후에 node index.js 명령어를 입력하면 다음과 같은 이미지를 가지고 오는 것을 볼 수 있습니다.
기본적으로 지정된 이미지 크기는 800*600으로 지정됩니다. 보통 phantomJS 같은 경우는 스크롤을 다 잡아 가던 초반 모습에 비해 메모리 관리를 위한 것인지 이미지 해상도도 그렇게 좋은 거 같지는 않아 보입니다.
PDF로 Export 하는 기능도 API를 통해 구현이 가능합니다.

(그림) 개발바보들 스크린 샷
(그림) 개발바보들 스크린 샷

2. 크롤링을 해보자

이번엔 find.js 라는 파일을 아래와 같이 만들어봅시다. 실제로 이미지와 지금 아래 크롤링 소스는 해당 프로젝트와 내용이 거의 유사합니다.

크롤링 소스 - 'use strict';   const puppeteer = require('puppeteer');   (async() => { //브라우저 객체와 페이지 객체를 만들고 const browser = await puppeteer.launch(); const page = await browser.newPage();  //구글 검색창 방문 await page.goto('http://google.com',{waitUntil:'networkidle'});  //개발 바보들에 대한 검색어를 입력하고  await page.type('devpools');  //검색버튼을 누루고       await page.click('input[type = submit]');   //검색한 결과의 타이틀을 가져와서   //Wait for the results to show up   await page.waitForSelector('h3 a');   const links = await page.evaluate(() => {    const anchors = Array.from (document.querySelectionAll('h3 a')); return anchors.m ap(ahchor => anchor.textcontent);  });   //콘솔에 출력한다.
console.log(links.join('|n'));  browser.close();    })();//

소스 코드에 대한 설명은 주석에 달아 둔데로 브라우저 객체와 페이지 객체를 만들고 구글 검색창을 방문해서 개발 바보들에 대한 검색어를 입력하고 검색버튼을 누른 뒤 검색된 결과의 타이틀을 가져와서 콘솔에 출력합니다.
그 결과는 다음과 같다. 이 과정 중에 어떤 브라우저의 인터렉션도 필요 없었고 (내부적으로는 크롬 헤드리스 브라우저가 작동을 했지만) 사용자의 경우는 결과만 가져올 수 있습니다.

시사점

퍼펫티어(puppeteer) 프로젝트 이후에 구글 크롬팀은 도커(Docker)에서 이 프로젝트가 돌아가는 프로젝트를 따로 내 놓았습니다. 도커(Docker)는 컨테이너 기반의 오픈소스 가상화 플랫폼인데, 도커 기반의 프로젝트를 내 놓았다는 것은 미리 셋팅해 둔 프로그램이 가상화된 이미지들을 동시에 사용할 일들을 전제로 한다것을 의미합니다.
왜 구글은 이런 제품을 내놓고 있는 걸까요? 워낙 혁신적인 기업이라 속내를 다 살펴볼 수는 없지만 지속적으로 이런 종류의 API를 내놓고 있는 것은 아마도 구글 웹 프로젝트의 많은 부분이 브라우저 스크립팅 자동화로 움직이는 것을 인지할 수 있고 그 중심에 인공지능이 있지 않을까 하는 생각이 들어 잠시 한번 고민을 해 보았습니다. 아마도 구글에서 공개한 오픈소스 범용 딥러닝 프레임워크인 텐서플로가 조만간 DOM 기반의 러닝 모델을 공개하는 날도 오지 않을까요? (참고로 DOM:Document Object Model은 ‘문서객체모델’ 이라고 하며 documment객체를 의미한다. DOM은 HTML 요소(element)를 제어(생성,삭제 등)에 사용됩니다.)
게다가 크롤링이라는 분야는 지금 IT 기술에 없어서는 안되는 중요한 역할을 하고 있습니다. 빅데이타 분야는 물론이고 인공지능 컴퓨팅의 가장 저변에 깔린 부분이 데이타를 어떻게 확보하는가 라는 데 초점이 맞춰져 있다고 하면 좋은 크롤링 도구는 강력한 무기가 됩니다. 그런데, 퍼펫티어(puppeteer) 는 단순한 크롤러가 아니라 제공되는 API를 통한 브라우저 제어를 통해 데이타 수집에 가까워서 예전의 로봇 크롤링이 할 수 있는 수준보다 더 높은 수준의 크롤링을 할 수 있게 됩니다.
예를 들어 SPA(Single Page Application) 에서 기존에 할 수 없었던 이벤트 트리거링을 해서 실제 사이트의 데이타를 얻어낼 수 있는 것입니다. SPA에서의 크롤링 문제를 구글이 해결했다는 이야기가 올해 초에 나왔고 이는 구글은 이 문제를 미리 해결한 다음에 오픈소스화 한 것일 수도 있다라고 볼수 있습니다. SPA에서는 자바스크립트가 감추고 있는 서버를 통해서 가져오는 컨텐츠들이 존재하는데, 기존 크롤러들은 이 문제를 해결하지 못하는데 퍼펫티어로(puppeteer) 는 가능합니다. 또한 네이버를 비롯한 다른 국내 검색엔진의 크롤링 엔진도 헤드리스 브라우저와 도커(docker)를 이용해 더 많은 정보를 크롤링할 수 있다는 점에서도 좋은 인사이트를 얻을수 있습니다.



▶   해당 콘텐츠는 저작권법에 의하여 보호받는 저작물로 기고자에게 저작권이 있습니다.
▶   해당 콘텐츠는 사전 동의없이 2차 가공 및 영리적인 이용을 금하고 있습니다.

도경태 프로
도경태 프로 IT테크놀로지 전문가
삼성SDS 개발실

SCP(SDS Certified Professional)로 삼성SDS에서 테크리드를 담당하고 있습니다. OSGeo에서 오픈소스 활동을 하고 있습니다. 잘 모르는 기술에 대해서 낯선 사람들과 이야기 하면서 배워 나가는 것을 좋아합니다.

구독하기

인사이트 리포트 소식을 메일로 받아보세요