인프런 강의 안봤는데 봤어요 스크립트

TL;DR

아래 순서대로 실행하면 강의가 "봤어요" 처리됩니다.

1. 하단의 스크립트를 복사
2. 완료처리하고자 하는 인프런 강의 접속
3. 개발자도구 실행
4. 스크립트 붙여넣기

해당 스크립트는 2024-06-28 18:10 기준입니다.

인프런의 css 클래스명이 변경되면 동작하지 않을 수 있습니다.

---

 

듣기 싫어서 작성한거 아님

사내에서 무료로 인프런 강의를 제공해주는 복지를 잘 활용하고 있습니다.

 

해당 복지는 악용 방지 차원에서 신청 후 3개월간 완강하지 않으면 사비로 강의비를 지불해야 하는 정책이 존재합니다.

 

최근 어플에 관심이 생겨 강의를 잘 듣고 있었으나, 앱개발 특성 상 빠른 환경의 변화 탓인지 약 500개의 강의 중 거의 절반의 강의가 현재와 달라져 [@Deprecated] 표시를 해주셨습니다.

 

인프런은 강의 영상에 대해서 1분 이내 연속적으로 완료처리 할 수 없기 때문에 광클하여 완료처리할 수 없고, 486개 중 모두를 수강해야 수료증이 발급되기 때문에 전체를 다 수강해야 합니다.

 

'동영상 바를 끝으로 이동' ->  '봤어요 클릭'을 한 스무 번 반복 하다가 이건 아니다 싶던 순간 DOM이 생각나서 들을 필요 없는 거의 절반의 강의는 스크립트로 완료처리 했습니다.

 

같은 문제가 있으신 분들 활용하시라고 스크립트를 기록합니다.

 

스크립트

// 1. 동영상의 마지막 부분으로 이동
const moveToEnd = () => {
    const seekBar = document.querySelector('.shaka-range-element.shaka-seek-bar.shaka-no-propagation.shaka-show-controls-on-mouse-over');
    if (seekBar) {
        const maxTime = seekBar.max;
        seekBar.value = maxTime;
        seekBar.dispatchEvent(new Event('mousedown', { bubbles: true }));
        seekBar.dispatchEvent(new Event('input', { bubbles: true }));
        seekBar.dispatchEvent(new Event('mouseup', { bubbles: true }));
        seekBar.dispatchEvent(new Event('change', { bubbles: true }));
    }
};

// 2. "다음 수업" 버튼 클릭
const clickNextButton = () => {
    const buttons = document.querySelectorAll('button.mantine-Button-root');
    for (const button of buttons) {
        if (button.innerText.includes('다음 수업')) {
            button.click();
            break;
        }
    }
};

// 3. n번 반복
const repeatActions = (n, delay) => {
    let count = 0;
    const interval = setInterval(() => {
        if (count >= n) {
            clearInterval(interval);
            return;
        }
        moveToEnd();
        setTimeout(clickNextButton, 2000); // 2초 대기 후 버튼 클릭
        count++;
    }, delay);
};

// 100번 반복, 각 반복마다 3초 대기 (5000ms)
repeatActions(100, 3000);

 

 

실행영상

실행 영상

스크립트 설명

개발자도구를 켠 상태에서 동영상을 멈춰놓고 command + shift + c 를 누른 후 상태바를 클릭해보면 element 정보를 확인할 수 있습니다.

<input class="..." type="range" step="any" min="0" max="600.5090000000005" aria-label="찾기">

 

min, max 값이 존재하는 것을 확인할 수 있습니다.

 

인프런은 상태바의 끝으로 이동하면, 다음 강의보기로 이동하는 Alert 창이 뜨게 됩니다.

처음에는 값을 변경해봤는데, 깜빡거리기만 하고 이동이 되지 않는 것으로 봐선, 액션을 확인하는 것 같았습니다.

 

찾아보니 마우스를 클릭하는 이벤트를 실행할 수 있어서 이벤트를 실행하는 코드를 작성했습니다.

(클래스가 변경되면 해당 코드도 동작하지 않을 것입니다.)

const seekBar = document.querySelector('.shaka-range-element.shaka-seek-bar.shaka-no-propagation.shaka-show-controls-on-mouse-over');
if (seekBar) {
    const maxTime = seekBar.max;
    seekBar.value = maxTime;
    seekBar.dispatchEvent(new Event('mousedown', { bubbles: true }));
    seekBar.dispatchEvent(new Event('input', { bubbles: true }));
    seekBar.dispatchEvent(new Event('mouseup', { bubbles: true }));
    seekBar.dispatchEvent(new Event('change', { bubbles: true }));
}

위 코드만 실행해주면 동영상의 끝 부분으로 이동하게 됩니다.

 

하지만, 완료 후에 "다음 수업"를 클릭해야만 이동이 되고, 거의 200개의 강의를 완료해야 하기 때문에 200번 클릭하고 스크립트를 실행하고를 반복하는 것은 똑같이 힘들기 때문에 무의미했습니다.

const buttons = document.querySelectorAll('button.mantine-Button-root');
for (const button of buttons) {
    if (button.innerText.includes('다음 수업')) {
        button.click();
        break;
    }
}

 

그래서 다음 수업 버튼까지 클릭까지 이동해주는 것을 작성하고 둘을 합쳐서 실행했으나, 200번 스크립트를 실행해주는 것은 동일했습니다.

 

반복문으로 두 코드를 묶어서 실행하는 것으로 완료했고, 최종 코드에서 보이는 delay 같은 부분은 페이지 이동 시간과 클릭 후 처리되는 시간을 고려해서 약간의 테스트 후 적절한 값을 줬습니다.

 

여담

 

완강처리 후 갑자기 예전강의에 3일 전에 작성된 공지사항이 있길래 봤더니 구버전 강의를 제거해주심...

3일만 지나고 볼걸...