상세페이지 시안은 대개 큰 모니터에서 검토하지만, 고객은 휴대전화로 보는 경우가 많습니다. 모니터에서는 또렷하던 설명 글씨가 휴대전화에서는 손가락으로 확대해야 읽히고, 고화질 이미지를 그대로 올리면 화면이 늦게 떠서 고객이 내용을 보기도 전에 나갑니다. 제작 의뢰 단계부터 모바일 화면을 기준으로 검수 항목을 정해 두세요.
이 작업은 디자이너 혼자 챙기기 어렵습니다. 의뢰하는 담당자가 기준을 정해 전달하고, 검수하는 담당자가 같은 기준으로 확인해야 수정이 반복되지 않습니다. 아래 순서는 의뢰, 검수, 용량 관리, 교체 후 확인까지 한 흐름으로 정리한 것입니다.
모바일 기준 검수는 왜 따로 해야 하나요?
상세페이지 이미지는 화면 너비에 맞춰 줄어듭니다. 넓은 화면을 기준으로 만든 이미지가 휴대전화 너비로 줄어들면 이미지 안의 글자와 아이콘도 같은 비율로 작아집니다. 모니터 검토에서 통과한 시안이 실제 고객 화면에서는 읽기 어려운 이유가 여기에 있습니다.
용량 문제도 모바일에서 더 크게 드러납니다. 이동통신 환경에서는 이미지 한 장이 늦게 뜨는 것만으로 스크롤이 끊기고, 가장 중요한 구매 정보가 아래쪽에 있다면 고객이 그 부분까지 내려가지 않을 수 있습니다.
화면 순서도 달라집니다. 모니터에서는 좌우로 나란히 보이던 비교 이미지가 휴대전화에서는 위아래로 길게 이어지거나 한쪽이 잘릴 수 있습니다. 여러 요소를 가로로 배치한 이미지는 모바일에서 특히 꼼꼼히 봐야 합니다.
제작 의뢰서에는 무엇을 적어야 하나요?
의뢰서에 이미지 가로 크기와 파일 형식, 장당 용량 기준을 적습니다. 쇼핑몰 솔루션이 권장하는 상세페이지 이미지 너비를 먼저 확인하고, 그 너비를 기준으로 제작해 달라고 요청합니다. 긴 이미지 한 장으로 만들지 말고 내용 단위로 나눠 여러 장으로 받는 편이 교체와 관리에 유리합니다.
이미지 안 글자 크기 기준도 정합니다. 휴대전화에서 확대하지 않고 읽을 수 있는 크기를 기준으로, 본문 설명은 짧게 줄이고 꼭 필요한 문장만 남기도록 요청하세요. 촬영 단계에서 모바일 화면을 고려한 구도를 함께 잡으려면 상품 촬영 의뢰서에 꼭 담아야 할 항목과 작성 순서를 참고하면 좋습니다.
원본 파일과 작업 파일을 함께 받는 조건도 의뢰서에 넣습니다. 나중에 문구 하나만 바꾸고 싶어도 작업 파일이 없으면 이미지를 처음부터 다시 만들어야 하기 때문입니다.
글자는 이미지에 넣어야 하나요, 본문에 써야 하나요?
가격, 옵션, 구성품, 배송 조건처럼 바뀔 수 있거나 정확해야 하는 정보는 이미지보다 쇼핑몰 본문 텍스트로 쓰는 것이 안전합니다. 이미지 안에 넣으면 내용이 바뀔 때마다 디자인 파일을 다시 수정해야 하고, 검색엔진과 화면 낭독 프로그램이 읽지 못합니다.
이미지에는 제품의 생김새, 사용 장면, 크기 비교처럼 보여 주는 것이 나은 정보를 담습니다. 이미지에 꼭 문구를 넣어야 한다면 짧은 제목 정도로 줄이고, 같은 내용을 본문 텍스트에도 적어 두면 접근성과 수정 편의를 함께 챙길 수 있습니다.
이미지마다 대체 텍스트도 적습니다. 화면 낭독 프로그램을 쓰는 고객이나 이미지가 늦게 뜨는 환경의 고객에게는 대체 텍스트가 이미지를 대신합니다. 파일 이름을 그대로 넣지 말고 이미지가 보여 주는 내용을 한 문장으로 설명하세요.
검수할 때는 어떤 순서로 보나요?
검수는 실제 휴대전화로 합니다. 시안을 테스트 상품에 올린 뒤 기종이 다른 휴대전화 두세 대로 열어 보고, 첫 화면에서 상품이 무엇인지 바로 알 수 있는지, 확대하지 않고 모든 글자를 읽을 수 있는지, 이미지 사이에 빈 공간이나 잘림이 없는지 차례로 확인합니다.
다음으로 화면이 뜨는 속도를 봅니다. 사무실 무선 인터넷이 아니라 이동통신 연결로 접속해 상세페이지 전체를 스크롤해 보세요. 특정 이미지에서 멈춘다면 그 파일의 용량을 확인합니다. 시안 단계의 검수 의견을 한 번에 정리하는 방법은 상세페이지 시안 검수 회의를 한 번에 끝내는 진행 방법에 정리되어 있습니다.
검수 의견은 휴대전화 화면을 캡처해 문제 위치를 표시한 뒤 전달합니다. 글자가 작다는 말만으로는 디자이너가 어느 부분을 얼마나 키워야 하는지 알기 어렵습니다. 기종과 화면 크기도 함께 적어 두면 같은 환경에서 다시 확인할 수 있습니다.
가로 화면으로 돌려 보는 확인도 한 번쯤 해 둡니다. 대부분의 고객은 세로 화면으로 보지만, 이미지가 깨지거나 지나치게 늘어나지 않는지 정도는 확인해 두는 편이 안전합니다.
첫 화면에는 무엇이 보여야 하나요?
휴대전화에서 상세페이지를 열었을 때 스크롤하기 전에 보이는 영역은 매우 좁습니다. 이 영역에서 고객은 상품이 무엇인지, 자기에게 필요한지 판단합니다. 첫 이미지는 분위기 연출보다 상품의 실제 모습과 핵심 용도가 바로 보이도록 구성하세요.
브랜드 소개나 긴 감성 문구로 상세페이지를 시작하면 고객은 상품 정보를 보기 전에 여러 번 스크롤해야 합니다. 브랜드 이야기는 상품 정보 뒤에 배치하고, 첫 화면에는 상품 사진과 짧은 핵심 설명을 두는 순서를 기본으로 잡습니다.
검수할 때는 첫 화면만 캡처해 상품을 처음 보는 사람에게 보여 주고, 무엇을 파는 페이지인지 바로 말할 수 있는지 확인하는 방법도 쓸 만합니다.
이미지 용량은 어떻게 줄이나요?
먼저 실제 표시 크기보다 큰 이미지를 올리지 않습니다. 화면에 표시되는 너비보다 몇 배 큰 원본을 올리면 화질은 거의 차이 나지 않는데 용량만 커집니다. 표시 너비에 맞춰 크기를 줄인 뒤 압축 정도를 조정하고, 사진은 손실 압축 형식, 단순한 도형이나 아이콘은 그에 맞는 형식을 고릅니다.
압축 후에는 반드시 휴대전화로 다시 확인합니다. 용량을 지나치게 줄이면 제품 질감이나 색상이 뭉개질 수 있습니다. 제품 색상이 구매 판단에 중요한 상품이라면 대표 사진은 화질을 우선하고 나머지 설명 이미지에서 용량을 줄이는 식으로 균형을 잡습니다.
여러 상품의 이미지를 한꺼번에 관리하려면 어떻게 하나요?
상품이 많아지면 이미지 기준을 상품마다 따로 정하기 어렵습니다. 이미지 너비, 파일 형식, 장당 용량 상한, 글자 크기, 파일 이름 규칙을 한 장의 기준표로 만들어 모든 제작 의뢰에 첨부하세요.
파일 이름은 상품 코드와 순서를 넣어 정합니다. 이름만 보고도 어떤 상품의 몇 번째 이미지인지 알 수 있으면 교체할 때 다른 상품 이미지를 잘못 올리는 실수가 줄어듭니다.
기준표는 처음 몇 개 상품을 실제로 검수해 본 뒤 고칩니다. 휴대전화에서 확인해 보니 글자가 여전히 작다면 기준을 키우고, 이후 의뢰부터 바뀐 기준을 적용합니다.
이미지를 교체한 뒤에는 무엇을 확인하나요?
이미지를 교체했다면 이전 파일이 남아 있지 않은지 확인합니다. 브라우저나 서비스의 캐시 때문에 교체 직후에는 예전 이미지가 보일 수 있으므로 시간을 두고 다시 확인하고, 대체 텍스트도 새 이미지 내용에 맞게 고칩니다.
교체 이력은 날짜와 바꾼 이유를 함께 기록합니다. 나중에 구매 전환이나 문의가 달라졌을 때 어떤 변경이 영향을 줬는지 되짚을 수 있기 때문입니다. 상세페이지 제작과 모바일 검수를 구축 범위에 포함하는 방식은 브랜드 쇼핑몰 구축에서 확인할 수 있습니다.