YouTube처럼 썸네일 미리보기 구현하기: HLS + Android 앱 완벽 가이드

문제 정의

Streaming은 서버에서 동영상을 가져와서 단말에서 재생하는 기능이다. 컨텐츠가 서버 측에 있기 때문에 사용자에게 다양한 경험을 제공하기 어렵다. YouTube가 Streaming을 활용하는 대표적인 서비스이다.

YouTube는 아래 그림과 같이 Thumbnail을 보여 주면서 Seek을 하는 기능을 제공한다. 이러한 서비스는 어떻게 구현하는가? 실재 구현까지는 안해보더라도 어떠한 방법을 활용하는지 알아보자.

첫 번째 Prompting

"YouTube의 영상에서 아래 영상 thumbnail을 보여 주면서 seek을 하는 기능을 구현하려고 해. 우리 서버는 HLS를 지원해. Client는 Android에서 동작하는 앱이다. 이 부분을 유사하게 구현하려고 하면 어떻게 해야할지 가이드 해줘."

제공 답변

기본 개념 정리

YouTube에서 구현한 썸네일 프리뷰는 사용자가 seek bar를 움직일 때 해당 시점의 영상을 정적인 이미지로 보여주는 기능입니다. 이를 위해 필요한 요소는 다음과 같습니다:

• 각 시점(예: 매 5초)의 썸네일 이미지
• 썸네일들의 인덱스 정보 (타임코드 → 썸네일 매핑)
• UI에서 시킹 중일 때 보여줄 썸네일 뷰

---

서버 측 구현 (HLS 기반)

썸네일 생성

• ffmpeg을 사용해 주기적인 썸네일 이미지 (예: 1초, 5초 간격) 를 생성할 수 있습니다.
• 개별 이미지로 저장하거나, YouTube처럼 sprite 이미지로 만들어 저장합니다. (하나의 큰 이미지에 여러 프레임을 배치)

ffmpeg -i input.mp4 -vf fps=1,scale=160:-1 thumbnail_%04d.jpg

또는 sprite 형태:

ffmpeg -i input.mp4 -vf "fps=1,scale=160:-1,tile=10x10" sprite.jpg

WebVTT or JSON으로 인덱스 매핑

• YouTube는 WebVTT 파일로 썸네일 위치를 설명합니다.
  예: thumbnails.vtt

WEBVTT  00:00.000 --> 00:05.000 sprite.jpg#xywh=0,0,160,90  00:05.000 --> 00:10.000 sprite.jpg#xywh=160,0,160,90

또는 JSON 예시:

{   "0": { "url": "sprite.jpg", "x": 0, "y": 0, "w": 160, "h": 90 },   "5": { "url": "sprite.jpg", "x": 160, "y": 0, "w": 160, "h": 90 } }

서버는 썸네일 이미지 및 인덱스 파일(JSON 또는 VTT)을 static으로 서비스합니다.

Android Client 측 구현

SeekBar 커스터마이징

• SeekBar.OnSeekBarChangeListener로 사용자의 seek 위치를 감지하고,
• overlay UI에 썸네일 이미지를 표시합니다.

썸네일 표시 UI

• FrameLayout 위에 ImageView를 띄워서 seek 중일 때 표시
• 썸네일 좌표(x, y, width, height)를 통해 sprite 이미지에서 해당 부분만 crop 표시
  • Glide 혹은 Picasso로 sprite 이미지를 로드한 뒤 BitmapRegionDecoder 사용

VTT 또는 JSON 파싱

• VTT 파일을 다운로드 받아 각 타임코드 → xywh 정보를 파싱하거나,
• JSON 파일을 다운로드 후 Map 형태로 로딩

전체 동작 흐름

1. 앱 실행 시 영상 URL과 함께 썸네일 sprite 이미지와 인덱스 파일(VTT 또는 JSON)도 다운로드
2. 사용자가 seekBar를 움직이면 현재 seek 위치 기반으로 보여줄 썸네일 이미지 좌표 계산
3. sprite 이미지에서 해당 영역을 잘라서 썸네일 이미지로 표시

기술 스택 요약

컴포넌트	기술
썸네일 생성	ffmpeg
썸네일 인덱스	WebVTT 또는 JSON
클라이언트 이미지 처리	BitmapRegionDecoder, Glide, CustomView
통신	OkHttp, Retrofit 등 사용해 JSON/VTT 다운로드

참고 자료

• WebVTT spec for thumbnails
• YouTube thumbnail implementation via VTT (StackOverflow)
• ffmpeg sprites