subtitle convert with node.js

1. Portfolio
신입 개발자 김남운

2. Index
• Why?
• Dependencies
• Content & Demonstration
• Problems and Solved & Future Works
• Last Words

3. Why?
• 순수 HTML5 video에서 사용하는
자막은 WEBVTT 타입만 허용되어
있습니다. https://www.w3.org/TR/webvtt1/
• 우리나라 자막의 대부분은 SAMI
타입으로 제작되어 있습니다.
• 글꼴 정보가 사라지거나 색상 정보
등의 스타일링이 사라지는 등 SAMI
에서 VTT로의 직접 변환을 제대로
지원하는 라이브러리가 없었습니다.

4. Dependencies
• Toolkit
• Atom(Nuclide@0.299)
• Dependencies
• detect-character-encoding (0.5.1)
• html-parser2 (3.9.2)
• Iconv (2.3.0)
• lodash (4.17.10)
• text-encoding (0.6.4)
• Dev-dependencies
• Babel-cli, babel-core, babel-eslint, babel-preset-env, eslint, eslint-
config-airbnb-base, invariant, nodemon, rollup, rollup-plugin-replace

5. Content
File read
.load
.parse
Parse data
.stringify
.convert
Convert
String parse Stringify
Simple flow
.apply
Sync cueList(browser)
.delay
Modify sync

6. ECMA Script
&& Babel
ECMA Script 2017에 await, async
func 등 비동기 함수 처리에 관련된 편리한
기능이 추가되었고 많은 모듈들이 해당 로
직을 지원하기 시작했습니다.
ESLint를 사용하여 해당 문법에 맞게 작성
하려 노력했습니다(airbnb-base).
호환성을 고려해 polyfill을 하기 위해
babel을 사용하였습니다.
ES7

7. Node &&
Browser
원래 Node.JS 환경에서만 사용하려고
하였으나 사용해보니 브라우저에서도 사
용해야 할 일이 많았습니다.
e.g.) 자막 싱크 변경, 변경내용 저장, ...
browser에서 사용할 수 없는 의존성 모
듈들을 정리하여 묶고 rollup 을 사용하
여 빌드 시 분리 하도록 하였습니다.
(problems & solved에 추가내용을 적었습니다)

8. .load
파일마다 파일 인코딩이 다른문제가 빈번
하게 발생하였습니다.
e.g. EUC-KR, UTF-16, …
모듈이 자동으로 감지하여 읽거나 수동으
로 입력해줄 수 있도록 하였습니다.
파싱 할 때엔 Iconv 모듈로 UTF-8로 변
환하여 진행하게끔 하였습니다.
EUC-KR

9. .parse
SAMI의 경우 해석과정에서 font tag가
등장하는 경우가 많았습니다. (문자 색 변
경)
해당 내용을 하나의 style로 묶고 중복되
지 않게끔 하였습니다.
브라우저에서도 쓸 수 있도록 문자열 데
이터를 받을 수 있도록 하였습니다.

10. .delay &&
.resize
간혹 영상 혹은 자막에 따라 싱크를 조정
해야 하거나 자막이 빨리 사라지는 경우
가 있었습니다.
모듈이 설치된 지역마다 시간이 달라 시
간 정보가 달라지는 경우가 있었습니다.
시간 정보를 UTC로 통일하고 초, 밀리초
단위로 수정할 수 있게끔 하였습니다.

11. .stringify &&
.load(browser)
브라우저에서 모듈을 구동할 경우 xhr 등
을 통해 내용을 불러오거나 수정 후 저장
하는 기능이 필요했습니다.
JSON.stringify 를 이용하여 객체 내용
을 문자열화 할 경우, 이를 다시 객체에
주입(.parse)하여 상태를 돌릴 수 있도록
하였습니다.

12. .apply
HTML5 track 태그의 내용(자막)을 객체
가 직접 수정해야 하는 경우가 있었습니
다.
Track 태그의 TextTrackCueList를 인
자로 전달하여 객체의 내용으로 덮어 쓸
수 있도록 하였습니다.
.delay(-10) & .apply

13. Test with
travis-ci
기능의 올바른 구동을 시험하기 위해 간
단한 테스트 코드를 작성하였습니다.
travis-ci를 이용하여 github에 commit
되어 코드가 수정될 때마다 다른 환경에
서도 정상적으로 동작하는지 확인하도록
하였습니다.

14. Demonstration
• Without our method :
• Our method :

15. Problems & Solved
• Node와 Browser를 동시에 지원하는 방법
• 처음, react를 이용하여 프론트엔드에서 테스트할 때 브라우저에서는 쓰지 않는 라이
브러리들이 번들링되지 못하여 오류가 발생하였습니다.
• webpack등을 이용하여 번들링할 때 코드에 포함된 모든 모듈들을 포함시키게 되기
때문에 브라우저라서 실행하지 않는 모듈도 해석되어 포함되었기 때문이었습니다.
• 따라서 코드를 물리적으로 분리할 필요가 있었으나 이를 직접 하는 것은 매우 번거로운
일이 아닐 수 없었습니다.
• stackexchange 등 여러 방법으로 검색을 해 본 결과 rollup과 같은 모듈로 분리가능
하다는 것을 알게되었고, index.js에 외부 모듈을 모두 담은 뒤 빌드 시 분리하여
browser.js를 만들게끔 하였고 webpack이 index.js 대신 이 파일을 읽게 하기 위해
package.json에 해당 부분을 추가하였습니다.

16. Problems & Solved
• Google Chrome(65.0.3325.181, latest)에서 WEBVTT 안에
있는 style을 지원하지 않는 문제
• 테스트 해 본 결과, HTML안에 미리 스타일링이 되어있을 경우에만 적용되는 것을 확
인하였습니다. 또한 어떤 방식으로 VTT를 작성하여도 Chrome에서는 VTT내부 Style
은 정상작동하지 않았습니다.
• WEBVTT의 내부 스타일링은 아직 표준이 아닌 것이 이유로 보여집니다.
• 따라서 .convert 에서 HTML Head에 스타일링 할 수 있도록 CSS를 만들어 VTT안
에 주석으로 두어 이를 xhr로 불러온 뒤 해석해 head에 주입할 수 있도록 임시 조치 하
였습니다.

17. Future Works
• .apply 변경
• TextTrackCueList는 문서에 따르면 원래 상수로 설정되어있지만 변경할 수 있는 버그
를 이용하여 수정하는 것이므로 직접 값을 바꾸는 것이 아닌 객체를 생성해서 전달 하
는 쪽으로 변경해야 합니다.
• .ASS(aegisub), .SRT(subrip text) 지원
• 최신 자막들의 경우 위 두 포맷을 사용하는 경우가 많았기 때문에 작업 할 예정입니다.

18. Last Words
• 소스 코드를 보시려면 :
• https://www.npmjs.com/package/subtitle-convert
• https://github.com/Paosder/subtitle-convert
이전에 있던 다른 변환기들은 파일 인코딩에 따라 문자가 깨지거나 수동으로 설정해
주어야 하는 불편함이 있었고 텍스트 스타일링이 제거되어 변환되는 경우가 많았습니
다. 또한 이렇게 변환된 파일의 싱크를 조정하기가 굉장히 번거롭기도 하였습니다.
React와 koa를 이용한 개인 웹 제작 중 문제를 해결하기 위해 작성하기 시작한 모듈
이지만 그 과정속에서 많은 것을 배웠고 사소한 문제부터 구조를 뒤엎는 어려움 등 여러
문제를 겪었지만 어떻게든 해결방법 또는 대안을 찾아 극복할 수 있었습니다.
신입사원으로 뽑아주신다면 항상 열린 마음과 배움의 자세로 임하여 귀사에 반드시 필
요한 인재가 되도록 노력하겠습니다.