guide

상품 카테고리 구성하기

상품 카테고리란?

상품 카테고리 또는 쇼핑 카테고리란 상품들을 체계적으로 분류하고 관리하기 위한 기능입니다. 상품마다 카테고리를 1개 이상 부여할 수 있으며, 향후 디자인 모드에서 상품을 카테고리 단위로 불러와 진열할 수 있습니다.

상품 카테고리 구성방법

1단계: 카테고리 관리 메뉴 켜기

사이트 관리자 메뉴에 접속합니다. 접속방법
왼쪽 관리 메뉴에서 [쇼핑 > 상품관리]를 클릭합니다.
카테고리 관리를 클릭합니다.

2단계: 새 카테고리 추가하기

새로운 상품 카테고리를 추가할 수 있습니다.

왼쪽 상단에 위치한 새 카테고리를 클릭합니다.
참고: 카테고리를 삭제하려면, 카테고리 위에 마우스 포인터를 올리고, 오른쪽 끝에 나타나는 를 클릭합니다.
카테고리명을 입력하고 키보드 Enter를 누릅니다.
아래 이미지처럼 위 1-2번 과정을 반복해 필요한 수 만큼 상품 카테고리를 추가합니다.
주의: 무료 버전은 1개, 스타터 버전은 3개, 프로 버전 이상은 무제한 상품 카테고리 생성이 가능합니다.

3단계: 상품 카테고리 순서 변경하기

상품 카테고리의 순서를 변경할 수 있습니다.

상품 카테고리를 마우스로 클릭합니다.
마우스 드래그 중 원하는 위치에 검정선이 나타나면 마우스를 놓아 순서를 변경합니다.

(선택 사항) 4단계: 상품 카테고리 그룹 만들기

상품 카테고리를 그룹으로 구성할 수 있습니다. 하위 카테고리는 최대 2단계까지 구성 가능합니다.

상품 카테고리를 마우스로 클릭합니다.
원하는 카테고리로 드래그한 다음 마우스를 놓습니다.

5단계: 카테고리 저장하기

저장 버튼을 클릭해 상품 카테고리 구성을 완료합니다.

6단계: 상품 카테고리 확인하기

상품 카테고리가 정상적으로 구성되었는지 확인합니다.

일반 메뉴와 상품 카테고리의 차이점

일반 메뉴는 디자인 모드 메뉴 관리에서 자유롭게 추가하고 그룹화, 이동, 수정이 가능합니다. 그런 반면 쇼핑 메뉴는 일반 메뉴에 쇼핑 위젯이 추가된 메뉴(선물 아이콘)로, 하위 메뉴가 상품 카테고리(아래 그림 회색 텍스트)들로 구성됩니다.

1. 메뉴와 상품 카테고리의 차이

1. COMMUNITY 메뉴

COMMUNITY 메뉴에 마우스를 올리면, 메뉴 관리에서 그룹 메뉴로 구성한 하위 메뉴들이 나타납니다.
하위 메뉴 클릭 시 해당 메뉴(페이지)가 나타나는 걸 보실 수 있습니다.
이 하위 메뉴들은 메뉴 관리에서 순서를 변경하거나, 각 메뉴별로 디자인을 다르게 만들 수 있습니다.

2. SHOP 메뉴

SHOP 메뉴에 마우스 포인터를 올리면, 상품 카테고리가 나타납니다.
상품 카테고리 클릭 시 페이지 디자인은 변하지 않으며, 해당 상품 카테고리에 등록된 상품들만 변경됩니다.

2. 상품 카테고리 변경하기

상품 카테고리 이름 및 순서 변경 등 카테고리 변경은 카테고리 관리에서 편집할 수 있습니다.

위젯 배치 및 그리드 실습

이 도움말에서는 준비된 예제에 따라 위젯을 추가, 배치하고, 그리드 수를 조절해 레이아웃을 디자인하는 방법을 설명합니다.

튜토리얼을 진행하기에 앞서 다음 사항들을 미리 익혀두시면 더 재밌고 빠르게 그리드 활용법을 배우실 수 있습니다.

위젯 배치 & 그리드 실습하기

총 7개의 튜토리얼에 따라 디자인 모드에서 위젯을 배치하고 그리드 조절하는 방법을 배워봅니다.

[실습] 1x1 위젯 배치, 정렬하기

이미지, 게시판, 갤러리와 같은 위젯은 단독으로 정렬이 불가능합니다. 이 경우 여백 위젯을 활용해 정렬할 수 있습니다. 여백 위젯을 사용하지 않는 경우 12칸 그리드에 꽉 차게 배치됩니다.

[실습] 3x1 위젯 배치하기

한 줄에 이미지 위젯 3개를 3열로 배치해 봅니다. 단순 배치 시 각 위젯의 그리드 수는 균등하게 나눠져 배치됩니다. 필요에 따라 특정 위젯의 그리드 수만 다르게 적용해 위젯의 크기를 조절할 수도 있습니다.

[실습] 3x2 이미지, 텍스트 위젯 배치하기

한 줄에 이미지 위젯 3개를 3열로 배치하고, 각 이미지 위젯 아래 텍스트 위젯을 배치해 봅니다. 주제를 세분화하여 정보를 제공할 때 유용합니다. 예) 서비스 종류, 팀원 소개, 상품 종류 등

[실습] 3x3 지그재그 배치하기

이미지와 텍스트를 지그재그로 배치해 봅니다. 소주제를 더욱 확실하게 구분하여 정보를 전달할 때 사용될 수 있습니다.

[실습] 4x2 이미지, 텍스트, 여백 배치하기

중앙에 이미지를 2열로 배치하고, 이미지 양끝에 여백과 텍스트를 추가하는 방법을 배워봅니다.

[실습] 4x4 목록형 배치하기

이미지 위젯과 텍스트 위젯을 교차하여 목록 형식으로 배치해 봅니다. 필요에 따라 버튼을 추가해 클릭 시 세부정보 페이지로 이동되도록 구성할 수 있습니다.

[실습] 복합 배치하기

여러 위젯들을 다양한 방식으로 배치할 수 있습니다.

공통 디자인 설정

공통 디자인 설정을 변경해 페이지마다 공통적으로 적용할 텍스트의 크기와 색상, 기본 배경색, 본문폭, 글꼴(폰트), 버튼 디자인 등을 맞춤설정 할 수 있습니다.

참고: 본 설정 메뉴에서 설정한 공통 디자인 값들은 일부를 제외하고 별도 수정이 가능합니다.

메뉴 열기

디자인 모드에 접속합니다.
오른쪽 상단 톱니바퀴 아이콘을 클릭합니다.

본문 설정항목

브랜드/링크색: 구매하기, 로그인 버튼, 게시물 기본 링크색, 자동 발송 메일의 강조 등에 사용됩니다. 흰색 또는 밝은색 사용시 보이지 않는 경우가 생길 수 있으므로 주의가 필요합니다.
뱃지색: 알림 카운트 등을 표시하는데 사용하는 뱃지의 배경색을 설정합니다. 뱃지의 숫자는 흰색이므로 너무 밝지 않은 색상 적용이 권장됩니다.
글자색: 본문 텍스트 기본 색상을 변경할 수 있습니다.
배경색: 내 사이트 기본 배경색을 설정합니다. 섹션에서 설정한 배경이 있을 경우 기본 배경색 위에 덮어씌우게 됩니다.
본문폭: 데스크톱(PC) 모드의 기본 본문 가로폭을 설정합니다. 사이트의 모든 페이지에 영향을 주며, 위젯의 가로영역 확장 또는 섹션 가로 100% 확장이 적용된 영역은 본문폭이 적용되지 않습니다. 본문폭 설정방법
그리드 간격: 위젯과 위젯간의 상, 하, 좌, 우 간격을 설정합니다. 섹션 설정에서 그리드 간격 사용 시 섹션 설정이 더 우선시 됩니다.

텍스트 설정항목

텍스트 정의: 내 사이트에서 사용하는 기본 텍스트 크기 및 색상, 줄간격 등을 설정합니다.
본문 한/중/일: 단락이 본문(표준)으로 설정된 텍스트의 한글/중국어/일어 글꼴을 변경할 수 있습니다.
본문 영문 글꼴: 단락이 본문(표준)으로 설정된 텍스트의 영어 글꼴을 변경할 수 있습니다.
제목 한/중/일: 단락이 제목(Heading)으로 설정된 텍스트의 한글/중국어/일어 글꼴을 변경할 수 있습니다.
제목 영문 글꼴: 단락이 제목(Heading)으로 설정된 텍스트의 영어 글꼴을 변경할 수 있습니다.

구성요소 설정항목

버튼 스타일: 입력폼 위젯, 상품, 예약 상세페이지, 주문페이지 등 버튼이 포함된 항목의 스타일을 설정합니다. 일부 상황(로그인, 회원가입)에서는 버튼 스타일이 반영되지 않습니다.
입력 필드: 입력폼 위젯, 상품, 예약 상세페이지, 주문페이지 등 입력요소가 있는 항목의 스타일을 설정합니다. 일부 상황(로그인, 회원가입)에서는 입력 스타일이 반영되지 않습니다.
말풍선 스타일: 각종 위젯의 링크 타입을 말풍선으로 사용할 경우 표시될 말풍선의 스타일을 설정합니다. 이 설정은 모든 말풍선에 동일하게 적용됩니다.
페이징 스타일: 비주얼섹션 및 슬라이드 갤러리의 페이징 스타일을 지정합니다.
기본 No-Image: 게시판 및 최신글 위젯(그리드 및 Masonry 타입만 적용) 등에 공통적으로 표시할 이미지를 지정합니다. 게시물에 대표이미지를 지정한 경우 직접 지정한 대표이미지가 우선 반영됩니다.

옵션 설정항목

원페이지 구성: 대메뉴가 원페이지로 구성됩니다. 대메뉴의 하위메뉴(서브메뉴)는 원페이지 적용 대상이 아니며, 미리보기에서만 원페이지 구성을 확인하실 수 있습니다. 상세 설정방법
모바일 폰트유지: 모바일에서도 설정한 글꼴(폰트)가 로드됩니다. 한글 폰트의 경우 용량이 많은 편이기에 로드 속도가 지연될 수 있으므로 특별한 경우가 아닌한 사용 해제를 권장합니다.
모바일에서 PC 보기 버튼 사용: 모바일에서 접속 시 페이지 최하단에 PC 보기 버튼을 표시합니다. PC 보기 버튼의 배경색과 글자색은 마지막 섹션을 따릅니다.
로그인/가입 팝업으로 사용: 이 옵션을 사용하면 로그인이나 가입창이 현재 페이지에서 팝업(모달) 형태로 나타납니다. 해제 시 메뉴 관리의 글로벌 메뉴에서 로그인, 가입 페이지를 직접 디자인(변경) 할 수 있습니다. 단, 사이트 접속 시 성인인증 페이지 출력 사용 시, 해당 페이지에서는 이 설정에 관계 없이 팝업 형태로 로그인, 가입 페이지가 동작합니다.
가입완료 후 특정 위치로 이동: 가입완료 후 항상 설정한 메뉴로 이동합니다.
로그인 후 특정 위치로 이동: 로그인 후 이동할 메뉴를 설정합니다. 로그인 위젯이나 모바일 메뉴의 로그인 영역을 통해서 로그인 시에만 적용되며 이외에는 마지막 접속 메뉴로 이동합니다.
스크롤 부드럽게: 방문자 컴퓨터의 기본 마우스 스크롤 설정 대신 부드러운 스크롤을 사용합니다. 디자인 모드가 아닌 미리보기에서 적용 상태를 직접 스크롤하여 확인할 수 있습니다. 단, 이 기능 적용 시 마우스 휠을 이용한 확대 및 축소 기능이 동작하지 않습니다.
페이지 전환시 페이드 효과: 사이트 내에서 링크 이동, 메뉴 이동 등 페이지 전환 시 서서히 전환되는 효과를 적용합니다. 디자인 모드가 아닌 미리보기에서 적용 상태를 메뉴 등을 클릭해 확인할 수 있습니다. Safari(사파리) 브라우저에서는 호환성 문제로 지원하지 않습니다.
위젯에 애니메이션 적용: 상단 섹션을 제외한 모든 위젯에 페이드인 애니메이션 효과가 지속시간 2초로 적용됩니다. 위젯마다 개별 적용한 경우 이 설정을 따르지 않습니다.

공통 디자인 설정 적용 또는 취소하기

공통 디자인 설정 오른쪽 상단 ⓧ를 클릭하거나, 설정메뉴 바깥 영역 아무 곳을 클릭합니다.
'공통 디자인 설정을 저장 하시겠습니까?'라는 경고창이 나타납니다.
적용을 하려면 저장을, 적용하지 않고 종료하려면 취소 버튼을 클릭합니다.

위젯 설정하기

위젯이란?

디자인 모드에서 페이지를 꾸밀 때 사용되는 가장 작은 단위의 구성요소입니다. 이미지, 텍스트, 동영상, 버튼, 게시판, 갤러리 등 다양한 위젯들이 준비되어 있습니다. 메뉴를 추가하고 위젯을 사용해 페이지에 글이나 그림, 동영상 등 콘텐츠를 추가해보세요. *위젯은 업데이트에 따라 계속해서 추가될 수 있습니다.

위젯 설정을 열어 각 위젯이 가진 고유의 설정을 변경할 수 있습니다. 이 도움말에서는 이미지 위젯을 기준으로 설정 창을 여는 방법을 설명합니다.

위젯 설정 열기

위젯을 추가합니다.
추가한 위젯 위에 마우스 포인터를 올립니다.
마우스 오른쪽 버튼을 클릭합니다.
참고: 아래 그림은 이미지 위젯에 마우스 오른쪽 버튼을 클릭한 장면입니다.
이미지 설정을 클릭합니다. (위젯에 따라 설정 앞 이름이 달라집니다.)
예시: 갤러리 설정, 버튼 설정 등

디자인 요소 위젯

페이지를 꾸미기 위한 다양한 위젯들이 준비되어 있습니다.

이미지

페이지에 이미지를 삽입할 때 사용합니다.

이미지 맵

하나의 이미지에 여러 링크 영역을 구현할 때 사용합니다.

텍스트

페이지에 텍스트를 삽입할 때 사용합니다. 텍스트 위젯은 글자 입력 외 표(테이블) 삽입, 이미지 첨부, 코드 입력 등 다양한 작업이 가능합니다.

여백

페이지에 여백을 추가할 때 사용합니다. 여백 위젯은 다음 그림처럼 흐린 점선으로 표시되며 실제로는 공간만 차지할 뿐 다른 방문자에게는 보이지 않습니다.

동영상

페이지에 동영상을 삽입할 수 있습니다. 유튜브(YouTube) 또는 비메오(Vimeo)에 업로드한 동영상 주소(URL)를 입력하면 자동으로 삽입됩니다.

가로선

문단이나 콘텐츠 묶음 사이를 명확하게 구분할 때 가로선 위젯을 사용합니다. 그 외 디자인적인 용도로도 사용될 수 있습니다.

버튼

페이지에 버튼을 삽입할 수 있습니다. 버튼을 통해 특정 위치로 유도하거나 전화걸기, 이메일 발송, 파일 다운로드 등 다양한 링크 방식을 설정할 수 있습니다.

메뉴 리스트

본문 영역에 서브 메뉴를 표시할 때 사용합니다. 메뉴 리스트 위젯 추가 후 메뉴(수정, 삭제 등)에 변경사항이 있는 경우 자동 반영되어 수정됩니다.

타이틀

현재 메뉴명을 출력합니다. 출력한 메뉴명의 크기, 색상, 굵기 등을 변경할 수 있습니다.

단일 지도

하나의 위치정보를 사용자에게 알려주고자 할 때 사용합니다. 예 : 찾아오시는 길 또는 Contact 메뉴 등

코드

고급 사용자를 위한 기능으로 외부 모듈 및 사용자 정의 스타일시트 및 스크립트 등을 내 사이트에 삽입하고 싶은 경우 사용할 수 있습니다.

아이콘

그래픽 툴이나 이미지를 사용하지 않고 간편하게 아이콘을 삽입할 수 있습니다.

비주얼 섹션

슬라이드 방식으로 동작하는 비주얼 섹션은 사이트의 대표적인 아이덴티티를 나타내거나 중요한 정보를 알리는데 사용됩니다.

검색

방문자가 사이트 내 콘텐츠를 검색할 수 있도록 검색 위젯을 추가할 수 있습니다.

사이트 미리보기, 게시하기, 되돌리기

미리보기

사이트 제작 중 변경사항을 브라우저에서 미리 보려면 미리보기 기능을 활용해보세요.

미리보기 창을 켜서 지금까지 작업한 사항들을 언제든 미리 볼 수 있습니다.

참고: 미리보기에서 보이는 사이트는 관리자만 볼 수 있습니다.

설정방법

디자인 모드 오른쪽 상단 미리보기 아이콘을 클릭합니다.
브라우저 새 탭으로 미리보기 모드가 열립니다.
페이지를 탐색하고 확인합니다.

게시하기

실제 방문자들이 작업사항을 볼 수 있도록 웹에 반영하려면 사이트를 게시해야 합니다.

디자인 모드에서 작업한 사항들을 실제 방문자들이 볼 수 있도록 웹에 반영하려면 사이트를 게시해야 합니다.

게시방법

디자인 모드 오른쪽 상단 게시하기 버튼을 클릭합니다.

주의사항

한 번 게시하면 이전으로 되돌릴 수 없습니다!
게시하기 전 미리보기를 통해 사이트를 확인하고 게시해주세요.
만약 게시 후 잘못된 점을 발견한 경우 수정 후 다시 게시하기를 클릭합니다.

마지막 게시 시점으로 되돌리기

사이트 디자인을 마지막 게시한 시점으로 되돌릴 수 있습니다. 사이트 게시 후 디자인 작업을 계속하다 마음에 들지 않거나, 더는 수정이 어렵다고 판단되는 경우 사용할 수 있습니다.

단, 한 번 디자인을 되돌리면 다시 현재 시점으로 되돌릴 수 없으니 주의가 필요합니다.

주의: 이 기능은 한 번 사용하면 다시는 현재 시점으로 디자인을 되돌릴 수 없습니다. 이용 전 반드시 마지막 게시한 시점을 확인하고 진행하세요.

사이트 디자인을 마지막 게시한 시점으로 되돌릴 수 있습니다.

사용방법

디자인 모드 왼쪽 상단 아이콘을 클릭합니다. (진행 전 마지막 복구시점을 확인하세요.)
경고창이 나타나면 확인을 클릭합니다.
주의: 다시 한 번 마지막 게시 시점을 다시 한 번 확인해 주세요. 한 번 되돌리면 다시 되돌릴 수 없습니다.
마지막으로 게시한 시점으로 디자인이 변경됩니다.

모바일 커스텀 하단 푸터 만들기

PC 버전에서 제작한 커스텀 하단이 모바일에서는 마음에 들지 않거나 모양이 틀어질 수 있습니다. 모바일에 딱 맞는 모바일 커스텀 하단을 만들려면 아래 제작 방법에 따라 제작해보세요.

제작방법

1단계: 모바일 전용 하단 디자인하기

모바일 뷰포트로 전환해 모바일 전용 섹션을 추가하고 페이지 최하단으로 내려줍니다. 모바일 전용 하단을 디자인합니다.

디자인 모드에 접속합니다.
모바일로 뷰포트를 변경합니다.
섹션에 마우스 오른쪽 버튼을 클릭합니다.
주의: 위젯에 마우스 오른쪽 버튼을 클릭하지마세요.
섹션 보조 메뉴가 나타나면 모바일 전용 섹션추가를 클릭합니다.
추가한 모바일 전용 섹션을 아래로 이동시키기 위해 마우스 오른쪽 버튼을 클릭하고, 아래로 이동을 클릭합니다.
위 5번 방법을 반복해 페이지 최하단까지 모바일 전용 섹션을 이동시킵니다.
모바일 전용 하단을 원하시는 디자인으로 제작합니다.

2단계: 모바일 전용 하단 섹션 반복하기

제작하신 모바일 전용 하단이 모든 페이지에서 표시되도록 섹션 반복 기능을 켭니다.

모바일 커스텀 하단 섹션에 마우스 오른쪽 버튼을 클릭합니다.
주의: 섹션을 추가하려면 위젯에 마우스 오른쪽 버튼을 클릭하지마세요.
섹션 보조 메뉴가 나타나면 섹션 반복을 클릭합니다.
이제 모든 모바일 버전 페이지에 커스텀 하단이 반복되어 표시됩니다.

PC 하단 섹션 숨김

PC 커스텀 하단을 제작하신 경우 모바일에서는 표시되지 않도록 섹션 숨김 기능을 사용해 숨겨줘야 합니다.

PC 뷰포트에서 제작한 커스텀 하단 섹션이 있는 곳으로 스크롤을 내립니다.
왼쪽 상단 을 클릭해 섹션을 숨겨줍니다.

하단 설정하기 (푸터)

하단이란?

하단 또는 푸터(Footer)라는 이름을 가진 이 섹션은 문서로 치면 꼬리말 영역을 말합니다. 하단/푸터 영역은 사용자가 의도적으로 제외하지 않는 이상 모든 페이지 최하단에 똑같이 표시됩니다.

하단 설정하기

1. 하단 디자인 변경 방법

미리 구성된 하단 디자인 템플릿을 불러와 하단 디자인을 변경할 수 있습니다.

2. 하단 텍스트 입력하기

하단 템플릿마다 아래 그림처럼 텍스트를 입력할 수 있는 영역이 존재합니다. 이곳에 사업자정보를 입력하고, 로고 이미지 등을 추가할 수 있습니다. 마우스 클릭 시 텍스트 에디터가 열립니다.

3. 하단 설정 변경하기

하단 설정을 열어, 하단에 표시되는 요소 및 SNS/링크 설정을 변경할 수 있습니다. 다음 도움말을 참조해 상세한 방법을 확인해보세요.

커스텀 하단 만들기

총 6가지 하단/푸터 섹션 템플릿을 제공하며, 사용자는 템플릿을 선택해 간편하게 하단을 추가하고 편집할 수 있습니다. 만약 기본 푸터 디자인이 마음에 들지 않는 경우 섹션 반복 기능을 활용해 보세요. 내 사이트를 위한 커스텀 하단을 디자인할 수 있습니다.