[쇼핑몰] 스마트스토어 상세페이지 「알곡담 저당 통곡물 그래놀라」

스마트스토어에 그래놀라를 판다면 상세페이지가 어떤 모습이 좋을지 가정하고 직접 기획한 시안입니다. 「알곡담」과 제품 · 영양 수치 · 배합 · 후기는 모두 가상이며, 제품 사진 대신 봉지 · 원재료 · 먹는 장면을 SVG로 직접 그렸습니다. 아래 「사이트 보러가기」에서 실제 상세 한 줄을 스크롤해 볼 수 있습니다.

무엇을 중심에 두었나

식품 상세페이지는 대개 감성 사진과 혜택으로 시작하고, 영양정보와 알레르기는 맨 아래 작은 표에 둡니다. 하지만 알레르기가 있거나 당류를 따지는 사람에게는 그것이 가장 먼저 필요한 정보입니다. 그래서 첫 화면 바로 다음에 「30초 요약」과 알레르기 유발 성분 줄을 두었습니다.

• 1회 제공량 40g 기준 숫자 넷(당류 · 단백질 · 식이섬유 · 열량)을 크게, 설명은 한 줄로
• 알레르기는 「들어 있어요 / 들어 있지 않아요」로 나눈 아이콘 줄, 같은 제조시설 안내까지 함께
• POINT 01~03은 원재료 일곱 가지와 배합비, 저온 두 번 굽기, 단맛을 무엇으로 냈는지 — 수치 과장 대신 과정을 보여 줍니다

휴대폰에서

스마트스토어 상세는 휴대폰에서 860px 이미지가 화면 폭으로 줄어 보입니다. 그래서 본문은 860px 기준 28px 아래로 쓰지 않고, 표도 두세 칸으로만 나눠 줄었을 때도 읽히게 했습니다. 시안 페이지 옆의 「휴대폰 폭으로 보기」로 넓은 화면에서도 확인할 수 있습니다.

실제로 만든다면

제품 · 원재료 · 먹는 장면은 실제 촬영본을 받아 일러스트 자리에 넣고, 완성본은 860px 폭 JPG로 잘라 스마트스토어 상세 에디터에 올립니다. 영양정보 · 원재료명 · 알레르기 · 소비기한은 실제 품목제조보고와 맞춰 확인하고, 식품 표시광고법에 따라 질병 예방 · 치료나 체중 감량 같은 효능을 단정하는 문구는 쓰지 않습니다.