“Headless 브라우저”, 브라우저 창도 없는데 어떻게 클릭하지?

headless 브라우저란?

웹 개발을 하다 보면 브라우저를 직접 띄우지 않고 웹페이지에 접속해서 데이터를 확인하거나 특정 동작을 자동으로 실행해야 하는 경우가 있습니다.

이때 자주 등장하는 것이 Headless Browser, 우리말로는 헤드리스 브라우저입니다.

일반적인 크롬 브라우저를 생각하면 주소창과 탭이 있고, 화면에 웹페이지가 표시됩니다. 마우스로 버튼을 클릭하거나 키보드로 내용을 입력할 수도 있죠.

그런데 서버에서 이런 작업을 하려고 하면 굳이 화면을 보여줄 필요가 없습니다.

예를 들어 서버에서 다음과 같은 작업을 자동으로 처리한다고 생각해보겠습니다.

• 웹사이트 접속
• 로그인
• 특정 버튼 클릭
• 검색어 입력
• 페이지 이동
• JavaScript 실행
• 특정 요소가 나타날 때까지 대기
• 페이지 내용 확인
• 스크린샷 저장
• 자동화 테스트 실행

이런 작업은 실제 사람이 화면을 보면서 조작하지 않아도 됩니다.

그래서 브라우저의 화면 출력 부분을 사용하지 않고 브라우저 동작만 실행하는 방식이 바로 Headless Browser입니다.

쉽게 말하면,

“브라우저는 실행하지만 사람이 볼 화면은 필요 없다.”

정도로 이해하면 편합니다.

왜 굳이 브라우저 화면을 안 띄울까?

처음에는 저도 이런 생각을 하기 쉽습니다.

“그냥 크롬을 띄워놓고 자동으로 클릭하면 되는 것 아닌가?”

물론 가능합니다.

하지만 서버에서 자동화 작업을 계속 실행해야 한다면 이야기가 달라집니다.

화면을 실제로 렌더링하는 일반 브라우저는 GUI 환경이 필요하고, 서버 자원도 어느 정도 사용하게 됩니다.

특히 여러 페이지를 동시에 처리하거나 반복적으로 자동화 작업을 실행한다면 불필요한 부담이 생길 수 있습니다.

반면 Headless Browser를 사용하면 브라우저를 자동화하면서 화면 표시를 생략할 수 있습니다.

예를 들어 상품 가격을 주기적으로 확인하거나, 웹페이지가 정상적으로 동작하는지 테스트하거나, 특정 페이지의 데이터를 자동으로 수집하는 작업 등에 활용할 수 있습니다.

다만 여기서 중요한 부분이 하나 있습니다.

Headless라고 해서 웹사이트의 데이터를 마음대로 가져와도 된다는 뜻은 아닙니다.

자동화할 대상 사이트의 이용약관이나 robots 정책, API 제공 여부 등을 확인해야 합니다.

기술적으로 가능하다는 것과 실제로 사용해도 된다는 것은 완전히 다른 문제입니다.

Headless Browser에서 자주 사용하는 기술

대표적으로 많이 알려진 도구가 있습니다.

Puppeteer

Puppeteer는 Chrome 또는 Chromium을 자동으로 제어하기 위한 Node.js 기반 라이브러리입니다.

개발자가 JavaScript로 브라우저를 실행하고 페이지에 접근한 다음 특정 요소를 클릭하거나 데이터를 확인할 수 있습니다.

예를 들어 이런 흐름이 가능합니다.

const browser = await puppeteer.launch({
    headless: true
});

const page = await browser.newPage();

await page.goto('https://example.com');

console.log(await page.title());

await browser.close();

코드만 보면 일반적인 웹 요청과 크게 다르지 않아 보이지만 실제로는 브라우저를 실행한 뒤 페이지를 열고 브라우저 수준에서 작업을 수행합니다.

Playwright

요즘 웹 자동화나 E2E 테스트를 이야기할 때는 Playwright도 많이 사용합니다.

특히 Chromium뿐만 아니라 Firefox, WebKit 등을 지원한다는 점이 장점입니다.

또한 페이지 이동, 클릭, 입력, 대기 등의 자동화 기능을 비교적 편하게 작성할 수 있습니다.

예를 들어,

await page.goto('https://example.com');

await page.locator('input[name="keyword"]').fill('검색어');

await page.locator('button[type="submit"]').click();

이런 식으로 실제 사용자가 브라우저에서 하는 행동을 코드로 표현할 수 있습니다.

Headless Browser와 일반 HTTP 요청의 차이

이 부분을 구분해두면 Headless Browser가 왜 필요한지 훨씬 쉽게 이해됩니다.

단순한 웹페이지라면 HTTP 요청만으로 HTML을 가져올 수 있습니다.

예를 들어 서버에서 URL에 요청을 보내고 HTML을 받아서 필요한 데이터를 파싱하는 방식입니다.

그런데 요즘 웹사이트는 JavaScript를 많이 사용합니다.

처음 서버에서 받은 HTML에는 데이터가 거의 없고 JavaScript가 실행된 이후 화면에 데이터가 표시되는 경우도 있습니다.

이런 사이트에서는 단순 HTTP 요청만으로 원하는 결과를 얻기 어려울 수 있습니다.

Headless Browser는 실제 브라우저 환경에서 JavaScript를 실행할 수 있기 때문에 이런 동적인 페이지를 자동화하는 데 유리합니다.

즉,

HTTP 요청 → HTML을 가져오는 방식

과

Headless Browser → 브라우저를 실행하고 JavaScript까지 동작시키는 방식

에는 차이가 있습니다.

물론 모든 경우에 Headless Browser가 정답인 것은 아닙니다.

API가 제공된다면 API를 사용하는 것이 더 빠르고 안정적인 경우가 많습니다.

Headless Browser는 어디에 사용할까?

가장 대표적인 용도 중 하나가 자동화 테스트입니다.

예를 들어 회원가입 페이지가 있다고 해보겠습니다.

사람이 직접 테스트한다면,

회원가입 페이지 접속 → 이메일 입력 → 비밀번호 입력 → 가입 버튼 클릭 → 가입 완료 확인

과정을 매번 반복해야 합니다.

하지만 Headless Browser를 이용하면 이 과정을 코드로 자동 실행할 수 있습니다.

웹사이트를 배포할 때마다 자동으로 테스트를 돌려볼 수도 있습니다.

이런 방식이 바로 E2E(End-to-End) 테스트에서 활용되는 대표적인 패턴입니다.

또 다른 활용 사례는 웹페이지의 자동 점검입니다.

특정 페이지에 접속했는데 500 오류가 발생하지 않는지, 특정 버튼이 정상적으로 존재하는지, 로그인 후 원하는 페이지까지 이동할 수 있는지 등을 자동으로 검사할 수 있습니다.

스크린샷을 자동으로 남기는 것도 가능합니다.

Headless라고 해서 무조건 빠른 것은 아니다

Headless Browser를 처음 접하면 “화면을 안 보여주니까 엄청 빠르겠네?”라고 생각하기 쉽습니다.

하지만 실제로는 브라우저 자체를 실행하고 JavaScript를 처리하기 때문에 단순한 HTTP 요청보다 무거울 수 있습니다.

특히 다음과 같은 작업이 많아지면 서버 자원을 꽤 사용할 수 있습니다.

• 여러 브라우저 동시 실행
• 복잡한 JavaScript 실행
• 이미지가 많은 페이지
• 영상이나 광고가 포함된 페이지
• 여러 탭을 동시에 실행
• 긴 시간 동안 브라우저 유지

그래서 실제 서비스에서는 브라우저를 무작정 많이 실행하기보다 작업량에 맞춰 관리하는 것이 중요합니다.

필요하지 않은 리소스를 차단하거나 브라우저 인스턴스를 적절하게 재사용하는 방법도 고려할 수 있습니다.

Headless Browser를 사용할 때 주의할 점

개발하면서 가장 조심해야 하는 부분은 무엇을 자동화할 것인가입니다.

웹 자동화 기술 자체는 매우 강력하지만, 대상 사이트의 정책을 무시하고 사용하면 문제가 될 수 있습니다.

특히 로그인 자동화나 데이터 수집을 목적으로 사용한다면 해당 사이트의 이용약관과 데이터 이용 정책을 먼저 확인하는 것이 좋습니다.

공식 API가 있다면 가능하면 API를 먼저 사용하는 것이 가장 깔끔합니다.

또한 서버에서 Headless Browser를 실행할 경우 메모리 사용량과 프로세스 관리도 신경 써야 합니다.

브라우저를 열었는데 browser.close() 같은 종료 처리가 제대로 되지 않으면 시간이 지나면서 프로세스가 계속 남는 문제가 생길 수도 있습니다.

결국 Headless Browser는 이런 기술이다

정리하면 Headless Browser는 특별한 종류의 “화면 없는 브라우저”라기보다는 브라우저를 사람이 직접 조작하지 않고 프로그램으로 제어하기 위한 실행 방식이라고 생각하면 이해하기 쉽습니다.

단순한 HTML 요청으로 해결할 수 있는 작업이라면 굳이 Headless Browser까지 사용할 필요가 없습니다.

하지만 JavaScript 실행이 필요하거나 실제 브라우저 환경에서 사용자의 행동을 재현해야 한다면 상당히 유용합니다.

특히 최근에는 웹사이트가 점점 복잡해지면서 단순 HTTP 요청만으로 처리하기 어려운 경우가 많아졌습니다.

그래서 Puppeteer, Playwright 같은 브라우저 자동화 도구와 Headless 환경을 알아두면 웹 개발이나 자동화 테스트를 할 때 선택지가 상당히 넓어집니다.

개인적으로는 Headless Browser를 처음 사용할 때부터 “웹 크롤링 도구”라고만 생각하기보다는 브라우저 자동화 도구라고 이해하는 것을 추천합니다.

그러면 테스트 자동화, 페이지 점검, 반복 작업 자동화 등 생각보다 다양한 곳에 활용할 수 있다는 것이 보이기 시작합니다.

한 줄 정리

Headless Browser는 화면을 직접 보여주지 않고도 실제 브라우저의 기능을 프로그램으로 제어할 수 있게 해주는 기술입니다.

단순 데이터 요청에는 HTTP/API가 더 적합할 수 있고, JavaScript 실행이나 실제 브라우저 동작이 필요할 때 Headless Browser를 선택하는 것이 좋습니다.