세럼 상세페이지, 사진 다음에는 어떤 이야기를 담을까요? | WAKIT 제작 이야기

사진으로는 제품 분위기가 잘 전해지는데,
설명을 붙이면 갑자기 딱딱해지는 순간이 있죠.

어떤 말을 먼저 건네야 할지 고민하다가
결국 성분과 특징을 나열하게 되기도 하고요.

이번에는 WAKIT 「01. 에센스·세럼형」을 열고,
가상의 세럼 사진에 어울리는 첫 문장을 적어봤습니다.

‘하루의 시작을, 차분한 한 방울로.’

사진을 직접 올리고, FAQ와 상품 정보를 바꾼 뒤
PNG로 저장한 과정까지 함께 보여드릴게요.
※ 가상 상품·AI 세럼 사진을 사용한 제작 예시입니다. 실제 판매 상품이나 효능·시험 결과가 아닙니다.

성분을 말하기 전에, 쓰는 순간을 떠올려봤어요

기본 템플릿에는 예시 문구와 사진이 들어 있습니다.
이번에는 제목을 ‘하루의 시작을, 차분한 한 방울로’로 바꿨어요.
아침에 나를 정돈하는 장면을 먼저 떠올린 문장입니다.

왼쪽에 문구를 입력하니 오른쪽 미리보기도 달라집니다.
줄을 나누고, ‘차분한 한 방울’에 별표를 넣어 강조했어요.
배치를 처음부터 다시 만드는 대신,
어떤 말을 먼저 건넬지 생각하는 데 시간을 쓸 수 있었습니다.

아래는 기본 화면과 첫 문장을 바꾼 장면입니다.
이 단계에 보이는 수치와 기본 설명은 샘플이며, 이후 수치는 비워두었습니다.

사진을 바꾸니, 같은 틀에도 다른 분위기가 담기네요

아이보리 돌 위에 놓인 세이지 색 세럼병 사진을 준비했습니다.
‘이미지 올리기’에서 파일을 선택하니 대표 사진이 바뀌었어요.
같은 레이아웃인데도 한결 차분한 장면이 됩니다.

이 사진은 가상 상품을 AI로 만든 예시예요.
실제 상품을 소개한다면 내 제품 사진을 넣어주세요.

‘프롬프트 복사’도 눌러봤습니다.
외부 AI에 요청할 문장을 복사하는 기능이고,
템플릿 안에서 사진이 자동 생성되는 기능은 아닙니다.
이번에는 사진을 먼저 준비한 뒤 파일로 올렸어요.

예쁜 화면 속 숫자도, 내 자료인지 확인해야죠

샘플에 있던 퍼센트는 그대로 사용하지 않았습니다.
‘—’로 바꾸고, 확인한 근거와 실제 시험자료를 넣을 자리라고 표시했어요.
만족도와 시험 안내도 가상 시연이라는 설명을 붙였습니다.

꾸며진 화면이 실제 효능 자료가 되는 건 아니니까요.
내 상품에 적용할 때는 확인한 시험 결과와 표기 가능한 정보만 채워주세요.
이번 작업에 남아 있는 기본 인물 사진·비교 표·성분 설명·가격 안내는
디자인 배치 예시이며, 새 세럼의 실제 정보가 아닙니다.

독자가 궁금해할 질문을 먼저 적어봤어요

사진을 보고 나면 작은 질문들이 생기죠.
‘내 사진으로 바꿀 수 있나요?’
‘완성한 이미지는 어떻게 저장하나요?’

FAQ의 기존 질문을 수정하고 새 질문도 하나 추가했습니다.
이번에는 템플릿 활용에 관한 질문을 넣었지만,
실제 상품이라면 사용법이나 용량처럼
고객이 자주 묻는 내용을 담으면 좋겠어요.
입력한 질문과 답변이 미리보기에 나오는 모습도 확인했습니다.

사진이 더 있다면, 한 장에 다 욱여넣지 않아도 돼요

같은 가상 세럼을 리넨 위에 눕힌 사진도 준비했습니다.
‘추가 상세컷’에 한 장을 올리고, 대표 사진도 한 장 더 추가했어요.
왼쪽에는 작은 썸네일 두 개가 생기고
미리보기에는 사진이 아래로 이어집니다.

실제 상품이라면 전체 모습과 가까이 찍은 질감,
패키지처럼 서로 다른 장면을 골라보세요.
각 사진에 역할이 있으면 페이지 흐름도 더 편안해집니다.

마지막 안내까지, 내 상품의 말로 채워주세요

상품 이름은 ‘차분한 한 방울 · 가상 세럼’으로 바꿨습니다.
용량·전성분·제조사 등은 실제 제품 자료를 확인해 입력할 자리로 정리했어요.
임의로 성분이나 용량을 만들지는 않았습니다.

하단 안내 영역은 크림 팔레트로 바꿔봤어요.
이 선택은 하단 배송·안내 영역의 색을 바꾸는 기능입니다.
상세페이지 전체 색이 한꺼번에 바뀌는 기능과는 구분해주세요.

실제 판매에 쓰기 전에는 이번에 남겨둔 기본 샘플 영역도
내 상품의 사진과 사실에 맞게 바꾸면 됩니다.

미리보기에서 끝내지 않고, 저장된 결과도 열어봤어요

미리보기를 내려 질문과 사진, 상품 정보의 흐름을 확인한 뒤
‘상세페이지 PNG 저장’을 눌렀습니다.
저장된 긴 이미지도 직접 열어 첫 문장을 확인했어요.

아래 6분 14초 영상에는 실제 문구 입력과 사진 교체,
FAQ 추가, 상품 정보 수정, 사진 두 장 등록,
미리보기 스크롤과 PNG 저장 과정을 담았습니다.
긴 대기 구간을 덜고 설명 자막을 붙인 무음 시연입니다.

실제로 바꾸는 과정을 영상으로

사진 선택부터 PNG 저장까지, 6분 14초 무음 시연입니다.
가상 상품·AI 사진을 사용했고, 기본 샘플 정보는 실제 판매 정보가 아닙니다.

WAKIT-beauty-guide.mp4

4.39MB

내 제품의 첫 문장부터 시작해보세요

제품 사진이 준비되어 있다면,
성분 목록 전에 ‘어떤 순간에 쓰는 제품인지’를
한 문장 먼저 적어보면 어떨까요?

그 문장에 어울리는 사진을 고르고,
독자가 궁금해할 질문을 하나씩 채워보세요.

오늘 사용한 「01. 에센스·세럼형」은
WAKIT 뷰티 화장품 상세페이지 템플릿 10종에 포함되어 있습니다.
전체 구성과 사용 안내는 아래 제품 페이지에서 확인할 수 있어요.
WAKIT 뷰티 상세페이지 템플릿 10종 구성 보기

일을 쉽게 만드는 도구, WAKIT.