Embed Size (px)
Citation preview
Ⓒ2017 KOREACENTER.COM
‘모바일샵 파워팩 시즌2’
서비스 가이드
2 목 차
1. 모바일샵 파워팩 소개
1.1 모바일샵 파워팩이란?
2. 파워팩 스킨 관리
2.1 파워팩 스킨 만들기
2.2 만든 스킨 관리하기
2.3 초간단 스킨 백업
3. 파워팩 스킨 편집
3.1 스킨 편집 상단
3.2 모바일샵 환경 설정
3.3 페이지 영역 관리
3.4 페이지 영역 추가
3.5 페이지 영역편집/기능설정
3.6 페이지 추가
4. 파워팩 파워기능
4.1 파워기능이란?
4.1 파워기능 사용 방법
5. 사용자 영역, HTML영역 만들기
5.1 사용자 영역 만들기
5.2 HTML 영역 만들기
6. 파워팩 시즌2 추가기능
6.1 샵 꾸미기 사용방법
6.2 예약기능 사용방법
6.3 폰트 아이콘 지원
p. 4
p. 6~7
p. 8
p. 11
p. 12 ~ 13
p. 14 ~ 17
p. 18
p. 19
p. 20
p. 9
p. 31
p. 32
p. 33
p. 25 ~ 27
p. 28 ~ 29
p. 22
p. 23
1. 모바일샵 파워팩 소개
4
1) 메이크샵 기능 사용에 대한 걱정은 NO!
메이크샵 제공 기능을 적용하기 위해서는 HTML, CSS는 물론 메이크샵 가상태그 까지 알아야만 한다는 걱정은 이제 하실 필요 없습니다.
모바일샵에 적용 가능한 기능은 모두 파워팩 스킨에 세팅되어 간단 설정만으로 노출하실 수 있도록 지원됩니다.
2) 외부 위탁 없이 내 스스로 만든다!
디자인 수정 리뉴얼을 위해 외부 업체에 위탁하실 필요 없이 파워팩에서 제공되는 스킨 및 디자인 추가 기능을 활용하여 얼마든지
내 스스로 편집해도 판매되는 스킨 디자인 과 퀄리티 차이가 거의 없는 스킨으로 만드실 수 있습니다.
디자인 스킨은 계속 추가 될 예정이니 중간에 마음에 드시는 스킨이 있다면 디자인 리뉴얼도 원 클릭으로 가능하겠죠~!
3) 이벤트와 시즌별 다양한 스킨 세팅
파워팩은 최대 10개의 스킨 저장 환경을 제공합니다.
시즌별 또는 행사일에 따라 다양한 스킨을 세팅 및 보관하여 원하실때 한번의 클릭으로 내 운영중인 모바일샵 스킨으로 변경하실 수 있습니다.
또한 원 클릭 스킨 백업 기능이 지원되어 언제든 안전하게 수정 작업이 가능합니다.
4) 스크립트 제작 비용을 들이실 필요 없습니다.
상품이나 이미지 배너 스와이프 동작 등을 구현하기 위해 제작 비용을 들이지 마세요.
메이크샵 파워팩에서는 이러한 기능을 간단한 설정만으로 사용하실 수 있도록 제공됩니다.
파워팩을 사용하면서 누릴 수 있는 것
1.1 모바일샵 파워팩이란?
• HTML을 모르더라도 메이크샵 기능 및 디자인 관련 노출 설정을 쉽고 편리하게 적용할 수 있는 모바일샵 디자인 관리 서비스 입니다.
파워팩이면 이제 모바일샵 디자인을 위해 외부 업체에 위탁하실 필요 없이 고 퀄리티의 모바일샵을 만드실 수 있도록 제공됩니다.
1. 모바일샵 파워팩 소개
2. 파워팩 스킨관리
6
2.1 파워팩 스킨 만들기 2. 파워팩 스킨관리
STEP.1 스킨 만들기 버튼 선택
파워팩 관리자 상단과 보관 스킨 목록에 스킨 만들기 텍스트 버튼을 선택합니다.
7
2.1 파워팩 스킨 만들기 2. 파워팩 스킨관리
STEP.2 디자인 스킨 선택
사용을 원하시는 디자인에 마우스 커서를 올리시면 선택 영역이 활성화되며,
“이 스킨으로 선택” 버튼을 클릭하고, 스킨 설명을 입력 하시면 스킨 생성이 완료됩니다.
혹시라도 선택한 스킨 색상이 내 쇼핑몰과 어울리지 않는다고 실망하지 마세요.
스킨 생성 이후 컬러피커 기능으로 다양한 색상으로 변경하실 수 있습니다.
http://ppon.net으로 접속하여 파워팩으로 제작된 디자인 스킨을
모바일 화면으로 확인하실 수 있습니다. QR코드 >>
8
2.2 만든 스킨 관리하기 2. 파워팩 스킨 관리
내 모바일샵 스킨 보관 스킨
파워팩 스킨은 내 모바일샵 스킨과 보관 스킨으로 나누어 관리가 가능합니다.
내 모바일샵 쇼핑몰에 적용된 디자인 스킨 입니다.
1. 1시간 이내에 내 모바일샵 편집 사용자(부운영자)를 확인합니다.
마우스 커서를 올리시면 사용자 확인이 가능합니다.
2. PC화면으로 내 모바일샵 화면을 확인하실 수 있습니다.
* 정확한 디자인 확인은 모바일로 확인해 주세요.
3. 내 모바일샵 스킨 디자인 편집 화면으로 이동됩니다.
4. 안전한 디자인 편집 작업을 위해 보관 스킨으로 복사하여 편집
작업 완료 후 내 모바일샵 스킨으로 적용하실 수 있습니다.
5. 미리보기 주소 입력이 불편하시다면 QR코드 보기를 스캔하여
스킨 미리보기가 가능합니다.
1
2
3
4 5
내 모바일샵 스킨 외에 다양한 스킨 저장을 위해 보관 스킨을 이용하실
수 있습니다. 보관스킨은 안전한 편집을 위해 활용하기도 합니다.
1. 현재 보관 스킨 사용 현황을 확인합니다.
앞의 숫자가 사용중인 스킨 개수이고, 뒤의 숫자는 사용 가능한
스킨 개수입니다.(최대 10개 까지 생성가능)
2. 디자인 스킨 관리 첫 화면에서는 보관 스킨이 2개만 노출되며
보관스킨 전체보기를 선택하여 전체 스킨 목록을 확인하실 수
있습니다.
3. 해당 보관 스킨을 내 모바일샵 스킨으로 적용하고자 하실 경우
내 모바일샵 디자인 적용 버튼을 클릭하여 변경하실 수 있습니다.
1
3
2
9
2.3 초간단 스킨 백업 2. 파워팩 스킨 관리
내 모바일샵 스킨의 안전한 편집 작업을 위해 초간단 백업 시스템이 제공됩니다.
내 모바일샵 스킨 오른쪽 상단 스킨 백업하기 버튼을 클릭하시면 백업스킨정보에 내 모바일샵 스킨이 백업됩니다.
스킨 편집 작업 중 잘못된 수정으로 복구해야 할 경우를 위해 작업하기 전 미리 백업을 해주시면 좋습니다.
원 클릭으로 간단하게 백업하고 바로 편집 버튼을 클릭하여 스킨 편집이 가능하시니 편집작업 전 백업해두는 습관을
들이시면 보다 안전한 편집이 가능합니다.
백업된 스킨으로 복구를 원하실 경우 보관스킨 추가 버튼을 클릭하여 보관스킨 추가 후 복구해야 할 스킨으로 판단되시면
내 모바일샵 디자인 적용 버튼을 선택하여 내 모바일샵 스킨으로 적용하실 수 있습니다.
3. 파워팩 스킨편집
11
3. 파워팩 스킨편집 3.1 스킨 편집 상단
1. 웹FTP, 신 이미지 뱅크를 열어 이미지 업로드 할 수 있습니다.
파워팩에 등록되는 이미지 등을 업로드하기 위해 사용합니다.
신 이미지 뱅크가 신청되어있을 경우 가급적 신 이미지뱅크를 활용해주세요.
2. 스킨생성 시 입력된 스킨 설명이 노출됩니다.
3. 페이지 주소창을 띄워 모바일샵 페이지별 주소 확인이 가능합니다.
4. 클릭 시 편집 스킨의 미리보기 주소 팝업을 띄웁니다.
5. 마우스 커서를 올리면 편집중인 스킨의 QR코드를 확인하실 수 있습니다.
6. 브라우저 팝업으로 편집중인 스킨의 미리보기 화면을 확인하실 수 있습니다.
* 스킨 미리보기는 PC브라우저 확인 시 크롬(Chrome) 또는 사파리(Safari) 브라우저에서 확인해주세요.
1 2 3 4 5 6
12
3. 파워팩 스킨편집 3.2 모바일샵 환경 설정(1)
1. 파워팩에서는 모바일샵 인트로 페이지가 별도 제공됩니다.
인트로 사용으로 설정할 경우 모바일샵 접근 시 인트로 페이지가 메인 페이지보다 먼저 노출 됩니다.
인트로를 사용하실 경우 3번 인트로 페이지 디자인 편집을 먼저 하신 이후 사용해주세요.
2. 인트로 페이지를 편집하신 이후 ①설정에서 인트로 사용으로 설정해주세요.
3. 모바일샵 전체 배경 색상 또는 이미지를 등록하여 적용하실 수 있습니다.
1
3
2
13
3. 파워팩 스킨편집 3.2 모바일샵 환경 설정(2)
4. 내 모바일샵 전체 페이지에 적용시킬 폰트 스타일을 개별 입력하실 수 있습니다.
폰트 스타일 적용은 서버에 폰트 파일을 저장하거나 폰트 API를 이용하여 적용 가능합니다.
5. 추가 Meta Tag 입력이 필요한 경우 입력하여 적용하실 수 있습니다.
6. HEAD내에 입력되어야 할 소스를 입력하시면 전체 페이지 <head> ~ </head>사이에 적용됩니다.
4
6
5
14
3. 파워팩 스킨편집 3.3 페이지 영역 관리(1)
편집 페이지 접근 시 노출되는 화면 입니다.(메인 예시)
파워팩의 스킨 디자인은 영역별로 관리되며, 각 영역들이 모바일샵 어느 부분의 영역인지 예시 화면을 통해 확인하실 수 있습니다.
영역 사용 방법은 뒷 페이지에 상세하게 안내드립니다.
파워팩의 모든 영역의 소스는 기술팀에서 자체 관리되기 때문에 모바일 웹기술의 대응이 가능하고
다양한 디바이스에 맞추어 지속적으로 안전하게 소스관리를 해드립니다.
15
3.3 페이지 영역 관리(2)
좌측 페이지 리스트를 선택하여 페이지 편집 화면으로 이동합니다.
1. 선택 페이지에서 사용가능한 파워기능 개수를 확인하실 수 있으며, 보기버튼 클릭 시 파워기능 목록 확인이 가능합니다.
2. 페이지 속도 그래프 입니다. 파워기능이 추가될 경우 기능 빨강 영역이 늘어납니다.(파랑 : 속도 / 빨강 : 기능)
어려 개의 기능 추가로 빨강 영역이 늘어날수록 모바일 웹 페이지 속도가 느려질 수 있습니다.
3. 기본소스 사용여부가 표시되며 한번이라도 저장된 페이지는 페이지 초기화 버튼으로 변경됩니다.
페이지 초기화 버튼 클릭 시 페이지의 영역 및 기능 설정을 모두 초기 설정 상태로 되돌립니다.
3. 파워팩 스킨편집
1
3 2
16
3. 파워팩 스킨편집 3.3 페이지 영역 관리(3)
4. 상단/하단 디자인을 선택합니다. 사용자가 디자인을 추가하여 페이지별로 디자인을 다르게 적용하실 수 있습니다.
5. 페이지 노출 컨텐츠 영역 목록 입니다. 영역간 위치를 드래그앤드롭으로 변경하실 수 있습니다.
6. 해당 영역에 기능 설정이 가능한 영역인지 표시해주는 아이콘 입니다. 아이콘이 없는 영역은 영역 디자인만 가능합니다.
7. 해당 영역이 파워기능으로 추가된 영역일 경우 표시됩니다.
아이콘에 마우스 오버 시 해당 파워기능명을 확인하실 수 있습니다.
8. 예약설정이 가능한 영역에 노출되는 아이콘입니다.
4
6
4
5
7
8
17
3. 파워팩 스킨편집 3.3 페이지 영역 관리(4)
9. 선택 시 노출/미노출로 변경되며, 페이지 하단 “디자인 저장”클릭 시 모바일샵에 적용됩니다.
미노출 상태로 저장 시 모바일샵에 해당 영역이 노출되지 않습니다.
10. 해당 영역을 모든 설정상태 그대로 추가 영역으로 복사하실 수 있습니다.
11. 선택 영역을 삭제합니다. 삭제하신 이후에 페이지 하단 “디자인 저장”클릭 시 모바일샵에 적용됩니다.
12. 노출 영역의 원활한 편집을 위해 미노출 상태인 영역을 모두 숨김 처리하실 수 있습니다.
13. 페이지에 새로운 영역을 추가하실 수 있습니다. 다음 페이지에서 자세한 내용을 확인해보세요.
9
10
11
12
13
18
3. 파워팩 스킨편집 3.4 페이지 영역 추가
1. 영역 목록 오른쪽 하단 부분 “+추가” 버튼 클릭 시 영역 추가 레이어 창이 열립니다.
2. 영역은 “디자인, 파워기능, 템플릿” 3가지를 선택하여 추가하실 수 있습니다.
- 디자인 : 모바일샵 디자인을 간편하게 추가하실 수 있는 영역을 추가합니다.
- 파워기능 : 쇼핑객의 시선을 사로잡을 수 있는 다양한 효과의 기능을 선택하여 추가하실 수 있습니다.
- 템플릿 : 메이크샵에 사용되는 템플릿을 선택하여 추가하실 수 있습니다.
3. 확인버튼 클릭 시 왼쪽 영역 관리에 선택한 영역이 추가됩니다.
2
1 3
19
3. 파워팩 스킨편집 3.5 페이지 영역 편집/기능 설정
영역 선택 시 영역 관리 오른쪽에 선택 영역 디자인/기능 설정이 가능합니다.
1. 선택된 영역은 검정색 테두리 라인으로 구분하실 수 있습니다.
2. 선택 영역의 제목명, 영역간 여백, 배경 색상, 배경 이미지, 외곽 라인을 설정할 수 있습니다.
* 영역 기본소스로 배경색상이 적용된 경우 배경 색상/이미지가 설정한대로 보이지 않을 수 있습니다.
3. 선택 영역의 기능 설정이 가능할 경우 기능 설정 탭이 열리며 노출타입 색상설정 등 다양한 설정 기능을 지원합니다.
4. 일부 기능 제목에 TIP버튼이 노출되며 클릭 시 사용방법과 예시화면 등을 확인하실 수 있습니다.
5. 영역 디자인 또는 기능 설정이 완료되셨다면 설정 저장을 꼭! 클릭해주시고, 이후 페이지 하단 “디자인 저장”까지
클릭해야만 내 모바일샵에 적용됩니다.
1
2
5
3
4
20
3. 파워팩 스킨편집 3.6 페이지 추가
1. 페이지 추가 버튼 클릭 시 페이지 추가하기 창을 띄웁니다.
페이지명 입력 후 원하시는 화면으로 선택하여 페이지를 추가합니다.
페이지가 추가된 이후에는 자동으로 생성된 페이지 편집 화면으로 이동됩니다.
2. 사용자가 추가한 페이지는 페이지명 앞에 “N”아이콘이 생성됩니다.
* 페이지 추가는 상, 하단 영역을 페이지별로 다르게 구성할 경우나 특정 분류, 상세 페이지만 다르게 꾸밀 경우 사용합니다.
1
2
4. 파워팩 파워기능
22
파워기능이란?
4.1 파워기능이란?
복잡한 스크립트 동작으로 이루어진 컨텐츠를
별도 제작 없이 간편하게 설정하여 내 모바일샵
에 적용시킬 수 있도록 만들어진 기능입니다.
파워기능은 상품 목록, 이미지 배너 등을 보다
재미있게 노출시켜 클릭율을 높이실 수 있을
뿐만 아니라 상품 매출을 증가시키기 위한 기능
도 업그레이드 되고있습니다.
다른 모바일샵의 기능, 이제 부러워마시고
내 모바일샵에도 적용해보세요~!
4. 파워팩 파워기능
23
4.2 파워기능 사용 방법 4. 파워팩 파워기능
1. 편집화면 오른쪽상단 “사용 가능한 파워기능”의
보기 버튼을 클릭합니다.
2. 파워기능 리스트에 사용을 원하시는 기능을 선택
합니다.
3. 파워기능 영역의 제목을 입력합니다.
4. 선택한 파워기능 사용 버튼 클릭 시 영역 관리에
기능 영역이 추가 생성됩니다.
1
2
3
4
5. 사용자 영역, HTML 영역 만들기
25
5. 사용자 영역, HTML 영역 이해하기 5.1 사용자 영역 만들기(1)
사용자 영역으로 카테고리 메뉴 또는 배너 노출 시 간편하게 추가하여 노출시킬 수 있습니다.
1. 영역관리 하단에 “+추가”버튼을 클릭하여 영역 추가 창을 열어주세요.
2. 영역 제목을 입력합니다.
3. 사용자 영역을 선택합니다.(기본 선택 상태)
4. 노출 열(칸), 행(줄) 개수를 선택합니다.
5. 확인 버튼을 클릭하시면 영역 관리 최하단에 영역이 생성됩니다.
1
4
2
5
3
배너 영역
26
5. 파워팩 시즌2 추가기능 5.1 사용자 영역 만들기(2)
6. 생성된 영역 우측에 기능 설정 탭을 확인하실 수 있습니다.
7. 앞에서 설정하신 열(칸), 행(줄)과 같이 생성되며 설정하실 칸을 선택합니다.
8. 선택 칸에 적용할 타입을 선택합니다.
- 이미지 : 배너 또는 이미지 타입 메뉴로 사용
- 텍스트 : 텍스트 타입 메뉴로 사용
- 아이콘 폰트 : 파워팩에 제공되는 아이콘 폰트로 메뉴 사용
9. 이미지, 텍스트, 아이콘 폰트 등록/입력 후 연결시킬 페이지 주소를 선택합니다.
10. 선택 칸의 모든 설정이 완료되었다면 확인 버튼을 클릭합니다.(나머지 모든 칸도 동일하게 설정)
7
11
6
8
9
* 사용자 영역 활용 예시
텍스트 타입
이미지 타입
이미지 타입
27
5. 파워팩 시즌2 추가기능 5.1 사용자 영역 만들기(3)
12. 사용 타입에 따라 높이 자동, 높이 고정 타입을 선택하실 수 있습니다.
- 높이 자동 : 선택한 영역이 이미지 타입인 경우 선택 (모바일 해상도별 이미지 자동 리사이징)
- 높이 고정 : 선택한 영역이 텍스트 메뉴 타입인 경우 선택 (모바일 해상도 상관 없이 높이값 고정)
13. 칸 사이사이 적용될 테두리 라인 색상, 라인 스타일, 굵기를 선택합니다.
14. 회원 또는 비회원의 노출 제한을 설정하실 수 있습니다.
15. 모든 설정이 완료되었다면 설정 저장을 클릭해주세요.
16. 설정 저장 이후 페이지 하단에 “디자인 저장”버튼을 클릭해야 모바일샵에 적용됩니다.
14
15
13
12
28
5. 사용자 영역, HTML 영역 이해하기 5.2 HTML 영역 만들기(1)
HTML 영역으로 직접 제작한 소스나 로그분석 스크립트 설치 시 사용하실 수 있습니다.
1. 영역관리 하단에 “+추가”버튼을 클릭하여 영역 추가 창을 열어주세요.
2. 영역 제목을 입력합니다.
3. HTML 영역을 선택합니다.
4. 확인 버튼을 클릭하시면 영역 관리 최하단에 영역이 생성됩니다.
생성된 영역을 드래그앤드롭으로 원하시는 위치로 이동시킬 수 있습니다.
4 1
2
3
HTML 영역
29
5. 사용자 영역, HTML 영역 이해하기 5.2 HTML 영역 만들기(2)
5. HTML, CSS, JAVASCRIPT소스를 각 입력 부분에 넣어주세요.
6. 모든 설정이 완료되었다면 설정 저장을 클릭해주세요.
7. 설정 저장 이후 페이지 하단에 “디자인 저장”버튼을 클릭해야 모바일샵에 적용됩니다.
5
6
6. 파워팩 시즌2 추가기능
31
6. 파워팩 시즌2 추가기능 6.1 샵 꾸미기 사용방법
파워팩 시즌2에서 새롭게 선보이는 샵 꾸미기로 내 모바일샵을 평생 무료로 꾸며보세요! (샵 꾸미기는 주기적으로 업데이트 됩니다)
1. 영역관리 하단에 “+추가”버튼을 클릭하여 영역 추가 창을 열어주세요.
2. 영역 제목을 입력합니다.
3. 샵 꾸미기 버튼을 선택하신 후(기본 선택 상태) 디자인 선택하기 버튼을 클릭해주세요.
4. 사용하실 디자인을 선택합니다. 디자인 선택 창 상단에서 특정 카테고리 디자인 리스트만 검색 하실 수 있습니다.
5. 디자인을 선택하셨다면 “선택하기”버튼을 클릭해주시면 3번 디자인 선택하기 버튼 왼쪽으로 선택한 디자인 이미지가 적용됩니다.
6. 선택 디자인을 확인하신 후 “확인”버튼을 클릭하시면 왼쪽 영역 관리의 영역 리스트 하단에 디자인 영역이 생성됩니다.
기능설정이 가능한 샵 꾸미기 영역일 경우 원하시는 설정으로 선택 후 “설정 저장 > 디자인 저장”버튼을 클릭하시면 내 모바일샵에
적용됩니다.
1
3
4
5
2
6
32
6. 파워팩 시즌2 추가기능 6.2 예약기능 사용방법
파워팩은 단순 디자인, 기능뿐만 아니라 매출 향상에 도움을 드릴 수 있는 다양한 마케팅 툴로 활용할 수 있는 기능도 지원합니다~!
일시적 이벤트나 기간할인을 활용한 핫딜 상품 등을 노출시키고자 하실 경우 예약 기능을 활용해보세요!
1. 예약 설정이 가능한 영역에는 시계 모양의 회색 아이콘이 노출됩니다.
2. 영역을 선택하고 오른쪽 기능설정 탭에서 “노출 예약 설정”을 사용함으로 선택하시면 원하시는 노출기간, 요일, 시간 설정이 가능
합니다.
- 선택 기간 노출 : 원하는 기간 동안 지속적으로 노출시킬 수 있는 옵션입니다.
- 특정 시간 노출 : 원하는 기간 내에 특정 시간만 노출시킬 수 있는 옵션입니다.
노출 예약 설정은 처리 과정에서 약 5분 정도 노출/미노출 처리가 지연될 수 있습니다.
1
2
33
6. 파워팩 시즌2 추가기능 6.3 폰트 아이콘 지원
파워팩 시즌2 부터 어떤 모바일 디바이스에서도 깨짐없이 깔끔한 디자인을 노출시킬 수 있는 폰트 아이콘을 지원합니다.
아래 사용방법은 직접 등록시 할 수 있는 방법이구요. 앞으로 파워팩 시즌2에 아이콘 폰트로 적용되는 디자인은 사용자가 원하는 디자인
으로 마음껏 변경이 가능하답니다.
1. 영역관리 하단에 “+추가”버튼을 클릭하여 영역 추가 창을 열어주세요.
2. 영역 제목을 입력합니다.
3. 사용자 영역 버튼을 선택하고 노출 개수를 선택해주세요.
(사용자 영역을 사용하시면 메인에 노출되는 카테고리나 배너 이미지들을 노출 시킬 경우 간편하게 추가하실 수 있습니다.)
4. 칸을 선택하고 추가 타입에서 “아이콘 폰트”라디오 버튼 선택 후 아래 아이콘 선택 버튼을 클릭하시면 아이콘 폰트 선택 창이 열립니
다.
5. 원하시는 아이콘을 선택하신 후 확인 버튼을 클릭하시면 선택 아이콘 폰트로 사용하실 수 있습니다.
1
2
3
4
5
감.사.합.니.다.
http://www.makeshop.co.kr/ (주)코리아센터닷컴 사업자번호206-81-21131 통신판매 제 18-874호 기술혁신중소기업 제 6013-3084호 서울 금천구 가산동 371-28 우림라이온스밸리 A동 14층 대표 김기록 개인정보보호정책 및 담당 최승식 전화 02-2026-2300 메일 [email protected] Copyright(C) MakeShop. All Rights Reserved
