불편했던 상세페이지 뜯어보기 ②너무 크거나 혹은 너무 작거나

쇼핑하면서 마주치는 수많은 상세페이지, ‘나라면 이렇게 만들었을 것 같은데‘ 느낀 요소들을 정리하여 개선점을 찾는 포스팅 불편했던 상세페이지 뜯어보기 ①상세 정보는 어디로를 작성했습니다. 소비자가 꼭 알아야 할 정보가 가독성이 떨어져 이탈하는 경우를 다루었습니다.

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

포스팅 시리즈 읽어보기

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

마치며

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

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