카페24 쇼핑몰 3. 스마트 디자인 이해하기

FTP로 저장소를 복사하여 다운로드가 다 되긴 했지만, 열어본 index.html은 에러 투성이다. 

빨간줄 투성이에, css 태그들은 하이라이트 쳐져있다. 주의 표시다.

자세히 살펴보니 {$...}으로 시작하는 태그들 때문에 문제가 생기는 것 같다.

이건 카페24 자체 스마트 디자인의 모듈이란거다.

카페24 쇼핑몰 센터에서는 다양한 모듈을 제공한다.

https://sdsupport.cafe24.com/

스마트디자인 서포트

위 사이트에서 다양한 매뉴얼 및 목록을 볼 수 있다.

마찬가지로 "변수" 와 "모듈"의 개념에 대해서도 아래 링크에 잘 설명해놓았다.

https://sdsupport.cafe24.com/board/tip/read_intro.html?no=191&board_no=5&category_no=2&cate_no=2&category_no=2 

스마트디자인 서포트

요약하자면, {$lorem_ipsum} 이란 애는 "변수" 인데, 카테고리 이름 같은걸 보여줘야 할 때 텍스트를 하드코딩 하는 대신 변수를 써서 관리자 페이지에서 변경할 수 있도록 하는 녀석이다.

<div module="%이름%">이란 애는 모듈인데, 카테고리나, 로고, 검색기능 같은걸 모듈로 제공한다.

사진 출처: 카페24 스마트디자인 서포트

모듈 리스트에 들어가서 원하는 모듈을 클릭하면 관련 코드를 준다.

복사 붙여넣기 하면 모듈을 이용할 수 있는 것이다.

모든 기능을 이해했으니 이제 스마트 디자인 편집창과 WebStorm 창을 비교해보자.

디자인 관리 -> 디자인 관리 -> 디자인 보관함에서 기본디자인에 수정을 눌러주면, 스마트 디자인 편집창이 뜬다.

옆에는 화면별로 정리된 아주 깔끔한 인상을 주지만(처음엔 저걸 보고 "스킨 제작 쉽겠네!" 생각했었다..) 그 옆 "전체화면보기"를 눌러보면 모든 파일들이 나타난다.

그 아래 폴더 추가나 화면 추가를 눌러보면, 이 스킨의 상위폴더 이름을 확인할 수 있다. 나는 skin3다.

WebStorm으로 돌아가보면 sde_design의 skin3가 보일 것이고, 아까 보았던 것과 비슷함을 알 수 있을 것이다.