수제청 사진은 예쁘게 준비했는데, 상세페이지를 열면 또 멈추게 되죠.
병 사진부터 보여줄까, 완성한 음료부터 보여줄까. 맛을 설명하는 문장은 어디에 놓을까. 사진 한 장 바꾸려고 편집 파일을 다시 여는 일도 은근히 번거롭고요.
이번에는 WAKIT 식품 10종 중 음료·수제청 템플릿을 열어봤어요. 가상의 자몽청 사진을 넣고, 첫 문구부터 활용 설명까지 바꾸며 어떤 화면이 되는지 살펴봤습니다. 먼저 완성한 첫 화면 일부예요.
※ 화면 속 자몽청은 가상 상품이고, 사진은 AI로 만든 시연 자료입니다. 실제 식품 판매용 사진이나 고객 후기가 아닙니다.
빈 화면 대신, 준비된 자리에서 시작했어요
압축을 푼 폴더에서 ‘05. 음료·수제청 (컬러 라이프).html’을 Chrome으로 열었습니다. 왼쪽에는 입력할 항목이, 오른쪽에는 미리보기가 있어요.
처음에는 레몬청 사진과 예시 문구가 들어 있습니다. 이 모습을 그대로 쓰는 것이 아니라, 사진과 문장을 내 상품에 맞게 바꾸는 출발점으로 생각하면 편해요.
첫 문장은, 한 잔을 떠올리게
상품 사진은 무엇을 파는지 알려주지만, 한 잔의 음료 사진은 언제 어떻게 즐길지 보여주기도 하죠. 이번에는 긴 설명 대신 “오늘의 한 잔에 자몽빛을 더해요”라는 문장을 골랐어요.
로고 자리에는 WAKIT DEMO를 넣고, 제목은 두 줄로 나눴습니다. 강조할 단어를 별표로 감싸면 미리보기에서 그 부분이 강조돼요. 왼쪽의 문장과 오른쪽의 줄바꿈을 함께 보면서 조금씩 다듬었습니다.
사진 한 장을 바꾸는 자리도 보여드릴게요
대표 이미지 영역의 ‘이미지 올리기’에서 준비한 자몽청 사진을 선택했습니다. 사진을 넣고 나면, 같은 구성 안에서도 화면의 인상이 달라져요.
바로 옆의 ‘프롬프트 복사’는 외부 AI 서비스에 요청할 문장을 준비하는 기능입니다. 템플릿 안에서 이미지가 자동 생성되는 방식은 아니에요. 이번 사진도 먼저 별도로 만들고, 파일로 올렸습니다.
실제 상품을 소개한다면 촬영한 상품 사진이 기준이겠죠. 실물의 색과 구성은 유지하면서 필요한 배경이나 조명을 정리하는 방향으로 준비해주세요.
한 병을 설명하기보다, 즐길 장면을 적어봤어요
에이드로 마시는 순간, 따뜻한 차로 즐기는 순간, 요거트 위에 더하는 순간. 같은 상품이라도 이런 장면이 있으면 읽는 사람은 자기 하루에 대입하기 쉬워지죠.
‘이렇게 즐기세요’ 항목에서 이름과 설명을 각각 수정했습니다. 여기서는 문구 입력칸을 보여드린 것이고, 활용 사진은 기본 샘플입니다. 실제 페이지에는 해당 장면에 맞는 사진도 따로 바꿔 넣으면 됩니다.
희석 비율, 원산지, 성분, 보관 안내 역시 실제 판매 상품에서 확인한 정보로 바꿔야 해요. 예시 문구를 많이 남기는 것보다, 정확히 아는 내용을 골라 담는 것이 먼저라고 생각합니다.
한 장으로 부족하면, 사진을 이어 넣어요
병 전체도 보여주고 싶고, 잔에 담긴 모습도 더 보여주고 싶을 때가 있죠. 추가 상세컷에는 사진 여러 장을 한 번에 등록할 수 있습니다.
이번에는 준비한 사진 자료 두 장을 함께 넣었습니다. 왼쪽에 썸네일이 생기고, 추가된 이미지는 페이지 아래쪽으로 이어집니다. 길이를 늘리기 위해 같은 내용을 반복하기보다, 독자가 궁금할 다른 모습을 담을 때 활용하면 좋겠어요.
마지막에는 저장된 이미지도 확인했어요
문장과 사진을 미리보기에서 읽어본 뒤 ‘상세페이지 PNG 저장’을 눌렀습니다. 아래는 실제 출력 파일의 첫 부분입니다.
첫 문구와 사진이 이렇게 한 장의 이미지에 담깁니다. 이번 시연은 대표 사진과 일부 문구를 바꾸는 과정이며, 기본 사진·표시사항이 남은 영역은 실제 상품 정보로 마무리하는 자리예요. 쇼핑몰에 올리기 전에는 전체 내용을 다시 확인해주세요.
바뀌는 과정은 영상으로도 담았습니다
사진 교체, 문구 수정, 여러 장의 이미지 추가, 미리보기와 PNG 저장을 3분 22초 무음 자막 영상으로 정리했어요. 화면을 따라가며 어떤 자리에서 무엇을 바꾸는지 살펴보세요.
배치보다, 우리 상품 이야기에 시간을 쓰도록
사진을 어디에 놓을지 매번 처음부터 고민하는 대신, 우리 상품이 어떤 순간에 쓰일지부터 적어보는 것. WAKIT이 템플릿으로 조금 가볍게 만들고 싶은 작업입니다.
이번 음료·수제청 구성은 식품 상세페이지 템플릿 10종에 포함되어 있어요. 제공 파일과 다른 구성이 궁금할 때 아래에서 살펴보세요.
일을 쉽게 만드는 도구, WAKIT. 다음에도 실제로 만들어본 화면과 함께 이야기할게요.
'상세페이지 가이드' 카테고리의 다른 글
| 디저트 사진은 준비했는데, 상세페이지는 막막할 때 | WAKIT 베이커리 템플릿 (0) | 2026.10.02 |
|---|---|
| 식품 상세페이지 템플릿 사용법: 사진·문구 수정부터 PNG 출력까지 (0) | 2026.10.02 |
