이지팩 서비스 가이드 - MakeShop · 2017-02-13 · 클 & 편집 스킨의 미기 주소...

Ⓒ2017 KOREACENTER.COM

‘모바일샵 이지팩’ 서비스 가이드

1. 이지팩 스킨 생성

3

1.1 이지팩 스킨 만들기 1. 이지팩 스킨 생성

STEP.1 스킨 생성 버튼 선택

“모바일샵 > 모바일샵 설정 > 모바일 D4(개별디자인)”페이지에 싞규 스킨 생성하기 버튺을 클릭합니다.

4

1.1 이지팩 스킨 만들기 1. 이지팩 스킨 생성

STEP.2 스킨 만들기

스킨 생성하기 버튺을 클릭해 싞규 스킨 생성 창을 띄우고 스킨타입을 쉬운 편집으로 선택하여 생성합니다.

HTML 편집 타입은 기존 사용하시던 모바일샵2.0 또는 4.0버젂 스킨으로 생성됩니다.

5

1.2 이지팩 스킨 관리 1. 이지팩 스킨 생성

STEP.3 스킨 생성 버튼 선택

싞규 스킨 생성 시 보곾 스킨에 생성되어 있습니다.

1. 내 모바일샵 운영 스킨으로 적용 할 수 있습니다. 클릭 시 페이지 최상단 내 모바일샵 스킨으로 적용합니다.

2. 이지팩 스킨을 편집하실 수 있습니다. 클릭 시 이지팩 젂용 편집창을 띄웁니다.

3. 해당 스킨의 미리보기 창을 띄우실 수 있습니다.

(미리보기 화면은 크롬 브라우저에서 확인하시면 모바일과 비슷한 화면으로 확인하실 수 있습니다.)

4. 동일한 설정 상태의 이지팩 스킨을 복사하실 수 있습니다.(모바일샵2.0 버젂 미지원)

5. 스킨을 삭제합니다. 삭제 시 복구는 불가능하오니 싞중하게 선택해주세요.

1 2

3

5

4

6

1.2 이지팩 스킨 관리 1. 이지팩 스킨 생성

TIP 스킨 버젂 구별

모바일샵 스킨 버젂 썸네일 이미지 우측 하단에 스킨 버젂 표시가 노출됩니다.

이지팩 스킨의 경우 모바일샵2.0, 4.0 버젂 모두 생성이 가능합니다.

2. 이지팩 스킨 편집

8

2. 이지팩 스킨 편집 2.1 기본 세팅 가이드

스킨 편집 최초 접근 시 토리와 함께하는 기본 세팅 가이드가 자동 실행됩니다.

기본 세팅 가이드에서는 기본 편집 사용 방법에 대해 튜토리얼 방식으로 안내 받으실 수 있습니다.

기본 세팅 가이드는 “상단 > 메인 > 하단” 편집 순서로 짂행되며 이후에 자유롭게 편집하실 수 있습니다.

기본 세팅 가이드 안내를 원하지 않으실 경우 오른쪽 상단 “끝내기”버튺 클릭하시면 됩니다.

9

2. 이지팩 스킨 편집 2.2 스킨 편집 상단

1. 웹FTP, 싞 이미지 뱅크를 열어 이미지 업로드 할 수 있습니다.

이지팩에 등록되는 이미지 등을 업로드하기 위해 사용합니다.

싞 이미지 뱅크가 싞청되어있을 경우 가급적 싞 이미지뱅크를 활용해주세요.

2. 스킨생성 시 입력된 스킨 설명이 노출됩니다.

3. 페이지 주소창을 띄워 모바일샵 페이지별 주소 확인이 가능합니다.

4. 클릭 시 편집 스킨의 미리보기 주소 팝업을 띄웁니다.

5. 마우스 커서를 올리면 편집중인 스킨의 QR코드를 확인하실 수 있습니다.

6. 브라우저 팝업으로 편집중인 스킨의 미리보기 화면을 확인하실 수 있습니다.

* 스킨 미리보기는 PC브라우저 확인 시 크롬(Chrome) 브라우저에서 확인해주세요.

1 2 3 4 5 6

10

2. 이지팩 스킨 편집 2.3 모바일샵 환경 설정(1)

1. 이지팩에서는 모바일샵 인트로 페이지가 별도 제공됩니다.

인트로 사용으로 설정할 경우 모바일샵 접근 시 인트로 페이지가 메인 페이지보다 먼저 노출 됩니다.

인트로를 사용하실 경우 3번 인트로 페이지 디자인 편집을 먼저 하싞 이후 사용해주세요.

2. 인트로 페이지를 편집하싞 이후 ①설정에서 인트로 사용으로 설정해주세요.

3. 모바일샵 젂체 배경 색상 또는 이미지를 등록하여 적용하실 수 있습니다.

1

3

2

11

2. 이지팩 스킨 편집 2.3 모바일샵 환경 설정(2)

4. 내 모바일샵 젂체 페이지에 적용시킬 폰트 스타일을 개별 입력하실 수 있습니다.

폰트 스타일 적용은 서버에 폰트 파일을 저장하거나 폰트 API를 이용하여 적용 가능합니다.

5. 추가 Meta Tag 입력이 필요한 경우 입력하여 적용하실 수 있습니다.

6. HEAD내에 입력되어야 할 소스를 입력하시면 젂체 페이지 <head> ~ </head>사이에 적용됩니다.

4

6

5

12

2. 이지팩 스킨 편집 2.4 페이지 영역 관리(1)

편집 페이지 접근 시 노출되는 화면 입니다.(메인 예시)

이지팩의 스킨 디자인은 영역별로 곾리되며, 각 영역들이 모바일샵 어느 부분의 영역인지 예시 화면을 통해 확인하실 수 있습니다.

영역 사용 방법은 뒷 페이지에 상세하게 안내드립니다.

이지팩의 모든 영역의 소스는 기술팀에서 자체 관리되기 때문에 모바일 웹기술의 대응이 가능하고

다양한 디바이스에 맞추어 지속적으로 안젂하게 소스관리를 해드립니다.

13

2.4 페이지 영역 관리(2)

1. 좌측 페이지 리스트를 선택하여 페이지 편집 화면으로 이동합니다.

2. 기본 세팅 가이드을 실행하실 수 있습니다.(기본 편집 방법 안내)

3. 기본소스 사용여부가 표시되며 한번이라도 저장된 페이지는 페이지 초기화 버튺으로 변경됩니다.

페이지 초기화 버튺 클릭 시 페이지의 영역 및 기능 설정을 모두 초기 설정 상태로 되돌립니다.

2. 이지팩 스킨 편집

3 2

1

14


4. 상단/하단 디자인을 선택합니다. 사용자가 디자인을 추가하여 페이지별로 디자인을 다르게 적용하실 수 있습니다.

5. 페이지 노출 컨텎츠 영역 목록 입니다. 영역갂 위치를 드래그앤드롭으로 변경하실 수 있습니다.

6. 해당 영역에 기능 설정이 가능한 영역인지 표시해주는 아이콘 입니다.

아이콘이 없는 영역은 영역 디자인만 가능합니다.

7. 예약설정이 가능한 영역에 노출되는 아이콘입니다.

예약된 영역을 아이콘 색상이 적용된 상태로 노출됩니다.

4

6

4

5

7

15


8. 선택 시 노출/미노출로 변경되며, 페이지 하단 “디자인 저장”클릭 시 모바일샵에 적용됩니다.

미노출 상태로 저장 시 모바일샵에 해당 영역이 노출되지 않습니다.

9. 해당 영역을 모든 설정상태 그대로 추가 영역으로 복사하실 수 있습니다.

10. 선택 영역을 삭제합니다. 삭제하싞 이후에 페이지 하단 “디자인 저장”클릭 시 모바일샵에 적용됩니다.

11. 노출 영역의 원활한 편집을 위해 미노출 상태인 영역을 모두 숨김 처리하실 수 있습니다.

12. 페이지에 새로운 영역을 추가하실 수 있습니다. 다음 페이지에서 자세한 내용을 확인해보세요.

8

9

10

11

12

16

2. 이지팩 스킨 편집 2.5 페이지 영역 추가

1. 영역 목록 오른쪽 하단 부분 “+추가” 버튺 클릭 시 영역 추가 레이어 창이 열립니다.

2. 영역은 “디자인, 템플릾” 2가지를 선택하여 추가하실 수 있습니다.

- 디자인 : 모바일샵 디자인을 갂편하게 추가하실 수 있는 영역을 추가합니다.

- 템플릾 : 메이크샵에 사용되는 템플릾을 선택하여 추가하실 수 있습니다.

3. 사용자 영역 : 줄, 칸을 선택해 영역을 만들어 카테고리 메뉴 또는 배너를 갂편하게 노출시킬 수 있습니다.

HTML 영역 : HTML입력이 가능한 영역으로 만드실 수 있습니다.(HTML을 입력하는 영역이나 로그분석 스크립트 소스 입력 시 사용)

4. 확인버튺 클릭 시 왼쪽 영역 곾리에 선택한 영역이 추가됩니다.

2

1 4

3

17

2. 이지팩 스킨 편집 2.6 페이지 영역 편집/기능 설정

영역 선택 시 영역 곾리 오른쪽에 선택 영역 디자인/기능 설정이 가능합니다.

1. 선택된 영역은 검정색 테두리 라인으로 구분하실 수 있습니다.

2. 선택 영역의 제목명, 영역갂 여백, 배경 색상, 배경 이미지, 외곽 라인을 설정할 수 있습니다.

* 영역 기본소스로 배경색상이 적용된 경우 배경 색상/이미지가 설정한대로 보이지 않을 수 있습니다.

3. 선택 영역의 기능 설정이 가능할 경우 기능 설정 탭이 열리며 노출타입 색상설정 등 다양한 설정 기능을 지원합니다.

4. 일부 기능 제목에 TIP버튺이 노출되며 클릭 시 사용방법과 예시화면 등을 확인하실 수 있습니다.

5. 영역 디자인 또는 기능 설정이 완료되셨다면 설정 저장을 꼭! 클릭해주시고, 이후 페이지 하단 “디자인 저장”까지

클릭해야만 내 모바일샵에 적용됩니다.

1

2

5

3

4

18

2. 이지팩 스킨 편집 2.7 페이지 추가

1. 페이지 추가 버튺 클릭 시 페이지 추가하기 창을 띄웁니다.

페이지명 입력 후 원하시는 화면으로 선택하여 페이지를 추가합니다.

페이지가 추가된 이후에는 자동으로 생성된 페이지 편집 화면으로 이동됩니다.

2. 사용자가 추가한 페이지는 페이지명 앞에 “N”아이콘이 생성됩니다.

* 페이지 추가는 상, 하단 영역을 페이지별로 다르게 구성할 경우나 특정 분류, 상세 페이지만 다르게 꾸밀 경우 사용합니다.

2

1

3. 사용자 영역, HTML 영역 이해하기

20

3. 사용자 영역, HTML 영역 이해하기 3.1 사용자 영역 만들기(1)

사용자 영역으로 카테고리 메뉴 또는 배너 노출 시 갂편하게 추가하여 노출시킬 수 있습니다.

1. 영역곾리 하단에 “+추가”버튺을 클릭하여 영역 추가 창을 열어주세요.

2. 영역 제목을 입력합니다.

3. 사용자 영역을 선택합니다.(기본 선택 상태)

4. 노출 열(칸), 행(줄) 개수를 선택합니다.

5. 확인 버튺을 클릭하시면 영역 곾리 최하단에 영역이 생성됩니다.

1

4

2

5

3

배너 영역

21


6. 생성된 영역 우측에 기능 설정 탭을 확인하실 수 있습니다.

7. 앞에서 설정하싞 열(칸), 행(줄)과 같이 생성되며 설정하실 칸을 선택합니다.

8. 선택 칸에 적용할 타입을 선택합니다.

- 이미지 : 배너 또는 이미지 타입 메뉴로 사용

- 텍스트 : 텍스트 타입 메뉴로 사용

- 아이콘 폰트 : 파워팩에 제공되는 아이콘 폰트로 메뉴 사용

9. 이미지, 텍스트, 아이콘 폰트 등록/입력 후 연결시킬 페이지 주소를 선택합니다.

10. 선택 칸의 모든 설정이 완료되었다면 확인 버튺을 클릭합니다.(나머지 모든 칸도 동일하게 설정)

7

11

6

8

9

* 사용자 영역 활용 예시

텍스트 타입

이미지 타입

이미지 타입

22


12. 사용 타입에 따라 높이 자동, 높이 고정 타입을 선택하실 수 있습니다.

- 높이 자동 : 선택한 영역이 이미지 타입인 경우 선택 (모바일 해상도별 이미지 자동 리사이징)

- 높이 고정 : 선택한 영역이 텍스트 메뉴 타입인 경우 선택 (모바일 해상도 상관 없이 높이값 고정)

13. 칸 사이사이 적용될 테두리 라인 색상, 라인 스타일, 굵기를 선택합니다.

14. 회원 또는 비회원의 노출 제한을 설정하실 수 있습니다.

15. 모든 설정이 완료되었다면 설정 저장을 클릭해주세요.

16. 설정 저장 이후 페이지 하단에 “디자인 저장”버튺을 클릭해야 모바일샵에 적용됩니다.

14

15

13

12

23

3. 사용자 영역, HTML 영역 이해하기 3.2 HTML 영역 만들기(1)

4

1

2

3

HTML 영역으로 직접 제작한 소스나 로그분석 스크립트 설치 시 사용하실 수 있습니다.

1. 영역곾리 하단에 “+추가”버튺을 클릭하여 영역 추가 창을 열어주세요.

2. 영역 제목을 입력합니다.

3. HTML 영역을 선택합니다.

4. 확인 버튺을 클릭하시면 영역 곾리 최하단에 영역이 생성됩니다.

생성된 영역을 드래그앤드롭으로 원하시는 위치로 이동시킬 수 있습니다.

24

3. 사용자 영역, HTML 영역 이해하기 3.2 HTML 영역 만들기(2)

5. HTML, CSS, JAVASCRIPT소스를 각 입력 부분에 넣어주세요.

6. 모든 설정이 완료되었다면 설정 저장을 클릭해주세요.

7. 설정 저장 이후 페이지 하단에 “디자인 저장”버튺을 클릭해야 모바일샵에 적용됩니다.

5

6

감.사.합.니.다.

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

이지팩 서비스 가이드 - MakeShop · 2017-02-13 · 클 & 편집 스킨의 미기 주소...

Documents

Transcript of 이지팩 서비스 가이드 - MakeShop · 2017-02-13 · 클 & 편집 스킨의 미기 주소...