Insights
AI가 자동으로 큐레이션·번역·정리하는 기술 동향 피드입니다.
Inflearn은 자막 및 더빙을 넘어 영상 화면에 직접 표시된 글자까지 번역하는 '영상 화면 번역' 기능을 준비하고 있습니다. 이 기능은 오버레이 방식을 채택하여, 원본 텍스트를 배경색으로 가리고 그 위에 번역된 문자를 겹쳐 보여줍니다. 이를 통해 유연한 언어 추가와 쉬운 품질 개선이 가능합니다.
AI 자동 생성 콘텐츠
본 콘텐츠는 Qiita AI의 원문을 AI가 자동으로 요약·번역·분석한 것입니다. 원 저작권은 원저작자에게 있으며, 정확한 내용은 반드시 원문을 확인해 주세요.
원문 바로가기본 기사는 2026년 9월 10일에 작성되었습니다.
여러분은 예상치 못하게 접한 먼 나라의 영상에서 의외의 아이디어를 얻은 경험이 있습니까?
Inflearn은 언어 장벽을 넘어 폭넓은 지식을 전달하기 위해, 자막 및 더빙에 이어 영상 화면에 있는 글자까지 번역하는 영상 화면 번역 기능을 준비하고 있습니다.
최근 Inflearn에서 공개한 DeNA × AI Day 2026를 비롯하여, 앞으로는 각국의 컨퍼런스 영상이나 강좌도 시청할 수 있게 됩니다. 이미 몇몇 강좌에는 화면 번역 기능이 적용되어 있으며, 새롭게 추가될 일부 강좌에도 실험적으로 적용할 예정입니다.
이에 본 기사에서는 이 기능을 구현하면서 검토했던 내용을 공유하고자 합니다.
결과 예시
Inflearnプレイヤーの元の動画画面
Inflearnプレイヤーの画面翻訳結果
영상 화면 내의 글자를 번역하는 기능은 어떻게 구현할 수 있을까요?
우선 번역 대상 영상이 필요하며, 그 화면에 표시된 원문을 번역된 문자로 대체하게 됩니다.
저희는 영상의 글자를 번역본으로 대체하여 보여주기 위해,
미리 준비한 번역을 재생 중인 화면 위에 겹쳐 그려내는 오버레이 방식을 선택했습니다.
원래 영상은 평소대로 재생하면서, 글자 뒤쪽 영역만 주변 배경과 같은 색의 박스로 덮어 원문을 가립니다. 그리고 그 위 동일한 위치에 번역된 문자를 올리는 구조입니다.
画面翻訳のオーバーレイ構造
이 방식이라면, 영상 인코딩과는 관계없이 새로운 언어를 쉽게 추가할 수 있습니다. 또한, 오역을 발견하거나 번역 파이프라인을 개선했을 때도 데이터를 수정하는 것만으로 즉시 반영되므로, 적은 비용으로 유연하게 품질을 다듬어 나갈 수 있다는 장점이 있습니다.
번역된 텍스트 데이터만을 별도의 응답(response)으로 반환하기 때문에, 서버와 클라이언트 양쪽 모두 네트워크 전송량 부담이 적다는 점도 큰 이점이었습니다.
Google Lens에서도 원문의 글자가 배경색으로 가려지고 그 위치에 번역된 문자를 겹쳐 표시합니다. Inflearn의 화면 번역 역시 같은 원리입니다. 다만, 마우스를 올리는 순간 응답해야 하는 Lens와 달리, 영상을 사전에 분석하기 때문에 처리 시간 제약이 적고, 품질을 더욱 최적화하거나 오류가 있는 부분을 사전에 보정할 수 있다는 차이가 있습니다.
내부에서 생성하는 결과물은 JSON 형식의 데이터입니다.
{
"events": [
{
...
events는 화면 구성이 유지되는 시간 구간이며, 각 텍스트는 위치(bbox), 원문, 언어별 번역, 그리고 배경색과 글자색을 가집니다. 텍스트를 하나의 평면적인 배열로 만들 수도 있지만, 시간 구간(event)으로 묶은 것은 플레이어에서의 탐색(seek)을 최적화하기 위함입니다. 영상의 특성상 화면이 전환될 때 모든 텍스트가 한 번에 바뀌는 경우가 많기 때문입니다.
플레이어는 재생 시점과 대응하는 이벤트를 찾아, 영상 위에 bbox 위치대로 bg_color로 채운 박스를 깔고, 그 위에 text_color로 번역 텍스트를 그려냅니다. 원문의 글자는 배경색 박스에 가려지고, 같은 위치에 번역이 표시되는 구조입니다.
여기까지가 번역된 영상을 표시하는 방법이었습니다. 남은 문제는 이 JSON 데이터를 어떻게 만들어낼 것인가입니다.
영상은 결국 정지된 화면, 즉 프레임의 연속이기 때문에, 우선 한 장의 화면을 번역하는 것부터 생각해 봅니다. 첫 번째 구상은 다음과 같이 간단합니다.
이 세 단계만으로도 화면 번역 자체는 작동합니다.
하지만 실제로 테스트해보니, 자연스러운 결과물을 만들기 위해서는 추가적으로 두 가지 처리가 필요했습니다.
PPT나 문서 같은 일반적인 번역 대상과는 달리, 강좌 영상의 도메인에는 특유의 어려움이 있습니다. 화면에 세밀한 UI 텍스트나 코드가 함께 비치는 경우입니다.
아주 작은 버튼이나 코드, 커맨드, 파일 경로까지 모두 번역하면 시각적 자연스러움을 해치기 쉽습니다. 화면 번역의 목적은 사용자가 영상 내용을 이해하는 데 도움을 주는 것이므로, 이해에 필요한 텍스트는 번역하면서도, 시청 방해가 되는 요소는 최소한으로 줄여야 합니다.
같은 단어라도 본문 안에 있으면 번역 대상이 되고, 코드 블록 안에 있으면 대상에서 제외되기 때문에 단순한 규칙만으로는 구별할 수 없습니다. 그래서 화면의 문맥을 어느 정도 이해할 수 있는 VLM(Vision Language Model)에 이 판단을 맡겼습니다.
translate-target
대부분의 OCR은 텍스트를 행 단위의 조각으로 반환합니다. 현대의 OCR은 주로 텍스트 감지(detection)와 텍스트 인식(recognition)의 두 단계 파이프라인으로 구성되어 있는데, 이는 감지기(detector)가 찾는 것이 행 단위이기 때문입니다.
행 단위의 조각이 문제가 되는 것은 언어별 어순 차이 때문입니다. 하나의 문장이 여러 행에 걸쳐 있을 경우, 어순이 다른 언어로 번역했을 때 그 결과를 원래의 행과 1:1로 대응시킬 수 없습니다. 한 단락을 하나의 블록으로 묶고, 번역도 그 블록 위치에 통째로 그려야만 자연스러운 대응이 가능합니다.
이미지나 PDF에서 화면 구조를 파악하고, 단락의 레이아웃을 판단하는 작업은 Document Layout Analysis라는 분야에서 이미 연구되어 왔습니다. 그래서 먼저 기존 모델들을 시험해 보았지만, 영상 번역에 적용하기에는 만족스럽지 않았습니다. 대부분이 PDF 문서 이미지로 학습된 모델이라, 강의 영상에 자주 등장하는 웹사이트나 터미널 화면처럼 문서의 규격에서 벗어난 레이아웃에서는 블록을 잘못 분할해 버리는 경향이 있었습니다.
XY Cutアルゴリズムの概念図
그래서 단락 판단도 VLM에게 맡기면서, 판단해야 할 요소를 최소한으로 줄여서 정확도를 보완하도록 했습니다. 1984년에 제안된 XY Cut 알고리즘으로 화면을 대략적인 블록으로 먼저 잘라 놓으면, VLM은 그 블록들을 단락으로 묶을지 말지만 판단하면 됩니다.
XY Cut은 화면의 여백을 단서로 영역을 가로 방향과 세로 방향으로 번갈아 재귀적으로 분할하는 방식입니다. 좌표 계산만으로 작동하므로 비용이 사실상 들지 않습니다. 분할 결과는 트리 구조로 남아, 분할된 영역을 위에서 아래로, 왼쪽에서 오른쪽으로 순차적으로 방문하면 그 방문 순서는 사람이 읽는 순서와 대체로 가깝습니다. 덕분에 블록 내의 여러 행을 하나의 단락으로 연결할 때도 별도로 재배열할 필요 없이 그대로 사용할 수 있습니다.
여기까지는 화면 1장을 처리하기 위한 검토였습니다. 하지만 영상은 화면 1장이 아닙니다. 1초에 프레임 단위로 샘플링하는 것만 해도 1시간짜리 영상이라면 3,600장이나 되기 때문에, 방대한 양의 영상을 모두 이 방식으로 처리하는 것은 부담이 큽니다.
매 프레임마다 OCR과 VLM을 실행하면 비용도 문제가 되지만, 더 큰 문제는 일관성입니다. 같은 슬라이드가 화면에 표시되는 동안에도, 프레임마다 OCR 결과가 약간씩 흔들리면 재생 중에 오버레이가 깜빡거리게 됩니다.
기본적인 구조는 매 프레임 OCR을 실행하여 텍스트 박스를 얻고, 각 박스를 VLM으로 판별하는 것입니다. 여기에 직전 프레임과 겹치는 부분은 재처리하지 않고 결과를 재활용하는 방식을 적용했습니다. 새로운 프레임의 각 텍스트 박스는 다음 순서로 판단 및 처리됩니다.
이때 OCR에는 원본 프레임을 그대로 입력하는 것이 아니라, 재활용이 확정된 영역을 마스킹하여 OCR이 새로 나타난 문자만 감지하도록 합니다. 이 구조 덕분에 VLM 호출은 화면이 실제로 바뀐 순간에만 발생합니다. 같은 슬라이드가 표시되는 동안은 이전 결과가 그대로 유지되므로, 오버레이도 안정적으로 표시됩니다.
문자를 어디에 그릴지는 결정되었으니, 다음으로는 어떤 색으로 그릴지 고민해야 합니다.
배경이 단색에 가깝다고 가정하면, 배경과 글자 색상은 박스 내부 픽셀의 색상 분포를 계산하여 쉽게 얻을 수 있습니다. 픽셀을 샘플링한 후, RGB 공간에서 색이 비슷한 두 그룹으로 분류해 놓으면, 픽셀 수가 많은 그룹을 배경으로, 적은 쪽을 글자로 추정할 수 있기 때문입니다. 글자는 대부분의 경우 배경보다 차지하는 면적이 작으니까요.
그룹을 나누는 방식으로는 k-means (k=2)를 사용합니다. k-means는 데이터를 k개의 군, 즉 k개의 클러스터로 나누는 알고리즘입니다. 이 알고리즘은 대략 다음과 같이 작동합니다.
따라서 2번으로 돌아가서, 소속이 변하지 않을 때까지 2~3을 반복합니다.
이러한 반복 과정을 거치면, 가까운 점들끼리 모여 안정적인 k개의 그룹이 만들어집니다. 여기서는 픽셀의 RGB 값이 그대로 3차원 공간의 좌표가 되기 때문에, 색이 비슷한 픽셀끼리 자연스럽게 묶을 수 있습니다.
단색 배경의 텍스트 박스를 하나 처리할 경우, 배경의 픽셀과 글자의 픽셀이 위 그림처럼 각각 고정됩니다. 이 그림에서는 흰색이 배경, 녹색이 글자색이라고 가정할 수 있습니다.
마지막으로 남은 단계는 번역입니다. 번역은 화면 처리가 모두 끝난 후에 별도로 진행합니다. 이전 단계에서 만든 JSON에서 원문 텍스트를 모아 중복을 제거하고, LLM(대규모 언어 모델)에 한꺼번에 번역을 요청한 후, 결과를 각 텍스트에 다시 작성합니다. 같은 문구가 여러 화면에 반복적으로 등장하더라도, 번역은 한 번만 하면 됩니다.
강좌 화면의 텍스트는 제목이나 라벨과 같은 짧은 단편이 많기 때문에, 단편만 개별적으로 번역하면 용어가 산발해지기 쉽습니다. 그래서 영상의 제목 등 화면 주변 텍스트도 프롬프트에 함께 포함하여, 같은 용어가 항상 같은 번역을 하도록 했습니다. 이때, 텍스트는 앞서 XY Cut으로 정리한 읽는 순서대로 배열하고, 사람이 화면을 읽는 것과 같은 순서로 LLM이 문맥을 파악할 수 있도록 했습니다.
아래는 지금까지의 처리를 모두 거친 최종 결과물입니다. 이를 통해 플레이어에서 화면 언어를 선택하면, 원본 영상은 그대로 재생되는 동시에, 화면 내부의 글자만 선택한 언어로 덮어씌워 표시됩니다.
画面翻訳の適用前後の比較
여기까지 Inflearn이 영상 화면 번역 기능을 개발하는 과정에서 계속 검토하고 있는 내용 중, 지금까지 정리된 내용을 소개했습니다. 마지막으로 간단하게 되돌아보겠습니다.
물론 아직 모든 화면을 완벽하게 번역할 수는 없습니다. 사진이나 그라데이션 위에 있는 글자는 아직 결과물이 부자연스럽습니다. 또한, 애니메이션으로 움직이는 글자에는 오버레이가 따라가지 못하는 경우도 있습니다. 이처럼 개선해야 할 부분이 많이 남아있기 때문에, 하나씩 개선해 나갈 계획입니다.
학습이 언어에 의해 방해받지 않도록, 그리고 보다 다양한 지식이 공유되고 전달될 수 있도록, Inflearn은 여러 가지 도전을 계속할 예정입니다.
읽어주셔서 감사합니다.
참고 링크