모듈의 예

쇼핑몰관리자

1:1문의

고객센터

상점관리

상품관리

주문관리

고객관리

게시판관리

디자인관리

모바일쇼핑몰

프로모션

마켓통합관리

부가서비스

접속통계

FTP

C스토어

디자인관리

스마트디자인

디자인 관리

• 디자인 보관함

• 디자인 추가

• 디자인 예약

• 디자인 백업·복구

디자인 기능설정

• 인트로 화면

• 팝업 설정

• 플래시메이커

• 아이콘

• 쇼핑몰 알리미

쇼핑몰 환경설정

웹페이지는 기본적으로 HTML, CSS 그리고 Javascript에 의해서 사용자에게 보여지게 됩니다.

또한 일반적으로 동적인 웹사이트 구현을 위해서 JSP, PHP, ASP등의 언어를 이용해서 사이트를 구현하며, JSP, PHP, ASP 등은 프로그래머에 의해 다시 가공됩니다.

그리고 여기에서 더 발전한 형태가 HTML단의 표현에 대해서 Smarty, Template 등을 통해 템플릿으로 제공되는 형태가 진화된  형태라고 할 수 있습니다.

이것은 프로그램적인 요소인 JSP, PHP, ASP에서 행해지는 일련의 프로그램적인 형태를 디자이너가조금 쉽게 사용할 수 있도록 제공하는 것입니다.

템플릿 엔진을 이용해 사용자에게 HTML 페이지를 수정할 수 있도록 기능을 제공합니다.

이러한 템플릿 엔진은 JSP, PHP, ASP를 배우는 것보다는 빠르게 익힐 수 있기 때문에 디자인 능력을 가진 업체나 초보적인 프로그램 개발이 가능한 업체에서 익히기에 훌륭한 툴이 되어

최근 몇 년간 활용되었고, 현재 시장에서 통용되고 있는 기술입니다.

하지만 이러한 업체들은 다음과 같은 초기의 형태보다는 발전할 수 있었지만, 더 큰 사용자의 욕구를 만족시키기에는 부족하였습니다.










이에, 카페24 스마트디자인은 이러한 단점을 개선한 솔루션이라 할 수 있습니다.

아래의 그림을 보면, 스마트디자인을 이용하면 변경될 개발 프로세스로 프로그램 개발 단계가 과감히 생략되었습니다

- 웹 표준이 시대적 흐름이나 기존 템플릿 엔진으로는 구현의 어려움

- 템플릿엔진도 if, for, while등 프로그램적 요구사항을 배워야 제대로 활용할 수 있음

- 템플릿엔진을 익히기 까지 많은 시간이 소요됨

- 어떤 페이지에는 어떤 프로그램만 구동되는 형식이여서 표현 제약이 따름

   ① 주어진 페이지 주소

   ② 주어진 페이지에서만 사용할 수 있는 모듈

- 사용자 영역과 프로그램적 영역이 모호하여 오류가 잦음

과연 어떤 방법으로 프로그램적 요소를 생략할 수 있을까요?

이는 사용자가 작성한 HTML을 기준으로 그 위에 프로그램이 구동될 수 있는 환경을 제공한 것입니다.


아래의 예제는 기존 PHP에서 표현하는 방식과 Smarty 템플릿 엔진 그리고 Cafe24의 새로운디자인 스마트디자인을 코딩 수준에서 설명한 것입니다.

기존 소스 (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 코딩 위에 프로그램을 입히는 것’ 입니다.

• 모듈이란 '1개 또는 그 이상의 컨텐츠와 기능의 묶음' 입니다.  즉, 모듈은 프로그램의 최소 단위이며, 각 모듈은 HTML 그리고 변수에 의한 조합으로 구동됩니다.

• 모듈은 하나의 독립된 완전한 프로그램으로 사용자가 입력한 module="모듈아이디" 이란 코드에 의해서 판단되며 구동됩니다. 

• 모듈은 아래의 그림처럼 웹 상에서 표현될 수 있습니다.

※ 모듈과 모듈을 묶어서 package라고 합니다.

Package 단위로 동작하는 것은 아니고 디자인의 묶음을 위하여 package로 부분디자인은 구성을 할 수 있습니다.

모듈명 : Layout_category

<div id="category" module="Layout_category">

      <!--@css(/css/module/layout/category.css)-->

      <!--@js(/js/module/layout/category.js)-->

      <div class="position">

           <ul>

                 <li><a href="/product/list.html{$param}">{$name_or_img_tag}</a></li>

                 <li><a href="/product/list.html{$param}">{$name_or_img_tag}</a></li>

                 <li><a href="/product/list.html{$param}">{$name_or_img_tag}</a></li>

            </ul>

      </div>

</div>

2) 제공되는 모듈

• 카페24에서는 다양한 모듈을 제공하고 있습니다.

• 모듈 정보는 아래 사이트에서 상세하게 확인할 수 있습니다. [사용 가능한 모듈리스트 안내 바로가기 ▶]

• 디자인 수정시 '해당 모듈을 찾을 수 없습니다'라는 알림창이 표시되며 디자인 소스 수정이 불가한 경우에는 '1:1문의'로 접수해주시기 바랍니다.


스마트디자인 개요

상세기능 설명

스마트디자인 시작하기

모듈 추가 방법

영역별 편집 방법

스마트디자인 사용 TIP

▼ 아래의 탭 버튼을 클릭하시면 관련 내용을 확인할 수 있습니다.

스마트디자인 개요

1. 스마트디자인이란?

2. 모듈

스마트디자인

- 전문 개발자가 없이도, HTML만 안다면 다양한 쇼핑몰 운영자의 욕구를 그대로 구현해낼 수 있는 디자인 관리툴입니다.

- 어느 브라우저에서나 쾌적한 쇼핑환경을 유지하며, 사이트 경량화를 통해 접속 속도를 높여줍니다.

- 또, 차별화된 고객 관리를 위해 다양한 스킨 기능을 탑재하고 있으며, 제약 없이 원하는 디자인을 구현할 수 있습니다.

3. 레이아웃

• 레이아웃이란 공통으로 사용되는 부분을 레이아웃이라고 하고, 스마트디자인에서는 레이아웃을 따로 정의할 수 있습니다.

• 레이아웃은 아래와 같이, 크게 세 부분으로 나누어 집니다.

헤더(Header)

컨텐츠

(Contents)

푸터(Footer)

사이드

(Side)

헤더(Header)

사이드

(Side)

푸터(Footer)

실제화면

로고

로그인정보

검색창 상단형

바로가기

로그인

마이쇼핑

검색창(사이드바형)

상품분류 메뉴

기획전

고객상담안내

게시판 목록

공동구매

온라인 설문

인기상품 베스트


고객사은품 배너

운영일지 배너

긴급문의 배너

출석체크 배너

쿠폰존 배너


최근 본 상품


회사정보

공통으로 사용할 레이아웃은 파일을 따로 만들어 관리합니다.

컨텐츠 파일에서는 레이아웃을 아래와 같이 선언하고, 그 아래에 컨텐츠 영역에 대해 코딩합니다.

<!--@layout(레이아웃파일위치/레이아웃파일명)-->