[ 본강의 12일차 ] 망고보드로 상세페이지 만들기

 

Chapter 3. 상세페이지 만들기

 

1. 상세페이지 3초 법칙

3초안에 "이 페이지를 읽을지 말지 결정"
매력적이게 보일 수 있는 걸 상단에 보여줘야한다.

1) 강조형

: 특징, 장점
: 가격!, 편리! 휴대!

2) 공감형

: 어려움, 아쉬운 부분을 해결주는 것
: 1주일만에 검은머리 됩니다

 

3) 후기형

​: 타인의 사용기를 상단에 노출

 

 

2. 상세페이지 형태

1) 이미지 - 텍스트 - 이미지 - 텍스트

스마트 스토어 (개인 쇼핑몰)에서 주로 사용
블로그 형태
* 장점 : 노출이 잘된다. 텍스트는 검색엔진에서 노출이 잘된다.

2) 이미지 + 이미지

이미지 사이즈가 적어서 로딩 시간이 단축된다는 장점이 있다.
모바일에서 최대 빠르게 업로드하려면 추천

 

3) 이미지

지마켓같은 오픈마켓에서는 하나로 합쳐서 통으로 올려야한다.

 

 

3. 상세페이지 구성

 

1) 제품이름

2) 제품 소개

3) 제품 특징
어떤 부분이 좋습니다

4) 대상 고객
어떤 부분에게 필요합니다
타겟층 명시

5) 고객 후기

6) 배송안내

 

4. 상세페이지 사이즈

 

가로사이즈 먼저 설정하기!
세로사이즈에 제한이 거의 없다.
고객이 설득될만한 상품 설명 충분히 해도된다.

망고보드에서 860 -> 780으로 사이즈 변경 가능하다

 

5. 상세페이지 실습

플랫폼을 이용해서 내용을 제외하고 변경하기

 

1. 톤, 컬러

 

2. 샤인머스캣 -> 베이글

디자인 템플렛

 

1) "디자인 템플릿"으로 들어가기
=> 용도별
=> 상세페이지
=> 슬라이드 수 확인
=> 세트로 불러오기
=> 크기변경

2) 베이글 느낌 내는 컬러톤
=> 상품 이미지를 먼저 넣고 그 다음에 서브 컬러를 바꾸기를 추천한다
=> 배경 제거 + 외곽선 (흰색 - 두께)
=> 베이글 명확하게 보여줄 수 있다
=> 스포이드로 베이글을 선택한다. 배경을 베이글 색으로 하면 자연스럽다.
=> "같은 색상 모두 변경" 체크하면 같은 색깔의 모든 컬러가 변경된다. 
=> 한 번 선택한 컬러를 여러 개 바꾸고 통일감을 줄 수 있다.

3) 이미지

비슷한 요소 찾기, 요소 교체

=> 사진 - 비슷한 요소 찾기 - 찢어진 다꾸, 메모장 등 비슷한 키워드가 나옴
아니면 이미지를 눌러 "요소교체 누르기"
=> 찢어진 종이대신 다른 찢어진 종이를 검색
=> 사진(비트맵), 아이콘(백터이미지) 
=> 베이글 투명사진 -> 배경 제거 버튼 눌러서 -> 외곽선 넣어주기

4) 글 구성
명품 과일, 샤인머스켓 => 단백질 100%, 마이 베이글


5) 저장
=> 제목 저장
=> 다운로드
=> JPG
=> 전체 슬라이드 (스마트 스토어) 
OR 한장으로 합치기 (오픈 마켓) (간격 색상, 슬라이드 간격 선택 X )
=> 다운로드

 

 

 

6. 와디즈 벤치마킹

벤치마킹 가능하다

너무 GIF 많이 넣으면 복잡하지만 트렌드!
GIF 짧은 영상으로, 
내 상품이 어떻게 쓰고, 어떤 효과가 있는지!
짧은 영상처럼 보여주는 게 필요하다.


작동 방법
움직임
표정

7. GIF / 영상 담기

1) 업로드
프로에는 가능하지만 일반 계정에서는 어렵다.

2) 아니면 망고보드 지원 영상
검색 -> 빵 -> 영상 클릭 -> 끌어와서 프레임에 넣기
움직이는 GIF 넣으려면 시간 조절 필요
영상이 12초라면 이 프레임에서 12초간 보여질 수 있도록 설정해야한다.

 

 

동영상 모션 설정

* "동영상/모션 설정"클릭
=> 애니메이션 적용 안함
=> 세트효과
=> 슬라이드 이동 전 머무는 시간 "10초"로 설정하면 10초간 볼 수 있는 움짤이 된다.
=> 다운로드시 전체 슬라이드가 아니라 "2번 슬라이드"만 다운로드하면 GIF가 들어간 이미지가 따로 저장된다.
=> 기존 이미지중 2번째 지워서
JPG -> GIF -> JPG로 구성하기

 

 

 

 

 

< 블로그 챌린지 >

 

 

 

 

[01]

​

강의 내용(망고보드)을 기반으로

내 상품, 서비스 상세페이지

제작해보기