스마트스토어 상세페이지 만들기 기본 사항

 

상세페이지 제작 전 준비 사항

 

1. 타깃층에 맞는 콘셉트 설정

제품 디자인 촬영

로그제작 , 명함, 스티커, 패키지, 리플릿 인쇄물 디자인 준비

 

2. 상품 준비

상품 사입, 자체제작

 

3. 상품 촬영

카메라, 조명, 삼각대, 반사판, 배경지 등

 

4. 촬영 이미지 편집

대표이미지 1장

최소 5장에서 7장 이상 등 다양한 이미지

 

5. 상품 설명 작성

상품에 대한 기본 정보

 

6. 프로모션 준비

고객의 구매를 끌어내기 위해 할인 쿠폰이나, 사은품 제공 등 고객 혜택을 제공하는 프로모션

쿠폰의 사용 조건과 할인 금액 상세 페이지에 노출할 프로모션 내용을 준비

 

7. 가격 정책 정하기

- 배송금액

고객에게 배송 관련 비용을 알려야 하기 때문에 기본 배송비와 교환, 반품에 따른 배송비 금액을 미리 측정

- 상품 금액

(수수료, 부가세, 포장 비용 등 고려)

 

8. 배송 정책 정하기

 

상세페이지 벤치마킹 6가지 요소

 

1. 제품 촬영 콘셉트

- 상품 연출 컷

상품 상세 페이지 내에(필요한 제품 사진을 찍을때 소품을 사용하여 이미지를 연출해서 찍었는지

또는 제품 정보만 잘 전달될 수 있게 제품 컷 위주로 찍었는지를 확인

- 제품 정보 컷

제품을 이해하는 데 더 도움이 되는지, 사진 이미지는 최근 트렌드에 잘 맞는지 등을 살펴 봅니다.

 

2. 상품 상세페이지 요소

사진, 글, 동영상등이 상품을 이해하는데 도움이 되고 있는지 부족하지는 않는지 살펴봅니다.

할인 코폰 제공이나 무료 배송 쿠폰과 같은 고객 혜택을 보여주는 요소가 고객 구매 결정에 어떤 역할을 하게 되는지 벤치마킹을 통해 살펴봅니다.

 

3. 레이아웃

상품 페이지 구성 요소들을 어떻게 배치하고 있는지 살펴봅니다.

고객에게 알리고 싶은 중요한 내용이나 고객이 구매 결정을 하는데 중요한 역할을 하게 되는 요소들은 

상세 페이지 상단에 배치하는것이 좋습니다.

제공하려는 정보의 내용과 중요도에 따라 어디에 레이아웃하는 것이 적절한지를 살펴봅니다.

 

4. 상품설명

 

인터넷 쇼핑몰에서 상품 상세 페이지는 상품에 대한 정보를 알리는 역할을 해야 하기 때문에

상품에 대한 충분한 설명이 있어야 합니다.

 

5. 브랜드 컬러

주로 브랜드 로고에 사용되는 컬러가 메인 컬러가 됩니다. 벤치마킹 사이트에서 사용한 컬러가 해당 브랜드 이미지나 제품 콘셉트를 전달하는데 효과적인 컬러가 사용되었는지 상세 페이지를 꾸밀 때 사용한 컬러는 조화롭게 사용되었는지를 살표봅니다.

 

6. 가독성 좋은 폰트 사용하기

벤치마킹 사이트에서 사용한 폰트와 사이즈, 그리고 정렬 방식이 고객 입장에서 내용을 읽는데 불편함 없이 잘 만들어졌는지 살펴봅니다.

특히 포토샵과 같은 그래픽 프로그램으로 작성한 텍스트는 사용한 폰트에 따라 가독성 차이가 크게 날 수 있기 때문에 폰트와 사이즈를 적절하게 선택하였는지 확인 합니다.

단, 스마트스토어의 스마트에디터 ONE에서는 사이즈 선택만 가능합니다.

 

PC 화면뿐만 아니라 모바일 화면에서도 내용들이 잘 표현되고 있는지 확인해 봐야 합니다.

 

스토리보드 만들기

 

A4 용지에 직접 내용을 작성하거나 워드 프로그램 등으로 상세페이지에 등록할 내용을 정리해봅니다.

 

1. 상품명(서브 카피)

고객들이 상품명이나 가격을 보고 대표 이미지를 클릭해서 들어오기는 하지만 

다시 한번 어떤 상품을 보고 있는지 상세페이지 제일 상단 화면에서 상품명을 통해 인지시켜줍니다.

상품명 상단이나 하단에는 상품명을 뒷받침해 줄 수 있는 서비 카피를 작성해 줍니다.

카피 문구는 고객이 제품을 구매할때 고객이 제품을 구매할때 걱정하는 요소를 한 줄로 설명하여 

안심시키는 역할을 하게 됩니다. 이런 카피는 상품의 특징을 한 줄로 고객에게 전달 할 수 있어 효과적인 경우 입니다.

 

2. 대표이미지 : 해당 상품의 특징 및 장점 설명

본격적인 상품 소개가 들어가기 전에 가장 제품의 특징이 잘 나타나는 매력적인 컷을 하나 상단에 배치함으로써 고객에게 상품을 어필할 수 있으니 작성해 주면 좋습니다.

 

제품 특성에 맞는 이미지 배열

착용컷 : 1,2,3,4,5

제품컷 : 1,2,3,4,5

디테일컷 : 1,2,3,4,5

제품 컷과 착용 컷 중 어떤 것을 상단에 배치하는 것이 효과적일지를 생각해서 레이아웃 합니다.

제품 컷은 제품의 앞면, 뒷면 등과 같은 특징을 착용 컷은 말 그대로 패션 관련 아이템의 경우 모델이 직접 입은 컷을 말합니다. 

제품을 직접 사용하는 모습을 연출한 사진이 되겠습니다.

 

상품의 전체적인 느낌을 보여주고 싶다면?

 

착용 컷이나 연출 컷이 상단으로 가고 이후 좀 더 제품의 재질이나 디테일을 알려주기 위해서

제품 컷을 하단에 배열하는 방식으로 상품 소개를 해줍니다.

또는 제품 컷으로 정확하게 상품 정보를 주고 이후 착용 컷이나 연출 컷으로 설명을 더 할 수도 있습니다.

 

3. 교환/반품/배송안내

교환, 반품, 배송 안내는 상품을 등록할 때 입력한 내용이 PC와 모바일 상세페이지에서 보입니다.

따라서 스토리보드 제작시 생략 가능한 항목 중 하나인데요, 

그러나 신선식품과 같이 배송에서 특이 사항이 있거나 반품, 교환 시 강조해서 알려야 할 내용이 있다면

상세페이지 디자인을 할때 다시 한번 알려주는 경우도 있습니다.

이때 농수산물처럼 배송 날짜에 민감한 제품들은 이런 내용을 하단보다는 상단에 고지하는 것이 좋습니다.

 

이렇게 작성한 스토리보드를 바탕으로 상세페이지를 제작하면 제작 속도를 높일 뿐만 아니라 

구성 요소들도 빠짐없이 알차게 꾸밀 수 있을 겁니다.

 

 

텍스트로 상세페이지 꾸미기

 

상세페이지에 제공되는 상품 이미지만으로는 고객이 상품에 대한 정보를 충분히 얻을 수 없기 때문에

이를 더 구체적으로 표현 할 수 있는 '글 설명'이 함께 제공되어야 합니다.

 

1. 상품에 대한 필수 기본 정보를 제공

상품의 기본적인 정보는 사이즈, 용량, 컬러, 소재 등과 같은 내용

브랜드나 모델명이 있다면 함께 표기 합니다.

식품의 경우에는 포장단위별 수량, 원산지, 성분, 제조일자나 생산시기, 유통기한, 그리고 재료의 혼합 비율 등을 표기해야 합니다.

이때 식품의 성분은 전 성분 표시와 함께 원료에 사용된 '원료 원산지'도 함께 표기해야 합니다.

 

2. 각종 인증 정보

고객들은 상품을 안심하고 구매할 수 있게 됩니다.

특히 판매하는 상품이 '전안법'  즉, '전기용품 및 생활용품 안전관리법'에 해당하는 상품인 경우에는 KC 인증 대상 상품인지 또는 안전기준 준수 대상 품목인지 확인하고 관련 내용을 상세페이지에 함께 표기해야 합니다.

또한 판매하는 상품이 만 13세 이하의 어린이들이 상용하는 어린이 제품이라면 '어린이 제품안전 특별법'에 따라 어린이 안전 인증과 같은 각종 인증, 허가 등의 내용도 제공해야 합니다.

제품안전정보센터(www.safetykorea.kr)

 

다음은 어린이 제품, 농수산물, 전안법 등에 해당하는 참고 할 수 있는 내용입니다.

관련 법은 내용이 개정될 수 있기 때문에 판매하는 시점에서 관련 법 사이트를 참고하시길 바랍니다.

 

3. 추가설명

상품의 장단점, 특징, 사용법 및 활용법을 고객이 이해하기 쉽도록 요약하여 설명합니다.

예를 들면 '상품의 장점 설명'은 휴대용 선풍기를 팔 때

'다양한 기능의 선풍기', '오랜 사용 시간'과 같은 문장으로 표현하는 것보다

'90도 상하좌우 회전 모드', '최대 12시간 작동' 처럼 이와 같은 상세 설명은 고객이 제품에 대한 정보를 정확하게 얻고 다른 제품들과 장점을 비교할 수 있는 요소가 됩니다.

 

4. 상품 구성 요소

상품 구성요소를 정확하게 표현하는 것도 중요 합니다.

고객이 이 제품을 샀을 때 기본으로 제공되는 상품과 추가로 구매해야 하는 상품 구성을 설명하는 것입니다.

예를 들명 탁상용 선풍기를 구입했을때 

충전용 USB 케이블과 어댑터가 상품 구성에 포함되는 것인지 아니면 어댑터는 추가로 따로 구매해야 하는지

고객은 혼돈이 올 수 있습니다. 이러한 내용을 정확하게 설명해 주는 것입니다.

 

5. 화면상 나타난 상품의 사이즈와 색상 차이

사이즈 정보와 색상 정보를 제공할 경우에 상품의 사이즈는 오차 발생에 대한 내용과 오차 범위를 알려 주어야 합니다.

 

예)

상품의 사이즌 측정 방법이나 측정위치에 따라 오차(0.5~1cm)가 발생할 수 있습니다.

상품의 색상은 모니터, 휴대폰 기종, 밝기 설정 등에 따라 실제 색상과 다르게 보일 수 있습니다.

 

 

이미지로 상세페이지 꾸미기

 

1. 다양한 각도의 기본 컷

다양한 각도의 기본 이미지를 보여줄 수 있습니다.

기본적으로 상품 상세페이지에는 상품 이미지들이 필요 합니다. 이때 상품 이미지는 '다양한 가도'로 촬영을 해서 고객들이 상품을 이해하는 데 도움을 줄 수 있어야 합니다.

 

2. 제품 디테일 컷

고객은 작은 모바일 화면으로 쇼핑을 하는 경우가 만기 때문에 전체적인 이미지만으로는 상품을 내부와 외부로 구분할 수 있는 상품이라면 외부뿐만 아니라, 제품의 안쪽은 어떻게 생겼는지 상품 내부 이미지도 제공해야 합니다.

 

식품이나 화장품 같은 경우는 포장 용기 안의 내용물을 보여줍니다. 

제품컷과 함께 패션 관련 제품들은 모델이 입은 착용 컷도 보여주시면 너무 좋습니다.

일반 제품들은 상품을 사용하고 있는 '제품 사용 컷'을 제공함으로써 실제 제품을 사용할 때 갖는 느낌을 대신 표현할 수 있습니다.

가구나 소품의 경우 직접 사용하고 있는 이미지를 

식품 같은 경우에는 조리된 이미지를 함께 제공하면 

고객은 내가 이걸 구매했을 때 어떻게 쓰겠구나, 어떻게 먹겠구나, 예측할 수 있어서 사고 싶은 마음이 더 들 수 있습니다.

 

3. 상품 이미지에서 중요한 또 다른점은 사이즈를 짐작할 수 있게 이미지를 보여 줍니다.

실제 고객 중에서는 많은 분이 자를 사용하여 사이즈를 확인하고 구매하지는 않습니다.

따라서 기본적인 사이즈 정보 이외에 사이즈를 가늠할 수 있는 상품 이미지를 제공하면 좋습니다.

예를 들면 일반적으로 사이즈를 알 수 있는 사물들로 '비교 컷'을 제공하는 것입니다.

종이컵이나 500mL 생수병을 상품과 함께 찍어도 좋습니다.

또는 사람 손이 함께 나오게 되면 고객들이 어느 정도 상품의 사이즈를 예측 할 수 있게 됩니다.

 

상품 패키지나 상품 배송 시 포장상태를 보여주는 이미지 컷도 좋은 방법의 하나입니다.

 

4. 제품 패키지 컷

상품 이미지뿐만 아니라 상품이 어떤 패키지에 담겼는지 그리고 포장에 조심해야 하는 상품들이라면 

배송시 포장상태를 알려주는 이미지도 함께 제공하면 좋습니다.

고객들은 이 상품이 안전하게 잘 배송될지도 궁금해하는 요소 중 하나이기 때문입니다.

 

5. 생산지 컷(오프라인), 상품 제작 과정 컷

현장감 전달, 고객의 신뢰동 상승, 전문성 어필

 

생산지 사진 또는 상품 제작 과정을 보여주는 사진

생산지 사진으로 생생한 현장감을 전달하거나 오프라인 매장의 이미지를 상세페이지에 함께 제공하면, 

상품을 팔고 금방 사라지는 판매자가 아닌 믿을 수  있는 업체라는 안심이 들기 때문입니다.

또한 제작 과정 이미지는 핸드메이드란 장점과 전문성도 느낄 수 있게 하는 요소 중의 하나입니다.

 

6. 동영상

동영상은 사진과 글 설명으로 부족한 제품 정보를 고객들에게 제공 할 수 있습니다.

영상 제공은 고객의 상품에 대한 이해를 돕고 사진으로 알 수 없었던 궁금한 점이 해결될 수 있기 때문에 

구매로 전환될 수 있는 요소가 됩니다.

의류의 신축성 정도나 DIY 가구의 조립 방법 등도 동영상 표현이 좀 더 효과적일 수 있겠죠?

 

상품을 직접 보지 못하고 구매하는 고객들을 위해 어떻게 하면 이미지로 상품 표현을 잘 할 수 있을지 생각해 보시기 바랍니다.

 

 

읽기 편한 상세페이지 꾸미기

 

스마트스토어에 등록한 상세 페이지 이미지는 사용하는 기기에 맞게 리사이즈되어 보입니다.

모바일에 최적화된 상품 상품 상세 페이즐 만들어야 합니다.

스마트에디터에 등록하는 상세 페이지 제작 방식은 HTML을 제외하면 크게 두가지가 있습니다.

 

완성한 한 장의 파일을 등록하는 방식(통이미지 방식) 과 직접 낱장의 이미와 텍스트를 입력하는 방식(블로그 방식)입니다.

스마트스토어의 가로 권장 사이즈는 860픽셀이고 세로 권장 사이즈는 따로 없습니다.

세로의 길이는 제품 내용에 따라 짧아지기도 하기 때문입니다.

너무 긴 이미지는 모바일 페이지 부적합니다. 용량이 커서 로딩 속도가 늦어지는 원인이 되기도 하기 때문입니다.

 

모바일 최적화 상세 페이지를 만들려면 권장 사이즈(가로 860픽셀)를 지키고 짧은 길이의 이미지(낱장의 이미지)를 나누어 등록하는 것이 좋습니다.

 

작은 모바일 화면을 고려해서 상세 페이지의 가록 폭을 최대한 활용하는 것이 좋습니다.

네이버 나눔고딕 30사이즈 보다 작아질 경우 모바일에서는 가독성이 떨어질 수 있기 때문에

포토샵에서 작성해서 등록하는 경우에는 모바일 화면을 고려하여 너무 작은 사이즈의 텍스트는 사용하지 않도록 합니다.

 

스마트에디터 ONE에서는 모바일 자동 맞춤 가능 합니다.

텍스트는 되도록 스마트 에디터ONE에서 직접 작성하는 것을 권장합니다.

문제는 모바일에 맞게 텍스트가 리사이즈되면서 줄 바꿈이 PC와는 다르다는 점입니다.

스마트에디터에서 중앙정렬로 작성하면 좋습니다.

이미지 2단 구성은 피하는게 좋습니다.

 

 

네이버 비지니스 스쿨 스마트스토어 상세페이지 동영상 강의를 보면서 정리하였습니다.

네이버 비지니스 스쿨에 도움되는 여러가지 강의가 있습니다. 저 처럼 처음 입문하시는 분들은 한번씩이라도 보시면 도움이 될것 같습니다.

 

보기만 하면 잊어버려서 저처럼 보시면서 정리하시면 더 도움이 될것 같습니다.