상세페이지를 만들거나 고칠 일이 생기면, 디자인보다 수정이 더 번거롭게 느껴질 때가 있죠. 사진 몇 장과 문구만 바꾸면 되는데 막상 시작하려니 손이 잘 가지 않기도 하고요.
포토샵을 못해서만은 아닙니다. 익숙하게 쓰는 분도 파일을 열고, 레이어를 찾고, 바뀐 문구의 길이에 맞춰 위치를 다시 잡아야 하니까요.
간단히 끝낼 줄 알았던 수정에 생각보다 손이 많이 갑니다.
WAKIT은 이런 반복 작업을 조금 가볍게 만들고 싶었습니다. 상품을 바꿀 때마다 배치부터 다시 고민하기보다, 준비된 구성에 사진과 설명을 넣으며 다듬어갈 수 있다면 어떨까 하고요.
이번에는 식품 템플릿 10종 중 밀키트·간편식 하나를 열어 내용을 바꿔봤습니다. 버튼을 하나씩 설명하기보다, 어떤 생각으로 내용을 채웠고 화면이 어떻게 달라졌는지 보여드릴게요.
화면 속 WAKIT 데모 식탁은 가상의 상품입니다. 사진과 상품 정보, 후기 영역은 편집 예시이며 실제 판매 상품이나 고객 후기가 아닙니다.
처음부터 빈 화면을 마주하지 않아도 된다면
이번 작업은 압축을 푼 폴더에서 ‘01. 밀키트·간편식 (기능형).html’을 Chrome으로 여는 것부터 시작했습니다.
ZIP에는 10종의 HTML과 폰트 폴더(_fonts), 출력용 파일, 사용 안내가 함께 들어 있습니다. 시작할 때는 이 폴더를 통째로 두고 파일을 열면 됩니다.
왼쪽에는 내용을 넣을 항목이, 오른쪽에는 페이지의 모습이 보입니다. 문구를 고친 뒤 이미지를 다시 저장해서 확인하는 대신, 같은 화면에서 바뀐 모습을 살펴볼 수 있어요.
먼저 양쪽을 천천히 내려보면서 어떤 이야기를 어디에 담을지 생각해봤습니다.
디자인을 처음부터 완성해야 한다는 부담보다, 준비해둔 사진과 상품 설명을 하나씩 채워가는 쪽에 가까운 작업입니다. 이번 편집과 PNG 출력은 데스크톱 Chrome에서 확인했습니다.
사진은 있는데 분위기가 고민될 때
상품 사진을 준비해도 어떤 분위기로 다듬을지 고민이 남곤 합니다. 이번에는 ‘프롬프트 복사’로 준비한 문장을 ChatGPT에 붙이고, 원본 사진을 함께 넣어 편집을 요청해봤어요.
요청 문장을 처음부터 작성하는 부담을 덜 수 있도록 마련한 기능입니다.
편집 결과를 저장해 템플릿에 넣으니 대표 사진이 바뀌었습니다. 이미지 편집은 외부 AI 서비스에서 진행하므로 인터넷과 해당 서비스 이용 환경이 필요합니다.
템플릿 안에서는 준비된 파일을 교체하는 방식이에요.
분위기가 마음에 들어도 음식의 모양이나 양, 구성품이 달라졌다면 판매 사진으로 쓰기는 어렵겠죠. 사진을 다듬는 과정에서도 실제 상품과 맞는지 확인하는 일은 남아 있습니다.
문구가 바뀌니 같은 구성도 다른 이야기가 됩니다
첫 문구는 ‘바쁜 하루 끝에 / 따뜻한 곤드레 한 그릇’으로 바꿔봤습니다. 재료를 나열하기보다 이 상품을 먹게 될 순간을 떠올려본 문장이에요.
이어서 구성과 조리법을 바꾸니 기본 예시가 이번 상품의 이야기로 조금씩 달라졌습니다.
어떤 말을 먼저 보여줄지, 구매자가 궁금해할 내용은 무엇인지에 시간을 쓰고 싶었습니다. 사진과 문구를 넣을 자리가 준비돼 있으니 그 안에서 설명을 다듬어갈 수 있어요.
원산지와 영양정보, 인증, 배송 기준처럼 정확해야 하는 정보는 실제 자료로 채워야 합니다. 이번에는 임의의 영양 수치를 만들지 않고 ‘표기값 입력’으로 남겼고, 후기도 실제 후기가 아닌 편집 예시로 표시했습니다.
한 장으로는 다 보여주기 어렵잖아요
대표 사진만으로는 구성이나 질감을 다 전하기 어렵습니다. 추가 상세컷에 사진 3장을 함께 넣어봤어요.
미리보기 아래로 사진이 이어지면서 한 장에 담지 못했던 모습도 보여줄 수 있었습니다.
상품에 따라 패키지나 구성품, 조리 모습을 더하고 싶을 때도 있겠죠. 필요한 사진을 함께 등록하면서 설명의 흐름을 늘려갈 수 있습니다.
내용을 채운 뒤에는 ‘전통’ 폰트와 ‘브라운 · 보양/전통’ 색상을 골라봤습니다. 이번 음식 사진과 문구에 어울리는 분위기를 찾으면서요.
색을 고르는 재미도 있지만, 제목과 설명이 편하게 읽히는지가 먼저라고 생각합니다.
수정한 페이지를 이미지로 꺼내봤습니다
미리보기를 끝까지 내려본 뒤 PNG로 저장해서 열었습니다. 화면에서 보던 구성이 긴 이미지 한 장으로 나왔어요.
이번 결과는 1720 × 15336px입니다. 저장한 파일을 확대해 글자와 사진이 빠짐없이 담겼는지도 확인했습니다.
위 이미지는 실제 출력 파일의 일부입니다. 쇼핑몰에 올릴 때는 등록 기준에 맞춰 긴 이미지를 나누거나 용량을 조정해야 할 수 있어요.
마지막에는 상품 표시사항과 배송 안내까지 실제 운영 내용과 맞는지 다시 읽어보면 좋겠습니다.
바뀌는 과정은 영상으로 담아뒀어요
사진을 준비하고 문구를 바꾸는 장면부터 여러 장의 상세컷 추가, 색상 변경, 저장된 결과를 여는 모습까지 담았습니다. 8분 29초 영상이며 소리 없이 설명 자막으로 볼 수 있습니다.
반복하는 수정이 조금 가벼워지길
모든 상품을 같은 모습으로 만들려는 건 아닙니다. 반복되는 사진 교체와 문구 수정에 드는 손을 줄이고, 상품을 어떻게 설명할지에 조금 더 집중할 수 있으면 좋겠습니다.
WAKIT이 이런 도구를 만드는 이유도 여기에 있어요.
이번에 사용한 밀키트·간편식 템플릿과 다른 식품 구성, 제공 파일은 아래에 정리해뒀습니다. 필요하실 때 참고해보세요.
다음 글에서도 실제로 내용을 바꾸고 결과를 확인하는 모습을 함께 나누겠습니다.
'상세페이지 가이드' 카테고리의 다른 글
| 디저트 사진은 준비했는데, 상세페이지는 막막할 때 | WAKIT 베이커리 템플릿 (0) | 2026.10.02 |
|---|
