TED 자막 복붙 안 될 때: 브라우저 DevTools로 스크립트 추출하는 법

 

방송대 데이터시각화 출석수업 과제를 하다가, 과제 항목 중 하나로 TED 강연을 보고 감상문 작성하기가 있었다.

교수님 입장에서는 학생들에게 부담을 덜 주기 위해 비교적 쉬운 문제를 내주신 것 같다. 얼마나 사려싶으신가!

 

하지만 나는 솔직히 강연 영상을 끝까지 보는 것이 귀찮았다.

왜냐면 세상에는 더 재밌는 것들이 많기 때문이다!

 

그래서 처음에는 강의 페이지에 들어가서 스크립트만 쓰윽 복사해서 읽고 감상문을 쓰면 되지 않을까 생각했다.

하지만 내 예상과 다르게 아래와 같은 문제가 있었다.

 

• 스크립트 양이 많다.
• 전체 선택이 불가해서 스크롤을 계속 내리면서 하나씩 복사하기 번거롭다.
• 일반적인 드래그 복사도 되지 않는다.
• 자막 문장을 클릭하면, 해당 시점으로 영상이 이동하도록 만들어져 있다.

즉, 화면에서 보이는 텍스트를 그냥 복사하는 방식보다는

이걸 합법적으로 긁어 오는 방법을 찾아보기 시작했다.

 

---

1. 문제 상황 정리

한스 로즈링의 TED 강의

링크: https://www.ted.com/talks/hans_rosling_let_my_dataset_change_your_mindset

Let my dataset change your mindset

 

TED transcript 영역을 보면 문장 단위로 자막이 나뉘어 있다.
처음에는 그냥 눈으로 보이는 텍스트를 긁어오면 되겠다고 생각했는데, 실제로는 각 문장이 클릭 가능한 UI로 구성되어 있었다.

즉, 단순한 텍스트 블록이 아니라 다음과 같은 형태였다.

<div role="button" aria-disabled="false" aria-label="When I talk to my students about global issues," tabindex="0" class="inline cursor-pointer hover:bg-red-300">
  <span class="text-textPrimary-onLight font-normal text-tui-base leading-tui-lg tracking-tui-tight" dir="ltr">
    When I talk to my students about global issues,
  </span>
</div>

 

핵심은 이렇다.

• 각 자막 문장이 div 태그 하나씩 나뉘어져 있음
• 그 div는 role="button" 속성을 가짐
• 문장 내용이 aria-label 안에 들어 있음

즉, 화면에 보이는 자막을 일일이 긁는 게 아니라 

div[role="button"][aria-label] 요소를 전부 찾아서 aria-label 값만 가져오면 된다는 뜻이다.

 

---

2. 개발자도구에서 확인한 구조

크롬에서 F12를 눌러 개발자도구를 연 뒤, Elements 탭에서 강의 화면과 별개로 둥둥 떠있는 transcript 영역을 확인했다.

관찰 결과는 다음과 같았다.

• div class="my-6 w-full" 영역 안에 transcript 관련 요소가 있음
• 그 안의 div class="w-full" 아래로 자막 문장들이 쭉 배치됨
• 각 문장은 개별 div로 쪼개져 있음
• aria-label 속성 안에 실제 문장 텍스트가 들어 있음
• 스크롤로 조금씩 보이는 방식처럼 보여도, 실제로는 이미 DOM에 전체 자막이 올라와 있는 상태였음

그럼 할일은 그냥 자바스크립트로 해당 요소들을 전부 선택한 뒤,

aria-label 값만 추출하면 된다.

 

내가 한 작업은 사실 꽤 단순했다.
스크래핑이라기보다는, 이미 브라우저에 렌더링되어 있는 DOM에서 필요한 값을 읽어오는 작업에 가깝다.

별거 없는데 진짜 편하다. 

 

사용한 코드는 아래에 적어놓았다.

const lines = [...document.querySelectorAll('div[role="button"][aria-label]')]
  .map(el => el.getAttribute('aria-label')?.trim())
  .filter(Boolean);

const uniqueLines = [...new Set(lines)];
const transcript = uniqueLines.join(' ');

console.log(uniqueLines);
console.log(transcript);

copy(transcript); // 클립보드에 복사

 

 

그리고 재밌는 게 또 있다. 영상을 재생하면 현재 재생 구간에 맞춰 자막의 배경색상이 바뀐다.

이를 통해 이 페이지가 단순한 정적 HTML이 아니라, 상태에 따라 DOM이 동적으로 갱신되는 구조라는 점을 짐작할 수 있었다.

아마 React 같은 걸 사용한 것 같다.

 

---

3. 코드 설명

위 코드를 한 줄씩 보면 다음과 같다.

프로그래머스 코딩테스트 Lv.0에 있는 문제들이랑 비슷하다.

document.querySelectorAll('div[role="button"][aria-label]')

현재 페이지의 DOM에서 아래 조건을 만족하는 요소를 모두 찾는다.

• div 태그
• role="button" 속성이 있음
• aria-label 속성이 있음

즉, transcript 문장 단위를 전부 선택하는 역할이다.

.map(el => el.getAttribute('aria-label')?.trim())

찾아온 요소 각각에서 aria-label 값을 가져온다.
문장 텍스트가 이 속성 안에 들어 있으므로, 사실상 자막 내용만 추출하는 단계다.

.filter(Boolean)

비어 있는 값이나 null 등을 제거한다.

new Set(lines)

중복 문장이 있을 경우 제거한다.

uniqueLines.join(' ')

문장 배열을 하나의 긴 문자열로 합친다.

copy(transcript)

최종 결과를 클립보드에 복사한다.

즉, 콘솔에서 실행한 뒤 바로 메모장에 복붙하면 된다.

Read transcript 텍스트 추출

 

---

4. 실제 작업 순서

실제로는 아래 순서로 진행했다.

1) 개발자도구에서 HTML 구조 확인

먼저 transcript 영역이 어떤 태그 구조로 되어 있는지 확인했다.

이미 DOM에 자막 전체가 올라와 있었기 때문에,
별도의 복잡한 자동화 도구 없이 콘솔만으로도 충분하다고 판단했다.

2) 코드를 메모장에 먼저 작성

개발자도구 Console 창은 써보면 알겠지만 장문의 코드를 편하게 수정하기 어렵다.
그래서 메모장이나 다른 텍스트 에디터에 먼저 코드를 작성한 뒤 복사해 두는 편이 훨씬 편하다.

3) Console 탭에 붙여넣고 실행

작성한 코드를 Console 탭에 붙여넣고 실행했다.

브라우저 보안 정책 때문에 붙여넣기 경고가 뜰 수도 있는데,
그 경우 안내 문구에 따라 입력하고 다시 붙여넣으면 된다.

4) 결과 확인

console.log()로 문장 배열과 합쳐진 전체 문자열이 잘 나오는지 확인했다.

5) copy(transcript)로 클립보드 복사

이제 추출된 자막 전체가 클립보드에 저장된다.

6) 메모장에 붙여넣기

마지막으로 메모장에 붙여넣으면 transcript 가 나온다.

7) GPT한테 번역해달라고 하기

추출한 스크립트가 생각보다 길었다.
보니까 만 자가 넘는다.

스크롤 압박. 거의 2만 자 ㄷㄷ

이거 복붙해서 GPT 한테 번역해달라고 한다.
내가 월마다 구독료 월 20달러(20x1500원 = 약 3만원) 내는 만큼 본전을 뽑아야 하지 않는가?
GPT 한테 잘 번역해달라고 하자.

 

그럼 이렇게 잘 뽑아준다.

이제 GPT가 번역해준 내용을 읽고 감상만 잘 적으면 끝이다!

 

---

5. 느낀점

이번 작업을 하면서 느낀 점은 분명했다.
기술을 잘 활용하면 반복적이고 귀찮은 작업을 훨씬 빠르게 처리할 수 있다는 것이다.

 

앞으로 이런 식으로 조금이라도 시간을 줄여준 방법들을 공유해보려고 한다.

끝~