Table of Contents

JavaScript 브라우저 자동화 — 코드 몇 줄로 반복 작업 없애는 법 (2026)

JavaScript 브라우저 자동화를 활용하면 매일 같은 웹페이지에서 버튼을 수십 번 클릭하거나, 동영상을 하나하나 넘기는 반복 작업을 완전히 없앨 수 있습니다. 별도 프로그램 설치 없이 브라우저 개발자 도구(F12)에 코드 몇 줄만 입력하면 됩니다. 이 글에서는 누구나 따라 할 수 있는 JavaScript 브라우저 자동화 방법을 실전 예제와 함께 소개합니다.

JavaScript 브라우저 자동화 크롬 개발자 도구 콘솔 화면

JavaScript 브라우저 자동화가 필요한 이유

직장인이라면 사내 교육 영상 시청, 설문 응답, 반복 클릭 같은 단순 작업에 상당한 시간을 쓰게 됩니다. 이런 작업은 패턴이 정해져 있기 때문에 코드 몇 줄로 자동화할 수 있습니다. 별도의 프로그램 설치 없이, 크롬 브라우저의 개발자 도구 콘솔만으로 가능하다는 점이 핵심입니다.

JavaScript 브라우저 자동화의 기본 원리: setInterval

JavaScript의 setInterval 함수는 정해진 시간 간격으로 코드를 반복 실행합니다. JavaScript 브라우저 자동화의 핵심이 되는 함수이니 꼭 기억하세요.

setInterval(function() {
    console.log("3초마다 실행됩니다!");
}, 3000);

위 코드는 3000밀리초(3초)마다 콘솔에 메시지를 출력합니다. 이 구조 안에 원하는 동작을 넣으면 어떤 반복 작업이든 자동화할 수 있습니다.

실전 예제 1: 동영상 자동 건너뛰기

웹페이지에 삽입된 동영상을 자동으로 끝까지 스킵하는 코드입니다. 사내 교육 플랫폼처럼 영상 시청이 필수인 환경에서 유용합니다.

var video = document.querySelector('video');

if (video) {
    video.playbackRate = 16;
    video.currentTime = video.duration - 0.5;
    console.log("동영상 스킵 완료!");
}

document.querySelector('video')는 페이지에서 비디오 요소를 찾고, playbackRate로 재생 속도를 16배로 높인 뒤, currentTime으로 영상 끝 지점으로 이동시킵니다. duration - 0.5로 설정하는 이유는 정확히 끝 지점으로 보내면 일부 플레이어에서 오류가 발생할 수 있기 때문입니다.

실전 예제 2: 특정 버튼 자동 클릭

페이지에 있는 버튼 중 특정 텍스트가 포함된 버튼을 자동으로 찾아 클릭합니다.

var buttons = document.querySelectorAll('button');

buttons.forEach(function(btn) {
    if (btn.innerText.includes('다음')) {
        console.log("다음 버튼 클릭!");
        btn.click();
    }
});

querySelectorAll('button')으로 페이지의 모든 버튼을 가져온 뒤, includes('다음')으로 원하는 텍스트가 포함된 버튼만 골라서 click()으로 자동 클릭합니다.

실전 예제 3: 동영상 스킵 + 버튼 클릭 완전 자동화

위 두 가지를 합치면, 동영상을 자동으로 넘기고 다음 페이지까지 이동하는 완전 자동화 스크립트가 됩니다. JavaScript 브라우저 자동화의 진짜 힘이 여기서 나옵니다.

setInterval(function() {

    // 1. 동영상 처리
    var video = document.querySelector('video');
    if (video) {
        if (video.currentTime < video.duration) {
            video.playbackRate = 16;
            video.currentTime = video.duration - 0.5;
            console.log("동영상 스킵 중...");
        }
    }

    // 2. '다음' 버튼 자동 클릭
    var buttons = document.querySelectorAll('button');
    buttons.forEach(function(btn) {
        if (btn.innerText.includes('다음')) {
            console.log("다음 버튼 클릭!");
            btn.click();
        }
    });

}, 3000);

이 코드를 브라우저 콘솔에 붙여넣으면 3초마다 동영상을 스킵하고, 다음 버튼을 자동으로 클릭합니다.

JavaScript 브라우저 자동화 사용 방법 (3단계)

Step 1. 자동화할 웹페이지를 엽니다.

Step 2. 키보드에서 F12를 눌러 개발자 도구를 열고, Console(콘솔) 탭을 클릭합니다.

Step 3. 위 코드를 복사해서 콘솔에 붙여넣고 Enter를 누릅니다.

끝입니다. 콘솔 창에 로그가 찍히면서 자동으로 실행됩니다.

JavaScript 브라우저 자동화 콘솔 코드 실행 화면

자동화를 멈추는 방법

가장 간단한 방법은 F5(새로고침)입니다. 페이지를 새로고침하면 모든 스크립트가 초기화됩니다. 좀 더 정교하게 제어하고 싶다면 아래처럼 변수에 저장해두세요.

var autoId = setInterval(function() {
    // 자동화 코드
}, 3000);

// 멈추고 싶을 때
clearInterval(autoId);

내 상황에 맞게 커스터마이징하기

이 코드는 상황에 따라 쉽게 수정할 수 있습니다.

버튼 텍스트가 다를 때: includes('다음')을 includes('확인') 등으로 변경
링크를 클릭해야 할 때: querySelectorAll('button')을 querySelectorAll('a')로 변경
실행 간격 조절: 3000(3초)을 5000(5초) 등 원하는 값으로 변경
특정 클래스의 버튼: querySelector('.btn-next')처럼 CSS 셀렉터 사용

주의사항

이 기술은 본인의 업무 효율화 목적으로 활용하시기 바랍니다. 일부 웹사이트는 자동화 스크립트를 감지하여 차단할 수 있으며, 사이트의 이용약관을 확인하고 허용된 범위 내에서 사용하는 것을 권장합니다.

마무리 — JavaScript 브라우저 자동화 핵심 정리

오늘 소개한 setInterval, querySelector, click() 이 세 가지 JavaScript 메서드만 알면 대부분의 웹 반복 작업을 자동화할 수 있습니다. JavaScript 브라우저 자동화는 별도 프로그램 설치 없이 브라우저 콘솔만으로 가능하니, 반복 작업에 시간을 뺏기고 있다면 오늘 바로 시도해 보세요.

더 강력한 자동화 도구가 궁금하다면 클로드 코드 설치 가이드도 참고해보세요. AI를 활용하면 자동화 스크립트 작성 자체도 자동화할 수 있습니다.