콘텐츠 구성 요소
상점 웹사이트를 통해 고객에게 보여줄 다양한 콘텐츠를 추가하고 제작할 수 있습니다.
섹션은 상점 웹사이트의 각 페이지에 블럭처럼 쌓아서 페이지의 목적에 맞는 콘텐츠를 구성할 수 있도록 제공되는 기본 단위 입니다. 각 섹션은 특정한 목적과 콘텍스트(맥락)을 가지고 있으며 현재 식스샵 에디터를 통해 사용할 수 있는 섹션의 종류는 아래와 같습니다.
섹션 유형 |
사용자 편집 섹션 페이지 내 콘텐츠를 직접 구성하고자 할 때 빈 섹션 안에 다양한 요소를 직접 추가하여 사용할 수 있으며, 상점 웹사이트 디자인 시 가장 많이 활용됩니다. |
메인 배너 섹션 페이지 최상단에 배치되어 각 페이지에서 보여주는 콘텐츠를 대표하기 위한 배너를 노출하는 섹션입니다. |
상품 목록 섹션 상점 웹사이트에 필수적인 구성 요소로 등록한 상품 카테고리를 지정하여 고객에게 상품을 노출 할 수 있는 섹션입니다. |
상품 슬라이드 섹션 상품 목록 섹션과 유사하나 좌우 슬라이드 방식으로 상품을 조회할 수 있는 섹션으로 인기 상품, 추천 상품 등의 카테고리를 보여줄 때 유용하게 사용할 수 있습니다. |
갤러리 섹션 사진과 동영상을 한 곳에서 모아 보여줄 수 있는 갤러리 섹션은 건축, 가구, 디자이너 포트폴리오, 유튜브 재생 목록 등을 제공하고자 할 때 유용하게 사용할 수 있습니다. |
블로그 섹션 기본적으로 게시판과 유사하나 고객에게 제공하고자 하는 콘텐츠, 공지, 안내 등을 제공할 때 블로그 형 레이아웃을 통해 제공할 수 있는 섹션입니다. |
지도 섹션 페이지 내에 지도를 보여주고자 할 때 사용할 수 있는 섹션입니다. |
인스타그램 섹션 페이지 내에 인스타그램 피드를 보여주고자 할 때 사용할 수 있는 섹션입니다. |
전광판 배너 섹션 페이지 내 원하는 문구를 움직이는 전광판 형태로 노출할 수 있는 섹션입니다. |
Step 1. 디자인 편집 페이지에서 하단 도구 모음 중 [+ 섹션 추가하기] 버튼(2번)을 클릭해 주세요.

Step 2. 아래와 같은 섹션 추가하기 패널이 보이면 원하는 섹션을 선택하여 페이지 내 콘텐츠 영역에 추가해보세요.


개별 편집하기
섹션에 포함될 콘텐츠를 추가하거나 관리하고 개별 섹션에 대한 스타일 설정을 하려면 섹션을 더블클릭 하거나 섹션을 선택하면 보이는 태그 아이콘 중 연필 요양의 '개별 편집' 버튼을 누르세요.
공통 스타일 설정하기
동일한 성격의 섹션에 공통적으로 적용되는 스타일 속성 값을 변경하려면 섹션 선택시 보이는 태그 아이콘 중 파레트 모양의 버튼을 누르세요.

고객사 발레시모의 메인배너 섹션 사용 예시
페이지 상단에 배치되며 각 페이지 당 하나씩만 추가할 수 있는 섹션입니다.
페이지 내 콘텐츠를 대표하는 배너를 노출하고 다양한 이벤트 등 상점에서 강조하고자 하는 정보를 고객에게 강조하는 용도로 활용됩니다. 메인 배너 섹션을 잘 활용하면 웹사이트의 분위기나 첫인상에 매우 큰 영향을 끼칠 수 있습니다.
메인 배너 섹션에 이미지, 색상, 동영상 중 하나의 탭을 선택하여 메인 화면으로 구성할 수 있습니다.
이미지 혹은 색상 탭을 사용하면 여러 개의 배너를 슬라이드 형태로 설정할 수 있고, 동영상 탭을 사용하면 하나의 배너만 화면에 보입니다.
패널 하단의 [+] 버튼을 클릭하여 이미지를 업로드하고 드래그하여 순서를 변경할 수 있습니다.

Step 2. 업로드한 이미지 위에 마우스를 올려 톱니바퀴 모양의 '설정' 버튼을 클릭해 주세요.

Step 3. 이미지 배너에 적용할 설정 항목을 확인해 주세요.

설정 항목 |
제목 메인 배너 섹션에 노출할 제목을 입력할 수 있습니다. 엔터로 줄 바꿈이 가능합니다. |
설명 메인 배너 섹션에 노출할 설명을 입력할 수 있습니다. 엔터로 줄 바꿈이 가능합니다. |
버튼 글자 전환을 위한 버튼을 추가하고자 할 때 버튼 글자를 입력할 수 있습니다. 버튼 노출을 원하지 않는다면 입력하지 않아도 됩니다. |
링크 주소 배너 이미지 또는 버튼을 클릭하면 이동할 경로를 설정할 수 있습니다. 새 탭에서 열기 사용 [✔︎]을 체크하면 브라우저 내 새 탭으로 해당 링크를 열어줍니다. |
배경 위 이미지 이미지를 업로드하면 기존에 설정된 이미지 위에 새로운 이미지를 추가할 수 있습니다. |
배경 위 이미지 위치 배경 위 이미지의 위치를 왼쪽과 오른쪽 중에서 설정할 수 있습니다. |
패널 하단의 [+] 버튼을 클릭하여 색상을 추가하고 색상 썸네일을 드래그하여 순서를 변경할 수 있습니다.



설정 항목 |
제목 메인 배너 섹션에 노출할 제목을 입력할 수 있습니다. 엔터로 줄 바꿈이 가능합니다. |
설명 메인 배너 섹션에 노출할 설명을 입력할 수 있습니다. 엔터로 줄 바꿈이 가능합니다. |
버튼 글자 전환을 위한 버튼을 추가하고자 할 때 버튼 글자를 입력할 수 있습니다. 버튼 노출을 원하지 않는다면 입력하지 않아도 됩니다. |
링크 주소 색상 또는 버튼을 클릭하면 이동할 경로를 설정할 수 있습니다. 새 탭에서 열기 사용 [✔]을 체크하면 브라우저 내 새 탭으로 해당 링크를 열어줍니다. |
배경 위 이미지 이미지를 업로드하면 기존에 설정된 색상 위에 새로운 이미지를 추가할 수 있습니다. |
배경 위 이미지 위치 배경 위 이미지의 위치를 왼쪽과 오른쪽 중에서 설정할 수 있습니다. |
배경 색상의 배경색을 설정할 수 있습니다. 색상 추가 시 기본 배경색은 #5553C0(군청) 입니다. |

Step 1. 메인 배너 섹션 개별 편집 패널의 '동영상' 탭을 클릭해 주세요.

Step 2. 파일 업로드 옆 […] 버튼을 클릭하여 MP4 동영상 파일을 업로드해 주세요.

Step 3. 동영상 배너에 적용할 설정 항목을 확인해 주세요.
설정 항목 |
MP4 파일 10MB 이하 확장자 MP4 파일을 등록해 주세요.
|
제목 메인 배너 섹션에 노출할 제목을 입력할 수 있습니다. 엔터로 줄 바꿈이 가능합니다. |
설명 메인 배너 섹션에 노출할 설명을 입력할 수 있습니다. 엔터로 줄 바꿈이 가능합니다. |
버튼 글자 전환을 위한 버튼을 추가하고자 할 때 버튼 글자를 입력할 수 있습니다. 버튼 노출을 원하지 않는다면 입력하지 않아도 됩니다. |
링크 주소 배너 이미지 또는 버튼을 클릭하면 이동할 경로를 설정할 수 있습니다. 새 탭에서 열기 사용 [✔︎]을 체크하면 브라우저 내 새 탭으로 해당 링크를 열어줍니다. |
[메인 배너 섹션 동영상 등록 방식 변경 안내]
2020년 12월 17일부터 메인 배너 섹션 동영상 등록 방식 중 'Youtube / Vimeo URL 등록' 방식이 지원 중단됩니다.
해당 등록 방식 지원이 중단되는 사유는 Youtube 및 Vimeo 등 동영상 스트리밍 서비스 업체의 지속적인 정책 변경과 모바일 미지원 문제로 메인 배너 섹션 동영상 기능이 정상 작동하지 않는 상황이 발생하고 있기 때문입니다.
문제 해결을 위해 최근 새로운 동영상 업로드 방식인 'MP4 파일 업로드' 방식 추가 업데이트를 진행하였는데요. 더 나은 사용자 경험 제공을 목적으로 문제가 발생하는 'Youtube / Vimeo URL 등록' 방식 지원이 중단되는 점 양해 부탁드립니다.
기존 'Youtube / Vimeo URL 등록' 방식을 사용하는 고객님들의 웹사이트에서는 동영상이 동일하게 노출되나 영상 재생되지 않는 상태로 변경될 수 있습니다. 영상이 재생되지 않거나 다른 영상으로 변경 시에는 'MP4 파일 업로드' 방식을 사용해 주셔야 하는 점 참고 부탁드리겠습니다.
.png?alt=media&token=d7cfad6f-b96b-41d1-a001-ba6866b26c24)
설정 항목 |
종류
메인 배너 섹션에 등록된 이미지 혹은 동영상의 노출 방식을 설정할 수 있습니다.
|
스타일
|
높이 (종류: 높이 고정으로 선택 시) 메인 배너 섹션에 출력되는 이미지 혹은 동영상의 높이를 설정할 수 있습니다.
|
비율 (종류: 비율 고정으로 선택 시) 메인 배너 섹션에 출력되는 이미지 혹은 동영상의 너비, 높이 비율을 설정할 수 있습니다.
|
배경 위 색상
메인 배너 섹션에 등록된 이미지 위에 덮여 씌워질 배경 색상을 설정할 수 있습니다.
|
안쪽 여백 (종류: 높이 고정으로 선택 시) 메인 배너 섹션 안쪽의 위쪽, 아래쪽 여백을 설정할 수 있습니다.
|
제목 / 설명 / 버튼 위치 (종류: 높이 고정으로 선택 시) 메인 배너 섹션의 제목 / 설명 / 버튼의 위치, 굵기, 크기, 자간, 줄간격을 설정할 수 있습니다.
|
제목 / 설명 / 버튼 정렬 (종류: 높이 고정으로 선택 시) 메인 배너 섹션의 제목 / 설명 / 버튼의 정렬을 설정할 수 있습니다.
|
제목 / 설명 / 버튼 여백 (종류: 높이 고정으로 선택 시) 메인 배너 섹션의 제목 / 설명 / 버튼 사이의 여백을 설정할 수 있습니다.
|
제목 (종류: 높이 고정으로 선택 시) 메인 배너 섹션 위에 출력되는 제목글의 스타일 속성을 설정할 수 있습니다.
|
설명 (종류: 높이 고정으로 선택 시) 메인 배너 섹션 위에 출력되는 설명글의 스타일 속성을 설정할 수 있습니다.
|
버튼(종류: 높이 고정으로 선택 시)
메인 배너 섹션 위에 출력되는 버튼의 스타일 속성을 설정할 수 있습니다.
|
네비게이션 메인 배너 섹션에 여러 이미지가 보여질 때 이전 / 다음 이미지로 이동할 수 있는 버튼 유형을 설정할 수 있습니다.
|
전환 효과 메인 배너 섹션에 여러 이미지가 보여질 때 이전 / 다음 이미지로 이동 시 적용할 전환 효과를 설정할 수 있습니다.
|
메인 배너 섹션의 경우 모바일 전용 메인 배너 섹션 기능을 이용하여 데스크탑과 모바일에 각각 다른 이미지를 등록할 수 있습니다.
모바일 전용 메인 배너 섹션 권장 사이즈: 가로 기준 840 ~ 1,440px
디자인 편집 페이지 오른쪽 하단의 뷰포트 설정 버튼을 클릭하면 모바일 뷰포트로 전환이 됩니다.
단축키: Ctrl + Shift + M


사용하지 않을 이미지가 등록되어 있다면 해당 이미지 위에 마우스를 올린 후 휴지통 모양의 '삭제' 버튼을 클릭하여 삭제해 주세요.

메인 배너 섹션의 종류에 따라 모바일 전용 메인 배너 섹션의 높이와 비율 설정 방법이 다릅니다.
모바일 메인 배너 섹션의 종류를 확인하려면 디자인 편집 페이지 오른쪽 하단의 뷰포트 설정 버튼을 눌러 모바일 뷰포트로 전환해 주세요.
단축키: Ctrl + Shift + M
[모바일 뷰포트 > 좌측 하단 메뉴(≡) > 스타일 편집 > 메인 배너 섹션]에서 확인하실 수 있습니다.
- 메인 배너 섹션의 종류가 높이 고정인 경우모바일 전용 메인 배너 섹션의 높이를 데스크탑의 높이와 다르게 설정할 수 있습니다.[모바일 뷰포트 > 좌측 하단 메뉴(≡) > 스타일 편집 > 메인 배너 섹션]에서 높이 조정이 가능합니다.
- 메인 배너 섹션의 종류가 비율 고정인 경우 데스크탑에서 설정한 메인 배너 섹션의 비율과 동일하게 설정됩니다. [데스크탑 뷰포트 > 메뉴(좌측 하단≡) > 스타일 편집 > 메인 배너 섹션]에서 비율이 조정이 가능합니다.

고객사 SETSETSET의 상품 목록 섹션 사용예
상품 목록 섹션 온라인 쇼핑몰을 만드는데 가장 중요한 구성 요소로써 상점 관리자 > 상품에 추가한 상품을 상점 웹사이트 내에서 보여주고자 할 때 사용할 수 있는 섹션입니다. 상품 목록 섹션은 페이지마다 하나씩 추가할 수 있으며 메뉴 구성을 어떻게 하느냐에 따라서 고객이 상품을 살펴보는 방식을 다양하게 제공할 수 있습니다.
상품 목록 섹션에서 상품을 보여주려면 상점 관리자에 상품이 추가되어 있어야 하며, 해당 상품이 카테고리로 분류되어야 합니다. 상품 등록 방법을 확인하고 싶으시다면 상품 > 상품 추가하기 안내서를 참고해 주세요.
상 품 목록 섹션 더블 클릭 혹은 상품 목록 섹션 클릭 후 노출되는 펜 모양 아이콘(개별 편집)을 클릭하면 개별 편집 패널이 노출됩니다. '카테고리' 탭에서 상품 카테고리를 선택하면 상점에 카테고리에 해당하는 상품이 노출됩니다.

상품 목록 섹션 더블 클릭 혹은 상품 목록 섹션 클릭 후 노출되는 펜 모양 아이콘(개별 편집)을 클릭하면 개별 편집 패널이 노출됩니다. '디자인' 탭에서 아래 설정 항목을 확인할 수 있습니다.

설정 항목 |
열 한 줄에 몇개의 상품을 보여줄지 설정할 수 있습니다. |
페이지당 상품 개수 한 페이지에 몇개의 상품을 보여줄지 설정할 수 있습니다. 지정 개수보다 상품이 많은 경우 목록 하단에 쪽번호가 보이며 쪽번호를 눌러 다음 페이지로 이동할 수 있습니다.
|
필터 옵션
|
정렬 필터
사용 [✔︎] 선택 시 정렬 필터가 보여집니다. 정렬 조건별 사용 여부를 선택할 수 있으며 정렬 조건의 순서를 드래그 방식으로 변경할 수 있습니다.
|