홈페이지에서 움직이는 그 영상, 어디서 오는 걸까

경쟁사 홈페이지를 보다가 이런 생각을 하신 적이 있으실 겁니다. 첫 화면 배경이 잔잔하게 움직이고, 제품 섹션에서 짧은 장면이 반복되고, 스크롤을 내리면 그래픽이 하나씩 나타납니다.

그리고 이렇게 물으십니다. "저건 홈페이지용으로 따로 찍은 건가요?"

대부분은 아닙니다. 홈페이지 전용으로 촬영을 나가는 경우는 거의 없습니다. 그렇게 하면 비용 대비 남는 것이 너무 적기 때문입니다.

홈페이지에서 움직이는 것은 대개 두 가지 중 하나입니다. 제대로 만든 본편의 조각이거나, 처음부터 웹용으로 설계한 모션그래픽입니다.

왼쪽은 화면에 정보가 표시되는 장면, 오른쪽은 사용자가 화면 앞에서 반응하는 장면입니다. 이런 컷은 본편 안에 들어 있던 장면이고, 웹에서는 짧게 잘라 반복 재생하는 형태로 쓰입니다.

경로 A — 본편을 만들고 조각내서 배치한다

가장 많이 쓰는 방식입니다. 회사소개영상이나 제품영상 한 편을 제대로 만들고, 그 안의 장면을 홈페이지 각 자리에 맞게 잘라 씁니다.

이 방식의 장점은 명확합니다. 한 번 만든 영상이 유튜브에도 올라가고, 제안서에도 들어가고, 전시회에서도 돌아가고, 홈페이지에서도 움직입니다. 같은 제작비로 쓰이는 자리가 여러 곳이 됩니다.

다만 조건이 하나 있습니다. 본편을 만들 때부터 이 용도를 알고 있어야 합니다. 촬영 단계에서 "이 컷은 홈페이지 배경으로 쓸 것"이라고 정해 두면, 그에 맞는 구도로 담을 수 있습니다.

이런 지시 없이 만든 영상을 나중에 홈페이지에 쓰려고 하면, 쓸 만한 컷이 생각보다 적습니다. 인물이 화면 정중앙에 있어서 글자를 얹을 자리가 없거나, 카메라가 계속 움직여서 반복 재생하면 어지러운 식입니다.

위 영상에는 제품 클로즈업, 사용 장면, 설명 그래픽이 모두 들어 있습니다. 이런 구성이면 홈페이지 각 섹션에 맞는 조각을 뽑아내기가 쉽습니다.

왼쪽은 제품을 가까이 담은 장면, 오른쪽은 공간과 분위기를 담은 장면입니다. 앞쪽은 제품 섹션에, 뒤쪽은 첫 화면 배경에 적합한 성격입니다.

경로 B — 모션그래픽으로 웹용 움직임을 설계한다

촬영할 것이 마땅치 않거나, 상세페이지 안에서 설명을 해야 하는 경우에는 다른 경로를 씁니다. 처음부터 웹에서 쓸 목적으로 모션그래픽을 만드는 방식입니다.

요즘은 디자인 단계에서 화면 시안을 만들면서 그 시안 요소를 그대로 움직이는 형태로 뽑아내는 작업을 함께 진행하는 경우가 많습니다. 웹 디자인과 모션이 같은 소재를 쓰기 때문에 톤이 어긋나지 않는다는 장점이 있습니다.

산출물은 보통 GIF나 WebP 파일입니다. 최근에는 WebP를 더 많이 씁니다. 같은 화면인데 용량이 훨씬 가볍기 때문입니다.

왼쪽은 제품의 질감과 사용감을 보여주는 장면, 오른쪽은 제품 중심의 홍보 장면입니다. 상세페이지 중간에 이런 짧은 움직임이 들어가면 글만 있을 때보다 체류 시간이 늘어납니다.

두 경로 비교

실제로는 두 경로를 섞는 경우가 가장 많습니다. 첫 화면과 회사 소개 구간은 본편 조각으로, 제품 설명과 데이터 구간은 모션그래픽으로 채우는 식입니다.

홈페이지 리뉴얼과 영상, 무엇을 먼저 정할까

홈페이지를 새로 만들면서 영상도 함께 준비하시는 경우가 많은데, 순서가 꼬이면 양쪽 다 손해를 봅니다.

권장하는 순서는 이렇습니다. 사이트 구조와 각 섹션에 무엇이 들어갈지를 먼저 정하고, 그다음에 영상을 기획합니다.

반대로 영상을 먼저 다 만들어 놓고 홈페이지를 설계하면, 있는 컷에 맞춰 화면을 짜야 해서 제약이 생깁니다. 이미 만들어 둔 영상이 있으시다면 그것을 먼저 보여 주시면 어디에 쓸 수 있는지부터 정리해 드립니다.

용량과 모바일에서 확인할 것

홈페이지에 움직이는 요소를 넣을 때 가장 자주 놓치는 부분입니다. 데스크톱에서 잘 보인다고 끝난 것이 아닙니다.

특히 첫 번째와 세 번째가 실무에서 자주 문제가 됩니다. 화질을 지키려다 용량이 커지면 방문자가 화면을 보기 전에 떠납니다. 반대로 너무 줄이면 뭉개져 보입니다. 이 균형은 실제 화면에서 눈으로 확인하며 맞춰야 합니다.

왼쪽은 제품의 사용 맥락을 보여주는 장면, 오른쪽은 정보를 구조로 정리해 보여주는 장면입니다. 두 성격의 소재를 함께 확보해 두면 홈페이지 어느 섹션에도 대응할 수 있습니다.

상담 전에 정리해 두시면 좋은 것

네 번째가 중요합니다. 이미 영상이 있으시면 새로 만들지 않고 그 안에서 뽑아 쓸 수 있는 경우가 많습니다. 파일만 보내 주시면 어떤 컷을 어느 자리에 쓸 수 있는지 정리해 드립니다.