다이어트 간식 상세페이지, 칼로리·영양정보까지 한 번에 제작

■ 핵심 요약 ① 영양정보는 표가 아니라 아이콘 한 줄로 첫 화면에 올립니다. ② 내세울 숫자는 화면당 하나만, 나머지는 그 아래 작게 붙입니다. ③ 특징이 적은 제품일수록 섹션을 늘리지 말고 근거를 늘립니다. 안녕하세요, 하오스튜디오입니다. 다이어트 간식 상세페이지에서 칼로리와 영양정보는 하단 표로 밀어두면 아무도 보지 않고, 첫 화면에 아이콘으로 올려야 읽힙니다. 오늘은 실제로 제작한 식품 상세페이지를 놓고 그 정보를 어떻게 배치했는지 짚어드릴게요. 칼로리·영양정보는 어디에 넣어야 읽히나요? 첫 화면 제품 사진 바로 아래, 아이콘 한 줄이 가장 잘 읽히는 자리입니다. 영양정보 섹션은 포장 뒷면의 표를 옮겨 붙이는 자리가 아니라, 구매자가 고르는 기준 3~4가지만 뽑아 세우는 자리거든요. 다이어트 간식을 찾는 사람은 맛보다 숫자를 먼저 확인하기 때문에, 그 숫자가 스크롤 없이 보여야 이탈이 줄어듭니다. 전체 영양성분표는 그대로 두되 맨 아래로 내립니다. 법적으로 표기해야 하는 항목까지 위로 올리면 정작 중요한 숫자가 묻히거든요. 위쪽은 고르는 기준, 아래쪽은 확인용 표. 이렇게 층을 나누면 정보량이 많아도 페이지가 무겁게 느껴지지 않아요. 이번에 제작한 식품 상세페이지도 그 구조로 짰습니다. 곡물을 부풀려 만든 스낵이라 첫 화면에는 제품 봉지와 원물을 함께 담은 사진을 크게 올리고, 그 바로 아래 칼로리·단백질·당·지방 4가지를 아이콘 한 줄로 세웠어요. 이어지는 화면은 식감 이야기 하나에만 내주고, 그다음 화면에서 인증받은 제조 시설과 인증서 이미지를 배치해 앞의 숫자를 뒷받침했습니다. 맨 끝에는 봉지 실물 크기를 알 수 있도록 치수를 표기한 제품 정보 컷을 넣었어요. 자리 넣는 정보 형식 첫 화면 아래 고르는 기준 3~4가지 아이콘 한 줄, 숫자는 굵게 중간 숫자를 뒷받침하는 근거 제조 방식·인증 이미지 하단 전체 영양성분표, 표기사항 세로 목록형 표, 글자만 숫자가 여러 개일 때 무엇을 크게 두나요? 경쟁 제품과 가장 크게 벌어지는 숫자 하나만 키웁니다. 네 개를 같은 크기로 늘어놓으면 읽는 사람은 어느 것도 기억하지 못해요. 하나를 화면 절반 크기로 뽑고 나머지는 그 아래 작은 글씨로 붙이면, 스크롤 중에도 그 숫자만은 남습니다. 비교 그래프를 넣어도 될까요? 자사 제품의 전후 비교라면 괜찮습니다. 다만 막대 두 개를 나란히 놓을 때 축의 시작점이 0이어야 오해가 없어요. 경쟁사와 직접 비교하는 그래프는 근거 자료가 없으면 분쟁 소지가 있으니, 공인 시험성적서가 있는 항목에서만 씁니다. 후기나 별점도 위쪽에 두는 게 좋을까요? 숫자 섹션 바로 다음 자리가 자연스럽습니다. 맨 위에 두면 광고처럼 읽히고, 맨 아래면 대부분 못 보고 이탈해요. 스펙을 확인한 직후에 실제 사용자 반응이 나오면 앞의 숫자를 검증하는 역할을 합니다. 같은 원칙으로 작업한 다른 상세페이지를 나란히 놓고 보면 구조가 더 분명해져요. 아래 시안은 업종이 다른 제품이지만, 첫 화면에 확인 포인트를 목록으로 세우고 다음 화면에서 사용자 후기를 별점과 함께 배치한 뒤, 세 번째 화면에서야 함량 숫자 하나를 크게 뽑는 순서를 그대로 씁니다. 마지막 화면의 사용 전후 비교도 막대 두 개만 남겨 한눈에 읽히게 정리했어요. 안 읽히는 방식 숫자 네 개를 같은 크기로 나란히. 정보는 다 있는데 기억에 남는 게 없어요. 읽히는 방식 대표 숫자 하나만 크게, 나머지는 그 아래 작게. 화면당 기억할 것이 하나입니다. 특징이 적은 제품은 어떻게 채우나요? 섹션 수를 늘리지 말고 근거를 늘리는 쪽으로 갑니다. 할 말이 적은데 섹션만 늘리면 비슷한 문장이 반복돼 오히려 얄팍해 보여요. 대신 하나의 강점을 원료·제조 방식·인증·먹는 방법 4단계로 쪼개면, 같은 이야기가 근거를 갖춘 흐름으로 바뀝니다. 먹는 방법 섹션은 특히 값이 좋아요. 다이어트 간식은 '언제 먹느냐'가 구매 이유와 직결되는데, 상황별 사진 3컷만 넣어도 페이지가 풍성해지면서 실사용 장면이 전달됩니다. 이 컷들은 서울 동대문구 스튜디오에서 상세페이지 구성을 먼저 짠 뒤 그 순서대로 촬영해, 제작 단계에서 빠진 컷을 찾을 일이 없었어요. 모바일에서 표가 깨지지 않게 하려면요? 가로로 긴 표를 세로 목록으로 바꾸면 해결됩니다. 영양성분표는 항목이 많아 가로로 짜면 모바일에서 글자가 그대로 줄어들어 읽을 수 없게 되거든요. 항목명과 값을 위아래로 배치하고 구분선만 넣어도 충분히 표처럼 읽힙니다. 제작 전에 챙길 3가지 ● 확정된 영양성분표 ● 보유 인증과 시험성적서 ● 등록할 채널 목록 시안에서 확인할 3가지 ● 첫 화면에 숫자가 보이는지 ● 표가 세로로 짜였는지 ● 인증 이미지가 근거 자리에 있는지 가로폭도 처음부터 채널에 맞춰 잡습니다. 네이버 스마트스토어와 쿠팡이 각각 공식 가이드로 상세 이미지와 대표이미지 권장 규격을 안내하고 있어서, 시안 단계부터 각 플랫폼 권장 규격에 맞춰 작업하면 등록할 때 잘려나가는 구간이 생기지 않아요. 성분 정보를 신뢰감 있게 푸는 방식은 스마트스토어 영양제, 신뢰감 있게 상세페이지 만들어줄 곳 글에도 정리해 두었습니다. 자주 묻는 질문(FAQ) Q. 제품 특징이 많지 않은데 내용이 풍성해 보이게 기획할 수 있나요? 강점 하나를 원료·제조·인증·활용 4단계로 쪼개면 됩니다. 섹션 수를 억지로 늘리면 비슷한 문장이 반복돼 얄팍해 보이거든요. 같은 이야기라도 근거가 단계별로 붙으면 페이지 길이도 자연스럽게 확보됩니다. Q. 패키지는 괜찮은데 상세페이지 전환율이 낮아서 전체를 다시 만들고 싶어요. 첫 화면부터 세 번째 화면까지만 먼저 손보는 방법도 있습니다. 이탈은 대부분 상단에서 일어나서 전체를 갈아엎지 않아도 효과를 볼 수 있어요. 기존 페이지에서 어느 구간까지 읽히는지 확인한 뒤 그 앞을 다시 짜는 순서가 비용도 적게 듭니다. Q. 밀키트 구성품과 조리 방법을 한눈에 정리하려면 어떻게 짜나요? 구성품은 펼쳐 놓은 사진 한 장, 조리는 단계별 사진으로 나눕니다. 구성품을 글로 나열하면 개수가 많아 보여도 실물감이 없거든요. 조리 단계는 화면 하나에 한 단계씩 배치해야 순서가 헷갈리지 않습니다. Q. 주스 제품인데 원재료와 맛의 특징이 잘 보이게 하려면요? 원물컷과 색이 보이는 음용컷을 짝으로 배치합니다. 맛은 글로 설명하기 어려워 색과 원물이 대신 전달하거든요. 맛이 여러 가지면 배경과 각도를 고정한 채 제품만 바꿔 촬영해야 라인업으로 읽힙니다. Q. 냉동식품이라 조리 전후 모습을 둘 다 보여주고 싶은데 어떻게 배치하나요? 같은 각도와 같은 그릇으로 찍어 위아래로 붙입니다. 각도가 다르면 비교가 아니라 다른 제품처럼 보여요. 조리 전 컷은 냉기가 살아 있는 상태에서, 조리 후 컷은 김이 오르는 순간에 담아야 차이가 분명해집니다. 함께 보면 좋은 글 · 식품 상세페이지 원산지·원재료, 깔끔하게 정리해주는 업체는? · 모바일 쇼핑몰에 맞는 생활용품 상세페이지를 제작해주는 업체는? 이 글은 하오스튜디오에서 해당 프로젝트를 직접 진행한 10년 이상 경력의 촬영 작가·전담 PM의 실제 작업 경험을 바탕으로 작성했어요. 1,203+ 누적 고객 1,603+ 누적 프로젝트 111,360+ 제작 컷수 10년+ 촬영·디자인 경력 하오스튜디오는 지난 10년간 제품·화장품·식품·기업·공간 등 누적 1,603건 이상의 프로젝트를 진행하며 1,203곳 이상의 고객과 함께했고, 지금까지 제작한 촬영 컷수는 111,360컷을 넘습니다. 누끼·연출·모델·360도 촬영부터 스마트스토어 상세페이지 제작까지 원스톱으로 대응하며, 스튜디오는 서울 동대문구 장한로23길 11-11, 4층에 있습니다. (전화 1666-9502) HAO STUDIO 고르는 기준이 되는 숫자를, 첫 화면으로 올려드립니다 ● 원스톱 진행 — 컨셉 협의·촬영·상세페이지 제작을 한 곳에서 ● 전담 배정 — 전담 PM·전담 작가가 처음부터 끝까지 ● 맞춤 촬영 — 누끼·연출·모델·360도 등 업종에 맞게 영양성분표와 등록 채널만 알려주시면 섹션 구성부터 잡아드릴게요. 홈페이지 haostudio.co.kr · 카카오톡 @하오스튜디오 · 전화 1666-9502