숏폼 시대의 브랜드 사이트

1. 엄지로 넘기는 데 익숙해진 눈

틱톡이 세로 영상의 문법을 퍼뜨리고, 2020년 8월 인스타그램 릴스, 이듬해 유튜브 쇼츠가 전 세계로 나오면서 우리가 화면을 보는 방식은 꽤 달라졌습니다. 영상이 휴대폰 화면을 꽉 채우고, 엄지 한 번이면 다음으로 넘어가죠. 유튜브는 2024년 10월부터 쇼츠를 3분까지 늘렸고, 인스타그램은 지난해 초 프로필 격자를 정사각형에서 세로로 긴 3:4로 바꿨습니다. 올라오는 사진과 영상 대부분이 세로인데 정사각형으로 자르는 건 꽤 가혹하다는 게 애덤 모세리의 설명이었습니다. 이렇게 길들여진 눈은 브랜드 사이트에서도 똑같이 움직입니다. 처음 몇 초 안에 계속 볼지를 정하고, 아니다 싶으면 미련 없이 떠납니다.

2. 웹에서 영상을 자동으로 틀려면

그래서 첫 화면에 영상을 깔고 싶어지는데, 웹에는 지켜야 할 규칙이 있습니다. 크롬은 음소거된 영상의 자동 재생은 늘 허용하지만, 소리가 있는 영상은 사용자가 그 사이트에서 클릭 같은 상호작용을 한 뒤에야 틀어 줍니다. 아이폰 사파리는 iOS 10부터 음소거 영상의 자동 재생을 허용했고, playsinline 속성이 있어야 전체 화면으로 튀어나가지 않고 페이지 안에서 재생됩니다. 그래서 배경 영상 코드에는 autoplay, muted, loop, playsinline 네 단어가 공식처럼 붙어 다니죠. 사이트의 영상은 소리 없이도 뜻이 통해야 합니다. 지하철에서 소리를 끄고 보는 사람을 떠올리면 자막과 화면 구성이 먼저입니다.

3. 움직임은 무게를 함께 데려옵니다

영상이 들어가는 순간 페이지는 무거워집니다. 첫 화면 영상 하나가 사이트의 나머지 전부보다 큰 경우도 흔합니다. 그래서 포스터 이미지를 먼저 보여주고, 화면 크기에 맞는 해상도의 파일을 따로 준비하고, 화면 밖으로 나간 영상은 멈춥니다. 움직이는 GIF는 피하는 게 좋습니다. 웹킷 팀은 GIF가 H.264 영상보다 대역폭은 최대 12배, 전력은 2배까지 더 쓴다고 밝힌 적이 있습니다. 접근성도 같이 봐야 합니다. 웹 접근성 지침 WCAG는 자동으로 시작해 5초 넘게 움직이는 콘텐츠에 멈추거나 숨길 방법을 두라고 정해 두었습니다. 움직임 줄이기를 켠 사람에게는 정지 이미지를 보여주는 게 맞고요. 화려한 첫 화면이 누군가에게는 어지러움이나 데이터 요금으로 남을 수 있습니다.

4. 세컨드펭귄의 시선: 피드가 못 하는 일을 합니다

숏폼이 이렇게 강해도 브랜드 사이트가 필요한 건 피드가 빌린 공간이기 때문입니다. 순서는 알고리즘이 정하고, 영상은 몇 초 뒤면 다음 영상에 밀려납니다. 사이트는 브랜드가 순서를 정하고, 언제든 다시 찾아올 주소가 있고, 검색으로 발견되고, 문의와 구매까지 이어지는 곳입니다. 그래서 우리는 세로 화면과 엄지 스크롤, 짧고 분명한 첫인상 같은 숏폼의 문법은 빌려 오되, 영상은 Next.js에서 포스터를 먼저 띄우고 늦게 불러오며 멈춤 버튼과 정지 이미지를 함께 준비합니다. 영상 교체는 운영 담당자가 Strapi에서 직접 할 수 있게 해 둡니다.