1. 디자인요소
이미지 / 링크이미지
사용법
이미지는 단순히 디자인적인 요소로 이미지파일을 넣을 때 사용되고,
링크이미지는 이미지와 더불어 특정 페이지로 링크를 연결 할 수 있는 기능이 포함되므로 간단하게 메뉴나 배너를 넣을 때 사용된다.

링크이미지 모듈은 추가이미지를 넣을 경우 마우스 오버했을 때 변화되는 형태로 만들 수 있다.
응용
링크이미지를 사용한 배너

연결할 메뉴가 많거나 좀더 복잡한 형태의 이미지 구성이라면 [자유메뉴]모듈을 이용하는 것이 작업 효율성이 좋다.
관련내용
모듈편집
직접편집
사용법
웹편집기를 이용해 완전히 자유스러운 디자인을 넣을 수 있는 기능의 모듈

대부분의 디자인이 제공되는 모듈들을 이용해 가능하지만 경우에 따라서는 모듈에서 지원되지 않는 형태나 자바스크립트코드 등이 들어갈 경우 등에 사용될 수 있다.
생성되는 코드는 xhtml 표준과 UTF-8문자셋으로 자동변환되어 저장된다.
응용
이미지와 텍스트가 혼합된 페이지를 작성중인 예.

웹편집기 기능중에 [html] 아이콘을 누르면 웹페이지 소스를 직접입력할 수 있는 상태가 된다.
드믈겠지만 모듈로 힘든 부분이 있다면 하드코딩(소스코딩)을 할 수 있게 된다.
관련내용
모듈편집
플래시 효과
사용법
이미지를 선택하고 플래시효과를 선택하는 것만으로 간단히 해당이미지에 역동적인 효과를 줄 수 있다.

응용
밋밋한 홈페이지를 다소 역동적인 모습으로 만들어 주지만, 많이 사용할 경우 홈페이지나 컴퓨터 자체가 다소 느려질 수 있다.
그러므로 꼭 필요하다고 판단되는 곳에만 적용하는 것이 좋다.
관련내용
모듈편집
2. 자유메뉴
자유메뉴 - 메인메뉴/카테고리/하단영역/기타메뉴(계좌정보/업체연락처 등)
사용법
메뉴연결이 많거나 다소 복잡한 구조의 디자인에 사용되는 모듈.
이름에서 알수 있듯이 자유롭게 디자인과 메뉴를 구성할 수 있다.
특이한 기능으로는 플래시효과가 적용된 이미지를 쉽게 포함할 수 있다는 것이다.
상단 메인이 밋밋할 경우 플래시 효과를 넣어주면 좀 더 살아있는 느낌의 홈페이지 구성이 가능하다.

메인메뉴, 카테고리, 하단영역.. 모듈이 나뉘어 있지만, 제공되는 샘플템플릿이 다를뿐 사용방법은 모두 똑같다.
디자인 형태에 맞는 모듈을 선택해서 작업하는 것이 덜 혼잡스러울 것이다.
응용
기타메뉴로 고객센터를 구성한 예

배너를 구성한 예

카테고리, 영업시간, 전화번호, 이메일 주소등 변경이 있을 부분은 이미지를 직접 넣는것보다는 [텍스트이미지]로 설정해서 간단히 텍스트입력만으로 내용을 변경 할 수 있도록 하는 것이 유지보수에 편리하다.
최대 4가지 형태의 텍스트나 텍스트이미지 설정이 가능하므로 적절히 이용하면 그래픽작업 없이 내용변형이 가능하게 유지할 수 있다.
관련내용
모듈편집
3. 메인추출
게시판추출
사용법
게시판 글 내용을 메인에 추출 할 때 사용
일반적으로 공지사항을 빼내는 경우가 많다.

글의 길이는 모듈크기에 맞게 자동으로 맞추어서 표시된다.
주의 할 것은 추출되는 높이값은 줄수로 높이가 정해지므로 빼내는 줄수에 주의해야 한다.
폰트크기에 따라서 높이가 달라질 수 있으므로 미리보기 화면에서 확인해 보면서 세팅해야 한다.
응용
목록 영역에 배경을 깔아서 디자인을 적용한 예.

멀티탭등에 끼워넣거나 타이틀을 외부에서 디자인할 경우, 타이틀을 감추어야 할 경우가 있다. 이때는 타이틀 세팅시 [사용자이미지]를 선택하고, 이미지를 비워둔다.
그러면 타이틀영역이 없이 리스트된 글만 보이게 된다.
관련내용
모듈편집
상품추출
사용법
메인에 특정 카테고리의 상품을 추출해서 보여줄 때 사용
일반적으로 신규상품이나 기획상품등을 메인에 노출할 때 사용한다.

특징은 카테고리를 선택하는 것만으로 세팅되므로 상품내용이 바뀌면 자동으로 업데이트 된다.
단, 이미지의 크기는 다른 상품추출 모듈과 달리 관리자페이지에서 지정된 크기로만 나타난다.
응용
한줄당 표시갯수4개, 전체표시갯수 12개로 할 경우 4개씩 3줄이 추출된 예.

기본 카테고리가 아닌 기획상품, 추천상품등 특별한 상품을 추출할 경우, 관리자페이지에서 해당 카테고리(기획상품, 추천상품 등)를 만들고 관련 상품을 연결한 후 해당 카테고리를 연결하면 된다.
상품들은 다중 카테고리 세팅이 지원되기 때문에 가능한 방법이다.
관련내용
모듈편집
멀티상품
사용법
일정한 크기의 영역에 스크롤기능을 넣어 여러 상품을 보여줄 수 있는 모듈이다.
일반적으로 한화면에 보여줄 상품이 많거나 액티브한 홈페이지의 시각적효과를 위해서 사용한다.

특징은 상품의 이미지를 지정할 수 있으며, 한번에 보여줄 가로/세로 갯수를 조절 할 수 있으며, 개별상품을 선택해서 연결가능하다는 것이다.
주의 할 것은 이미지크기를 지정할 때 기존 이미지가 찌그러지지 않도록 가로세로 비율을 유지하면서 지정해야 한다.
응용
전체크기를 조절해 가로형과 세로형으로 만든 예.

가로세로 크기를 조절해서 가로갯수와 세로갯수를 동시에 여러개로 만들 수 있다.

관련내용
모듈편집
멀티배너
사용법
하나의 영역에 페이지버튼을 클릭함으로서 여러개의 배너를 보여줄 수 있는 모듈이다.
일반적으로 기획상품이나 이벤트등의 내용을 연결한다.

특징은 연결되는 페이지가 어떠한 것(웹페이지, 상품 등)이라도 가능하며, 배너 전환시 전환효과를 선택할 수 있으며, 시간에 따라 자동으로 변한다.
주의 할 것은 표시되는 배너이미지는 반드시 넣어주어야 한다.
응용
페이지버튼 영역을 세로로 길게 지정해서 만든 예.

페이지표시버튼이 반드시 번호형태일 필요는 없다.
ABC 형식의 이미지로 넣거나, 타이틀명이 들어간 버튼이미지를 넣어서 설정하면 마치 멀티탭같은 효과를 낼 수 도 있다.
관련내용
모듈편집
멀티탭
사용법
같은 영역에서 탭메뉴로 다른 내용들을 보여주는 기능을 가진 모듈
일반적으로 게시판들을 하나의 영역에 보여줄 때 사용된다.


멀티탭은 탭메뉴와 내용으로 구성된다.
탭메뉴는 [탭메뉴디자인 선택]을 눌러서 원하는 디자인을 선택하면 된다.
탭메뉴의 위치는 상하좌우 어떠한 곳에도 위치할 수 있다.

멀티탭의 내용은 그룹안에 모듈을 추가하고 원하는 보여줄 모듈을 넣으면 된다.
내용은 게시판, 상품추출, 배너 등 무엇이든 가능하며, 갯수 제한도 없다.
주의 할 것은 포함된 각 모듈의 크기는 일정하게 유지하는 것이 좋다.

탭메뉴 순서는 포함된 모듈의 순서에 따라 자동으로 연결된다.
응용
[상품추출]모듈들로 구성된 탭메뉴

내용에 들어가는 모듈에 제한이 없기 때문에 여러가지 형태의 인터페이스를 만들 수 있다.
예를 들어 일부 상품카테고리 메뉴를 탭으로 구성해 새로운 형태의 카테고리를 구성할 수 있다.
또한 멀티탭 모듈 자체가 이동그룹에도 들어갈 수 있으므로 스크롤에 따라다니는 형태로도 구성이 가능하다.
관련내용
모듈편집
4. 기능모듈
로그인박스
사용법
직접 빠르게 로그인할 수 있도록 해주는 모듈이다.
기본적으로 정사각형 형태와 가로로 긴 형태가 존재하며, 원하는 모양으로 구성이 가능하다.

 (실제페이지 예)
쇼핑몰에서는 디자인적인 이유와 공간적인 이유로 로그인박스를 사용 경우는 드믈다.
응용
디자인적으로 덜 부담 스러운 가로형태의 로그인박스

심플한 스타일의 쇼핑몰에서는 일반적으로 [로그인]메뉴를 연결해서 로그인페이지로 연결하는 경우가 대부분이다.
대부분 비회원구매도 가능하도록 설정하기 때문에 최근에는 로그인박스 사용이 더욱 줄어드는 경향이 있다.
관련내용
모듈편집
오늘본상품
사용법
사용자가 쇼핑몰에 접속해서 본 상품의 목록을 보여주는 모듈이다.
모든 쇼핑몰에 대부분 있으며, 사용자 편의상으로 필수적인 기능이므로 반드시 넣어야 한다.
주의 할 것은 추출시 [이동그룹]안에 넣어야 페이지 스크롤시 따라 다니게 된다.

 (실제페이지 예)
5개이상일 경우 스크롤을 움직일 수 있는 버튼들이 나타난다.
응용
이동그룹에 다른 디자인모듈과 함께 결합된 형태의 예.

오늘본상품 모듈은 대부분의 경우 이동그룹속에 넣어서 작업하게 된다.
그룹안에는 다른 디자인요소가 같이 들어가는 것이 가능하므로, 추천상품이나 이벤트 내용을 같은 그룹안에 위치시키면 나름 괜찮은 배치가 될수 있다.
관련내용
모듈편집
팝업닫기
사용법
메인에 팝업창을 띄울 경우 사용되는 모듈이다.
팝업닫기 모듈은 모습에서 보듯이 자체적으로 팝업내용이 들어가지 않고 닫기 버튼만 존재한다.
실제 작동은 팝업닫기 버튼을 눌렀을 경우, 포함한 그룹이 닫히는 방식으로 작동한다.
대부분 [고정그룹]속에 넣어 화면 임의의 위치에 올려놓는 형태로 디자인된다.

(실제페이지 예)
그룹속에는 컨텐츠나 디자인에 제한이 없으므로, 다양한 형태의 팝업창을 만드는 것이 가능하다.
응용
[플래시효과]모듈과 결함된 팝업창

경우에 따라서는 같은 그룹속에 상품추출관련 모듈과 결합될 경우 재미있는 형태의 팝업창이 가능하다.
또한 [이동그룹]속에 팝업창을 구성할 경우 따라다니는 팝업창을 구성할 수 있다.
관련내용
모듈편집
검색박스
사용법
전체 상품을 대상으로 검색할 수 있는 기능이다.
모든 쇼핑몰에 대부분 있으며, 사용자 편의상으로 필수적인 기능이므로 반드시 넣어야 한다.

(실제페이지 예)
검색박스는 메인에서 잘 보이는 곳(대부분 상단쪽)에 위치시키는 것이 좋다.
응용
검색박스를 [고정그룹]에 넣어 상단 임의의 위치에 고정시킨 예.

검색박스 모듈을 [이동그룹]에 넣을 경우 스크롤에 따라 항상 따라다니며 보여지므로 검색이 편리한 쇼핑몰을 간단히 구현할 수 있다.
관련내용
모듈편집
5. 확장모듈
컨텐츠페이지
사용법
서브스킨(상품목록,게시판,컨텐츠 등이 표시될 때 적용되는 스킨)에는 반드시 하나의 컨텐츠페이지 모듈이 들어가야 한다.
메인스킨과의 유일하게 다른 점이다.
컨텐츠(게시판 등)가 컨텐츠페이지가 위치한 영역에 표시되는 것이다.
또한 각 컨텐츠(상품목록,상품정보,상품상세정보,장바구니,게시판,마이페이지,로그인페이지)에 대한 디자인 설정도 이곳에서 진행한다.

(컨텐츠페이지 선택시 나타나는 화면)


응용
서브페이지가 표시될 때 위쪽, 왼쪽 여백은 모듈자체에서 설정하면 된다.
물론 테두리도 넣을 수 있다.
각 컨텐츠에 대한 설정은 서브스킨에 따라 따로 저장되므로, 각 서브스킨마다 전혀 다른 형태의 컨텐츠 디자인이 설정이 가능하다.
단, 로그인페이지는 서브스킨에 관계없이 마지막에 선택된 디자인이 표시된다.
관련내용
스킨연결 컨텐츠페이지설정 멀티스킨만들기
외부모듈(위젯)
사용법
위젯을 제공하는 다른 사이트에서 소스를 가져와서 모듈처럼 추가할 수 있는 기능.
현재는 무료로 사용할 수 있는 [다음]사이트에서 제공하는 모듈을 사용할 수 있다.



(다음 위젯제공 페이지)

(위젯을 추가한 모습)
사용방법은 의외로 간단하다.
다음 위젯뱅크에 접속후 원하는 위젯을 선택한 후 [HTML 소스]를 선택해서 소스를 복사한 후 모듈편집기에 저장해 넣으면 끝.
해당 위젯을 선택하면 홈페이지에 내부모듈처럼 들어가고, 미리보기도 가능하다.
응용
제공되는 위젯목록을 보면 자신의 홈페이지에 필요한 것들을 몇몇 발견할 수 있다.
디자인을 해치치 않는 범위에서 적당히 한두개 정도 끼워넣으면 홈페이지 기능개선효과도 맛볼 수 있다.
위젯을 모듈형태로 저장해서 처리하므로 한번 가져온 위젯은 간단히 모듈편집기에서 선택하는 것만으로 처리할 수 있다.
필요한 것들을 미리 여러개 등록해 두고 필요한 페이지에 끼워넣으면 된다.
관련내용