1. 머지몬 3단 진화
영상 병합 작업 SSE 적용기
AUSG 7th 김수경

2. 발표 끝났습니다.

3. 발표 끝났습니다.
요 기능이 세상밖으로 나오기까지 7일 걸렸습니다.
이 간단한 걸 대체 왜...?
라는 의문이 드시겠죠?
저도 그랬습니다.
시작하기 전까지는요...
저의 노고가 아까워서
이 간단한 기능이 왜 그토록 오래걸렸는지의
삽질 + SSE 구현기를 발표하겠습니다.

4. WHY?
등장 배경
지나치게 오래걸린다..!
원본 영상의 용량 자체가 크고
영상 클립의 개수가 늘어날 수 있다는 점

5. 등장 배경
Progress Bar 를 통해
영상의 다운로드 상황을 보여주자!
그래서 등장하게 된.. "(Video) Merge Mon"

6. Merge Mon Lv.1
스킬 : 영상 합치기 시, 무한 대기

7. 서버의 상태를 어떻게 받아올 것 인가
서버는 연결 유지 X
최소한의 자원만 유지
한번 응답을 내려주면 끝이라는 것

8. 서버의 상태를 어떻게 받아올 것 인가
• Polling
• Long Polling
• WebSocket
• SSE

9. Polling
• 클라이언트가 주기적으로 서버에게
요청을 보내는 방식
• 계속 요청 -> 리소스 낭비
• 일정 주기가 있다면 OK
• 단순하게 구현 가능 (e.g. SetInterval)

10. Long Polling
• 서버에서 변경이 있을 때까지 대기
• 지속적으로 연결 유지
• 실시간 반응이 빈번하지 않을 때 용이

11. WebSocket
• 전이중통신방식으로
애플리케이션 계층에서 이뤄지며...
HTTP 헤더를 첫 연결시에만 보내어 불필요한 연결과
정의 반복을 제거할 수 있다.
브로드 캐스트를 지원하고...
• 양방향통신
• 대표적인 예시 : 채팅 구현 방식

12. SSE
Server Sent Event

13. WebSocket 🆚 SSE
• 클라이언트에서 최초 요청 이후, 더이상 보낼 일 없음
(서버 단방향)
• 웹소켓보다 가벼움
• 자동 재접속 지원

14. 기존 병합 작업
Post로 VideoInfo를 보내고 병합이 완료된 영상의 주소를 받아옴
"Pending A"의 과정이 "Pending B"의 과정에 종속

15. Mission 1. SSE Post로 구현하기
이것만 보고 멈췄어야했다...

16. Mission 1. SSE Post로 구현하기

17. Mission 2. 이중 SSE
중간에 영상을 합치는 작업을 진행할 정보를 담고 있는 매개체가 필요하다.

18. 중간 매개체(DB) 선정
• 데이터 저장소로 가장 입/출력이 빠르게 이루어지는 스토리지
• 계속 데이터를 보관하지 않기 위한 TTL 설정
• ML 모델 연동과 확장성 고려

19. Mission 2. 이중 SSE
• Step 1 (POST)
합칠 영상 정보를 DB(Redis)에
저장하고 DB로 부터 저장된 Key값을
받아온다.
• Step 2 (GET)
받아온 Key 값을 통해 영상 병합
작업을 시도하고 이벤트 스트림을
통해 진행도를 받는다.

20. Mission 2. 이중 SSE

21. Mission 2. 이중 SSE

22. .....오잉
"머지몬 lv.1" 의 상태가...!

23. Merge Mon Lv.2
스킬 : SSE 진행도 3단계로 보내기

24. 2단계 정체 현상
실질적으로 영상의 개수가 많아지면 과정이 더 오래걸린다..

25. 머지몬 3단 진화의 마지막 미션
: 세부 단계를 구현하라.
그렇게 마주하게된 자그마한 또다른 미션...!

26. 오래걸리는 구간 파악

27. Mission 1. 코루틴 작업 떼어내기
코루틴 작업 하나가 끝났을 때 이벤트 전송

28. 코루틴 작업 분리
• 영상 각각의 스트림을 가져온다.
• 해당 부분에서 영상의 개수가 많아지면 오래걸리는 문제가 발생
• coroutine내부에서 각 개별 작업이 끝난 시점을 알아야한다.

29. 코루틴 작업 분리
• Return Iterator
• 주어진 Future들에서 먼저 끝나는 것부터 차례로 순회
as_completed

30. 코루틴 작업 분리
• FIRST 구간 전체 진행도 : 33%
• 영상 개수(총 2개)에 따른 세부 진행도
• 영상 1개 스트림 : 16%
• 영상 2개 스트림 : 33%
Video Sever SSE Response
Mission 1 Complete✨

31. Mission 2. MoviePy의 ProgressBar 꺼내기
를 내장하고 있는 파이썬 기반 영상 편집 라이브러리

32. Custom Logger
진행도 출력은 어디서 이루어지는가..
proglog logger를
커스텀하자..!

33. Proglog
가뭄의 단비같은..
친절한 주석 ✨

34. But
Proglog - callback
• 콜백 함수에 SSE EventStream의 이벤트를 넣어서 이벤트 전송
EventStream 객체 자체 넘길 수 없음
EventStream의 라이프 사이클은
SSE 객체가 생성된
첫 엔트리 포인트에서만 제어 가능.

35. 내부의 진행상황을 밖으로 빼내기

36. 커스텀 로거 완결판

37. 세부 진행도 받아오기
• SECOND 구간 전체 진행도
: 33 - 66%
• Video Write 작업 진행에 따른
100% 환산 작업 수행
Video Sever SSE Response
Mission Complete✨

38. .....오잉
"머지몬 lv.2" 의 상태가...!

39. Merge Mon Lv.3
스킬 : SSE 진행도 백분율로 보내기

40. TLDR
1. SSE는 표준대로 GET으로 구현하자
2. SSE의 제어권 자체는 엔트리포인트 이외에는 넘길 수 없다.
3. (파이썬 한정) 만능 tqdm 라이브러리를 사용하면
진행도를 자세하게 받아올 수 있다.
SSE 구현을 위한 소소한 팁(?)