- Published on
Headless Browser
- Authors
- Name
- 윤영서
Headless? Headless Browser?
Headless란 다들 아시겠지만 영어로 '머리가 없는'이라는 뜻입니다. IT 분야에서 Headless라는 용어는 '사용자 인터페이스(특히 시각적 인터페이스, 즉 GUI)가 없는 상태'를 의미합니다.
Headless Browser는 이러한 Headless 상태의 브라우저로 그래픽 사용자 인터페이스(GUI)가 제거된 웹 브라우저를 뜻합니다. 이는 일반 브라우저처럼 웹페이지를 렌더링하고 자바스크립트도 실행하지만, 화면에 실제로 보여주지 않고 백그라운드에서 동작합니다.
그렇다면 GUI가 없어서 기능이 저하된 브라우저일까요? 당연히 아닙니다. 일반적인 브라우저에서는 어려움을 겪는 가볍고 효율적인 자동화 작업을 브라우저에서 실행할 수 있습니다.
왜 Headless라고 부를까?
컴퓨터 과학에서 Head는 시스템의 앞부분, 즉 사용자와 직접 상호작용하는 부분을 의미합니다. 브라우저의 경우 다음과 같은 요소들이 Head 역할을 합니다.
- 브라우저 창과 프레임
- 주소창 및 탭
- 메뉴바와 툴바
- 시각적 렌더링 화면
Headless Browser는 이런 시각적 요소들을 모두 제거하고 순수한 브라우저 엔진만 남긴 상태입니다. 마치 몸통만 있고 머리가 없는 것과 같다고 해서 Headless라는 이름이 붙었습니다.
Headless Browser의 종류
- Puppeteer : Google에서 개발한 Node.js 라이브러리로, Chrome/Chromium을 제어할 수 있습니다.
- Playwright : Microsoft에서 개발했으며, Chrome, Firefox, Safari 등 여러 브라우저를 지원합니다. 저희 팀에서는 Playwright을 사용하여 e2e 테스트를 진행하고 있습니다.
- Selenium WebDriver : 오래된 역사를 가진 웹 자동화 도구로, 다양한 프로그래밍 언어를 지원합니다.
언제 Headless Browser를 사용할까?
- 웹 스크래핑
대량의 웹 데이터를 자동으로 수집할 때 사용합니다. 특히 JavaScript로 동적으로 생성되는 콘텐츠를 수집할 때 유용합니다.
- 자동화 테스트
위에서 언급한 것처럼 웹 어플리케이션 사용자 시나리오 테스트를 할 때 유용합니다. CI/CD 파이프라인에서 특히 중요한 역할을 합니다.
- 성능 모니터링
웹사이트의 로딩 시간, 메모리 사용량 등을 측정하여 성능을 모니터링합니다.
Headless Browser의 장점
- 효율성
GUI 렌더링이 없기 때문에 메모리 사용량이 적고 빠른 실행 속도를 가집니다. 이러한 효율성은 자동화된 테스트나 서버 측 작업과 같이 시각적 렌더링이 불필요한 작업에 특히 유용합니다.
- 서버 환경 최적화
GUI가 없는 Linux 서버 환경에서도 문제없이 작동합니다. 또한 사용자 개입 없이 지속적으로 실행할 수 있습니다.
- 확장성
여러 브라우저 인스턴스를 동시에 실행할 수 있고 사용자 행동 변수가 없어 예측 가능한 결과를 얻습니다.
사용시 주의 사항
- 디버깅의 어려움
화면에 보이지 않기 때문에 문제가 발생했을 때 원인을 파악하기 어려울 수 있습니다. 개발 단계에서는 {headless: false} 옵션을 사용하여 테스트하는 것이 좋습니다.
- 사이트 차단 위험
일부 웹사이트는 Headless Browser를 감지하고 차단할 수 있습니다. 이런 경우 User-Agent를 설정하거나 인간의 행동을 시뮬레이션해야 합니다.
- 자원 관리
브라우저 인스턴스를 제대로 종료하지 않으면 메모리 누수가 발생할 수 있으므로 항상 browser.close()를 호출해야 합니다.