디저트 사진을 찍고 나면 잠깐 뿌듯하죠. 그런데 상세페이지를 만들려고 하면 또 다른 고민이 시작됩니다.
이 사진을 얼마나 크게 넣을지, 어떤 문구를 붙일지, 여러 맛을 어떻게 보여줄지. 포토샵을 쓸 줄 알아도 배치를 다시 잡는 일은 은근히 손이 많이 갑니다.
WAKIT은 그 반복을 조금 가볍게 만들고 싶었습니다. 이번에는 식품 템플릿 10종 중 베이커리·디저트 구성을 열어, 사진과 짧은 문장으로 분위기를 바꿔봤어요.
화면 속 상품과 사진은 사용법을 보여주기 위한 가상 예시입니다. AI로 만든 디저트 사진을 사용했으며, 실제 판매 상품이나 고객 후기가 아닙니다.
사진이 주인공이면, 시작도 조금 달라집니다
이번 템플릿은 큰 사진과 넉넉한 여백이 먼저 눈에 들어옵니다. 밀키트처럼 정보가 풍성한 구성과는 다른 출발이에요.
압축을 푼 폴더에서 ‘04. 베이커리·디저트 (매크로 미니멀).html’을 Chrome으로 열었습니다. 왼쪽에는 입력 항목이, 오른쪽에는 미리보기가 있습니다.
기본 구성이 있으니 빈 화면에서 모든 자리를 정할 필요는 없었습니다. 먼저 사진을 바꾸고, 어떤 순간에 먹고 싶은 디저트인지 생각해봤어요.
사진을 준비하는 데에도 작은 도움이 있습니다
이미지 영역의 ‘프롬프트 복사’를 누르면 사진 보정에 사용할 요청 문장을 복사할 수 있습니다. 실제 상품 사진을 ChatGPT 같은 외부 AI 서비스에 첨부할 때 참고할 수 있어요.
이번 영상에서는 복사 버튼과 준비한 사진을 교체하는 과정을 보여드립니다. 사진 생성은 촬영 전에 별도로 진행했습니다. 템플릿 안에서 AI가 이미지를 만들어주는 방식은 아닙니다.
대표 사진과 라인업 사진을 각각 교체하니, 같은 배치 안에서도 화면의 인상이 달라졌습니다. 실제 판매 페이지라면 음식의 모양과 구성까지 실제 상품과 맞는 사진을 쓰는 것이 먼저겠죠.
설명을 더하기 전에, 한 문장을 골라봤습니다
첫 문구는 ‘커피 옆에 놓는 / 작은 달콤함’으로 바꿨습니다. 제품 이름을 크게 쓰는 대신 이 디저트를 꺼내게 될 순간을 떠올려봤어요.
이어지는 문장은 ‘분주한 오후에도, 커피 한 잔과 작은 쉼표.’로 정했습니다. 준비된 칸에 입력하면 오른쪽에서 줄바꿈과 강조가 어떻게 보이는지 확인할 수 있습니다.
긴 설명을 꽉 채우기보다 사진을 보고 잠깐 쉬어갈 공간을 남겼습니다. 무엇을 먼저 말할지에 집중할 수 있다는 점이 이런 구성의 매력인 것 같아요.
감성만큼, 필요한 정보도 잘 보여야 하니까요
맛을 소개하는 칸과 원재료·보관·해동 안내, 후기와 배송 영역도 있습니다. 사진 위주의 페이지라도 구매 전에 궁금한 정보는 놓치지 않아야겠죠.
이번에는 확인되지 않은 원산지나 보관 기간을 임의로 넣지 않았습니다. 실제 표시사항을 입력하도록 안내 문구를 두었고, 후기 영역도 편집 예시라고 표시했습니다.
추가 상세컷에는 준비한 사진 두 장을 함께 등록했습니다. 사진이 아래로 이어지니, 질감과 전체 구성을 더 보여주고 싶을 때 활용할 수 있겠더라고요.
마지막에는, 화면 밖의 결과도 확인했습니다
카라멜과 초코 색상을 비교해본 뒤 이번 사진에 어울리는 카라멜 무드로 마무리했습니다. 미리보기를 내려보며 문장과 사진이 이어지는 흐름을 확인했어요.
PNG 저장 버튼을 누른 뒤 실제 저장 파일을 열었습니다. 이번 결과는 1720 × 9918px의 긴 이미지 한 장입니다. 아래는 출력 이미지의 일부예요.
쇼핑몰에 올릴 때는 각 플랫폼의 이미지 크기와 용량 기준에 맞춰 나누거나 조정하면 됩니다. 상품 표시사항과 배송 안내도 실제 운영 내용으로 다시 읽어보고요.
바뀌는 과정은 영상으로 담아뒀습니다
사진 교체, 문구 수정, 컬러 비교, 여러 장의 사진 추가, PNG 출력과 결과 확인을 3분 18초 영상으로 정리했습니다. 소리 없이 자막으로 볼 수 있습니다.
사진을 보여주는 일에 더 집중할 수 있도록
디저트를 잘 소개하는 건 결국 사진과 이야기의 몫이라고 생각합니다. WAKIT은 그 이야기를 담는 자리를 준비해, 반복되는 편집의 부담을 조금 덜고 싶습니다.
이번에 사용한 베이커리·디저트 템플릿과 다른 식품 구성, 제공 파일은 아래에서 살펴볼 수 있습니다. 필요하실 때 참고해보세요.
'상세페이지 가이드' 카테고리의 다른 글
| 식품 상세페이지 템플릿 사용법: 사진·문구 수정부터 PNG 출력까지 (0) | 2026.10.02 |
|---|
