당신이 오픈소스를 해야하는 101가지 이유

오픈소스 기여모임 10기 밋업에서 shaka player와 관련된 오픈소스에 대해 발표하였습니다.

오픈소스 기여모임: https://litt.ly/opensource

Transcript

1. 당신이 오픈소스를 해야하는 101가지 이유 AI 도구를 활용한 효율적인 기여 여정 오픈소스 기여모임 10기
2. 더핑크퐁컴퍼니 웹개발팀 Software Engineer 글로벌 서비스 및 사내 서비스 개발을 담당하고 있습니다. 안녕하세요! FE 개발자 앤디, 김규회입니다 👋
3. 오픈소스 10개 기여하기!
5. 기여 대상: Shaka Player
6. Google이 만든 오픈소스 미디어 플레이어 HLS, DASH 등 주요 스트리밍 프로토콜을 지원하며 강력한 DRM기능이 내장되어 있습니다. 기여 대상: Shaka Player
7. 기여 대상: Shaka Player
8. 나의 무기들: AI 도구 조합
9. 이슈 1: Shaka Player에 첫번째 기여하기 새로운 MediaKeySessionClosedReason 도입하기 (#9540)
10. 이슈 1: Good First Issue부터 도전해보기 good first issue 라벨이 붙은 #3446 발견. 하지만 내용은 너무 길고 도메인은 생소했습니다. 여기서 AI와의 첫 티키타카가 시작됩니다.
11. 이슈 1: Good First Issue부터 도전해보기 수십 줄의 코멘트를 빠르고 쉽게 요약해 준 것이 마법의 시작이었습니다.
12. 이슈 1: Good First Issue부터 도전해보기 7번 과정 중 에러로 인해 세션이 닫기게 될때 이를 감지하고 구현해야 되는 이슈!
13. 예상치 못한 동작 구현 후 테스트 중 Chrome과 Firefox에서는 reason 값을 정상 반환했지만, Safari에서는 undefined가 반환되었습니다. 원인 규명: WebKit 소스 탐색 AI가 애플의 WebKit 엔진 소스코드 링크를 직접 찾아 제시함으로써, 삽질하는 시간을 극적으로 줄여주었습니다. 나 Safari에서 왜 undefined가 나오는 거야? 이와 관련된 WebKit 소스 코드 찾아줘 Safari 호환성 이슈와 스펙 확인
14. 이슈 2: TC39 표준을 오픈소스에 JavaScript 최신 표준인 Map.getOrInsert 도입 제안 (#9502)
15. 이슈 2: TC39 표준을 오픈소스에
16. What’s TC 39? ECMA International 산하의 기술 위원회 Google, Apple, Microsoft, Mozilla 등 주요 IT 기업의 전문가들이 참여하며, JavaScript에 추가될 새로운 기능들을 논의하고 결정합니다.
17. What’s TC 39?
18. What’s TC 39?
19. AI가 잘한 것: 패턴 탐색 AI가 못한 것: Side Effect 예측 AI의 탐색과 사람의 판단
20. 이슈 3: 메인테이너의 깜짝 제안 Renewal Licensing 기능 추가 (#9589)
21. "이것도 한번 해볼래요?" (#9589) 이전 PR을 머지한 후, 메인테이너가 DRM 라이선스 갱신 관련 이슈를 직접 멘션하며 제안해왔습니다. "FairPlay랑 PlayReady는 잘 모르지만 한번 해볼게요." "문서가 없다는 확실한 사실"을 단시간에 확인해 준 것도 AI의 큰 역할이었습니다. 나 PlayReady 라이선스 갱신 공식 문서 찾아줘 AI “MS 문서를 확인했습니다. 하지만 클라이언트에서 어떻게 갱신을 트리거해야 하는지는 문서에 없습니다. Apple FairPlay도 마찬가지로 커뮤니티 이슈에서만 단서가 발견됩니다.” 이슈 3: 메인테이너의 깜짝 제안
22. 이슈 3: DRM 라이선스 자동 갱신 기능 구현하기
23. 3대 DRM 라이선스 갱신 방식 비교 - Safari 공식문서에서는 라이선스 renewal 기능을 지원한다고는 명시되어있지만 재갱신하는 방법이 따로 나와있지 않아 Shaka-Community를 통해 알게된 방법으로 시도하게 되었습니다.
24. 3대 DRM 라이선스 갱신 방식 비교 - PlayReady
25. W3C EME 스펙이 `license-renewal`을 정의했지만, 실제 세부 구현은 전적으로 각 브라우저 벤더에 위임되어 있어 통합이 매우 까다로웠습니다. 3대 DRM 라이선스 갱신 방식 비교
26. 기여한 PR: 자동 갱신 renewalLicensing API 구현
27. 이슈 4: 7년 묵은 이슈의 해결 2019년에 생성된 retryLicensing() 구현 이슈 (#1772)
28. 이슈 4: 7년 묵은 이슈의 해결 2019년에 생성된 retryLicensing() 구현 이슈 (#1772)
29. 이슈 4: 수동으로 갱신하는 retryLicensing기능 구현하기
30. 이슈 4: 수동으로 갱신하는 retryLicensing기능 구현하기
31. 예측 못한 물리적 환경의 장벽 로직을 구현했지만 삼성 Tizen 3 스마트 TV 디바이스 랩 테스트에서 CI가 무참히 실패했습니다. 해결하려고 했으나,,,결국 실패 후 메인테이너분도 우선적으로 Docs로 명시로 해놓고 새롭게 이슈를 달아보는것이 어떠냐고 제안해주심. 소통을 통해서 PR을 머지할 수 있었던 이슈 PC 브라우저 환경만 생각했던 나에게 온 충격 Selenium Test는 실패를 해버렸는데,,,
32. 이슈 5: 눈덩이처럼 커져버린 PR의 탄생 영상별 선호도 언어, 오디오, 텍스트 필드 대규모 리팩토링 (#9542)
33. 처음에는 분명 Good First Issue였는데,,, 처음에는 단순한 언어필드 하나만 단일 객체에서 배열로 변환시켜 다중으로 값들을 받기만 하는 이슈였을 뿐인데,,,
34. 처음에는 분명 Good First Issue였는데,,,
35. 갑자기 커저버린 이슈,,,
36. 갑자기 커저버린 이슈,,,
37. 갑자기 커저버린 이슈,,, Lines of Code
38. 3명의 핵심 리뷰어 승인을 거쳐 머지된 규모가 커지게 된 PR이었습니다. v5.1 Milestone 지정
39. 10기 모임하는 동안,,? 이후에도,,,?
40. 10기 모임하는 동안,,,?
41. 10기 모임하는 동안,,,? 회사에서 쓰던 라이브러리에 대해 공부하면서 기여할 수 있다는 사실에 성취감을 느낄수 있었습니다!!!
42. 10기 모임하는 동안,,,? 현재 총 컨트리뷰터 100위에서 51위 달성! 아마도...? 유일한 한국인 컨트리뷰터
43. 오픈소스 문화에서 배운 점 1. 영어를 열심히 공부하자! feat.듀오링고 본인의 생각을 바로 전달하고 싶지만 그것마저도 어느정도 제약이 걸려버려 매우 답답하다는 생각이 들었습니다...
44. 오픈소스 문화에서 배운 점 2. 두려워하지 않기
45. 오픈소스 문화에서 배운 점 3. 근본에 대해서 고민하기
46. 그래서 101가지 이유? 5가지 이슈를 해결했을 뿐이지만, 그 과정에서 얻은 기술적 깨달음과 경험을 세어보니 101가지가 넘었습니다. 다같이 오픈소스 이슈 하나 어떠신가요?
47. FAQ
48. Appendix
49. EME란 무엇인가요? EME란 Encrypted Media Extensions의 줄임말로 W3C에서 표준화된 웹 API입니다. 브라우저에서 DRM영상을 재생할 수 있게 해주는 인터페이스입니다. DRM은 무엇인가요? DRM이란 여러분들이 모바일에서 OTT서비스를 시청하실때 캡처할 경우 화면에 뜨는 검은 화면같이 디지털 컨텐츠의 무단 복제를 막기 위해 만들어진 기술입니다. Widevine, PlayReady, FairPlay란 무엇인가요? Widevine, PlayReady, FairPlay는 브라우저별로 지원되는 각기 다른 DRM 시스템으로, 단일 솔루션으로 모든 환경을 대응할 수 없어 멀티 DRM 라이선스 서버 체계가 필수적입니다.
50. 브라우저에서 DRM을 어떻게 처리하나요? 1. CDN → Browser: 암호화된 영상 스트림 수신 2. Browser → App: 암호화 감지, 웹 앱에 이벤트 전달 3. App → CDM: DRM 세션 생성 4. CDM → App: 라이선스 요청 데이터 생성 5. App → License Server: 라이선스 요청 6. License Server → App: 인증 확인 후 라이선스 발급 7. App → CDM: 라이선스 전달 8. CDM → 화면: 복호화 후 GPU로 직접 렌더링