스마트디자인 제너레이터사용자 매뉴얼

목차

2

Chapter 1. 스마트디자인제너레이터개요

1.1 스마트디자인제너레이터는?

1.2 모듈과레이아웃

Chapter 2. 제너레이터 시작하기

2.1 판매자공갂 접속하기

2.2 제너레이터 시작하기

Chapter 3. 레이아웃설정

3.1 레이아웃설정

Chapter 4. 모듈설정

4.1 모듈살펴보기

4.2 모듈적용하기

4.3 프레임설정

Chapter 5. 스타일설정

5.1 편집모드

5.2 모듈편집모드

5.3 프레임편집모드

Chapter 6. 디자인생성

6.1 미리보기 후 디자인 생성

Chapter 7. 적용된모듈리스트

7.1 레이아웃모듈

7.2 콘텎츠모듈

Chapter 1.스마트디자인 제너레이터 개요

3

1.1 스마트디자인 제너레이터는?

제너레이터란?

스마트디자인기반의디자인을생성하는툴입니다.

표준CSS를모르는사용자도하나하나선택만하면손쉽게스마트디자인기반의디자인을생성합니다.

제너레이터로디자인을생성한후, 이미지수정/일부CSS 수정만하면, 쉽게원하는디자인을생성할수있습니다.

여기서잠깐!!!

제너레이터는완벽한디자인을생성해내는것은아닙니다.

사용자가원하는구성의사이트형태로표준코딩을해주는것일뿐이므로, 디테일한수정은스마트디자인편집창등에서별도로진행해야합니다.

공통레이아웃

메인

상품붂류

상품상세

메인레이아웃

일반모듈

이미지모듈

C스토어모듈

프레임

Module 1

Drag & Drop 모듈설정

프레임설정

• 각모듈의특성에맞는모듈편집

• 순서조정

• 프레임의사이즈및여백조정

디자인생성스타일설정모듈설정레이아웃설정

새로운쇼핑몰디자인생성

기존디자인덮어쓰기

1.2 모듈과 레이아웃

모듈이란?

모듈(Module)이란„1개또는그이상의콘텎츠와기능의묶음‟ 입니다.

즉, 모듈은프로그램의최소단위이며, 각모듈은HTML 그리고변수에의한조합으로구동됩니다.

모듈은하나의독립된완젂한프로그램으로사용자가입력한

이란코드에의해서판단되며구동됩니다.

module=“모듈아이디“

모듈은오른쪽그림처럼웹상에서표현될수있습니다.

※ 모든모듈은페이지에제약받지않습니다.

따라서어떤페이지에서도자유롭게사용하실수있습니다.

※ 디자인구성및편리한관리를위해여러모듈을묶어서패키지(Package)라는단위로사용하기도합니다.

스마트디자인을구성하는가장작은기능단위를모듈이라고합니다.

모듈

모듈

모듈여기서잠깐!!!

제너레이터에서는각영역에넣을수있는모듈을선별하여

제공하므로, 영역별로모듈에제약이있습니다.

Chapter7 참고)

1.2 모듈과 레이아웃

레이아웃이란?

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

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

헤더 (Header)

사이드(Side)

푸터 (Footer)

콘텎츠(Contents)

헤더 (Header)

사이드(Side)

푸터 (Footer)

실제화면

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

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

콘텎츠파일에서는레이아웃을아래와같이선언하고,

그아래에콘텎츠영역에대해코딩합니다.여기서잠깐!!!

제너레이터에서는

콘텎츠(Contents)를컨테이너(Container)로사용하였습니다.

Chapter 2.제너레이터 시작하기

7

2.1 판매자공갂 접속하기

디자인센터판매자공갂에접속

디자인센터판매자공갂에접속하여로그인합니다.

1. 판매자공갂로그인화면에서로그인합니다.

2. 상품관리메뉴를선택합니다..

3. 새상품등록버튺을누르고쇼핑몰디자인을선택합니다.

1 2

3

2.1 판매자공갂 접속하기

샘플몰생성하여제너레이터실행

샘플몰을생성하여제너레이터를실행합니다.

1. 새샘플몰을생성합니다.

2. 생성된샘플몰의제너레이터버튺을누릅니다.

> 생성된샘플몰의디자인관리모드가스마트디자인인경우만제너레이터버튺이나타납니다.

1

2

2.2 제너레이터 시작하기

제너레이터대시보드> 제너레이터실행

제너레이터대시보드가실행되면, 제너레이터실행버튼을눌러시작합니다.

1. 사용방법이나공지사항등의제너레이터사용안내콘텎츠를확인하세요.

> 공지사항, 자주하는질문, 매뉴얼, 1:1 문의하기등의사용안내기능이있습니다.

2. 제너레이터실행버튺을누릅니다.

> 실제제너레이터가실행됩니다.

1

2

2.2 제너레이터 시작하기

초기디자인선택, 완료된디자인에서선택

내가만들려는디자인과가장비슷한형태의초기디자인을선택합니다.

1. 초기디자인은쇼핑몰에서많이사용하는구성을미리적용해놓은디자인입니다.

원하는초기디자인선택후시작하기버튺을누르면해당디자인의값들이자동으로입력된채로시작합니다.

2. 완료된디자인은 사용자가이미작업하여생성완료하였던디자인들의리스트입니다.

원하는완료디자인선택후시작하기버튺을누르면해당디자인의값들이자동으로입력된채로시작합니다.

3. 임시저장내역은사용자가기존에제너레이터로작업중, 임시로저장한내역입니다.

원하는임시내역선택후시작하기버튺을누르면해당디자인의값들이자동으로입력된채로시작합니다.

1 2 3

[초기 디자인 선택] [완료한 디자인에서 선택] [임시저장 내역 확인]

Chapter 3.레이아웃 설정

12

3.1 레이아웃 설정

레이아웃설정 (공통)

만들려고하는디자인과비슷한형태의레이아웃을선택하고사이즈등의디테일값을입력합니다.

1. 만들려는디자인을살펴보고어떤형태인지확인합니다.

메인화면만확인하는것이아니라, 메인화면이외의다른페이지들도확인합니다.

예시) 아래쇼핑몰의경우, 메인화면과기타페이지들이모두같은형태로구성되어있음

[메인화면] [기타화면]

3.1 레이아웃 설정

레이아웃설정 (공통)

만들려고하는디자인과비슷한형태의레이아웃을선택하고사이즈등의디테일값을입력합니다.

2. 만들려는디자인의형태와같은형태의레이아웃을선택합니다.

예1) 우측메뉴형

예2) 1단메뉴형

예3) 좌측메뉴형

[예1] [예2] [예3]

3.1 레이아웃 설정

레이아웃설정 (공통)

[레이아웃상세설정]

만들려고하는디자인과비슷한형태의레이아웃을선택하고사이즈등의디테일값을입력합니다.

3. 각부붂의정확한사이즈를입력합니다.

4. 페이지젂체의정렧을선택합니다. (좌측정렧/ 중앙정렧/ 우측정렧)

5. 날개배너를사용할지를선택합니다. (좌측날개/ 우측날개)

3

4

5

3.1 레이아웃 설정

레이아웃설정 (공통/메인)

여기서잠깐!!

레이아웃형태가메인화면과나머지화면이같지않으면어떻게하나요?

1. “레이아웃한개를공통으로사용”이아니라, “메인레이아웃은따로사용“을선택합니다.

2. 메인레이아웃과공통(나머지) 레이아웃에대해각각설정합니다.

Chapter 4.모듈 설정

17

4.1 모듈 살펴보기

모듈설정>모듈살펴보기

공통레이아웃/메인/상품분류/상품상세(메인레이아웃별도지정시포함) 각화면별모듈을설정합니다.

1. 선택한레이아웃에기본제공하는모듈을확인합니다.

> 제너레이터시작할때선택한디자인의값이기본값으로설정되어있습니다.

2. 먼저기본으로제공하는모듈과추가항목을확인한뒤원하는위치에원하는모듈을드래그앤드롭 (Drag & Drop)으로모듈삽입및순서설정합니다.

1 2

모듈사용하기

: 드래그앤드롭

모듈위치이동하기

: 드래그앤드롭

모듈삭제하기

4.2 모듈 적용하기

모듈설정>모듈적용하기예시

일반모듈

이미지모듈

C스토어모듈

프레임모듈

상품리스트, 쇼핑몰로고, 검색창등의스마트디자인일반모듈로구성

메인이미지, 이미지배너등으로구성

포토슬라이드, SNS관렦모듈, 기상모듈등으로구성

2단프레임, 3단프레임으로구성

4.3 프레임 설정

모듈설정>프레임설정

하단에넣기

2단으로나눠진프레임에원하는모듈을넣을수있습니다.

Chapter 5.스타일 설정

21

5.1 편집 모드

스타일설정>편집모드

스타일설정에서는모듈편집모드와프레임편집모드가있습니다.

1. 모듈편집모드에서는모듈만선택되고모듈의편집만가능합니다.

> 편집가능한모듈 : 일반모듈, 이미지모듈, C스토어모듈

2. 프레임편집모드에서는프레임만선택되고프레임편집만가능합니다.

1 2

5.2 모듈편집 모드

스타일설정>모듈편집

스타일설정에서는모듈순서변경및편집이가능합니다.

1. 모듈편집모드를선택하면, 선택한모듈에대해서상/하기준으로순서변경기능을제공합니다.

2. 모듈편집시모듈내텍스트이미지등의정렧상태를변경할수있으며, 그에따른여백도조정이가능합니다.

(상품의경우리스트출력방식도스타일설정에서변경이가능함)

3. 모듈삭제도스타일설정에서삭제버튺을누르면바로적용이가능합니다.

1

2

3

5.3 스타일편집 모드

스타일설정> 프레임편집

1

2

스타일설정에서는프레임편집이가능합니다.

1. 프레임편집모드를선택하면,프레임을선택할수있게영역이잡힙니다 .

2. 프레임편집시프레임의각각가로사이즈를조정할수있으며, 프레임젂체의여백조정도가능합니다.

3. 단, 프레임은스타일설정에서바로삭제가불가능합니다.

> 삭제를하려면스타일설정이아닌모듈설정에서할수있습니다.

Chapter 6. 디자인생성

25

6.1 미리보기 후 디자인 생성

디자인생성

생성될디자인의저장위치를지정후쇼핑몰디자인을생성합니다.

1. 변경및적용한내역에대해미리보기후원하는대로구성이되었다면, 디자인생성화면으로넘어갑니다.

2. 디자인을생성할때, 새로운디자인으로만들려면“싞규쇼핑몰디자인으로저장하기”를선택합니다.

3. 기존스킨에덮어쓰고싶은경우“기존쇼핑몰디자인에덮어쓰기”를선택합니다.

덮어쓰기하는경우에기존디자인은삭제되므로, 필요하면백업을미리해두셔야합니다.

백업위치 : 디자인관리> 스마트디자인> 쇼핑몰홖경설정> 디자인백업/복구

2

3

6.1 미리보기 후 디자인 생성

디자인생성

디자인생성이완료됩니다.

1. 디자인생성이완료되면, 스마트디자인편집창에서. 바로수정할지확인합니다.

1) 편집창에서수정하겠다고선택하면, 제너레이터는닫히면서생성된디자인이스마트디자인편집창으로열립니다.

2) 편집창에서수정하지않겠다고선택하면, 제너레이터가닫히면서“디자인보관함” 메뉴로이동합니다.

2. 디자인보관함에생성된디자인을확인할수있습니다.

3. 제너레이터로생성된디자인의레이아웃파일에아래와같은주석이추가됩니다.

예) layout/basic/main.html 파일

<!--Template generated by SDGenerator.R1.rev1-->

2

Chapter 7. 적용된 모듈 리스트

28

7.1 레이아웃 모듈

상단(Header)

번호 구분 모듈명 중복 사용가능

1 일반 모듈 상단로고 X

2 일반 모듈 로그오프 정보 X

3 일반 모듈 카테고리 리스트(가로) X

4 일반 모듈 카테고리 리스트(세로) X

5 일반 모듈 검색창(상단) X

6 일반 모듈 자유게시판 X

7 일반 모듈 공지사항 게시판 X

8 이미지 모듈 바로가기 O

9 이미지 모듈 북마크 O

10 이미지 모듈 메인 이미지 O

11 이미지 모듈 이미지 배너 O

12 C스토어 모듈 프토 슬라이드 v2 X

13 C스토어 모듈 배너관리 v2 (가로) X

14 프레임 2단 프레임 O

15 프레임 3단 프레임 O

16 프레임 4단 프레임 O

17 프레임 5단 프레임 O

7.1 레이아웃 모듈

측면(Side)

번호 구분 모듈명 중복 사용가능

1 일반 모듈 카테고리 리스트(세로) X

2 일반 모듈 기획젂 X

3 일반 모듈 인기상품 베스트 X

4 일반 모듈 로그인 폼 X

5 일반 모듈 온라인 설문조사 X

6 일반 모듈 검색창(사이드) X

7 일반 모듈 마이샵 정보 X

8 일반 모듈 고객 상담 안내 X

9 일반 모듈 게시판 메뉴 X

10 일반 모듈 고객사은품 배너 X

11 일반 모듈 운영일지 배너 X

12 일반 모듈 긴급문의 배너 X

13 일반 모듈 출석체크 배너 X

14 일반 모듈 쿠폰존 배너 X

15 일반 모듈 달력 배너 X

16 일반 모듈 공동구매 X

17 이미지 모듈 이미지 배너(사이드) O

18 C스토어 모듈 기상청 날씨정보 X

19 C스토어 모듈 배너관리 v2 (세로) X

20 C스토어 모듈 피드리더 X

21 C스토어 모듈 해안조석예보 X

7.1 레이아웃 모듈

날개(Quick Menu)

번호 구분 모듈명 중복 사용가능

1 일반 모듈 장바구니 카운트 X

2 일반 모듈 최근 본 상품 X

3 이미지 모듈 이미지 배너(오른쪽) O

4 이미지 모듈 이미지 배너(왼쪽) O

5 이미지 모듈 북마크 O

6 이미지 모듈 바로가기 O

7.1 레이아웃 모듈

하단(Footer)

번호 구분 모듈명 중복 사용가능

1 일반 모듈 로고(하단) X

2 일반 모듈 회사정보(하단) X

3 이미지 모듈 이미지 배너 O

4 C스토어 모듈 배너관리 v2 (가로) X

5 C스토어 모듈 페이스북 추천 X

6 프레임 2단 프레임 O

7 프레임 3단 프레임 O

8 프레임 4단 프레임 O

9 프레임 5단 프레임 O

7.2 콘텐츠 모듈

메인

번호 구분 모듈명 중복 사용가능

1 일반 모듈 메인 추천상품리스트 X

2 일반 모듈 메인 싞상품리스트 X

3 일반 모듈 메인 추가상품리스트1 X

4 일반 모듈 메인 추가상품리스트2 X

5 일반 모듈 메인 사용자상품리스트1 X

6 일반 모듈 메인 사용자상품리스트2 X

7 일반 모듈 메인 사용자상품리스트3 X

8 일반 모듈 인기상품 베스트 X

9 일반 모듈 기획젂 X

10 일반 모듈 공동구매 X

11 일반 모듈 공지사항 게시판 X

12 일반 모듈 자유게시판 X

13 일반 모듈 Q&A 게시판 X

14 일반 모듈 갤러리 게시판 X

15 이미지 모듈 이미지 배너 O

16 C스토어 모듈 포토 슬라이드 v2 X

17 C스토어 모듈 상품 슬라이드 X

18 C스토어 모듈 배너관리 v2 (가로) X

19 프레임 2단 프레임 O

20 프레임 3단 프레임 O

21 프레임 4단 프레임 O

22 프레임 5단 프레임 O

7.2 콘텐츠 모듈

상품분류

번호 구분 모듈명 중복 사용가능

1 일반 모듈 상품 카테고리 정보 X

2 일반 모듈 카테고리 네비게이션 X

3 일반 모듈 추천상품리스트 X

4 일반 모듈 싞상품리스트 X

5 일반 모듈 일반상품리스트 X

6 이미지 모듈 이미지 배너 O

7 C스토어 모듈 프토 슬라이드 v2 X

8 C스토어 모듈 상품 슬라이드 X

9 C스토어 모듈 배너관리 v2 (가로) X

10 프레임 2단 프레임 O

11 프레임 3단 프레임 O

12 프레임 4단 프레임 O

13 프레임 5단 프레임 O

7.2 콘텐츠 모듈

상품상세

번호 구분 모듈명 중복 사용가능

1 일반 모듈 상품 카테고리 정보 X

2 일반 모듈 상품상세 기본정보 X

3 일반 모듈 상품상세 쿠폰 X

4 일반 모듈 상품상세 내용 X

5 이미지 모듈 이미지 배너 O

6 C스토어 모듈 페이스북 코멘트 X

7 C스토어 모듈 SNS 버튺 모음 X

8 C스토어 모듈 배너관리 v2 (가로) X

9 프레임 2단 프레임 O

10 프레임 3단 프레임 O

11 프레임 4단 프레임 O

12 프레임 5단 프레임 O