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

■ 핵심 요약 ① 원재료 정보는 표로 몰지 말고 섹션 3층으로 나눠 배치합니다. ② 한 화면에 숫자는 하나만 크게 두어야 눈에 남습니다. ③ 원산지는 글자보다 원물 사진과 붙여야 신뢰로 읽힙니다. 안녕하세요, 하오스튜디오입니다. 식품 상세페이지의 원산지·원재료 정보는 한 표에 몰아넣을수록 안 읽히고, 섹션을 나눠 사진과 붙일수록 읽힙니다. 오늘은 실제로 제작한 식품 상세페이지를 놓고 그 정보를 어떻게 층으로 나눴는지 짚어드릴게요. 원산지·원재료 정보는 어디에 넣어야 읽히나요? 한 표에 몰아넣지 말고 상세페이지 전체에 3층으로 나눠 배치해야 읽힙니다. 상세페이지는 위에서 아래로 스크롤하며 읽는 매체라, 정보를 한곳에 모으면 그 구간에서 이탈이 생기거든요. 도입부에는 원산지 한 줄, 중간에는 원재료 사진과 설명, 하단에는 법적 표기용 표를 두는 방식입니다. 숫자를 쓸 때는 한 화면에 하나만 크게 둡니다. 함량, 원산지 비율, 중량을 한 화면에 나란히 두면 어느 것도 기억에 남지 않아요. 가장 내세울 숫자 하나를 화면 절반 크기로 뽑고 나머지는 그 아래 작은 글씨로 붙이는 구조가 스크롤 중에도 눈에 걸립니다. 이번에 제작한 식품 상세페이지도 그 구조로 짰어요. 유제품 라인이라 도입부에 제품 여러 개를 모은 컷과 브랜드 로고를 얹고, 그다음 화면을 원료 이야기 하나에만 내줬습니다. 함량 숫자는 흰 배경 위에 초록 한 색으로 크게 뽑아 그 화면에서 다른 정보를 모두 뺐고, 이어지는 화면에서 제조 방식과 먹는 방법을 3컷으로 나눠 보여준 뒤 마지막에 상품 구성 표를 넣었습니다. 층 담는 내용 형식 1층 · 도입부 원산지 한 줄, 핵심 원료 이름 제품컷 위 짧은 문장 1개 2층 · 본문 원물 사진, 함량 숫자 1개 화면당 정보 1개, 숫자는 크게 3층 · 하단 전체 원재료명, 표기사항 표 형태로 정리, 글자만 원산지를 신뢰감 있게 보이려면 무엇이 필요한가요? 글자로만 적힌 원산지는 신...