페이지에 동영상 하나를 넣는 것은 디자인 관점에서 자연스러운 결정입니다. 문제는 그 한 줄의 임베드가 실제로 무엇을 데려오는지가 화면에서 보이지 않는다는 점입니다. 재생 버튼을 누르지 않아도 상당한 양이 이미 로드되어 있습니다.
재생하지 않아도 로드되는 것들
임베드는 대개 외부 서비스의 플레이어 화면 전체를 페이지 안에 얹는 구조입니다. 그 플레이어는 자기 자신을 그리기 위해 스크립트와 스타일을 내려받고, 추천 영상 · 자막 · 재생 설정 같은 것들을 준비합니다. 여기에 외부 도메인으로의 연결도 함께 열립니다.
영상이 페이지 아래쪽에 있고 방문자 대부분이 거기까지 내려가지 않는다면, 이 비용은 아무 대가 없이 지불됩니다. 페이지 하나에 임베드가 세 개 있으면 그만큼 곱해집니다.
파사드 — 포스터를 먼저 보여 주기
해법은 널리 쓰이는 패턴 하나로 정리됩니다. 처음에는 영상 대신 대표 이미지(포스터)와 재생 버튼만 보여 주고, 방문자가 클릭한 순간에 그 자리를 실제 플레이어로 교체하는 방식입니다. 겉모습은 임베드와 같고, 비용은 실제로 보려는 사람만 냅니다.
디자이너에게 이 방식은 오히려 유리합니다. 포스터 이미지를 직접 고르거나 만들 수 있기 때문입니다. 외부 서비스가 자동으로 뽑은 썸네일은 대개 영상의 아무 프레임이고, 그것이 페이지에서 가장 큰 이미지가 되는 경우가 많습니다. 브랜드에 맞는 포스터를 직접 지정하면 화면 품질과 성능이 함께 좋아집니다.
자체 호스팅과 배경 영상
영상을 직접 서버에 올려 재생하는 방법도 있습니다. 외부 연결이 없어 깔끔하지만, 대역폭과 저장 비용을 우리가 부담하고 여러 기기에 맞는 화질 변환도 직접 해야 합니다. 짧은 루프 영상에는 잘 맞고, 긴 영상에는 전문 서비스가 낫습니다.
배경 영상은 특히 신중하게 봅니다. 소리도 없고 사용자가 조작하지도 않는 영상이 첫 화면에서 가장 무거운 요소가 되는 일이 흔합니다. 정말로 필요한지, 정지 이미지나 짧은 애니메이션으로 같은 인상을 줄 수 있는지 먼저 검토할 가치가 있습니다. 모션 축소를 설정한 방문자를 위한 대안도 함께 준비합니다.
외부 자원이 페이지에 미치는 영향은 성능 최적화 아카이브에서 더 다루고, 임베드 구조를 파사드로 바꾸는 작업은 최적화 지원 사업에 포함됩니다.
다음 회차
마지막 회차는 정리입니다. 지금까지의 규칙을 지켜도 시간이 지나면 미디어 라이브러리에는 어디에도 쓰이지 않는 파일이 쌓입니다 — 그것을 안전하게 찾아내고 지우는 절차를 다룹니다.