디자인관리 ( 스마트디자인 ) 매뉴얼 Ver. 3 Service Guide 1
목차 디자인관리시작하기... 3 I. 디자인관리... 4 1. 디자인보관함... 4 2. 디자인추가... 7 3. 디자인예약... 8 4. 디자인백업 / 복구.... 11 II. 디자인기능설정... 13 1. 인트로화면... 13 2. 팝업설정... 14 3. 플래시메이커... 18 4. 아이콘... 22 5. 쇼핑몰알리미... 23 III. 디자인편집... 26 1. 전체레이아웃화면... 26 2. 주요화면... 27 Ⅳ. 쇼핑몰환경설정... 28 1. 기본설정... 28 2. 외부스크립트... 29 3. 제휴화면... 30 4. 화면경로... 31 5. 마우스 / 키보드... 36 Ⅴ. 디자인관리모드설정... 37 스마트디자인가이드... 38 I. 스마트디자인개요... 38 II. 모듈... 40 Edit Plus plug-in 가이드... 42 I. 에디트플러스플러그인설치하기... 43 II. 에디트플러스실행하기... 44 III. FTP 접속하기... 45 IV. FTP 기본스킨경로... 45 V. 에디트플러스사용팁... 46 2
디자인관리시작하기 디자인관리메뉴에서는 PC 쇼핑몰디자인편집 과 쇼핑몰환경을설정 할수있습니다. 1 쇼핑몰선택기본한국어외에영어, 일본어, 중국어등다양한멀티쇼핑몰을설정하신경우, 좌측메뉴상단에멀티쇼핑몰선택메뉴가표시됩니다. 메뉴를클릭하면등록된멀티쇼핑몰중원하는언어의쇼핑몰을선택하여쇼핑몰디자인을관리할수있습니다. 2 디자인관리기본메뉴 - 디자인관리 : 디자인추가, 디자인적용예약, 백업등쇼핑몰디자인을관리할수있습니다. - 디자인기능설정 : 쇼핑몰화면에표시하는다양한기능을설정할수있습니다. - 디자인편집 : 쇼핑몰화면에들어가는각각의모듈을확인할수있습니다. - 쇼핑몰환경설정 : 스크립트, 화면경로등쇼핑몰환경을설정할수있습니다. 3 내쇼핑몰현황 각멀티쇼핑몰별대표디자인정보를한눈에확인할수있습니다. 3
I. 디자인관리 디자인관리에서는디자인관리, 디자인추가, 예약등을할수있습니다. 1. 디자인보관함 등록된쇼핑몰디자인목록을확인할수있으며, 원하는쇼핑몰디자인을수정할수있는편집창을 열수있습니다. 1 쇼핑몰디자인 URL 쇼핑몰의각스킨별로브라우저에서접속할수있는 URL 주소가생성됩니다. 해당주소로접속하면디자인을편집하면서실시간으로화면의디자인된모습을확인할수있어편리합니다. 2 디자인편집하기 디자인편집하기버튼을누르면해당디자인을수정할수있는스마트디자인편집창을띄워줍니다. 3 대표디자인설정적용할멀티쇼핑몰을선택한후 [ 대표디자인설정 ] 버튼을누르면해당멀티쇼핑몰의대표디자인으로지정됩니다. 대표디자인이란? 방문자에게보여지는쇼핑몰의메인디자인을의미합니다. 4
4 복사쇼핑몰디자인에포함된모든 html, css 등의파일을그대로복사하여새로운디자인파일로추가할수있는기능입니다. 같은디자인으로다양한언어에제공이필요한경우유용하게사용할수있습니다. 5 상속 새로만든디자인이기존디자인에상속되는기능으로, 상속된파일은기존디자인에있는파일을 가상파일로가지고있게됩니다. [ 참고 ] 디자인복사와디자인상속은무엇이다를까요? 디자인복사 선택한디자인의파일을그대로복사하여새로운디자인을생성합니다. 즉, 복사된디자인은가상파일이아닌실제존재하는파일입니다. 복사 디자인내파일 그대로복사 5
디자인상속부모디자인에서가져와보여주는 가상파일 로, 부모디자인을수정하면함께수정되어반영됩니다. 부모디자인에서상속받은파일들은스마트디자인편집창에서파란색으로보여집니다. 상속한 가상파일 을수정할수도있으며, 수정해저장하는순간상속이풀리게되어검정색으로보여집니다. 상속된가상파일은에디터플러스에서나타나지않습니다. 상속 A 디자인 상위디자인 ( 부모 ) A 디자인 하위디자인 ( 자식 ) 부모디자인파일 가상으로보여줌 6 삭제불필요한쇼핑몰디자인을선택하여삭제할수있습니다. 단, 최초제공한기본디자인과현재대표디자인으로설정중인디자인은삭제할수없습니다. * 쇼핑몰디자인삭제시, 주의사항만약디자인을상속해주고있는상위디자인 ( 부모 ) 을삭제하게되면상속받고있는하위디자인 ( 자식 ) 은정상적으로동작되지않을수있습니다. 또한예약중인디자인을삭제하면해당디자인의예약내역도자동삭제되므로디자인삭제시, 주의하시기바랍니다. 7 신규디자인추가 다양한무료 / 유료디자인을추가할수있도록 디자인추가 메뉴로이동됩니다. 8 기본디자인추가 카페 24 에서무료로제공하는기본디자인을추가할수있습니다. 디자인은최대 12 개까지보관할수있습니다. 6
2. 디자인추가 카페 24 디자인센터에서무료 / 유료의다양 PC 쇼핑몰디자인을추가할수있습니다. 무료디자인은최대 12 개까지추가할수있고, 유료디자인은제한없이추가할수있습니다. 1 카테고리선택 무료 / 유료의다양한카테고리디자인중에원하는디자인스타일을선택할수있습니다. 2 디자인선택마음에드는디자인을클릭하면해당디자인의카테고리명, 스타일, 레이아웃, 가격등의상세정보를확인할수있습니다. 유료디자인인경우에는카페24 디자인센터로이동되어결제가완료되면디자인보관함에자동으로추가됩니다. 7
3. 디자인예약 대표디자인외의다른쇼핑몰디자인을원하는날짜와시간에맞추어표시될수있도록예약할수있습니다. 예를들면, 이벤트진행이나특정시기 ( 크리스마스, 빼빼로데이등 ) 에맞추어쇼핑몰디자인을하고자할경우활용이가능합니다. 1 메뉴구성 - 디자인예약관리 : 예약된쇼핑몰과디자인목록을확인할수있습니다. - 디자인예약캘린더 : 예약된디자인내역을캘린더형태로확인할수있습니다. 2 디자인예약 디자인예약관리를통해, 특정회원등급또는원하는기간에운영자가원하는쇼핑몰디자인으로 변경하여적용할수있습니다. 8
3-1. 디자인예약 1 2 3 1 쇼핑몰선택 : 목록에서예약하고자하는쇼핑몰을선택합니다. 2 디자인선택 : 목록에서예약하고자하는쇼핑몰디자인을선택합니다. 이미대표디자인으로사용하고있는디자인은선택할수없습니다. 3 예약설정 : 예약할제목과디자인을노출시킬회원의등급, 그리고적용할기간을선택할수있습니다. 9
3-2. 디자인예약캘린더 1 2 1 정렬선택 멀티쇼핑몰이용시쇼핑몰별로예약디자인을캘린더형태로확인할수있습니다. 2 예약된디자인확인예약이설정된기간에는예약한디자인으로대표디자인이노출되고, 예약기간이종료되면다시대표디자인으로자동변경됩니다. ( 디자인이예약되어있지않는기간에는기존 대표디자인 ' 으로노출됩니다.) 트렌드나시즌에맞는디자인을그때마다자동으로노출해줄수있어서디자인적용이편리합니다. 10
4. 디자인백업 / 복구 쇼핑몰디자인을수동으로백업할수있습니다. 4-1. 디자인백업 - 백업은 HTML 파일만백업되며, 쇼핑몰디자인별로저장됩니다. ( 이미지파일은백업되지않으니주의하세요.) - 백업방식은아래와같습니다. 1) 자동백업 - 매일새벽 5시경, 24시간안에관리자로그인기록이있는경우자동백업최대 7일까지저장되며, 가장오래된파일부터삭제 2) 수동백업 - 쇼핑몰운영자가백업하기버튼을누르는순간백업 11
4-2. 디자인복구 백업된디자인을확인하고, 복구또는다운로드할수있습니다. 파일복구는서버에저장된파일또는내컴퓨터에저장된파일로선택하여진행합니다. 3 1 2 1 복구 백업된목록에서하나를선택하여복구버튼을클릭하면해당백업내용이복구됩니다. 복구된쇼핑몰디자인은디자인보관함리스트에새로운디자인으로등록되어보여집니다. 2 다운로드백업된파일을내컴퓨터로다운로드합니다. 자동백업된경우에는최대 7일간만저장되므로, 백업내용을장기보관하려면컴퓨터에다운받아야합니다. 단, 파일형식이틀려지면복구되지않으므로, 다운받은후에는절대수정하지마세요. 3 내컴퓨터에서복구 내컴퓨터에다운받아놨던파일을선택하여복구를진행합니다. 복구가완료되면마찬가지로 디자인보관함리스트에새로운디자인으로등록됩니다. 12
II. 디자인기능설정 디자인기능설정에서는쇼핑몰화면에표시되는다양한기능을설정할수있습니다. 1. 인트로화면 쇼핑몰에인트로화면을사용할지사용안할지설정할수있습니다. 성인또는회원전용쇼핑몰을 운영하는경우사용함으로설정합니다. 1 2 1 쇼핑몰인트로사용유무쇼핑몰인트로는쇼핑몰접속시회원인증또는본인인증후에접속할수있도록설정하는기능입니다. 사용함을선택하면하단부에인트로설정할기능이표시됩니다. 2 인트로설정 인트로로사용할화면을선택합니다. 멀티쇼핑몰이용시, 해외쇼핑몰의경우회원전용인트로만설정할수있습니다. 13
2. 팝업 / 배너. 2-1. 팝업설정 쇼핑몰에표시할팝업을관리할수있습니다. 팝업은쇼핑몰페이지어디든지표시할수있으며, 여러페이지에하나의동일한팝업을표시할수도있습니다 1 2 1 팝업목록 등록한팝업목록과현재진행상태를확인할수있습니다. 2 팝업등록 팝업을등록할수있도록팝업등록화면으로이동합니다. 14
2-1-1. 팝업등록 1 2 1 팝업창진행여부설정 작성한팝업창의진행여부를대기, 진행, 종료중에서설정할수있습니다. 2 팝업창노출설정 1) 기간설정 : 팝업창을노출기간을설정합니다. 설정한기간이라도, 1 번의진행여부설정값이 대기또는종료일경우에는노출되지않습니다. 2) 팝업노출위치 : 팝업노출위치를자유롭게설정할수있습니다. 화면좌측최상단을 기준으로입력한픽셀만큼떨어진위치에팝업이노출됩니다. 3) 팝업이노출될페이지선택 : 팝업이노출될페이지를선택할수있습니다. 한개의팝업이여러페이지에동시에노출될수도있고, 한페이지에서로다른팝업이복수로노출될수도있습니다. 같은페이지내에팝업은 5개까지표시할수있습니다. 단, 인트로화면에는팝업설정을할수없습니다. 15
3 3 팝업창디자인 1) 팝업종류 : 팝업종류를윈도우팝업과레이어팝업중에서설정합니다. 2) 팝업크기 : 팝업창의사이즈를설정합니다. 3) 창닫기방법 : 팝업창닫기문구를오늘하루열지않음또는다시열지않음중에서설정합니다. 4) 팝업창내용등록방법 : 샘플팝업을이용할지직접제작한팝업을이용할지설정합니다. 5) 팝업제목 : 팝업제목을입력합니다. 6) 팝업내용 : 팝업창에표시할내용을입력합니다. 4 16
4 창닫기디자인 1) 창닫기디자인설정 : 창닫기디자인설정을기본으로할지, 원하는디자인으로편집할지설정합니다. 상세디자인설정을선택하면배경색, 문구등을더욱세밀하게편집할수있습니다. 2) 미리보기 : 설정한값이바로바로반영되어, 현재설정에맞는창닫기디자인을미리보기할수있습니다. 3) 배경색 : 창닫기디자인설정에서상세디자인설정으로선택한경우, 배경색을설정할수있습니다. 4) 문구 : 창닫기디자인설정에서상세디자인설정으로선택한경우, 창닫기디자인에보여줄문구를입력하고설정할수있습니다. 5) 문구정렬 : 다시열지않음, 닫기등의문구를오른쪽정렬, 가운데정렬, 왼쪽정렬중에서설정할수있습니다. 17
3. 플래시메이커 쇼핑몰에표시할플래시를제작및관리할수있습니다. 이벤트, 기획전, 신상품등의배너를제작하여쇼핑몰의원하는화면에적용하여사용가능합니다. 1 2 3 4 1 플래시목록 등록한플래시의목록을확인합니다. 2 플래시등록 플래시메이커 ( 플래시편집창 ) 가새창으로열립니다. 3 적용하기 ( 소스복사 ) 소스복사버튼을클릭하면해당플래시의경로와 html 에붙일수있는 html 소스를보여줍니다. 필요한소스를복사한후, 원하는곳에붙여넣기하여플래시를사용합니다. 4 미리보기 등록한플래시를미리보기합니다. 18
3-1. 플래시메이커 ( 플래시편집창 ) 1 2 5 3 4 6 7 1 이미지추가이미지추가팝업이뜹니다. 2 이미지목록추가한이미지들이나열됩니다. 이미지썸네일하단의링크아이콘을클릭하면해당이미지를클릭했을때이동하는링크를설정할수있습니다. 이미지에마우스를올리면삭제아이콘이나타납니다. 3 편집영역 이미지목록에서편집할이미지를선택하면이영역에선택한이미지가보여집니다. 효과를적용하거나디자인을설정하면해당영역에바로바로반영되어편집이용이해집니다. 4 편집영역보기설정편집중인플래시의사이즈를알려줍니다. View 값을변경하면최소 50%~ 최대 200% 축소혹은확대하여이미지를보여줍니다. 5 플래시설정플래시크기 : 가로혹은세로바의동그라미아이콘을잡고드래그 & 드롭하여크기를조정하거나, 오른쪽박스에값을직접입력합니다. 19
이미지크기 : 플래시크기와마찬가지로바혹은입력값으로크기를조정합니다. 이미지크기를수정할때는반드시적용혹은모두적용버튼을눌러야반영이됩니다. 이미지의모서리를둥글게할지직각으로할지설정이가능합니다. 노출순서 : 이미지를이미지목록순서대로보여줄지, 랜덤으로보여줄지설정합니다. 이미지정지시간 : 다음이미지로넘어가는시간간격을설정합니다. 움직임효과 : 다음이미지로넘어갈때보여줄효과를지정합니다. 버튼설정 : 이미지개수표현방식을선택합니다. 글꼴색 : 버튼설정을버튼형으로설정한경우에만글꼴색을지정할수있습니다. 글꼴 : 버튼설정을버튼형으로설정한경우에만글꼴을지정할수있습니다. 버튼활성화색 : 버튼의색상을선택합니다. 마우스오버색 : 현재보여지고있는이미지의버튼인경우의색을선택합니다. 버튼크기 / 버튼투명도 : 버튼크기와투명도를설정합니다. 버튼정렬 : 버튼이나타날위치를설정합니다. 6 미리보기 작업중인플래시가동작되는형태를미리보기합니다. 7 저장하기 작업중인플래시를저장합니다. 저장할플래시제목을입력한후저장버튼을누르면저장됩니다. 20
2-2-1-1. 이미지추가 플래시메이커에사용할이미지를선택합니다. FTP 에있는이미지를선택하거나, 상품이미지를선택할수있습니다. 1 내 FTP 에서이미지추가 - 이미지추가하기버튼을누르면 FTP 에있는파일리스트가나타납니다. 원하는이미지를찾아선택후추가하기버튼을눌러이미지를추가하면, 추가된이미지영역에 추가한이미지의파일명이목록으로보여집니다. 2 상품분류 ( 카테고리 ) 에서이미지추가 21
- 검색할상품명을입력한후검색버튼을누르면상품이미지선택영역에검색된이미지가목록으로보여집니다. 플래시에서작업할이미지사이즈를선택한후상품이미지추가버튼을누르면추가된이미지영역에추가된이미지가목록으로보여집니다. 4. 아이콘 쇼핑몰에서사용할다양한아이콘과배너를관리할수있습니다. 기본으로제공되는아이콘을설정하거나, 운영자가원하는아이콘이미지로수정할수도있습니다. 1 2 1 아이콘수정하기 수정하기버튼을눌러원하는이미지로수정할수있습니다. 2 사용유무설정 해당아이콘의사용유무를설정할수있습니다. 22
5. 쇼핑몰알리미 쇼핑몰을알리기위한다양한기능을설정할수있습니다. 5-1. 즐겨찾기설정 쇼핑몰에방문했던고객이다시방문할수있도록, 즐겨찾기기능을제공합니다. 1 2 1 즐겨찾기설정 즐겨찾기이름 : 고객이즐겨찾기할때브라우저에등록되는이름을설정합니다. 즐겨찾기연결주소 : 즐겨찾기 URL( 쇼핑몰의대표도메인 ) 을입력합니다. 2 적립금혜택설정고객이로그인상태에서즐겨찾기를추가한경우에만적용됩니다. 적립금지급사용여부 : 즐겨찾기를추가한고객에게적립금혜택을줄지여부를선택합니다. 적립금금액설정 : 즐겨찾기한고객에게얼마의적립금을적립해줄지설정합니다. 즐겨찾기를추가한고객에게쿠폰을발행하려면 [ 프로모션 ] 의 [ 쿠폰관리 ] 메뉴에서 [ 바로가기 / 즐겨찾기쿠폰 ] 을생성하여관리합니다. 23
5-2. 파비콘설정 파비콘이란즐겨찾기 (favorites) + 아이콘 (icon) 의합성어로, 주소창좌측에조그만아이콘으로 표시되는것을말합니다. 16*16px 사이즈의이미지를등록하면, 내쇼핑몰에접속했을때주소창에해당아이콘이보여집니다. < 파비콘의예 > 24
4-3. 바로가기설정 쇼핑몰에방문했던고객이쉽게방문할수있도록, 고객의 PC 바탕화면에아이콘을설치해주는 기능입니다. 1 2 1 바로가기설정 1) 아이콘이름 : 고객이즐겨찾기할때브라우저에등록되는이름을설정합니다. 2) 아이콘연결주소 : 바로가기 URL( 쇼핑몰의대표도메인 ) 을입력합니다. 3) 아이콘설정 : 바탕화면에설치될아이콘이미지를 ico 확장자로등록합니다. 2 적립금혜택설정고객이로그인상태에서바로가기아이콘을설치한경우에만적용됩니다. 1) 적립금지급사용여부 : 바로가기아이콘을설치한고객에게적립금혜택을줄지여부를선택합니다. 2) 적립금금액설정 : 바로가기를설치한고객에게얼마의적립금을적립해줄지설정합니다. 25
III. 디자인편집 쇼핑몰디자인을편집하기위한가이드및페이지별모듈구성을보여줍니다. 1. 전체레이아웃화면 쇼핑몰디자인의레이아웃파일에들어갈수있는모듈을보여줍니다. 이미지를클릭하거나디자인편집하기버튼을누르면, 레이아웃파일을바로편집할수있도록해당파일이열린채로편집창이뜹니다. 26
2. 주요화면 쇼핑몰주요화면에들어갈수있는모듈을보여줍니다. 이미지를클릭하거나디자인편집하기버튼을누르면해당파일을바로편집할수있도록해당파일이열린채로편집창이뜹니다. 주요화면 : 메인, 상품분류, 상품상세, 장바구니, 주문서작성, 주문완료, 회원가입, 로그인, 마이쇼핑 27
Ⅳ. 쇼핑몰환경설정 디자인관리에서는스킨관리, 스킨작성, 스킨예약등을할수있습니다. 1. 기본설정 쇼핑몰화면에필요한기본기능을설정할수있습니다. 1 최근본상품개수쇼핑몰에서상품을클릭하여본상품을몇개까지노출할지설정할수있습니다. ( 최대 10개까지설정가능 ) 설정된최근본상품은쇼핑몰우측에서확인할수있습니다. 2 쇼핑몰관리자브라우저타이틀 쇼핑몰관리자 ( 어드민 ) 화면의인터넷브라우저왼쪽상단 ( 제목표시줄 ) 에노출될제목을 설정합니다. 3 쇼핑몰관리자기능사용 대표운영자가쇼핑몰화면에접속하면바로쇼핑몰관리자의기능에접속할수있도록기능을 설정할수있습니다. 28
2. 외부스크립트 웹로그분석이나광고진행시, 쇼핑몰에서자주사용하는외부스크립트를간단히사용여부설정과 계정입력만으로연동할수있습니다. 1 외부스크립트종류 에이스카운터타입, asp3.http.or.kr, adnaver.co.kr, adcounter.co.kr, nasmedia.co.kr 등의외부 스크립트를연동할수있습니다. 각각사용여부를체크하고연결한 ID 와 Key 정보를입력합니다. 만약, 직접삽입하고자할경우에는 html 태그가끝나는푸터부분에넣어야화면깨짐을방지할 수있습니다. 29
3. 제휴화면 광고나제휴서비스를통해쇼핑몰로유입된경우, 화면상단에제휴바가노출됩니다. 이때, 제휴바노출을원치않는경우이곳에서화면을설정할수있습니다. 아이디중복체크나우편번호와같이제휴바가굳이노출되지않아도되는기본페이지들은기본으로설정되어있습니다. 1 화면 URL 각항목의해당 URL 이표시되고, 직접수정도할수있습니다. 2 돋보기 ( 미리보기 ) 미리보기를눌러해당화면을미리보기할수있습니다. 3 초기화 화면주소수정이잘못되었을경우, 처음설정되어있던기본값으로복원할수있습니다. 4 제휴화면추가제휴화면추가버튼을통해제휴바가노출되지않을화면을추가할수있습니다. 리스트의가장하단에입력박스가추가되고, 입력후저장버튼을누르면저장됩니다. 기본제공하는화면외추가한화면은삭제가가능합니다. 30
4. 화면경로 기존에사용중인디자인관리의화면주소 (URL) 와스마트디자인의화면주소 (URL) 를연결설정할수있습니다. 새로운스마트디자인을사용하면, 기존디자인관리의화면주소와는달라지므로이화면에서화면경로를반드시설정하셔야합니다 특히, 쇼핑몰고객이검색광고나제휴사를통해유입하는경우, 기존주소와다르면페이지가표시되지않는등의문제가발생하므로반드시확인해야합니다. 경로에는필수경로와일반경로가존재하는데, 필수경로는삭제할수없으며, 경로변경만가능하지유의하시기바랍니다. 1 1 메뉴구성 1) 상품카테고리경로설정 : 카테고리경로를설정, 변경합니다. 2) 게시판메뉴경로설정 : 공지사항, 뉴스 / 이벤트, 상품Q&A 등과같은게시판관련경로를설정, 변경합니다. 3) 화면경로설정 : 상품과게시판을제외한나머지쇼핑몰화면의경로를설정, 변경합니다. 31
6-1. 상품카테고리경로설정 아래그림과같이현재사용중인카테고리목록이표시됩니다. * 경로화면선택 스마트디자인의화면경로를설정하기위해경로화면선택을클릭하면아래와같은화면이팝업으로 표시됩니다. 원하는화면을선택하고추가하기를클릭합니다. 32
6-2. 게시판메뉴경로설정 아래그림과같이현재사용중인게시판메뉴목록이표시됩니다. 쇼핑몰상품카테고리와동일하게경로화면선택하여화면을설정할수있습니다. 33
6-3. 화면경로설정 기존디자인관리사용자가스마트디자인으로변경하여사용할경우, 두개의웹페이지이동시, 오류가 없도록설정하는기능입니다. 예를들어, 기존페이지로제휴광고나포털사이트에이벤트링크가노출되어있을경우, 해당페이지를스마트디자인페이지로연결될수있도록설정해두면, 사용자가웹페이지를찾지못하는경우를방지할수있습니다. ( 접속통계를사용하시는경우, 각항목의통계에누락이없도록본설정을반드시하시기바랍니다.) 2 1 1 새로운경로등록 새로운경로등록페이지로이동합니다. 2 화면경로설정내역 화면경로를설정, 수정한내역을확인할수있습니다. 34
6-3-1. 새로운경로등록 1 2 3 1 화면속성선택 : 화면그룹을선택하면관련된화면명목록이표시됩니다. 화면명까지선택하면기존디자인관리 주소가나타나고, 하단에화면주소목록에스마트디자인주소가표시됩니다. 2 화면주소목록 : 화면속성선택에서선택한화면에대응하는스마트디자인주소가나타납니다. 사용자가화면을추가한경우에는해당화면도함께목록에나타납니다. 스마트디자인화면이여러개인경우, 그중한개를대표경로로등록할수있습니다. 3 화면주소추가 : 화면경로선택버튼을누르면스마트디자인화면파일목록이팝업으로표시됩니다. 원하는 파일을선택한후저장버튼을누르면화면주소목록에추가됩니다. 35
5. 마우스 / 키보드 이미지복사방지와마우스오른쪽클릭기능을제어할수있는설정입니다. 1 마우스오른쪽클릭 마우스오른쪽클릭시표시되는메뉴를사용할수없도록설정할수있습니다. 사용안함을 설정하면아래그림과같이이미지저장하기, 소스보기등의기능을사용할수없습니다. 2 이미지마우스오버시도구창 이미지위에마우스를오버하면도구창 (imagetoolbar) 이나타나는것을제어합니다. 3 마우스드래그기능 화면에서아래와같이마우스를드래그할수있는기능을제어합니다. 4 키보드펑션키 (Ctrl) CTRL + (N, R) 기능을제어합니다. 36
Ⅴ. 디자인관리모드설정 ( 구 ) 디자인관리를사용중이던사용자가스마트디자인을사용하기위해서는가장먼저디자인관리 모드를변경해야합니다. ( 솔루션업그레이드된어드민을사용중이실경우에는해당메뉴가표시되지않습니다.) 아래화면은기존디자인관리로설정되어있을경우의화면입니다. 스마트디자인으로변경하려면 1 번의설정하기버튼을클릭하면됩니다. 1 2 37
I. 스마트디자인개요 스마트디자인가이드 웹페이지는기본적으로 HTML, CSS 그리고 Javascript에의해서사용자에게보여지게됩니다. 또한일반적으로동적인웹사이트구현을위해서 JSP, PHP, ASP등의언어를이용해서사이트를구현하며, JSP, PHP, ASP 등은프로그래머에의해다시가공됩니다. 그리고여기에서더발전한형태가 HTML단의표현에대해서 Smarty, Template 등을통해템플릿으로제공되는형태가진화된형태라고할수있습니다. 이것은프로그램적인요소인 JSP, PHP, ASP에서행해지는일련의프로그램적인형태를디자이너가조금쉽게사용할수있도록제공하는것입니다. 템플릿엔진을이용해사용자에게 HTML 페이지를수정할수있도록기능을제공합니다. 이러한템플릿엔진은 JSP, PHP, ASP를배우는것보다는빠르게익힐수있기때문에디자인능력을가진업체나초보적인프로그램개발이가능한업체에서익히기에훌륭한툴이되어최근몇년간활용되었고, 현재시장에서통용되고있는기술입니다. 하지만이러한업체들은다음과같은초기의형태보다는발전할수있었지만, 더큰사용자의욕구를 만족시키기에는부족하였습니다. - 웹표준이시대적흐름이나기존템플릿엔진으로는구현의어려움 - 템플릿엔진도 if, for, while등프로그램적요구사항을배워야제대로활용할수있음 - 템플릿엔진을익히기까지많은시간이소요됨 - 어떤페이지에는어떤프로그램만구동되는형식이여서표현제약이따름 주어진페이지주소 주어진페이지에서만사용할수있는모듈 - 사용자영역과프로그램적영역이모호하여오류가잦음 이에, 카페 24 스마트디자인은이러한단점을개선한솔루션이라할수있습니다. 아래의그림을보면, 스마트디자인을이용하면변경될개발프로세스로프로그램개발단계가과감히 생략되었습니다. 기획디자인퍼블리싱 과연어떤방법으로프로그램적요소를생략할수있을까요? 이는사용자가작성한 HTML 을기준으로그위에프로그램이구동될수있는환경을제공한것입니다. 아래의예제는기존 PHP 에서표현하는방식과 Smarty 템플릿엔진그리고 Cafe24 의새로운디자인스 마트디자인을코딩수준에서설명한것입니다. 38
기존소스 (PHP) <? $ssql= select * from board limit 10 ; $alist = mysql_query($ssql);?> <table> <tr><th> 제목 </th><th> 날짜 </th></tr> <? for($i=0; i<count($alist); i++) { echo <tr><td>$alist[i][ subject ]</td><td>$alist[i][ date ]</td></tr> ; }?> </table> 위가일반적인 1차인개발형식으로, HTML 소스안에개발적인소스가어지럽게들어있습니다. 개발자가필요한소스임에틀림없어보이고뭔가어려워보이는소스입니다. 기존소스 (Smarty) <table> <tr><th> 제목 </th><th> 날짜 </th></tr> {foreach $alist as $list} <tr><td>{$list[ subject ]}</td><td>{$list[ date ]}</td></tr> {/foreach} </table> 위의형태는일반적인템플릿형태에서의개발코딩모습입니다. 아무리프로그램적인요소를뜯어내더라도초보적인프로그램을이해해야하는이유가여기있습니다. 바로반복문, 조건문그리고그외에예외적인상황의처리를위해서바로이런템플릿엔진의기능을활용할수밖에없습니다. 그리고가장치명적인것은페이지에서사용할변수가이미정의되어있어야한다는것입니다.. 이러한이유로 Cafe24의기존솔루션그리고타업체들의솔루션은지정된페이지에지정된기능만사용할수있게되어있습니다. 즉사용자가마음대로꾸미고싶은 UI를구현할수없는치명적인단점을가지고있는것입니다. 스마트디자인 <table module= board_list_1 > <tr><th> 제목 </th><th> 날짜 </th></tr> <tr><td>{$subject}</td><td>{$date}</td></tr> <tr><td>{$subject}</td><td>{$date}</td></tr> </table> 위소스는디자인관리스마트디자인의예입니다. 무언가 HTML만있는것처럼보이지않으신지요? 이것만으로프로그램이완벽한게시판리스트가만들어집니다. 디자인관리스마트디자인은프로그램적인요소가전혀존재하지않습니다. 그리고모듈의이름만알고있다면어디서든자기가사용하고자하는모듈을사용할수도있습니다. 스마트디자인의가장큰변화는 프로그램위에 HTML 코딩을입히는것이아니라 HTML 코딩위에프 로그램을입히는것 입니다. 39
II. 모듈 1. 모듈 모듈이란 '1개또는그이상의컨텐츠와기능의묶음 ' 입니다. 즉, 모듈은프로그램의최소단위이며, 각모듈은 HTML 그리고변수에의한조합으로구동됩니다. 모듈은하나의독립된완전한프로그램으로사용자가입력한 module=" " 에의해서판단되며구동됩니다. 모듈은왼쪽의그림처럼웹상에서표현될수있습니다. 모듈과모듈을묶어서 package 라고합니다. Package 단위로동작하는것은아니고디자인의묶음을 위하여 package 로부분디자인은구성을할수있습니다. 모듈명 : Layout _Login < 모듈의예 > 40
즉, 모듈은프로그램의최소단위이며, 각모듈은 HTML 그리고변수에의한조합으로구동됩니다. 모듈은하나의독립된완전한프로그램으로사용자가입력한 module= 에의해서판단되며구동됩니 다. 모듈은아래의그림처럼웹상에서표현될수있습니다. CSS, Script HTML 변수 모듈 아래의 HTML 소스는하나의완전한모듈의예제입니다. 게시판리스트모듈 <table module= board_list_1 > <!--@css(/board_list.css)--> <!--@js(/board_list.js)--> <tr><th> 제목 </th><th> 날짜 </th></tr> <tr><td>{$subject}</td><td>{$date}</td></tr> <tr><td>{$subject}</td><td>{$date}</td></tr> </table> 2. 제공되는모듈 - 카페 24 에서는다양한모듈을제공하고있습니다. 모듈정보는아래사이트에서상세하게확인할수있습니다. http://sdsupport.cafe24.com/product/list.html?cate_no=61 41
3. 권장모듈구성형태 3-1. 권장하는모듈구성형태 헤더영역 로고로그인정보검색창상단형바로가기 사이드영역 로그인마이쇼핑검색창사이드바형태상품분류메뉴기획전고객상담안내게시판목록공동구매온라인설문인기상품베스트 컨텐츠영역 고객사은품배너운영일지배너긴급문의배너출석체크배너쿠폰존배너 최근본상품회사정보 풋터영역 Edit Plus plug-in 가이드 스마트디자인은 Edit Plus 연동으로손쉬운파일수정과관리가가능하며, 태그자동완성기능으로더욱 손쉬운코딩환경을제공합니다. [ 스마트디자인 ] [Edit Plus] 42
I. 에디트플러스플러그인설치하기 http://sdsupport.cafe24.com/board/guide/read_high.html?no=389&board_no=5&category_no= 10&cate_no=10&category_no=10 카페 24 쇼핑몰어드민에서 Edit Plus Plug-in 설치파일인 cafe24_editplus_plugin.msi 프로그램을다 운받아실행합니다. 1 2 3 4 5 43
II. 에디트플러스실행하기 01 1 바탕화면의카페 24 에디트플러스바로가기를실행하면로그인창이표시됩니다. 쇼핑몰의대표운영자와부운영자아이디를선택하여접속할수있습니다. ( 로그인을해야만쇼핑몰태그의자동완성기능을연동하여사용할수있습니다.) 2 디자인관리모드설정이 스마트디자인 로설정되지않은경우에는로그인을할수없습니다. 설정한 후다시사용하시기바랍니다. 44
III. FTP 접속하기 02 01 1 파일 >FTP>FTP 설정메뉴를클릭하여 FTP 접속창을엽니다. IV. FTP 기본스킨경로 디렉토리선택에서접속하고자하는쇼핑몰을선택합니다. 스마트디자인의기본스킨은 sed_design>base 폴더입니다. 45
V. 에디트플러스사용팁 1. 샘플모듈삽입기능사용하기 새롭게생성된 카페24> 샘플모듈삽입 메뉴를선택하여삽입창을오픈합니다. 입력하고자하는모듈항목을선택한후 확인 버튼을누르면커서위치에자동으로모듈태그가삽입됩니다. 2. 모듈코드자동완성기능 module=" 또는 module=' 까지입력한후, Ctrl+Space 를누르면, 사용할수있는변수리스트가표 시됩니다. 원하는모듈을선택하여사용합니다. 46
3. 변수자동완성기능사용하기 태그내에서 {$ 를입력한후 Ctrl+Space 를누르면, 사용할수있는변수리스트가출력됩니다. 단, {$ 가속해있는모듈에모듈변수가없으면모듈변수선택창이나타나지않습니다. 47