카
카카오엔터테인먼트FE
April 4, 20231회
우당탕탕~ 영상 서비스 개발기 2탄 : 인코더와 라이브 서비스
간단 소개
카카오엔터테인먼트 영상 서비스 개발팀의 인코더, 라이브 서비스 개발 경험과 기술적 고민, 문제 해결 과정을 공유합니다.
AI Summary
- 인코더 & 채팅 패키징
- 트랜스코딩: 원본 영상 파일을 다양한 해상도로 인코딩하여 사용자 네트워크 환경에 맞는 스트리밍 제공. VMAF 점수와 bitrate를 활용하여 최적화된 인코딩 옵션 설정.
- 패키징: 인코딩된 영상을 짧은 세그먼트 단위로 분할, HLS/DASH 포맷 지원. 썸네일 추출 기능 제공.
- 채팅 패키징: 채팅 데이터를 자막 파일(VTT) 형태로 만들어 영상과 함께 제공, 플레이어 개발 부담 감소 및 CDN 캐싱 용이.
- 실시간 라이브 중계
- Timed Metadata: HLS의 딜레이 문제를 해결하기 위해 ID3v2 Frame을 TS 파일에 삽입, 실시간 투표 기능 구현.
- Flutter 활용: 여러 플랫폼의 채팅 통합 웹 페이지 및 스코어보드 애플리케이션을 빠르게 개발하여 라이브 방송 환경 개선.
- 라이브 방송 장애: HTTP 1.1의 HOL 블로킹 문제 발생, 이미지 캐시 서버 및 HTTP/2 지원으로 해결. End-to-End 지연 시간 감소를 위한 저지연 스트리밍 기술 연구 중.
Next Feeds

Yarn 대신 pnpm으로 넘어간 3가지 이유
Yarn에서 pnpm으로 전환한 이유와 pnpm 도입 후 얻은 장점을 분석하고, pnpm이 패키지 관리의 대안이 될 수 있음을 제시합니다.
pnpmYarn패키지 매니저모노레포Ghost Dependency
2023. 4. 3.
AB180
View Transitions API
View Transitions API는 웹 페이지 전환 효과를 간편하게 구현하도록 돕는 실험적인 API입니다. 복잡한 트랜지션을 쉽게 만들고 코드 가독성을 높입니다.
View Transitions API트랜지션애니메이션frontend웹 개발
2023. 4. 3.
카카오엔터테인먼트FE
우당탕탕~ 영상 서비스 개발기 1탄 : 영상 CMS
카카오엔터의 영상 서비스 개발팀이 소녀 리버스 프로젝트를 위해 영상 CMS(VODKA)와 대용량 파일 업로드 시스템(Conveyor)을 개발한 과정과 기술적 고민을 담고 있습니다.
영상 CMSRefineApigeeTusConveyor
2023. 4. 3.
카카오엔터테인먼트FE
View Transitions API
View Transitions API는 외부 라이브러리 없이 화면 전환 효과를 쉽게 구현하도록 돕는 실험적인 Web API입니다. 간단한 사용법과 다양한 활용 예시를 제공합니다.
View Transitions API트랜지션animationfrontendWeb API
2023. 4. 3.
카카오엔터테인먼트FE

지난 9개월간의 딜리버리프로덕트팀의 경험과 변화에 대한 이야기: 애자일
컬리 딜리버리프로덕트팀의 9개월간 애자일 도입 여정과 변화를 분석하고, 팀워크 향상 및 효율성 증대 효과를 제시합니다.
애자일스크럼팀워크소프트웨어 개발컬리
2023. 3. 30.
컬리
웹에서 파일 선택하기: onShowFileChooser()를 이용한 단일 및 복수 파일 선택 방법
안드로이드 WebView에서 onShowFileChooser()를 사용하여 단일/복수 파일 선택을 구현하고, 권한 처리 및 결과 전달 방법을 설명합니다.
WebChromeClientonShowFileChooserWebViewFileChooserIntent
2023. 3. 30.
PRND