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

■ 핵심 요약 ① 영양정보는 표가 아니라 아이콘 한 줄로 첫 화면에 올립니다. ② 내세울 숫자는 화면당 하나만, 나머지는 그 아래 작게 붙입니다. ③ 특징이 적은 제품일수록 섹션을 늘리지 말고 근거를 늘립니다. 안녕하세요, 하오스튜디오입니다. 다이어트 간식 상세페이지에서 칼로리와 영양정보는 하단 표로 밀어두면 아무도 보지 않고, 첫 화면에 아이콘으로 올려야 읽힙니다. 오늘은 실제로 제작한 식품 상세페이지를 놓고 그 정보를 어떻게 배치했는지 짚어드릴게요. 칼로리·영양정보는 어디에 넣어야 읽히나요? 첫 화면 제품 사진 바로 아래, 아이콘 한 줄이 가장 잘 읽히는 자리입니다. 영양정보 섹션은 포장 뒷면의 표를 옮겨 붙이는 자리가 아니라, 구매자가 고르는 기준 3~4가지만 뽑아 세우는 자리거든요. 다이어트 간식을 찾는 사람은 맛보다 숫자를 먼저 확인하기 때문에, 그 숫자가 스크롤 없이 보여야 이탈이 줄어듭니다. 전체 영양성분표는 그대로 두되 맨 아래로 내립니다. 법적으로 표기해야 하는 항목까지 위로 올리면 정작 중요한 숫자가 묻히거든요. 위쪽은 고르는 기준, 아래쪽은 확인용 표. 이렇게 층을 나누면 정보량이 많아도 페이지가 무겁게 느껴지지 않아요. 이번에 제작한 식품 상세페이지도 그 구조로 짰습니다. 곡물을 부풀려 만든 스낵이라 첫 화면에는 제품 봉지와 원물을 함께 담은 사진을 크게 올리고, 그 바로 아래 칼로리·단백질·당·지방 4가지를 아이콘 한 줄로 세웠어요. 이어지는 화면은 식감 이야기 하나에만 내주고, 그다음 화면에서 인증받은 제조 시설과 인증서 이미지를 배치해 앞의 숫자를 뒷받침했습니다. 맨 끝에는 봉지 실물 크기를 알 수 있도록 치수를 표기한 제품 정보 컷을 넣었어요. 자리 넣는 정보 형식 첫 화면 아래 고르는 기준 3~4가지 아이콘 한 줄, 숫자는 굵게 중간 숫자를 뒷받침하는 근거 제조 방식·인증 이미지 하단 전체 영양성분표, 표기사항 세로 목록형 표, 글자만 숫자가 여러 ...