불편했던 상세페이지 뜯어보기 ①상세 정보는 어디로

직업병(?) 덕분에 인터넷에서 물건을 살 때 정보는 잘 들어있는지, 이미지는 잘 전달되는지, 더하고 뺄 요소는 없는지 자꾸 살피게 됩니다. 상세페이지를 만드는 디자이너이면서, 동시에 상세페이지를 보면서 쇼핑하는 소비자니까요.

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

포스팅 시리즈 읽어보기

• 불편했던 상세페이지 뜯어보기 ①상세 정보는 어디로 (현재 글)
• 불편했던 상세페이지 뜯어보기 ②너무 크거나 너무 작거나
• 불편했던 상세페이지 뜯어보기 ③그 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

마치며

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

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