모바일샵이지팩 서비스가이드 C2017 KOREACENTER.COM
1. 이지팩스킨생성
1.1 이지팩스킨만들기 1. 이지팩스킨생성 3 STEP.1 스킨생성버튼선택 모바일샵 > 모바일샵설정 > 모바일 D4( 개별디자인 ) 페이지에싞규스킨생성하기버튺을클릭합니다.
1.1 이지팩스킨만들기 1. 이지팩스킨생성 4 STEP.2 스킨만들기 스킨생성하기버튺을클릭해싞규스킨생성창을띄우고스킨타입을쉬운편집으로선택하여생성합니다. HTML 편집타입은기존사용하시던모바일샵 2.0 또는 4.0 버젂스킨으로생성됩니다.
5 1.2 이지팩스킨관리 1. 이지팩스킨생성 STEP.3 스킨생성버튼선택 5 1 2 3 4 싞규스킨생성시보곾스킨에생성되어있습니다. 1. 내모바일샵운영스킨으로적용할수있습니다. 클릭시페이지최상단내모바일샵스킨으로적용합니다. 2. 이지팩스킨을편집하실수있습니다. 클릭시이지팩젂용편집창을띄웁니다. 3. 해당스킨의미리보기창을띄우실수있습니다. ( 미리보기화면은크롬브라우저에서확인하시면모바일과비슷한화면으로확인하실수있습니다.) 4. 동일한설정상태의이지팩스킨을복사하실수있습니다.( 모바일샵 2.0 버젂미지원 ) 5. 스킨을삭제합니다. 삭제시복구는불가능하오니싞중하게선택해주세요.
6 1.2 이지팩스킨관리 1. 이지팩스킨생성 TIP 스킨버젂구별 모바일샵스킨버젂썸네일이미지우측하단에스킨버젂표시가노출됩니다. 이지팩스킨의경우모바일샵 2.0, 4.0 버젂모두생성이가능합니다.
2. 이지팩스킨편집
2.1 기본세팅가이드 2. 이지팩스킨편집 8 스킨편집최초접근시토리와함께하는기본세팅가이드가자동실행됩니다. 기본세팅가이드에서는기본편집사용방법에대해튜토리얼방식으로안내받으실수있습니다. 기본세팅가이드는 상단 > 메인 > 하단 편집순서로짂행되며이후에자유롭게편집하실수있습니다. 기본세팅가이드안내를원하지않으실경우오른쪽상단 끝내기 버튺클릭하시면됩니다.
2.2 스킨편집상단 2. 이지팩스킨편집 9 1 2 3 4 5 6 1. 웹FTP, 싞이미지뱅크를열어이미지업로드할수있습니다. 이지팩에등록되는이미지등을업로드하기위해사용합니다. 싞이미지뱅크가싞청되어있을경우가급적싞이미지뱅크를활용해주세요. 2. 스킨생성시입력된스킨설명이노출됩니다. 3. 페이지주소창을띄워모바일샵페이지별주소확인이가능합니다. 4. 클릭시편집스킨의미리보기주소팝업을띄웁니다. 5. 마우스커서를올리면편집중인스킨의 QR코드를확인하실수있습니다. 6. 브라우저팝업으로편집중인스킨의미리보기화면을확인하실수있습니다. * 스킨미리보기는 PC브라우저확인시크롬 (Chrome) 브라우저에서확인해주세요.
2.3 모바일샵환경설정 (1) 2. 이지팩스킨편집 10 1 2 3 1. 이지팩에서는모바일샵인트로페이지가별도제공됩니다. 인트로사용으로설정할경우모바일샵접근시인트로페이지가메인페이지보다먼저노출됩니다. 인트로를사용하실경우 3번인트로페이지디자인편집을먼저하싞이후사용해주세요. 2. 인트로페이지를편집하싞이후 1설정에서인트로사용으로설정해주세요. 3. 모바일샵젂체배경색상또는이미지를등록하여적용하실수있습니다.
2.3 모바일샵환경설정 (2) 2. 이지팩스킨편집 11 4 5 6 4. 내모바일샵젂체페이지에적용시킬폰트스타일을개별입력하실수있습니다. 폰트스타일적용은서버에폰트파일을저장하거나폰트 API를이용하여적용가능합니다. 5. 추가 Meta Tag 입력이필요한경우입력하여적용하실수있습니다. 6. HEAD내에입력되어야할소스를입력하시면젂체페이지 <head> ~ </head> 사이에적용됩니다.
2.4 페이지영역관리 (1) 2. 이지팩스킨편집 12 편집페이지접근시노출되는화면입니다.( 메인예시 ) 이지팩의스킨디자인은영역별로곾리되며, 각영역들이모바일샵어느부분의영역인지예시화면을통해확인하실수있습니다. 영역사용방법은뒷페이지에상세하게안내드립니다. 이지팩의모든영역의소스는기술팀에서자체관리되기때문에모바일웹기술의대응이가능하고 다양한디바이스에맞추어지속적으로안젂하게소스관리를해드립니다.
2.4 페이지영역관리 (2) 2. 이지팩스킨편집 13 2 3 1 1. 좌측페이지리스트를선택하여페이지편집화면으로이동합니다. 2. 기본세팅가이드을실행하실수있습니다.( 기본편집방법안내 ) 3. 기본소스사용여부가표시되며한번이라도저장된페이지는페이지초기화버튺으로변경됩니다. 페이지초기화버튺클릭시페이지의영역및기능설정을모두초기설정상태로되돌립니다.
2.4 페이지영역관리 (3) 2. 이지팩스킨편집 14 4 5 6 4 7 4. 상단 / 하단디자인을선택합니다. 사용자가디자인을추가하여페이지별로디자인을다르게적용하실수있습니다. 5. 페이지노출컨텎츠영역목록입니다. 영역갂위치를드래그앤드롭으로변경하실수있습니다. 6. 해당영역에기능설정이가능한영역인지표시해주는아이콘입니다. 아이콘이없는영역은영역디자인만가능합니다. 7. 예약설정이가능한영역에노출되는아이콘입니다. 예약된영역을아이콘색상이적용된상태로노출됩니다.
2.4 페이지영역관리 (4) 2. 이지팩스킨편집 15 8 9 11 10 12 8. 선택시노출 / 미노출로변경되며, 페이지하단 디자인저장 클릭시모바일샵에적용됩니다. 미노출상태로저장시모바일샵에해당영역이노출되지않습니다. 9. 해당영역을모든설정상태그대로추가영역으로복사하실수있습니다. 10. 선택영역을삭제합니다. 삭제하싞이후에페이지하단 디자인저장 클릭시모바일샵에적용됩니다. 11. 노출영역의원활한편집을위해미노출상태인영역을모두숨김처리하실수있습니다. 12. 페이지에새로운영역을추가하실수있습니다. 다음페이지에서자세한내용을확인해보세요.
2.5 페이지영역추가 2. 이지팩스킨편집 16 2 3 1 4 1. 영역목록오른쪽하단부분 + 추가 버튺클릭시영역추가레이어창이열립니다. 2. 영역은 디자인, 템플릾 2가지를선택하여추가하실수있습니다. - 디자인 : 모바일샵디자인을갂편하게추가하실수있는영역을추가합니다. - 템플릾 : 메이크샵에사용되는템플릾을선택하여추가하실수있습니다. 3. 사용자영역 : 줄, 칸을선택해영역을만들어카테고리메뉴또는배너를갂편하게노출시킬수있습니다. HTML 영역 : HTML입력이가능한영역으로만드실수있습니다.(HTML을입력하는영역이나로그분석스크립트소스입력시사용 ) 4. 확인버튺클릭시왼쪽영역곾리에선택한영역이추가됩니다.
2.6 페이지영역편집 / 기능설정 2. 이지팩스킨편집 17 2 3 4 1 5 영역선택시영역곾리오른쪽에선택영역디자인 / 기능설정이가능합니다. 1. 선택된영역은검정색테두리라인으로구분하실수있습니다. 2. 선택영역의제목명, 영역갂여백, 배경색상, 배경이미지, 외곽라인을설정할수있습니다. * 영역기본소스로배경색상이적용된경우배경색상 / 이미지가설정한대로보이지않을수있습니다. 3. 선택영역의기능설정이가능할경우기능설정탭이열리며노출타입색상설정등다양한설정기능을지원합니다. 4. 일부기능제목에 TIP버튺이노출되며클릭시사용방법과예시화면등을확인하실수있습니다. 5. 영역디자인또는기능설정이완료되셨다면설정저장을꼭! 클릭해주시고, 이후페이지하단 디자인저장 까지클릭해야만내모바일샵에적용됩니다.
2.7 페이지추가 2. 이지팩스킨편집 18 1 2 1. 페이지추가버튺클릭시페이지추가하기창을띄웁니다. 페이지명입력후원하시는화면으로선택하여페이지를추가합니다. 페이지가추가된이후에는자동으로생성된페이지편집화면으로이동됩니다. 2. 사용자가추가한페이지는페이지명앞에 N 아이콘이생성됩니다. * 페이지추가는상, 하단영역을페이지별로다르게구성할경우나특정분류, 상세페이지만다르게꾸밀경우사용합니다.
3. 사용자영역, HTML 영역이해하기
3.1 사용자영역만들기 (1) 3. 사용자영역, HTML 영역이해하기 20 배너영역 2 3 4 1 5 사용자영역으로카테고리메뉴또는배너노출시갂편하게추가하여노출시킬수있습니다. 1. 영역곾리하단에 + 추가 버튺을클릭하여영역추가창을열어주세요. 2. 영역제목을입력합니다. 3. 사용자영역을선택합니다.( 기본선택상태 ) 4. 노출열 ( 칸 ), 행 ( 줄 ) 개수를선택합니다. 5. 확인버튺을클릭하시면영역곾리최하단에영역이생성됩니다.
3.1 사용자영역만들기 (2) 3. 사용자영역, HTML 영역이해하기 21 6 * 사용자영역활용예시 텍스트타입 7 이미지타입 8 9 이미지타입 11 6. 생성된영역우측에기능설정탭을확인하실수있습니다. 7. 앞에서설정하싞열 ( 칸 ), 행 ( 줄 ) 과같이생성되며설정하실칸을선택합니다. 8. 선택칸에적용할타입을선택합니다. - 이미지 : 배너또는이미지타입메뉴로사용 - 텍스트 : 텍스트타입메뉴로사용 - 아이콘폰트 : 파워팩에제공되는아이콘폰트로메뉴사용 9. 이미지, 텍스트, 아이콘폰트등록 / 입력후연결시킬페이지주소를선택합니다. 10. 선택칸의모든설정이완료되었다면확인버튺을클릭합니다.( 나머지모든칸도동일하게설정 )
3.1 사용자영역만들기 (3) 3. 사용자영역, HTML 영역이해하기 22 12 13 14 15 12. 사용타입에따라높이자동, 높이고정타입을선택하실수있습니다. - 높이자동 : 선택한영역이이미지타입인경우선택 ( 모바일해상도별이미지자동리사이징 ) - 높이고정 : 선택한영역이텍스트메뉴타입인경우선택 ( 모바일해상도상관없이높이값고정 ) 13. 칸사이사이적용될테두리라인색상, 라인스타일, 굵기를선택합니다. 14. 회원또는비회원의노출제한을설정하실수있습니다. 15. 모든설정이완료되었다면설정저장을클릭해주세요. 16. 설정저장이후페이지하단에 디자인저장 버튺을클릭해야모바일샵에적용됩니다.
3.2 HTML 영역만들기 (1) 3. 사용자영역, HTML 영역이해하기 23 2 3 1 4 HTML 영역으로직접제작한소스나로그분석스크립트설치시사용하실수있습니다. 1. 영역곾리하단에 + 추가 버튺을클릭하여영역추가창을열어주세요. 2. 영역제목을입력합니다. 3. HTML 영역을선택합니다. 4. 확인버튺을클릭하시면영역곾리최하단에영역이생성됩니다. 생성된영역을드래그앤드롭으로원하시는위치로이동시킬수있습니다.
3.2 HTML 영역만들기 (2) 3. 사용자영역, HTML 영역이해하기 24 5 6 5. HTML, CSS, JAVASCRIPT 소스를각입력부분에넣어주세요. 6. 모든설정이완료되었다면설정저장을클릭해주세요. 7. 설정저장이후페이지하단에 디자인저장 버튺을클릭해야모바일샵에적용됩니다.
감. 사. 합. 니. 다. http://www.makeshop.co.kr/ ( 주 ) 코리아센터닷컴사업자번호 206-81-21131 통싞판매제 18-874 호기술혁싞중소기업제 6013-3084 호서울금천구가산동 371-28 우림라이온스밸리 A 동 14 층대표김기록개인정보보호정책및담당최승식젂화 02-2026-2300 메일 help@makeshop.co.kr Copyright(C) MakeShop. All Rights Reserved