스마트디자인편집창 사용자매뉴얼
목차 Chapter 1. 스마트디자인개요 1. 스마트디자인이란?... 4 2. 모듈과레이아웃... 5 Chapter 2. 스마트디자인편집창시작하기 1. 대표디자인편집... 8 2. 일반디자인편집... 9 3. 쇼핑몰화면에서원하는영역편집... 10 Chapter 3. 상세기능설명 1. 편집창의영역... 12 2. 선택영역기능... 13 3. 편집영역기능... 15 Chapter 4. 영역별편집방법 1. 모듈편집... 20 2. 이미지편집... 25 3. 레이아웃편집... 27 4. 새화면편집... 28 Chapter 5. 모듈추가방법 1. 모듈편집레이어로추가하기... 30 2. 모듈추가버튼으로추가하기... 31 2
Chapter 1. 스마트디자인개요 3
1. 스마트디자인이란? 어떤서비스죠? 전문개발자가없이도, HTML 만안다면다양한쇼핑몰운영자의욕구를그대로구현해낼수있는디자인관리툴입니다. 어느브라우저에서나쾌적한쇼핑환경을유지하며, 사이트경량화를통해접속속도를높여줍니다. 또차별화된고객관리를위해다양한스킨기능을탑재하고있으며, 제약없이원하는디자인을구현할수있습니다. 특징및장점 자유로운쇼핑몰디자인이가능합니다. 독립몰에서나가능했던디자인구성을스마트디자인에서는제약없이구현가능합니다. 클릭만으로도내 PC 에있는이미지를업로드하거나, 스마트디자인에서제공하는부분디자인으로변경할수있어디자인변경이쉬워집니다. 전문개발자없이쇼핑몰구축이가능합니다. 전문개발자가없어도 HTML 에대한기본지식만있으면원하는구성의쇼핑몰을자체적으로구축할수있습니다. 에디트플러스에서사용하는플러그인을제공하여 HTML 태그자동완성기능을사용함으로써쇼핑몰구축이더욱쉬워집니다. 디자인복사, 상속, 예약, 백업등스마트디자인만의특화된기능을제공합니다. 스마트디자인은쇼핑몰디자인을무제한으로보유가가능하여다양한디자인작업이가능해집니다. ( 무료 : 10 개, 유료 : 무제한 ) 보유한디자인을활용하여복사, 상속등의기능으로디자인편집시간을단축하고, 백업 / 복구도자유롭습니다. 디자인예약관리기능으로, 회원등급별 / 날짜별 / 시간별로쇼핑몰디자인을상황에맞춰노출할수있습니다. 모듈단위로작업할수있어초보자도쉽게접근할수있습니다. 쇼핑몰에필요한기능들이각각의모듈로존재하므로, 필요한모듈만추가하거나삭제하는등의편집이가능합니다. 한페이지에여러모듈이포함될수있어, 다양한페이지를구성할수있습니다. 웹표준코딩을지원합니다. 다양한브라우저와여러모바일단말기 ( 스마트폰, 테블릿 PC 등 ) 에서깨짐현상없이완벽하게구동됩니다. HTML 코드양을반이하로줄여사이트전송속도를향상시킴으로써사이트체감속도를높일수있습니다.
2. 모듈과레이아웃 모듈이란? 스마트디자인을구성하는가장작은기능단위를모듈이라고합니다. 모듈 (Module) 이란 1 개또는그이상의콘텐츠와기능의묶음 입니다. 즉, 모듈은프로그램의최소단위이며, 각모듈은 HTML 그리고변수에의한조합으로구동됩니다. 모듈은하나의독립된완전한프로그램으로사용자가입력한 module= 모듈아이디 이란코드에의해서판단되며구동됩니다. 모듈은오른쪽그림처럼웹상에서표현될수있습니다. 모든모듈은페이지에제약받지않습니다. 따라서어떤페이지에서도자유롭게사용하실수있습니다. 디자인구성및편리한관리를위해여러모듈을묶어서패키지 (Package) 라는단위로사용하기도합니다. 모듈 모듈 모듈
2. 모듈과레이아웃 레이아웃이란? 모든화면에서공통으로사용되는부분을레이아웃이라고하고, 스마트디자인에서는레이아웃을따로정의할수있습니다. 레이아웃은아래와같이, 크게세부분으로나누어집니다. 헤더 (Header) 헤더 (Header) 사이드 (Side) 콘텐츠 (Contents) 실제화면 사이드 (Side) 푸터 (Footer) 푸터 (Footer) 공통으로사용할레이아웃은파일을따로만들어관리합니다. 콘텐츠파일에서는레이아웃을아래와같이선언하고, <!--@layout( 레이아웃파일위치 / 레이아웃파일명 )--> 그아래에콘텐츠영역에대해코딩합니다.
Chapter 2. 스마트디자인편집창시작하기 7
1. 대표디자인편집 쇼핑몰관리자에로그인하여디자인관리 > 스마트디자인메뉴로접속합니다. 현재대표디자인으로설정되어있는쇼핑몰디자인을수정하려면아래 [ 디자인편집하기 ] 버튼을클릭해주세요. 클릭시대표디자인의편집창이새창으로열립니다.
2. 일반디자인편집 대표디자인이아닌, 내쇼핑몰에보관되어있는다른디자인을편집하려면 디자인관리 > 디자인보관함 메뉴에서원하는쇼핑몰디자인을선택하여 [ 디자인편집하기 ] 버튼을클릭해주세요. 클릭시해당디자인의편집창이새창으로열립니다.
3. 쇼핑몰화면에서원하는영역편집 쇼핑몰화면에서디자인수정을원하는화면으로바로이동하여편집할수있습니다. 쇼핑몰관리자기능을 사용함 으로설정한후수정을원하는부분에마우스를올려 디자인편집 메뉴를클릭해주세요. 선택된화면의모듈을편집할수있도록편집창이새창으로열립니다.
Chapter 3. 상세기능설명 11
1. 편집창의영역 스마트디자인편집창은아래와같은형태로이루어져있습니다. 1 선택영역 : 편집창의왼쪽영역으로, 편집할페이지를선택하여편집영역을띄울수있습니다. 또한 폴더추가, 화면추가 를통해새로운페이지를생성할수있습니다. 1 2 2 편집영역 : 편집창의오른쪽영역으로, 선택영역에서페이지를열어해당페이지를수정하고저장할수있습니다.
2. 선택영역기능 선택영역은다음과같은기능들로구성되어있습니다. 1 편집중인디자인 : 현재편집창에열려있는쇼핑몰디자인명을보여줍니다. 1 대표디자인인경우만아이콘이오른쪽에보여집니다. 2 자주쓰는화면 : 2 4 3 일반적으로많이사용하는화면을즐겨 찾기형식으로모아놓은리스트입니다. : 자주쓰는화면의즐겨찾기명을변경 : 자주쓰는화면의즐겨찾기정보를삭제 3 전체화면보기 : 쇼핑몰디자인디렉토리에있는모든 화면을트리형태로보여줍니다. 4 자주쓰는화면추가 : 자주편집하는화면명의왼쪽에위치한 아이콘을클릭하면 아이콘으로변경되면서 자주쓰는화면 에추가됩니다.
2. 선택영역기능 선택영역은다음과같은기능들로구성되어있습니다. 1 쇼핑몰화면추가 : 새로운쇼핑몰화면을추가합니다. 추가된새화면은기본적으로레이아웃 (layout.html) 파일을포함합니다. ( 새화면편집방법은 chapter4 > 4. 새화면편집참고 ) 2 화면명검색 : 검색할화면명을입력한후키보드 [Enter] 키를치면검색결과가화면으로표시됩니다. 수정을원하는화면을선택하여 [ 선택파일열기 ] 버튼을클릭하면해당화면이편집창에서열립니다. 1 2
3. 편집영역기능 선택영역은다음과같은기능들로구성되어있습니다. 수정중인파일 : 디자인편집으로위해화면을열면, 해당화면이탭으로나열됩니다. : 열린화면이여러개인경우왼쪽오른쪽화살표를클릭해원하는탭을찾을수있습니다. : 현재열린화면리스트를보여줍니다. 저장 : 수정한화면을저장합니다. 수정후저장하지않으면탭에 와같이나타납니다. 새이름저장 : 선택된화면을새로운이름으로저장합니다. 저장경로를선택하고파일명을입력하면, 새파일로저장됩니다. 닫기 : 선택된화면을닫습니다. ( 버튼과동일함 ) 모두저장 : 열려있는모든화면을 저장합니다. 모두닫기 : 열려있는모든화면을 닫습니다.
3. 편집영역기능 선택영역은다음과같은기능들로구성되어있습니다. 미리보기 : 화면을편집한후, 저장하기전적용된화면을보고싶으면미리보기버튼을클릭합니다. 일반적으로, 화면모드가분할보기나 HTML보기상태에서편집한후에미리보기버튼을클릭하게됩니다. ( 화면모드는 p19 참고 ) 모듈추가 : 현재편집중인화면에새로운모듈을추가합니다. 화면모드가화면보기상태인경우에는모듈추가버튼이활성화되지않습니다. ( 모듈추가방법은 chapter5 참고 ) 최신소스 : 현재편집중인화면의최신소스를보여줍니다. 소스내용을확인한후적용버튼을눌러현재화면에적용합니다. 최종적으로저장버튼을눌러저장해야최신소스가반영됩니다. 히스토리 : 현재편집중인화면의저장히스토리를보여줍니다. 원하는저장시간을선택하면, 선택한시간에저장한내용으로소스를변경해줍니다. 최종적으로저장버튼을눌러저장해야반영됩니다.
3. 편집영역기능 선택영역은다음과같은기능들로구성되어있습니다. 로그인전 : 현재편집중인화면을로그인전 상태로미리보기합니다. 로그인후 : 현재편집중인화면을로그인후 상태로미리보기합니다.
3. 편집영역기능 화면모드는아래와같이 3 가지형태를제공합니다. 화면보기 : 편집하려는화면을미리보기형태로보면서수정합니다. 마우스움직임에따라모듈단위로영역이잡히고, 수정을원하는영역의편집버튼을눌러디자인 / 설정등을수정할수있습니다. 수정하면바로바로수정한내용으로미리보기형태가변경됩니다. 미리보기형태이므로, 화면에수정된내역이보인다고해서저장된것이아니므로, 주의하세요. 화면보기상태에서는모듈추가기능은지원되지않아비활성상태로나타납니다. 분할보기 : 편집하려는화면을화면보기와 HTML 보기두가지상태로보면서수정합니다. 좌측의화면보기영역은화면보기기능을그대로사용할수있고, 우측의 HTML 보기영역은 HTML 보기기능을그대로사용할수있습니다. 좌측의화면보기상태에서편집할영역을선택하면우측의 HTML 보기영역에는선택한영역의소스가하이라이트됩니다. HTML 보기영역에서소스를수정한후상단의미리보기버튼을누르면화면보기영역에서수정된내용이미리보기됩니다. HTML 보기영역에서는모듈추가기능이지원됩니다. 원하는위치에커서를위치한후모듈추가버튼을눌러추가하고싶은모듈을선택하세요. ( 모듈추가방법은 chapter5 참고 ) HTML 보기 : 편집하려는화면을 HTML 소스를열어코드를직접수정합니다. HTML 을아는사용자는바로수정할수있고, 모듈코드어시스트기능이지원되므로, 편리하게수정이가능합니다. 소스를수정한후수정내용을화면상에서확인하고싶으면 화면보기 또는 분할보기 상태로이동해야합니다. HTML 보기상태에서는모듈추가기능이지원됩니다. 원하는위치에커서를위치한후모듈추가버튼을눌러추가하고싶은모듈을선택하세요. ( 모듈추가방법은 chapter5 참고 )
Chapter 4. 영역별편집방법 19
1. 모듈편집 편집하고싶은모듈위에마우스를가져가면아래와같이모듈영역이선택됩니다. 편집 : 선택된모듈의디자인이나설정, 상세한 HTML을수정할수있습니다. ( 삭제 ) : 선택된모듈을삭제합니다.
1. 모듈편집 모듈의편집버튼을누르면꾸미기, HTML, 모듈편집등의수정이가능합니다. 꾸미기 : 선택한모듈을다양한형태로변 경할수있습니다. 원하는디자인을선택한후 [ 적용 ] 버튼을누르면선택한형태로 모듈디자인이변경됩니다. 수정사항이실제쇼핑몰화면에 반영되기위해서는해당페이지 를반드시저장하셔야합니다.
1. 모듈편집 속성 : 선택한모듈의설정값을스마트 편집창에서바로수정할수있습니다. 예를들어, PC쇼핑몰의카테고리메뉴이미지를스마트편집창속성에서도바로수정할수있습니다. 쇼핑몰관리자설정위치 : 상품관리 > 분류관리 > 메뉴이미지
1. 모듈편집 HTML : 선택한모듈의 HTML 소스만보여줍 니다. 이곳에서 HTML 소스를수정한후적 용버튼을누르면, 해당수정사항이 미리보기화면에적용됩니다. 수정사항이실제쇼핑몰화면에반 영되기위해서는해당페이지를반드 시저장하셔야합니다. 이곳에서 HTML 소스를수정하는것은화면모드의분할보기또는 HTML보기상태에서소스를수정하는결과와동일합니다. 화면모드를변경해서 HTML소스를보면, 페이지전체소스를보여지게되므로, 모듈단위의소스를보고싶은경우에사용하면좋습니다.
1. 모듈편집 모듈편집 : 선택한모듈을다른모듈로변경하고싶거나, 위혹은아래에다른모듈을추가하고싶은경우에사용합니다. 변경하려는모듈을선택한후, 현재모듈과변경을선택하여적용버튼을누르면, 기존에선택한모듈이변경하려는모듈로변경됩니다. 마찬가지로, 추가하려는모듈을선택한후, 현재모듈의위쪽에추가혹은아래쪽에추가를선택하여적용버튼을누르면, 기존에선택한모듈의위혹은아래쪽에모듈이추가됩니다. 수정사항이실제쇼핑몰화면 에반영되기위해서는해당페이 지를반드시저장하셔야합니다.
2. 이미지편집 편집하고싶은영역이단순이미지인경우에도모듈과마찬가지로위에마우스를가져가면해당영역이선택됩니다. 이미지의편집버튼을누르면속성, HTML, 모듈편집등의수정이가능합니다. 편집 : 선택된모듈의디자인이나설정, 상세한 HTML을수정할수있습니다. X( 삭제 ) : 선택된모듈을삭제합니다.
2. 이미지편집 이미지의편집버튼을누르면속성, HTML, 모듈편집등의수정이가능합니다. 속성 : 선택한이미지를다른이미지로 변경할수있습니다. [ 파일선택 ] 버튼을클릭하여이미지를새로업로드하면, 편집창에서변경된이미지로미리보기할수있습니다. 수정사항이실제쇼핑몰화면에 반영되기위해서는해당페이지를 반드시저장하셔야합니다.
3. 레이아웃편집 편집하고싶은영역이레이아웃파일에속한경우에는선택하면자동으로레이아웃파일이열립니다. 예를들어, 쇼핑몰메인화면의상단로고영역을선택하면, 메인레이아웃 화면이자동으로열리면서해당영역이선택된상태로보여집니다. 이상태에서 [ 편집 ] 버튼을누르면 일반적인모듈편집과동일하게 수정할수있습니다.
4. 새화면편집 쇼핑몰화면추가 를통해새화면을추가한경우는다음과같이편집할수있습니다. [ 화면추가 ] 버튼을눌러파일명에 new.html 화면을저장하면, 레이아웃과모듈영역이기본으로추가됩니다. 모듈영역을선택한후 [ 편집 ] 버튼을눌 러, HTML 소스에서직접수정하거나 새로운모듈을추가할수있습니다.
Chapter 5. 모듈추가방법 29
1. 모듈편집레이어로추가하기 카페 24 에서제공되는다양한모듈을 모듈편집창 에서편리하게추가할수있습니다. 편집하고자하는위치의모듈을 선택하고 [ 편집 ] 버튼을눌러 모듈편집창 을띄웁니다. 추가할모듈을선택하여, 선택한모듈 위쪽 혹은 아래쪽 으로적용여부를선택하고 [ 적용 ] 버튼을누르면해당위치에모듈이추가됩니다. 수정사항이실제쇼핑몰화면에반영되 기위해서는해당페이지를반드시저장하 셔야합니다.
2. 모듈추가버튼으로추가하기 카페 24 에서제공되는다양한모듈을 [ 모듈추가 ] 버튼을눌러편리하게추가할수있습니다. 분할보기또는 HTML보기 상태로편집하고자하는화면을열어, 추가할 HTML 소스영역에마우스커서를위치합니다. [Tip] 분할보기상태에서화면보기영역의모듈을선택하면, 해당 HTML소스가하이라이트됩니다. 이기능을이용하면쉽게소스위치를찾을수있습니다. [ 모듈추가 ] 버튼을눌러추가할모듈을 선택하여 [ 적용 ] 버튼을누르면해당위 치에모듈이추가됩니다. 수정사항이실제쇼핑몰화면에반영되 기위해서는해당페이지를반드시저장하 셔야합니다.