비디오 썸네일 및 지연 로딩 개선 설계

썸네일 자동 생성

영상 업로드가 끝나면 서버가 ffmpeg를 호출해 재생 시작 1초 지점의 프레임을 640px 너비 JPEG로 추출한다. 썸네일은 원본 영상과 같은 비디오 저장소의 thumbnails 디렉터리에 저장하고, VideoRecord의 thumbnailName으로 참조한다. 클라이언트는 인증된 GET /api/videos/:videoId/thumbnail 요청으로 이미지를 표시한다.

ffmpeg가 설치되지 않았거나 프레임 추출에 실패하면 업로드 자체는 성공하고 thumbnailName을 비워 둔다. 이때 목록은 비디오 아이콘과 제목을 대체 미리보기로 표시한다. 운영 환경에서 자동 생성 기능을 사용하려면 Node 런타임 이미지에 ffmpeg를 포함해야 한다.

미리보기 UX

비디오 라이브러리의 목록 항목은 썸네일, 재생 아이콘, 제목, 용량, 업로더 정보를 함께 표시한다. 선택된 영상은 큰 HTML5 플레이어로 재생하며, 썸네일은 loading="lazy"를 사용한다.

지연 로딩

/videos 화면은 React.lazy와 Suspense로 동적 import한다. 따라서 일반 포털 화면의 초기 번들에는 VideoLibrary와 연관 컴포넌트가 포함되지 않고, 사용자가 비디오 메뉴 또는 /videos 경로를 방문할 때 별도 청크가 내려받아진다. 로딩 중에는 인증 상태와 일관된 가벼운 대기 화면을 표시한다.