인터넷에서 정보의 전달 방식은 급속하게 변화하고 있습니다. 텍스트에서 오디오, 이미지, 그리고 비디오로 이동하면서, 이러한 변화는 우리가 정보를 소비하고 이해하는 방식을 혁신적으로 변화시켰습니다. 특히 멀티미디어 리소스의 사용은 빠르게 증가하고 있으며, 이는 인터넷 환경에서 깊은 영향을 미치고 있습니다.
그러나 이러한 멀티미디어 리소스의 사용 증가는 웹사이트의 성능과 사용자 경험에 크게 관여합니다. 네트워크 페이로드는 웹사이트의 로딩 속도와 직접적으로 연관되어 있습니다. 이는 사용자 경험에 중대한 영향을 미칠 수 있으며, 그 중 이미지와 비디오는 많은 용량을 차지하는 리소스 입니다.
이마고웍스의 클라우드 팀에서 리소스 최적화 업무를 진행하며 네트워크 페이로드를 감소하기 위해 노력했습니다. 그 과정을 공유하고자 합니다.
네트워크 페이로드(Network Payload) ?
네트워크 페이로드(Network Payload)는 통신 네트워크를 통해 전송되는 실제 데이터를 의미합니다. 이는 통신 프로토콜에 따라 헤더, 메타데이터, 에러 체크 시퀀스 등 추가 정보와 함께 패킷으로 캡슐화되어 전송됩니다.
페이로드는 패킷의 총 크기 중에서 실제로 의미 있는 데이터를 포함하는 부분입니다. 예를 들어, 웹페이지를 불러오는 경우, HTML, CSS, JavaScript 파일, 이미지, 비디오 등이 페이로드에 해당하며 이들은 HTTP 응답 본문에 포함됩니다.
최적화 전 랜딩페이지의 Lighthouse 검사 결과 중:
Lighthouse를 통해 검사한 결과 이마고웍스의 랜딩페이지에서 네트워크 페이로드의 크기가 크다는 경고를 하였습니다.
웹사이트의 경우, 네트워크 페이로드가 클수록 페이지를 로드하는 데 더 많은 시간이 소요됩니다. 따라서 웹사이트의 성능을 최적화하기 위해서는 가능한 한 네트워크 페이로드를 줄이는 것이 중요합니다. 이는 데이터 압축, 캐싱, 불필요한 리소스 제거 등의 방법을 통해 이루어질 수 있습니다.
상세 내용을 확인해보니 전체 21MB 중 히어로 영상의 용량이 무려 14MB로 절반을 넘게 차지 합니다.
따라서 비디오 리소스의 최적화에 초점을 맞추어 웹사이트의 네트워크 페이로드를 줄이기로 했습니다.
Video Size 최적화
FFmpeg 설치
히어로 영상의 포맷을 MP4에서 WebM 형식으로 변환하여 파일 크기를 줄이고자 했습니다.
변환을 위해 FFmpeg라는 오픈소스 도구를 사용했습니다. FFmpeg는 다양한 오디오 및 비디오 형식으로 변환할 수 있게 해주는 CLI 프로그램입니다.
Windows 사용자는 위 링크에서 미리 빌드된 ffmpeg 바이너리를 다운로드 받은 후 다음 순서를 따라 사용 가능합니다.
-
파일 압축 해제: 먼저, 받은
.7z파일을 압축 해제해야 합니다.7-Zip이나WinRAR같은 프로그램을 사용하면 압축 해제를 쉽게 할 수 있습니다. 파일을 우클릭하고 "Extract Here"를 클릭하면 압축 해제가 진행됩니다. -
환경변수 설정: 압축 해제한 후 ffmpeg 폴더 안에 있는 bin 디렉토리의 경로를 시스템의 환경 변수에 추가해야 합니다. 이렇게 하면 어디서든지 FFmpeg 명령어를 사용할 수 있게 됩니다. 환경변수를 설정하는 방법은 다음과 같습니다:
제어판 > 시스템 > 고급 시스템 설정 > 환경 변수를 찾아가서 "Path" 환경 변수를 찾습니다.
"Path" 환경변수를 클릭하고 "편집"을 선택한 후 새 창에서 "새로 만들기"를 클릭합니다.압축을 해제한 ffmpeg 폴더 안에 있는 bin 디렉토리의 경로를 붙여넣습니다:
- FFmpeg 테스트: 설치를 확인하기 위해, 새로운 명령 프롬프트 창을 열고
ffmpeg -version을 입력해봅니다. 제대로 설치되었다면, FFmpeg의 버전 정보가 출력될 것입니다.
FFmpeg 사용법
FFmpeg의 기본적인 커맨드는 아래와 같습니다:
ffmpeg -i input.mp4 output.webmffmpeg는 많은 파라미터를 사용하여 비디오 및 오디오 변환 작업을 세밀하게 제어할 수 있습니다. 여기에는 일반적으로 사용되는 몇 가지 파라미터가 있습니다:
-i input.mp4: 입력 파일을 지정합니다. 여기서 input.mp4는 입력 파일의 이름입니다.output.avi: 출력 파일을 지정합니다. 여기서 output.avi는 출력 파일의 이름입니다.-vf "scale=1280:720": 비디오 필터를 사용하여 출력 비디오의 크기를 조정합니다. 여기서 scale=1280:720는 비디오의 너비를 1280 픽셀로, 높이를 720 픽셀로 설정합니다.-r 30: 출력 비디오의 프레임 비율을 설정합니다. 여기서 30은 초당 프레임 수를 나타냅니다.-b:v 1000k: 출력 비디오의 비트레이트를 설정합니다. 여기서 1000k는 비트레이트를 1000 kbps로 설정합니다.-c:v libx264: 출력 비디오의 코덱을 설정합니다. 여기서 libx264는 H.264 비디오 코덱을 사용합니다.-c:a aac: 출력 오디오의 코덱을 설정합니다. 여기서 aac는 AAC 오디오 코덱을 사용합니다.-map 0: 모든 스트림(비디오, 오디오, 자막 등)을 출력 파일에 포함시키도록 지시합니다.-y: 이미 존재하는 출력 파일을 덮어쓰도록 ffmpeg에 지시합니다.
이 외에도 많은 다른 파라미터가 있으며, 각 파라미터는 특정 타입의 미디어(비디오, 오디오, 자막 등)나 특정 형식의 파일을 처리하는 데 사용됩니다. 이러한 파라미터에 대한 완전한 목록과 설명은 ffmpeg의 공식 문서에서 찾을 수 있습니다.
위 방법을 통해 mp4영상을 webm 형식으로 전환하여 영상의 크기를 93% 감소했습니다. (14MB → 1MB)
네트워크 탭을 보면 리소스의 사이즈와 시간이 많이 단축된 것을 볼 수 있습니다.
AS-IS:
TO-BE:
브라우저 호환성 고려
그러나 WebM는 모든 웹 브라우저에서 지원되지는 않습니다. 확인 결과 IE, Opera Mini의 모든 버전, 기타 브라우저의 2010년 이전 버전의 모든 브라우저는 지원을 안한다고 합니다.
하지만 ?
팀장님께서 모바일 디바이스를 테스트 해보시라 하셔서 dev버전으로 배포하였습니다. 제가 가진 삼성핸드폰에서는 webm 영상이 잘 나옵니다:
iPhone 사파리 페이지를 개발자모드 열기 포스트를 참고해서 팀원분의 아이폰으로도 확인하였지만 위 caniuse의 정보와는 다르게 webm 영상을 받지 못하고 있었습니다. 확인해보니 사파리는 고급 설정에서 사용자가 직접 활성화해야 webm영상이 지원 가능하다고 합니다..ㅎㅎ
일반사용자가 고급설정에서 이러한 설정을 활성화할 일은 많지 않을 것 같습니다. 또한 이처럼 알려진 정보와는 조금 다르게 webm영상을 제공하지 못하는 경우가 더 있을 것 같습니다.
대체콘텐츠 제공
접근성을 높이기 위해서는 브라우저의 WebM 지원 여부를 확인하고, 필요에 따라 다른 포맷의 리소스를 대체로 제공해야 합니다.
<video autoplay loop muted>
<source src="{video_webm}" type="video/webm" />
<source src="{video_mp4}" type="video/mp4" />
<img
width={1920}
height={580}
src={'/assets/images/products/VideoPoster.webp'}
alt={'crown auto generation'}
/>
</video><source> 태그를 사용하여 여러 비디오 형식을 지정할 수 있습니다. 웹 브라우저는 소스를 순서대로 검토하고, 처음으로 지원하는 형식을 선택하여 재생합니다.
이 경우에는 브라우저가 먼저 WebM 비디오를 시도하고, 만약 WebM을 지원하지 않는다면 MP4를 시도하게 됩니다. 따라서 이 코드는 WebM과 MP4 둘 다 지원하는 브라우저에서는 WebM 파일을 재생하고, WebM을 지원하지 않는 브라우저에서는 MP4 파일을 재생하게 됩니다.
브라우저가 비디오를 지원하지 않는 경우는 <img> 태그를 통해 대체 콘텐츠를 제공할 수 있습니다.
즉, 이렇게 코드를 작성하면 웹사이트가 가능한 한 많은 브라우저와 호환성을 유지하면서도, 가능한 경우 더 효율적인 WebM 형식을 사용할 수 있습니다. 이렇게 다양한 비디오 형식을 제공하는 것은 웹 접근성을 높이는 데도 도움이 됩니다.
후기
최종적으로 영상 최적화를 통해 네트워크 페이로드를 65% 감소시켰습니다. (20MB → 7MB)
눈으로 보기에도 이마고웍스 랜딩페이지의 히어로 영상이 화질 저하없이 잘 나오는 것을 볼 수 있습니다:
네트워크 페이로드의 감소를 통해 다음과 같은 이점을 얻을 수 있습니다.
- 향상된 로딩 시간: 네트워크 페이로드가 감소하면, 웹 사이트나 웹 애플리케이션은 더 빠르게 로드됩니다. 이는 사용자 경험을 향상시킵니다.
- 데이터 사용량 감소: 네트워크 페이로드가 감소하면, 사용자는 더 적은 데이터를 사용합니다. 이는 데이터 사용량에 제한이 있는 사용자들에게 중요합니다.
- 서버와 네트워크 스트레스 감소: 네트워크 페이로드를 줄이면, 서버와 네트워크에 덜 부담이 가므로, 이들의 성능과 안정성이 향상됩니다.
간단한 변환 작업이 어떻게 큰 변화를 이끌어낼 수 있는지를 확인할 수 있었습니다.
하지만, 최적화 작업은 단순히 파일 크기를 줄이는 것에서 끝나지 않습니다. 더욱 복잡한 웹 환경에서는, 서로 다른 리소스 유형에 대해 서로 다른 최적화 전략을 개발하고 적용하는 것이 중요합니다. 또한, 이러한 전략은 시간이 지남에 따라 변경되는 사용자의 요구사항, 기술의 발전 등에 따라 지속적으로 업데이트되어야 합니다.
이를 통해 사용자에게 더 나은 경험을 제공하고, 서비스의 효율성과 효과성을 높이는 데 기여하고자 합니다. 이런 노력이 결국은 서비스의 성공으로 이어질 것이라 생각합니다.
감사합니다.
