시리즈 마지막 내용은 파일을 다루는 방식입니다. 상세페이지를 가득 채운 현란한 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파일을 사용해보세요. 모든 페이지를 장식하는 것보다는 분명 효과적일 거예요.

상세페이지를 보며 생각했던 크기와 배송을 받았을 때 크기가 달라서 당황했던 적이 종종 있는데요. 두 번째 글은 사진 크기를 너무 크거나 작게 넣어서 불편했던 경험을 담아보았습니다.

포스팅 시리즈 읽어보기

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

제품 이미지가 너무 작거나 너무 크거나

예전에 모바일 악세서리 쇼핑몰에서 당황스러운 상세페이지를 보았습니다. 무선 이어폰 케이스 이미지를 모니터 전체에 꽉 차도록 넣었기 때문입니다. 심지어 케이스 위아래 부분이 잘려 한번에 눈에 들어오지 않았습니다.

이 사례에서는 두 가지 문제가 있습니다. ①실제 제품 크기보다 사진을 너무 크게 넣었고 ②화면에서 어떻게 보이는지 고려하지 않았습니다. 한 단락이 1800px 가까이 되어서 스크롤을 내려야 볼 수 있습니다. 휴대폰으로 확인해보니 휴대폰에서도 그림 일부가 잘렸습니다.

물건이 생각했던 크기와 다른데요

손에 쏙 들어오는 무선 이어폰 케이스처럼 작은 제품 사진을 화면에 가득 채우면 크기 감각이 떨어집니다. 무선 이어폰은 요즘 많이 쓰니까 크기를 가늠하기 어렵진 않긴 합니다. 하지만 상품이 잘 알려지지 않았거나 크기가 여러 개인 경우에는 꼭 크기를 유추할 수 있게 정보를 주어야 합니다.

이렇게 손, 펜, 책처럼 대략 크기를 느낄 수 있는 사진을 넣어주세요. 제품 그래픽은 디테일을 살펴볼 수 있도록 살짝 더 크게 사진을 넣는 것이 좋습니다. (디테일을 강조하기 위해서 ‘확대한’ 이미지를 넣는 것과는 조금 다릅니다.)

화면에서 어떻게 보이는지 꼭 확인하기

이처럼 화면 가득 이미지가 들어간다면 물건의 전체 모습과 크기를 파악하기 어렵습니다. 모바일에서도 잘려서 나올 확률이 높습니다. 상세페이지를 만들 때 디바이스에서 어떻게 보이는지 확인해주세요.

조그만 무선 이어폰 사진입니다. 왼쪽 그림에선 모니터 전체를 꽉 채웠습니다. 스크롤을 내려야 전체 모습을 볼 수 있겠네요. 이런 페이지를 마주치면 위아래로 스크롤을 부지런히 굴려도 전체 모습을 파악하기 어렵습니다. 반면 오른쪽 그림은 모니터 안에 적절한 크기로 표시됩니다.

꼭 강조해야 할 부분이라면, 이미지를 필요한 부분만 잘라서 적절히 세로 길이를 맞춰주세요. 한 단락이 디바이스 세로 길이 안쪽으로 들어오면 내용을 파악할 때 편리합니다.

PC를 기준으로? 모바일을 기준으로?

그렇다면 스크롤 기준은 어떤 기기로 잡아야 할까요? PC? 휴대폰? 태블릿? 어떤 기준으로 디바이스 기준을 잡을 수 있을까요?

이럴 땐 쇼핑몰에서 접속통계를 참고해보세요. 방문자가 어떤 기기로 많이 들어오는지, 어떤 해상도를 사용하는지, 어떤 운영체제를 사용하는지 기록되어 있답니다. 아래쪽 사진은 네이버 블로그 / 워드프레스 접속 통계입니다. 고해상도 모니터 방문자가 많다면 글씨를 키우고, 모바일 방문자가 많다면 gif파일을 적게 사용하는 등 다양하게 응용할 수 있습니다.

제품 종류와 타겟층 연령대로 디바이스를 유추할 수도 있습니다. 소비자가 구입하기 쉬운 저관여 제품, 생필품이나 액세서리, 문구류 등은 휴대폰으로 쉽게 결제할 수 있습니다. B2C 제품을 주로 취급한다면 휴대폰에서 보기 쉽도록 글자를 시원하게 키워주세요.

기술이 필요한 기계나 고관여 제품, 대량 제작이 타겟인 B2B 제품은 pc에 맞게 많이 만드는 것 같네요. 대량 제작처를 찾을 때는 업무 시간에 주로 pc에서 비교할 겁니다. 비싼 기계를 두고 며칠간 비교하고 고민하거나 자료를 수집해야 한다면 휴대폰보다는 pc를 더 이용하지 않을까요?

가장 귀찮은 만큼 가장 확실한 방법: 모바일 상세페이지를 따로 제작

가장 귀찮은 만큼 가장 확실한 방법입니다. 모바일에 맞춘 상세페이지를 따로 만들어보세요. cafe24에서는 모바일 상품 상세설명을 별도로 등록할 수 있습니다.

하지만 시간이 많이 든다는 단점이 있습니다. 악세서리, 문구류 등 제품 디자인을 계속 뽑아내는 경우라면 일일이 만드는 게 쉽지 않겠죠. 상품 가짓수가 적고 매출이 높은 제품에 추천드립니다.

마치며

지나치게 이미지가 크거나 작게 들어가있는 상세페이지는 보기에 불편합니다. 제품의 크기에 따라 적당한 비율로 넣고, 디바이스를 고려해 상세페이지를 만들어주세요. 접속 통계를 사용하여 디자인 방향을 정하는 것도 좋은 방법입니다. 소비자가 제품을 살필 때 불편하지 않게 스크롤 범위 안에서 만드는 것이 좋습니다.

고객이 100% 만족하는 디자인은 없습니다. 그래도 다수가 불편함을 느끼지 않게 하는 게 더 낫습니다. 제품 타겟의 행동과 통계를 바탕으로 가설을 만들어봅시다. 조금 더 배려한다면 소비자는 긍정적인 경험을 하고 브랜드 이미지가 더 좋아질 수 있을 거예요.

‘나라면 이렇게 만들었을 것 같은데🤔’ 하고 느낀 요소들을 정리하여 개선하는 방향으로 포스팅하려고 합니다. 기획에 참여하지 않더라도 포토샵과 일러스트로 최종 파일을 만드시는 분들께 도움이 되었으면 좋겠습니다.

포스팅 시리즈 읽어보기

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

상품 기능을 강조하는 리빙 제품을 기준으로 작성하였습니다. 경우에 따라서 사진 분위기로 승부를 보는 패션 카테고리에도 활용할 수 있습니다.

기본 정보를 찾을 수 있게 도와주세요

흔히 info라고 불리는 상세 정보는 크게 두 가지로 나눌 수 있습니다.

• 제품 정보(스펙): 크기, 무게, 제조사, 사양, 구성품, 사용법, 유의사항 등
• 서비스 정보: 교환·반품, 배송, 제품 보증, 고객센터 연락처 등

예전에 키보드 아이쇼핑을 하다가 상세페이지를 아무리 살펴봐도 크기나 무게 같은 정보가 안 보였던 적이 있습니다. 몇 번 빠르게 스크롤해도 정보를 찾을 수 없어서 결국 이미지를 하나하나 샅샅이 살펴보고 나서야 찾았습니다. 그 때 본 상세페이지를 기억나는 대로 재구성해보았습니다.

언듯 제품 특징처럼 보여서 그냥 지나쳤습니다. 글자 크기까지 작으니 더욱 눈에 띌 리가 만무합니다. 보통 ‘상세 정보’라고 하면 각종 스펙을 줄줄이 적어둔 표를 생각하니까요. 혹은 이렇게 중간에 디자인 요소로 사용하더라도 정리해서 한번 더 기입해주어야 혼선을 줄일 수 있습니다.

이렇게 (고의든 아니든) 정보를 소비자가 찾기 힘들게 꼭꼭 숨겨두거나 아예 기입하지 않는 상세페이지가 간혹 있습니다. 기본적인 정보를 찾지 못하면 소비자는 제품을 의심하기 시작합니다. 같은 제품이어도 제품 정보가 확실한 쪽을 선택하겠지요.

알려줄 수 있는 정보는 빠짐없이, 잘 보일 수 있게 적어주세요. 해상도와 화면 크기에 따라 상대적으로 글씨가 작게 보일 수 있습니다. 같은 27인치라도 해상도FHD(1920 x 1080), QHD(2540 x 1440), 4K(3840 x 2160)에 따라 글씨 크기가 달라보입니다. 최소 글자 크기를 20pt 이상으로 확보하는 것이 좋습니다.

중요한 정보를 놓치지 않도록 구상하기

찾기 쉽게 하나로 묶어볼까요?

상품의 모든 스펙이 기록된 상세 정보 란은 강조할 부분은 아니라서 디자인을 멋지게 하지 않아도 괜찮습니다. 그래도 ①잘 알아볼 수 있는 곳에 ②정보를 한번에 묶어서 만들어주세요. 상세 정보는 보통 마지막이나 타이틀 바로 아래쪽에 많이 놓습니다.

제품 정보와 서비스 정보를 꼭 묶을 필요는 없습니다. 제품 정보를 위쪽으로 올리고 맨 아래에 서비스 정보를 놓을 수도 있습니다. 단지 같은 카테고리 안의 정보를 나눠서 두지 않도록 유의하세요. cs문의 폭탄을 받는 지름길입니다.

가볍다! 얼마나…? 특징과 별도로 상세 정보는 꼭 기입하기

앞집 순돌이네 가방보다 120g 가볍다! 뒷집 민수네 밥상보다 1kg 묵직하다! 옆집 철민이네 서랍장보다 더 튼튼한 참나무를 썼다! 이렇게 스펙 자체가 특징이 되는 경우가 있습니다. 보통은 메인 타이틀로 선정됩니다. ‘가볍다, 186g 초경량 손목보호대 탄생!’ 혹은 ‘탄탄한 캔버스천 가방!’ 처럼요. 문구를 제목으로 사용하는 것은 좋습니다. 그래도 측정 가능한 스펙은 별도로 기입해주세요. 그래야 스펙을 보고 상품을 한번에 파악할 수 있습니다.

급해급해! 마음이 급한 고객분들을 위한 ‘자주 묻는 질문’

info와 별개로 info 정보들을 자주 묻는 질문으로 정리하는 방법입니다. Q&A(Question & Answer) 혹은 FAQ(Frequently Asked Questions) 타이틀로 표기하기도 합니다. ‘Q&A’ 글자만 보여도 한없이 내려가는 스크롤을 잠깐 잡을 수 있습니다.

상세페이지에서 정보를 얻을 수 있어도 일단 문의하고 보시는 분들이 꽤 많습니다. 마음이 급하면 작은 글씨가 잘 안 보입니다(실화). 마음이 급한 고객님을 위해 자주 묻는 질문을 미리 작성해주세요. ①읽기 쉽도록 대화체로 작성하며 ②제품 정보에 이미 있는 내용이라도 괜찮습니다.

보다 자세한 팁은 FAQ 파트 만들기 포스팅에서 확인할 수 있습니다.

좋은 예가 있어서 가져왔습니다. 산돌(폰트) 보물패키지 상세페이지에 기록된 Q&A입니다. 기본적인 라이센스 문서에 범위가 포함되어 있었을테죠. 그래도 이해하기 쉽도록 대화체로 한번 더 쓰여졌습니다. 산돌 브랜드가 고객을 대하는 방식도 볼 수 있습니다.

Q. 웹 디자인부터 제작물까지 모두 디자인이 가능한가요?
A. 네. 모든 형태의 제작물을 어떤 목적으로든 만드실 수 있습니다.

Q. 저는 회사에 다니는 디자이너인데 사용해도 되나요?
A. 죄송합니다. 안타깝게도 단체에 소속된 분은 단체의 이름으로는 사용할 수 없습니다.

(중략)

Q. 어머니가 치킨집을 하시는데, 제가 보물패키지로 간판을 디자인해서 드려도 되나요?
A. 2차 저작물을 무상으로 증정할 수는 있지만. 어머니께서 그 저작물을 게시하여 영업에 이익이 있다면 그에 해당하는 라이선스는 따로 구입하셔야 합니다. 그렇지만 효심은 아름다우십니다.

Q. 동아리 친구와 공동작업을 하는데요. 같이 사용해도 되나요?
A. 산돌 보물패키지는 한 시스템당 하나씩 설치하도큭 제작되어 두 시스템에 설치가 불가능합니다. 그리고 보물패키지는 최초 구매자에게 부여되는 ‘폰트 사용권’이지, 폰트파일 그 자체가 아닙니다. 친구분과 함께 사이 좋게 산돌 보물패키지을 구매하여 우정을 더욱 돈독히 해보시는 것은 어떨까요?

2013년에 출시된 ‘산돌 보물패키지’ 상세페이지 Q&A

마치며

상세페이지는 대면하지 않는 인터넷에서 손님에게 정보를 주는 수단입니다. 제품 정보와 서비스 정보는 중간에 타이틀로 활용했더라도 아래쪽에 한 단락으로 묶어서 잘 보일 수 있게 기입하세요. 자주 묻는 질문 항목을 만들어서 시선을 끌고 읽기 쉽게 구성하는 것도 좋은 방법입니다.

좋은 제품인데 사소한 정보(그것도 이미 적어둔!)가 보이지 않아 사람들을 놓치면 아쉽잖아요. 디테일을 잡고 한층 믿음이 가는 상세페이지를 만들어봅시다.