#1. FLO 클론 코딩, 내가 FLO 를 정한 이유와 기술 사전 조사

나는 예전부터 프론트엔드 개발에 이어 백엔드 개발과 하나의 서비스를 운영하기 위한 인프라 구성에 대해 다양한 분야를 이해하고자 했다. 그런데 이해하기 위한 지식이 부족할 뿐더러 무엇부터 해야할지 몰랐기에 프론트엔드만 계속 공부했었다.

그러다 시스템 엔지니어 겸 개발자로 일했던 첫 회사에서 리눅스 명령어와 인프라 구조에 대해 수박 겉핣기 식으로 배우게 되었다. 그러면서 틈틈이 백엔드에서 자주 사용되는 Spring framework 를 조금씩 공부하고 있었다. 프론트엔드는 Vue 로 시작해서 지금은 React 를 애용하고 있는 프론트엔드 개발자다.

1. 개요

아직도 아는 것이 적은 주니어 프론트엔드 개발자이지만 이제 수박 겉핣기로 알아낸 프론트엔드, 백엔드, 인프라 지식들을 활용해 직접 서비스들을 개발하고 서버를 구성한 뒤 다양한 분야를 섭렵해보고자 한다.

2. FLO를 클론코딩 프로젝트로 정한 이유

그래서 나는 음원 스트리밍 서비스 플랫폼인 FLO를 클론 코딩하기로 마음먹었다.
왜 FLO 였냐면, 이직을 준비할 당시 FLO에서는 대규모 채용을 진행중이었는데 주니어 프론트엔드 개발자는 채용하지 않고 시니어 개발자만 채용했던 기억이 갑작스럽게 떠올라 운명이리라 믿고 결정했다.

그래서 FLO 사이트에 들어가 핵심 기능인 음원 듣기(로그인 하지 않고 들었으므로, 1분 미리듣기)를 재생해보았는데 프론트엔드 어디에도 <audio /> 태그나 <video /> 태그가 보이지 않았다. 개발자 도구의 네트워크 패널을 보니 트랙을 재생할 때마다 m3u8 파일 하나와 ts 파일 여러개가 다운로드 되고 hls.js 에서 사용되는 함수와 polyfill의 js 가 일부 합쳐진 것처럼 보이는 또 다른 blob 형태의 파일이 트랙을 재생할 때마다 받아진다. 하지만 어디에도 재생하는 코드가 안보인다. 대체 어떻게 재생되는 것인가?

우와. 이런것도 기술이구나.

단순히 클론코딩하여 다양한 분야를 섭렵하자는 생각이 기술까지 클론코딩 해내고 말겠다는 고집의 도화선에 불을 지폈다. 비디오나 오디오 태그 없이 음악이 재생된다는 것은 처음 본 나는 이 기술을 나도 가지리라 다짐했다.

3. 음원 스트리밍 사이트의 핵심인 .m3u8 그리고 .ts 파일은 무엇인가?

• m3u8 은 영상이나 오디오를 스트리밍 할 때 분할된 ts 파일들의 재생 시간 및 목록을 담은 파일이다. 스트리밍할 때 m3u8 파일을 기반으로 데이터를 조합하여 클라이언트에게 보여주거나 들려준다.
• ts 파일은 하나의 영상 혹은 오디오를 여러 단위로 분할하여 전달하기 때문에 전달된 만큼 재생이 가능하다. 반면에 mp4 등 다른 확장자는 모두 다운로드 될 때까지 파일을 읽을 수 없다.

아래는 FLO 에서 다운로드 받은 m3u8 파일의 내용이다.

#EXTM3U
#EXT-X-VERSION:3
#EXT-X-TARGETDURATION:10
#EXT-X-MEDIA-SEQUENCE:0
#EXT-X-PLAYLIST-TYPE:VOD
#EXTINF:10.008778,
sq00.ts
#EXTINF:10.008778,
sq01.ts
#EXTINF:9.985556,
sq02.ts
#EXTINF:10.008778,
sq03.ts
#EXTINF:10.008778,
sq04.ts
#EXTINF:9.985556,
sq05.ts
#EXTINF:0.069667,
sq06.ts
#EXT-X-ENDLIST

다음은 위 m3u8 에 맞는 ts 파일을 다운로드 받았다. ts 파일의 내용은 바이너리 형태여서 어떤 내용이 들어가있는지는 알 수 없다.

#EXTM3U m3u8 파일임을 의미
#EXT-X-VERSION m3u8 버전을 의미
#EXT-X-TARGETDURATION ts 파일 목록의 파일 별 각 최대 실행 시간을 의미
#EXT-X-MEDIA-SEQUENCE 제일 먼저 실행해야하는 ts 파일의 일련번호를 의미
#EXT-X-PLAYLIST-TYPE EVENT와 VOD 값 중 하나만 넣을 수 있다.

• EVENT 일 경우, 서버가 ts 재생 목록을 추가할 수 있으나 어떤 부분을 변경하거나 삭제는 절대 할 수 없음을 의미
• VOD 일 경우, ts 재생 목록 파일이 변경되지 않아야 한다는 것을 의미
• 아직 EVENT 와 VOD 의 역할에 대해서 그렇구나 라는 정도로 느낌만 들고 확실히 이해가 되지는 않는다.

#EXTINF ts 파일의 실행 시간을 의미
#EXT-X-ENDLIST ts 파일 목록의 끝을 의미

다음은 ts 파일들이다. m3u8 파일도 함께 있다. m3u8 파일이 보내진다면 m3u8 파일안에 명시된 ts 파일들도 반드시 함께 보내져야한다. ts 파일들만 보내진다면 m3u8 파일 없이는 사용할 수 없는 데이터가 되는 것이다. m3u8 과 ts 파일들은 key와 value 처럼 반드시 함께 해야하는 파일이라고 생각하면 될 것 같다.

4. ffmpeg 모듈로 m3u8, ts 파일들을 mp4 로 조합하기

더 조사해보니 ffmpeg 라는 모듈을 이용해 m3u8, ts 파일들을 mp4 파일로 다시 빌드가 가능하다고 한다.

./ffmpeg -i "https://hls2.music-flo.com/track/945d1eddb25951f5eb41ecc9dfec15695bf52632/1641473948/598ae8e58bd89b57/p/337/074/07/04/449515137/61aa2f54/1min.hls2/index.m3u8" -bsf:a aac_adtstoasc -vcodec copy -c copy -crf 50 file.mp4

ffmpeg 모듈에게 m3u8 의 URL 만 전달해주면 알아서 ts 파일들을 찾아 조합해준다. 신기하다. 그리고 조합된 파일을 file.mp4 로 저장해달라고 했다. 그랬더니.

뚜둥. 이렇게 mp4 파일이 정말 만들어졌다. 실행해보니 정말 1분 미리듣기 한 노래가 재생이 되는 것이 아닌가? 시작이 좋다.

그럼 계속 연구하면서 클론 코딩을 슬슬 시작해봐야겠다.
m3u8 과 ts 가 무엇인지는 알았으니 FLO 의 프론트엔드에서 호출하는 API 들을 보면서 FLO 인프라의 구조와 사용자 행위에 따른 액션을 조사해봐야겠다.

5. 참조 사이트

• *.ts 파일은 무엇인가?
• *.m3u8 파일은 무엇인가?