프로젝트 최적화(1) - 동영상 최적화

📌시작하며

프로젝트 최적화는 웹 성능을 향상시키고, 더 나은 사용자 경험을 만드는데 있어서 필수불가결한 요소이다. 지금 듣고 있는 강의도 ‘최적화’에 대해 알고 싶어서 구매했었는데, 최적화에 대해 집중적으로 학습하고, 나름대로 정리해보고자 한다.

✅동영상 최적화

동영상 최적화의 시작은 ‘용량을 줄이는 것’ 이다. 인생 첫 프로젝트 당시 무조건 화질이 좋은 이미지를 사용해야 한다는 생각에, 4000x6000 사이즈의 이미지를 사용했었는데 엄청나게 느린 초기 로딩을 겪고, 추후에 Lighthouse를 확인했을 때도 이미지 사이즈를 지적받고 압축과 사이즈 조절을 진행한 경험이 있다.😅😅 (그리고 물론 초기 로딩속도가 빨라졌고…)

어쨌든, 동영상 최적화는 다음과 같이 진행할 수 있다.

➡️동영상 용량을 줄이자

1. 동영상을 압축하자
2. 동영상 길이를 줄이자

용량을 줄이기 위해서 두 가지 방법을 선택할 수 있다. 하지만 영상의 화질, 프레임은 퀄리티에 영향을 미치는 요소이므로 압축을 할 경우, 적절한 지점을 찾는 것이 중요하다.

➡️적절한 포맷을 사용하자

<video controls width="250">
  <source src="/media/cc0-videos/flower.webm" type="video/webm" />
  <source src="/media/cc0-videos/flower.mp4" type="video/mp4" />
</video>

<video>태그를 사용할 때 다음과 같이 여러개의 포맷의 동영상 리스트를 제공해주면, 사용자의 브라우저에서 재생 가능한 형식을 선택하고 더 나은 재생 성능을 제공하는 것이 가능해진다.

또한, 다른 형식의 동영상 파일을 제공하여, 사용자의 네트워크 속도와 용량 제한에 따라 최적의 영상 파일을 제공할 수 있다.

➡️CDN 서비스 이용하기

💟CDN이란?

CDN (Content Delivery Network) 서비스는 웹 사이트 및 애플리케이션의 성능을 향상시키기 위해 사용되는 서비스로, 전 세계에 분산된 서버 네트워크 중 사용자와 가까운 곳의 콘텐츠를 활용하여 사용자에게 컨텐츠를 빠르게 전송한다.

💟CDN사용의 장점

• 콘텐츠 캐싱: CDN은 웹 사이트의 정적 파일(이미지, 비디오, 스크립트 등)들을 여러 지역에 있는 서버에 캐싱하여 저장한다. 사용자가 컨텐츠를 요청하면, CDN은 가장 가까운 서버에서 해당 콘텐츠를 제공하므로 로딩 시간이 단축된다.
• 보안 기능: 일부 CDN은 DDoS(분산 서비스 거부) 공격으로부터 웹 사이트를 보호하는 보안 기능을 제공하여, 보안을 강화할 수 있다.

🗂️참고 사이트

• https://developer.mozilla.org/ko/docs/Web/HTML/Element/video
• https://www.cloudflare.com/ko-kr/learning/cdn/what-is-a-cdn/