불편했던 상세페이지 뜯어보기 ③그 GIF파일을 멈추어다오 (완)

상세페이지에서 아쉬웠던 점의 예시를 들고 해결 방안을 찾고 있습니다. 처음에는 상세 정보를 알려주지 않는 ‘상세’ 페이지, 두 번째로는 실제 제품과 비율이 맞지 않는 사진을 사용한 상세페이지를 다루었습니다. (아래쪽 목록 링크를 참고하세요.😉)

시리즈 마지막 내용은 파일을 다루는 방식입니다. 상세페이지를 가득 채운 현란한 gif파일을 놓고 이야기해볼까 합니다. 단지 보이는 문제가 전부가 아니라는 것도요. 불편한 상세페이지, 한번 뜯어볼까요?

포스팅 시리즈 읽어보기

• 불편했던 상세페이지 뜯어보기 ①상세 정보는 어디로
• 불편했던 상세페이지 뜯어보기 ②너무 크거나 너무 작거나
• 불편했던 상세페이지 뜯어보기 ③그 GIF를 멈추어다오 (현재 글)

GIF 범벅 상세페이지, 최선인가요?

현수막의 단점만 닮은 움짤 상세페이지

무분별하게 사용한 gif파일을 보고 있으면 네거리에 있는 현수막 게시대가 생각납니다. 강렬한 색상과 큰 글자로 주의를 산만하게 만듭니다. 어디를 봐야 할지 눈을 데굴데굴 굴리다 금세 피로해집니다. ‘나는 움직일테니까 너는 봐!’ 하고 소리를 지르는 것 같습니다.

gif파일이 마구 범벅된 상세페이지를 보면 건물에도, 버스에도, 휴대폰에도, 일상 곳곳에 스며든 광고 같습니다. 방문자는 상세페이지 창을 닫아버리면 그만입니다. 옥외광고물은 자주 노출되면서 각인이라도 됩니다. 스트레스만 주고 방문자를 달아나게 만드는 셈입니다.

고객이 판단할 수 있게 시간을 주세요

영상은 재생 버튼이 있습니다. 필요할 때 누르면 됩니다. 어떤 내용인지 고객이 생각할 시간을 줍니다. 반면 gif는 자동으로 재생되면서 빨리 여길 좀 보라고 재촉합니다. 자동으로 재생되어서 고객에게 준비 시간을 주지 않습니다.

곧바로 재생되는 gif파일의 또다른 문제점은 타이밍입니다. 잘 편집된 움짤은 내용을 이해하는 데 도움이 됩니다. 하지만 글자가 아주 짧게 지나가거나, 내용이 너무 길거나, 이해하기 어렵다면? 고객은 원하는 내용이 다시 나올 때까지 계속 들여다보고 있어야 합니다.

중요한 게 그 부분이 아닌 것 같은데

최악은 제품 특징이 아닌 타이틀이나 리뷰 부분에 무리하게 애니메이션을 넣는 경우입니다. ‘우리 제품 만족도 5.0!!! (싸늘하다. 별 다섯개가 날아와 꽂힌다)’, ‘리뷰 수 0,000개 돌파!! (숫자가 올라가는 애니메이션. 근데 이거 어디까지 올라가는 거예요?)’ 시작부터 피로도가 쌓이고 심하면 닫기를 유발합니다.

용량이 큰 gif파일은 모두에게 손해입니다

디자이너의 욕심으로 고객의 데이터 요금을 앗아가지 말아요

번쩍임에서 피로감이 쌓이는 이야기를 지나서 용량에 관한 이야기를 해볼까 합니다. ‘아, 이번 달 데이터 다 썼어.😧😧’하는 데이터 요금 맞습니다.

데이터 요금은 무선 인터넷 망으로 전송되는 데이터 사용량에 따라서 요금이 나옵니다. 내가 사진이나 영상을 보내도, 받아도 데이터 요금을 지불해야 합니다. 휴대폰 데이터 요금은 쓰는 만큼 나오는 종량제를 사용하고, 컴퓨터는 주로 정액제(핫스팟 제외)를 사용합니다. 종량제 요금제를 사용하는 방문자는 불필요한 gif파일이 로딩되면서 데이터 값을 고스란히 지불하게 됩니다.

gif파일은 오래 전에 개발된 이미지 포맷입니다. 프레임 수가 많아질수록 용량이 커집니다. 그리고 256색까지 지원하는 무손실 압축 방식입니다. 색이 많이 담길수록, 길어질수록 파일이 무거워집니다.

테스트를 하기 위해 용량이 큰 gif파일을 넣은 웹페이지를 만들었습니다. 크롬 개발자 모드(디바이스 토글)로 접속하니 이미지 용량이 압축과정 없이 그대로 로딩되었습니다.

김 아무개씨가 테스트 결과를 보려고 이 페이지에 접속했습니다. 접속만 했는데도 데이터를 약 36mb만큼 쓴 상황입니다. 카톡에서 일반 화질 이미지를 전송하면 대개 1mb 미만입니다. 사진을 36개 보낼 수 있는 데이터 요금이 단번에 사라졌습니다.

디자이너도 이 문제에서 자유로울 수 없습니다

디자이너가 현란하게 주의를 끌고 싶은 욕심에 고객은 불필요한 데이터를 소비했습니다. 방문하는 사람만의 문제일까요? 쇼핑몰의 트래픽에도 해당되는 내용입니다. 트래픽은 우리가 내는 휴대폰 데이터 요금과 비슷한 개념입니다.

트래픽을 데이터로, 상세페이지를 카달로그 파일로 비유해볼까요? 고객이 카달로그 파일 보내달라고 합니다. 판매자가 고객에게 카달로그를 카톡으로 보냅니다. 이 때 데이터가 소비됩니다. 여러 고객에게 카달로그를 보내다 보면 데이터를 다 사용하게 됩니다. 데이터가 차단되어서 카달로그를 보낼 수 없습니다. 혹은 추가요금을 지불해야 해서 데이터를 확보해야 합니다.

트래픽 한도가 정해진 요금제를 쓰는 곳이라면 더욱 조심해야 합니다. 사람들이 보기만 하고, 서버는 터지고, 접속할 수 없어서 구매로 이어지지 못한다면 상세페이지를 만든 의미가 사라지니까요. 많은 쇼핑몰 솔루션들이 트래픽 무제한을 약속하지만, 모두가 함께 사용하고 있기 때문에 트래픽이 높아지면 이용이 제한될 수 있습니다. (물론 방문자가 아주 많은 사이트 얘기이긴 합니다…)

‘gif를 외부 계정에서 끌어오니까 우리 사이트는 괜찮아!’, ‘용량은 쇼핑몰 문제이지 디자이너는 상관 없어’라고 생각하시나요? 50~80mb짜리 gif를 여러 개 로딩하는 상세페이지를 본 저로써는, 그 생각이 이기적이고 게으르게 여겨집니다. 그런 움짤이 여러 개 들어가 있었으니, 폰으로 접속했다면 데이터 몇 백 메가는 날렸을 테니까요.

gif 못 버려! 움짤이 최고야! 똑똑하게 gif 사용하기

gif파일이 주는 이점이 분명히 있습니다. 자동으로 재생되어 고객의 이목을 끌고, 정지된 이미지로 표현하기 어려운 상황을 잘 설명해줍니다. gif파일을 잘 사용하는 방법이 있을까요? 과유불급! 뭐든 적당해야 합니다. 꼭 필요한 곳에만 사용하고, 되도록 용량을 줄이는 방향으로 사용하면 gif가 가진 장점을 잘 살릴 수 있을 것입니다.

번쩍이는 애니메이션 지양하기

여기저기 쉴새없이 번쩍이는 애니메이션을 넣으면 보는 사람이 피곤해질 수 밖에 없습니다. 정적 이미지가 있어야 동적 이미지가 강조됩니다. 정말 강조할 곳, 기술 설명이 필요한 곳, 분위기를 전환해줄 곳 등에 조금씩 사용해야 합니다.

gif파일 용량을 최소화해서 사용하기

불필요한 프레임 수와 색상 수, 사이즈를 줄여서 gif파일의 용량을 줄일 수 있습니다. 프레임 수를 줄이면 영상은 더 끊겨보일 수 있지만, 중요한 움직임을 보여줄 수 있을 정도면 충분합니다. 컬러도 단계를 줄이고 필요한 색으로 구성할 수 있습니다. 마지막으로 가로세로 사이즈를 조금 더 줄여주면 용량이 더 작아집니다.

필요한 경우 유튜브나 mp4파일 이용하기

위에서 언급된 36mb 정도 되는 gif파일입니다. 어도비 미디어 인코더로 소리를 빼고 영상으로 바꾸었더니 용량이 1/10 정도로 줄었습니다.

사이트에서 영상을 첨부할 수 있다면 소리가 없는 mp4 영상파일을 활용하세요. 화질이 똑같거나 더 좋은데도 용량은 1/10 수준으로 이미지를 사용할 수 있습니다. 펀딩 사이트처럼 플랫폼을 사용하여 mp4 파일을 업로드하기 어렵다면 유튜브나 비메오 링크를 사용합니다.

그래픽 프로그램을 별도로 사용하지 않으면 번거로울 수 있습니다. 웹에서 제송하는 서비스로 간단하게 파일 용량을 줄일 수 있으니 아래 포스팅을 참고하세요.
트래픽? 서버? 대역폭? 초보 웹디를 위해 설명드립니다

마치며

예전에 휴대폰으로 와디즈에서 모 제품을 본 적이 있습니다. 처음부터 끝까지 이미지가 대부분 고용량 gif였습니다. 휴대폰이 버벅거리면서 가끔씩 멈추기까지 했습니다. 폰이 좀 뜨끈해진 느낌적인 느낌도 들었고요. 조금 기다리다 데이터 생각에 얼른 꺼버린 기억이 납니다.

그 제품이 뭔지는 기억나지 않습니다. 열심히 작업했는데 이렇게 잠재 고객을 놓치면 속상하잖아요. 🙄🙄 꼭 필요한 곳을 강조하고 용량을 줄이는 방향으로 gif파일을 사용해보세요. 모든 페이지를 장식하는 것보다는 분명 효과적일 거예요.