[클라우딩 어플리케이션 엔지니어링 TIL] 240302 - 비디오 에디터 제작하기

Intro

---

지금까지 배운 내용을 토대로 비디오 에디터 제작 사이트를 만드는 강의를 학습했다.

 

 

 

 

오늘 학습한 내용

---

⚠️ 서비스를 만들기 전에는 항상 어떤 기능이 들어가는 지부터 고민해보자!

 

비디오 에디터의 동작방식

필요한 기능: 

• 비디오 플레이어
• 비디오 업로드 기능
• 비디오 타임라인

(아쉽게도 웹에서는 고수준의 비디오 에디터를 제작하는 것은 어렵다.)

 

 

비디오 에디터 서드파티 라이브러리 분석

서비스를 개발하기 전 필요한 기능들을 구현하기 위해 적합한 라이브러리를 찾는다.

다른 사람들이 만든 비슷한 프로젝트(Github)에서 package.json을 통해 어떤 라이브러리를 사용했는지 분석해 보는 것도 좋은 방법이다.

 

서비스를 만들 때 구현 순서로는,

1. HTML 구조 잡기 (화면 만들기)
2. CSS 스타일링
3. 자바스크립트 코드 적용 (기능 구현)

위 순서로 구현하는 것이 효율적으로 구현하는 방법이다.

 

비디오 에디터 프로젝트에서는, 멀티미디어 인코딩/디코딩 관련 라이브러리인 FFmpeg를 사용하기로 하였다.

GitHub - FFmpeg/FFmpeg: Mirror of https://git.ffmpeg.org/ffmpeg.git

 

그 외,

• 비디오 재생 컴포넌트

: 비디오 재생 버튼 (Player) 구현 가능

Video-React - React Video Component

 

• slider

: 비디오 길이 조절 slider 구현 가능

Building a Multi-Range Slider in React From Scratch

 

• Dummy Video

: 무료로 비디오를 사용할 수 있는 사이트

https://www.pexels.com/search/videos/dummy/

 

 

 

 

 

마무리

---

어렵당