전자제품 상세페이지를 만들다 보면 제품 사진만 예쁘게 보여준다고 끝나지 않아요.
본문 내용 들어가면서부터는 숫자랑 영어, 각종 단위가 쏟아집니다.
출력 몇 W.
배터리 몇 mAh.
무게 몇 g.
케이블 길이 몇 m.
포트 몇 개.
지원 규격은 무엇인지.
처음에는 이런 스펙을 받으면 최대한 다 보여줘야 한다고 생각했어요.
제품 정보니까 빠지면 안 될 것 같았거든요.
그래서 박스를 만들고, 글씨를 넣고, 또 박스를 만들고...
정신 차리고 보면 상세페이지 중간에 작은 설명서 하나가 생겨 있었습니다.
그런데 전자제품 상세페이지를 오래 만들다 보니 모든 스펙을 같은 방식으로 보여줄 필요는 없더라고요.
어떤 건 아이콘으로 보여주는 게 빠르고,
어떤 건 비교표가 훨씬 이해하기 쉽고,
어떤 건 숫자 자체를 크게 보여주는 게 효과적이었어요.
그래서 저는 스펙을 받으면 먼저 이렇게 나눠봤어요.
아이콘으로 보여줄 정보.
제품끼리 비교할 정보.
숫자를 직접 강조할 정보.
이렇게 정리하고 나면 페이지가 훨씬 덜 복잡해졌어요.
1. 아이콘은 설명을 줄일 때 사용하기
신입 때는 아이콘을 되게 좋아했어요.
- 충전 아이콘
- 배터리 아이콘
- 무게 아이콘
- 호환기기 아이콘
- 포트 아이콘
기능마다 하나씩 붙이면 뭔가 전문적으로 보이는 기분이 들었거든요.
시각적으로 이해하기도 편해보였고요.
문제는 너무 많이 쓰면 오히려 뭐가 중요한지 안 보인다는 거였어요.
비슷한 선형 아이콘을 여러 개 늘어놓으면 저는 의미를 알고 있지만,
처음 보는 사람 입장에서는 그냥 비슷한 그림들이 쭉 나열된 것처럼 보일 수 있어요.
그래서 나중에는 아이콘을 장식이 아니라 설명을 짧게 만드는 도구라고 생각했어요.
예를 들어 가볍다거나, 여러 기기와 호환된다거나, 특정 포트를 지원한다는 정보처럼
그림만 봐도 어느 정도 의미가 전달되는 내용에는 아이콘이 잘 맞았어요.
반대로 아이콘만 봐서는 무슨 뜻인지 모르겠고,
결국 아래 설명문을 처음부터 끝까지 읽어야 한다면
굳이 아이콘을 넣지 않는 편이 나았어요.
특히 전자제품은 실제 모양이 중요한 경우도 많았어요.
포트나 버튼 위치를 설명해야 하는데 추상적인 아이콘 하나만 넣는 것보다
제품 사진에서 해당 부분을 확대해서 보여주는 게 훨씬 정확했어요.
USB-C 포트 설명하면서 번개 아이콘만 하나 넣는다고 포트 위치까지 알 수 있는 건 아니잖아요.
이럴 때는 실제 제품 이미지를 확대하고,
짧은 설명을 붙이는 게 더 이해가 빨랐어요.
그리고 아이콘을 여러 개 쓴다면 스타일도 맞춰주는 게 좋았어요.
하나는 선형.
하나는 면형.
하나는 3D.
하나는 귀여운 무료 아이콘.
이렇게 섞이면 되게 산만한 디자인이 되어버려요.
아이콘은 많이 쓰는 것보다
딱 봤을 때 설명을 줄여줄 수 있는 곳에만 쓰는 게 제일 눈이 편하고 좋았어요.
2. 비교표는 차이만 보여주기
전자제품은 같은 제품군 안에서도 모델이 여러 개 있는 경우가 많았어요.
기본형, 상위형, 용량 다른 버전, 포트 수 다른 버전.
이름은 비슷한데 기능이 하나씩 다른 제품도 있고요.
이걸 글로 하나씩 설명하면 읽는 사람도 헷갈립니다.
A 제품은 이것을 지원하고.
B 제품은 이것에 저것까지 지원하고.
C 제품은 또 다른 기능이 있고.
이런 식으로 이어지면 저부터도 앞에 기능이 뭐였는지 잊어요.
그래서 제품 차이가 구매에 중요한 경우에는 비교표를 자주 썼어요.
- 출력
- 포트 수
- 지원기기
- 크기
- 무게
- 구성품
이런 항목을 같은 기준으로 놓고 보면 차이가 바로 보이거든요?
다만 비교표에도 욕심을 부리면 안 됐어요.
저는 처음에 받은 스펙을 다 넣고 싶었거든요.
그러다 보면 항목이 너무 많아지고 모바일에서는 글자도 작아지고,
결국 비교하기 쉽게 만든 표를 확대해서 봐야 하는 일이 생기게 되더라고요.
그래서 나중에는 이 제품들을 고를 때 진짜 비교할 만한 차이가 무엇인지부터 봤어요.
두 제품이 똑같은 내용은 굳이 강조하지 않고,
구매 선택에 영향을 주는 차이를 먼저 보여줬어요.
포트 수가 다르면 포트 수.
출력이 다르면 출력.
휴대용 제품이라면 크기나 무게.
이런 식으로요.
모델명이 비슷한 제품은 이미지도 같이 보여주는 편이 좋았어요.
ABC100.
ABC100S.
ABC100 Pro.
이름만 보면 만든 사람도 순간 헷갈릴 수 있습니다.
만드는 저도 헷갈리는데 소비자는 더하겠죠.
제품 이미지가 같이 있으면
'아, 내가 아까 본 게 이거구나.' 하고 따라가기 쉬워지기 때문이에요.
그리고 표 디자인은 최대한 단순하게 했어요.
선 진하게 하고 배경색도 여러 개.
추천제품은 또 다른 컬러.
체크는 초록색, X는 빨간색.
이러면 비교표가 제 기능을 못하게 돼요.
표의 목적은 예쁘게 꾸미는 게 아니라
그래서 어떤 제품이 나한테 맞는지? 이걸 빨리 판단하게 해주는 거였어요.
3. 수치는 크게 쓰기 전에 의미부터 보기
전자제품 상세페이지에는 숫자가 정말 많이 들어가요.
100W.
10,000mAh.
120g.
2m.
숫자는 짧아서 눈에도 잘 들어오고 디자인하기도 편해요.
그래서 제품의 강점이 숫자로 바로 보이는 경우에는 크게 보여주는 편이었어요.
다만 숫자만 크게 쓴다고 다 이해되는 건 아니었어요.
예를 들어 120g 이라고 크게 써놨다고 해볼게요.
전자제품에 익숙한 사람은 가벼운지 아닌지 감이 올 수도 있어요.
근데 처음 보는 사람은
그래서 120g이 얼마나 가벼운 건데? 싶을 수 있잖아요.
그럴 때는 숫자 옆에 의미를 같이 붙였어요.
가볍게 휴대할 수 있다는 카피를 넣거나,
어느 정도 물건의 무게와 비슷한지 알려주거나,
손에 들고 있는 이미지를 같이 보여주는 식으로요.
숫자는 정확한 정보를 주고, 이미지나 카피는 그 숫자가 왜 장점인지 설명하는 역할을 했어요.
그리고 숫자는 정말 조심해서 봤어요.
전자제품은 숫자 하나 틀리면 디자인 수정 정도로 끝나지 않거든요.
100W 제품인데 120W라고 써버리면 완전 잘못된 정보를 제공하게 되는 거예요.
클레임부터 시작해서 환불까지 갈 수 있는 사항이라 늘 신경써야 해요.
그래서 출력, 용량, 길이, 크기 같은 정보는 받은 기획서만 보고 끝내지 않고 공식 제품자료와 다시 비교해보는 편이었어요.
특히 같은 숫자가 여러 군데 반복될 때 더 조심했어요.
메인 비주얼쪽, 기능 설명이나 비교표, 마지막 스펙 영역 등 전체적으로 한 번 수정된 숫자가 페이지 어딘가에 예전 값으로 남아 있기 쉽거든요.
예를 들어 65W를 67W로 수정했는데
어딘가에서는 '헤헤! 난 아직 65W지롱!' 하고 숨어 있을 수 있습니다.
이런 애들 때문에 최종 검수할 때 숫자는 따로 한 번 더 봤어요 ㅠㅠ
그리고 모든 숫자를 다 크게 보여주지는 않았어요.
이번 제품에서 실제 구매 포인트가 되는 숫자만 크게 잡고,
나머지는 정보로 정리하는 편이 훨씬 보기 좋았어요.
신입 때는 스펙을 많이 보여주면 전문적으로 보이는 줄 알았어요.
그래서 정말 성실하게 다 넣었습니다...?
지금 생각하면 소비자한테 '자, 정보 다 드렸습니다. 알아서 공부하고 사세요.' 하고 있었던 것 같아요.
지금은 스펙을 받으면 먼저 생각합니다.
이건 그림으로 보여주는 게 빠른가?
비교해서 보여주는 게 빠른가?
숫자를 크게 보여주는 게 빠른가?
제품 공부는 제가 했으니까 고객까지 시험 보게 만들지는 맙시다 :D