상세페이지 기획·디자인 전문 하오스튜디오

■ 핵심 요약 ① 휴대성은 설명 문장보다 한 포의 크기가 읽히는 이미지로 전달돼요. ② 상세 이미지는 가로 860px 기준으로 잡아야 모바일에서 글자가 안 뭉개져요. ③ 낱개 한 포와 상자 전체를 한 화면에 붙여 놓으면 단위가 바로 읽혀요. 안녕하세요, 하오스튜디오입니다. 스틱형 건강식품 상세페이지에서 휴대성은 '가볍다'는 문구가 아니라, 한 포를 쥔 크기감과 낱개 단위가 눈에 들어오는 화면 구성으로 전달됩니다. 오늘은 실제로 제작한 스틱형 건강식품 페이지를 펼쳐 그 휴대성을 어떤 구성으로 풀었는지 짚어볼게요. 스틱형 건강식품, 휴대성은 어떻게 보여주나요? 휴대성은 문장으로 설명하는 게 아니라, 한 포를 다른 물건과 나란히 놓은 '크기 비교 컷'으로 보여줄 때 가장 빠르게 읽힙니다. 상세페이지는 제품을 직접 들어볼 수 없는 온라인 구매자에게 크기·형태·사용 방식을 이미지와 문장으로 대신 설명하는 판매 화면이거든요. 손에 쥐었을 때 어느 정도인지, 파우치에 몇 포가 들어가는지가 화면에서 가늠되면 '휴대가 편하다'는 카피는 굳이 강조하지 않아도 됩니다. 기준 컷 하나는 정사각으로 남겨 두는 게 좋아요. 쿠팡은 상품 대표이미지를 1:1 정사각, 1,000 × 1,000 px로 안내하는데, 목록 썸네일이 정사각으로 잘리기 때문에 스틱을 가로로 눕혀 찍어 두면 양끝이 날아가거든요. 낱개 한 포를 세워 정사각 안에 담아 두면 대표이미지와 상세 상단에 그대로 재활용됩니다. 이번 프로젝트는 스틱형으로 나온 다이어트 건강식품 페이지였는데요. 아래 이미지는 제작한 상세페이지 시안을 세로로 나란히 펼친 컷이고, 가운데가 이번에 이야기할 스틱 제품입니다. 분홍에서 보라로 넘어가는 그라데이션 배경 위에 종이 상자를 뒤에 두고 스틱 한 포를 그 앞에 비스듬히 세웠어요. 상자와 낱개를 한 화면에 함께 두면 '이만한 상자 안에 이만한 한 포가 들어 있다'는 관계가 설명 없이 잡히기 때문입니다. ...