영상 자막으로 타자 연습 앱 설계하기: CORS, 서버 함수, 재생 시간 동기화
STARROAD K-DRAMA를 기획하면서 "영상 링크를 넣으면 한글 자막을 가져와 영상과 함께 타자 연습을 한다"는 구조를 설계했습니다. 이 글은 그 설계 문서를 바탕으로, 비슷한 앱을 만들 때 부딪히는 기술적 문제와 주의점을 정리합니다.
전체 흐름
- 사용자가 영상 주소를 입력합니다.
- 주소에서 영상 ID를 추출합니다.
- 서버 함수가 해당 영상의 자막을 가져와 시작 시각, 길이, 문장으로 이루어진 JSON으로 돌려줍니다.
- 브라우저는 영상 플레이어를 띄우고, 재생 시간에 맞춰 현재 자막 줄을 타자 연습 줄로 보여 줍니다.
왜 서버가 필요한가: CORS
브라우저는 보안을 위해, 다른 사이트의 서버가 허락하지 않은 요청의 응답을 자바스크립트가 읽지 못하게 막습니다. 이를 CORS(교차 출처 리소스 공유) 정책이라고 합니다. 영상 플랫폼의 자막 데이터는 일반 웹사이트에서 읽도록 열려 있지 않으므로, 브라우저에서 직접 요청하면 막힙니다. 그래서 자막을 대신 가져오는 서버 함수(이 설계에서는 Firebase Cloud Functions)를 두고, 그 함수가 우리 사이트에 대해서만 응답을 허용하게 합니다. 함수 안에서는 자막을 가져오는 오픈소스 라이브러리를 쓰는 방안을 검토했습니다.
영상 ID 추출
사용자가 붙여 넣는 주소는 형식이 다양합니다. 일반 시청 주소의 v= 값, 짧은 공유 주소의 경로, 임베드 주소의 경로 등을 모두 처리해야 합니다. 정규식 하나로 모든 경우를 처리하기보다, URL 객체로 주소를 해석한 뒤 호스트별로 ID 위치를 꺼내는 편이 읽기 쉽고 안전합니다. ID 형식이 맞지 않으면 서버를 부르기 전에 바로 오류를 보여 줍니다.
재생 시간과 타자 줄 맞추기
영상 플레이어 API는 현재 재생 위치를 초 단위로 알려 줍니다. 짧은 간격으로 재생 위치를 확인해, 그 시각을 포함하는 자막 줄을 찾으면 됩니다. 자막 배열은 시작 시각 순서이므로, 직전 줄 위치에서부터 찾으면 매번 처음부터 찾을 필요가 없습니다.
설계하면서 고민한 것은 "영상이 사용자를 기다릴 것인가"입니다. 자막 줄이 지나가도 사용자가 다 못 쳤다면 영상을 멈출지, 그냥 다음 줄로 넘길지 정해야 합니다. 연습 목적이라면 줄이 끝날 때 영상을 멈추고, 사용자가 줄을 완성하면 다시 재생하는 방식이 덜 스트레스를 줍니다. STARROAD K-POP의 소개 문구도 "타임스탬프에 맞춘 노래방이 아니다"라고 밝히고 있습니다. 노래 속도에 맞춰 치는 것이 아니라 자기 속도로 치는 연습이라는 뜻입니다.
자막 데이터의 품질
- 자동 생성 자막은 띄어쓰기와 맞춤법이 틀린 경우가 있습니다. 틀린 문장을 정답으로 연습하게 되면 곤란하므로, 사람이 만든 자막을 우선하고 자동 자막에는 표시를 붙이는 것이 좋습니다.
- 효과음 표기나 화자 이름처럼 대사가 아닌 부분은 연습 줄에서 걸러 냅니다.
- 한 줄이 너무 길면 화면에 다 보이지 않으니 적당한 길이로 나눕니다. 타자 채점 방식은 자모 단위 채점 글을 참고하세요.
저작권: 기술보다 먼저 확인할 것
자막, 대사, 노래 가사는 대부분 저작권이 있는 콘텐츠입니다. 기술적으로 가져올 수 있다는 것과 서비스에 써도 된다는 것은 다른 문제입니다. 특히 자막을 서버에 저장해 두고 여러 사람에게 보여 주거나, 그 페이지에 광고를 붙이는 것은 권리자의 허락 없이 하면 안 됩니다. 이런 앱을 만든다면 영상은 공식 플레이어로 재생하고, 텍스트는 권리 관계가 명확한 것(직접 쓴 예문, 이용이 허락된 자료)으로 제한하는 방향을 먼저 검토하세요. 이 사이트의 가이드도 같은 이유로 가사나 대사를 인용하지 않습니다.