멋진 사진으로 장식된 표지를 넘기면 목차가 나오고 다시 몇 장을 넘기면 신상품과 할인/인기 상품을 소개하는 페이지 그리고 브랜드와 관련된 다양한 소식과 정보까지 여러 콘텐츠로 소비자의 지갑을 노렸습니다.
브랜드 LUSH의 종이로 만든 쇼핑 카탈로그
그런데 사실 상점 웹사이트도 크게 다르지 않습니다. 종이가 디지털 화면으로 바뀌었을뿐 여러 페이지의 콘텐츠를 통해 방문자의 흥미를 유발하고 브랜드에 대한 신뢰를 제공하여 궁극적으론 상품을 판매하는 것이 목적입니다.
다만 지면에 제한이 있는 종이 카탈로그에서 페이지는 종이 낱장을 뜻하지만 웹사이트의 페이지는 '쪽'보단 '콘텐츠의 종류나 주제 단위로 구분됩니다.
그리고 종이 카탈로그에서 보고 싶은 콘텐츠가 있을 때 목차를 통해 해당 페이지를 찾아 펼치듯 웹사이트에선 메뉴를 통해 원하는 페이지로 이동할 수 있습니다.
식스샵 고객사 분코(www.boonco.co.kr)의 메뉴와 페이지 화면 예시
'즉, 콘텐츠의 종류나 주제별로 페이지를 만들고 그것들을 메뉴에 추가해 상점의 고객이 살펴볼 수 있게 한다.'
이것이 앞으로 살펴볼 내용의 핵심입니다.
2. 페이지
2-1. 페이지의 화면 구조
페이지는 템플릿마다 다소 차이가 있을 순 있겠으나 기본적으로 아래와 같은 구조를 갖추고 있습니다.
설명
1
메뉴 영역
상점의 여러 페이지를 연결하는 메뉴가 위치하는 영역입니다.
화면 상단에 위치한 메뉴를 머리글이라 부르며 일반적으로 상점 로고, 페이지 링, 장바구니 등을 포함하고 있습니다.
화면 하단에 위치한 메뉴는 바닥글이라 부르며 일반적으로 상점의 법적 필수 정보와 기타 페이지 링크 등을 포함합니다.
2
콘텐츠 영역
상점 방문자에게 전달할 콘텐츠가 위치하는 영역입니다.
콘텐츠 구성 요소 중 하나인 섹션이 위에서 부터 차곡 차곡 쌓여 내려오고 각 섹션 안에는 제목, 본문, 상품, 이미지, 갤러리, 지도 등 다양한 요소가 배치되어 콘텐츠를 이루게 됩니다.
콘텐츠 영역에 대한 보다 자세한 정보는 콘텐츠 구성 요소 안내서에서 살펴보실 수 있습니다.
3
여백
콘텐츠가 표시되지 않는 빈 영역입니다.
아래 이미지는 실제 상점 페이지 위에 세개의 영역을 겹쳐 표시한 것입니다.
2-2. 페이지 추가하기
페이지 관리 메뉴에서 페이지를 추가할 수 있습니다.
설명
1
+ 모양의 '메뉴 추가' 버튼을 누르면 '메뉴 추가하기' 패널을 열어줍니다.
2
추가할 메뉴 항목의 유형을 선택할 수 있습니다. 메뉴 항목의 유형에는 페이지, 폴더, 링크, 원페이지가 있으며 보다 자세한 사항은 메뉴 안내서에서 확인할 수 있습니다.
3
메뉴 항목 유형이 페이지일 때 '비어있는 페이지'와 템플릿이 제공하는 미리 디자인 된 '샘플 페이지'중 원하는 것을 선택하여 추가할 수 있습니다.
'머리글 메뉴' 우측에 위치한 '메뉴 추가(+)' 버튼을 누르면 '메뉴 추가하기' 패널이 보입니다. '메뉴 항목 유형'을 '페이지'로 선택한 뒤 목록의 '비어있는 페이지' 혹은 '샘플 페이지' 중 하나를 누르면 아래와 같은 화면을 볼 수 있습니다.
설정 항목
이름
메뉴에 보여질 페이지 이름을 입력하세요. (예시: Shop, 브랜드 소개 등)
하위 주소
하위 주소는 '상점 기본 주소', 이미 도메인 연결을 마쳤다면 '상점 도메인 주소' 다음에 오는 페이지 경로입니다.
상점 기본 주소 뒤에 올 때: https://sixshop.com/상점아이디/페이지하위주소
상점 도메인 주소 뒤에 올 때: https://상점도메인주소/페이지하위주소
입력시 띄워쓰기 특수문자 없이 영어, 숫자 그리고 빼기기호(-), 밑줄기호(_) 만 입력할 수 있습니다.
페이지 관리 메뉴의 메뉴 목록에 위치한 페이지를 선택하면 페이지 편집 화면으로 해당 페이지를 편집할 수 있습니다.
3. 그 외 상점 페이지
3-1. 기본 제공 페이지
상점을 운영하기 위해 필수적인 페이지들이 있습니다. 예를 들어 장바구니 페이지나 주문/결제 페이지와 같은 전자상거래 기능을 포함한 페이지는 직접 추가하지 않아도 상점 웹사이트에 포함되어 있으며 이런 페이지를 기본 제공 페이지라고 부릅니다.
[ 회원/비회원 인증 관련 페이지 ]
상점에서 상품을 구매하거나 접근 권한이 설정된 페이지를 보기 위해 상점 웹사이트에 가입하거나 로그인하는 등 인증이 필요할 때 보이는 페이지입니다. 비밀번호를 잊었을 때 찾을 수 있는 '비밀번호 찾기 페이지'와 비회원 구매 기능을 제공할 때 보이는 '비회원 주문 내역 조회 페이지'도 포함됩니다.
머리글 메뉴를 선택하면 보이는 섹션 태그에서 연필 모양의 개별 편집 버튼을 누르면 아래와 같은 속성 패널이 보입니다.
설명
아이콘
아이콘 링크 사용 여부를 설정할 수 있습니다.
장바구니
머리글 메뉴에서 장바구니 버튼 노출 여부를 설정할 수 있습니다.
로그인
머리글 메뉴에서 로그인 버튼 노출 여부를 설정할 수 있습니다.
말풍선 넣기
'말풍선 넣기'를 [✔︎] 체크하면 로그인 버튼 하단에 노출할 말풍선의 메시지와 애니메이션을 설정할 수 있습니다.
(코드 삽입으로 말풍선을 노출했다면 말풍선이 겹쳐서 노출되지 않도록 [애드온 > 코드 삽입]에 입력한 스크립트를 삭제해 주세요.)
애니메이션 넣기
'애니메이션 넣기'를 [✔︎] 체크하면 말풍선이 위아래 방향으로 반복적으로 움직입니다.
상품 검색
머리글 메뉴에서 장바구니 버튼 노출 여부를 설정할 수 있습니다.
[ 머리글 - 공통 스타일 설정 ]
[디자인 편집 > 메뉴(좌측 하단≡) > 스타일 편집 > 머리글 - 공통]에서 머리글 공통 스타일 설정이 가능합니다.
항목
종류
메뉴 나열하기
데스크탑으로 접속 시 상단에 나열된 메뉴가 노출되고, 모바일로 접속 시 '≡' 아이콘 형태의 메뉴가 노출되고 메뉴 아이콘을 클릭하면 전체 메뉴를 확인할 수 있습니다.
데스크톱에서 ≡ 메뉴 사용하기
데스크탑으로 접속 시에도 모바일과 동일하게 '≡' 아이콘 형태의 메뉴가 노출되고 메뉴 아이콘을 클릭하면 전체 메뉴를 확인할 수 있습니다. 이 경우 모바일에서의 머리글 배치는 데스크탑에서 설정한 값과 동일하게 설정됩니다.
배치
종류에 따라 머리글에 포함된 요소들의 배치 유형을 선택할 수 있습니다.
메뉴 나열하기 사용 시
한줄 - 왼쪽 로고 1
한줄 - 왼쪽 로고 2
한줄 - 왼쪽 로고 3
한줄 - 가운데 로고
한줄 - 오른쪽 로고
두줄 - 왼쪽 로고
두줄 - 가운데 로고
데스크톱에서 ≡ 메뉴 사용하기 사용 시
가운데 로고 - 왼쪽 메뉴
가운데 로고 - 오른쪽 메뉴
왼쪽 로고 - 왼쪽 메뉴
왼쪽 로고 - 오른쪽 메뉴
배경
머리글의 배경 색상과 불투명도를 설정할 수 있습니다.
여백
머리글의 위아래 여백을 설정할 수 있습니다.
경계선 넣기
사용 [✔︎] 하면 지정한 색상으로 머리글 하단에 얇은 경계선을 넣어줍니다.
스크롤 할 때
화면 스크롤할 때 머리글 메뉴를 어떻게 보일지 설정할 수 있습니다.
변화 없음
화면 상단에 고정
화면을 이동해도 머리글이 화면 최상단에 고정 노출됩니다.
[ 머리글 배치 ]
위에서 부터 한줄 왼쪽 로고 1, 2, 3 / 한줄 가운데 로고 / 한줄 왼쪽 로고 / 두줄 왼쪽 / 두줄 가운데 로고
[ 로고 - 개별 편집 ]
머리글을 선택한 상태에서 로고를 선택하거나 마우스를 올리면 보이는 요소 태그에서 연필 모양의 개별 편집 버튼을 누르면 아래와 같은 속성 패널이 보입니다.
항목
상점 이름
로고 이미지가 등록되어 있지 않을 경우 텍스트 로고를 화면에 출력합니다.
이미지
만약 상점의 로고 이미지가 있다면 해당 파일을 업로드하여 이미지 로고를 화면에 출력합니다.
[ 로고 - 공통 스타일 설정 ]
머리글을 선택한 상태에서 로고를 선택하거나 마우스를 올리면 보이는 요소 태그에서 파레트 모양의 공통 스타일 설정 버튼을 누르면 아래와 같은 속성 패널이 화면 좌측에 보입니다.
항목
상점 이름
텍스트 로고를 사용중인 경우 색상, 글꼴, 굵기, 크기, 자간(글자 간격) 등을 설정할 수 있습니다.
기울이기
사용 [✔︎] 하면 텍스트 로고에 기울임(italic)이 적용됩니다.
이미지
이미지 로고를 사용중인 경우 원하는 너비를 입력하여 로고 크기를 설정할 수 있습니다. 높이는 비율에 따라 자동으로 설정됩니다.
[ 메뉴 - 개별 편집 ]
머리글을 선택한 상태에서 메뉴를 선택하거나 마우스를 올리면 보이는 요소 태그에서 연필 모양의 개별 편집 버튼을 누르면 페이지 관리 메뉴가 열립니다.
[ 메뉴 - 공통 스타일 설정 ]
머리글 종류가 '메뉴 나열하기'인 경우
머리글 종류를 '메뉴 나열하기'로 선택한 상태에서는 [디자인 편집 > 메뉴(좌측 하단≡) > 스타일 편집 > 머리글 - 메뉴]에서 아래와 같이 메뉴 공통 스타일 설정이 가능합니다.
항목
색상
메뉴 항목의 색상을 설정할 수 있습니다.
기본
기본 상태일 때 메뉴의 색상을 설정할 수 있습니다.
마우스 오버
메뉴 위에 마우스를 올렸을 때 보여질 색상을 설정할 수 있습니다.
선택
선택된 메뉴 항목의 색상을 설정할 수 있습니다.
간격
메뉴 항목 사이의 간격을 설정할 수 있습니다.
글자
메뉴 항목의 글꼴, 굵기, 크기, 자간을 설정할 수 있습니다.
머리글 종류가 '데스크톱에서 ≡ 메뉴 사용하기'인 경우
머리글 종류를 '데스크톱에서 ≡ 메뉴 사용하기'로 선택한 상태에서는 [디자인 편집 > 메뉴(좌측 하단≡) > 스타일 편집 > 머리글 - 메뉴]에서 아래와 같이 메뉴 아이콘(≡)의 색상만 선택이 가능합니다.
항목
색상
메뉴 아이콘(≡)의 색상을 설정할 수 있습니다.
기본
기본 상태일 때 메뉴의 색상을 설정할 수 있습니다.
마우스 오버
메뉴 위에 마우스를 올렸을 때 보여질 색상을 설정할 수 있습니다.
선택
선택된 메뉴 항목의 색상을 설정할 수 있습니다.
[ 모바일 메뉴 - 공통 스타일 설정 ]
모바일 메뉴는 [식스샵 > 디자인 편집 > 모바일 뷰포트 전환 > 메뉴(왼쪽 하단≡) > 스타일 편집 > 모바일 메뉴]에서 설정이 가능합니다. 혹은 머리글의 종류가 '데스크톱에서 ≡ 메뉴 사용하기'라면 [식스샵 > 디자인 편집 >메뉴(왼쪽 하단≡) > 스타일 편집 > 모바일 메뉴]에서도 설정이 가능합니다.
항목
앞 배경
모바일 메뉴의 색상과 불투명도를 설정할 수 있습니다.
뒷 배경
모바일 메뉴 뒷 배경의 색상과 불투명도를 설정할 수 있습니다.
로고
상점 이름 색상, 상점 이름 크기, 이미지 너비를 설정할 수 있습니다.
로그인
모바일 메뉴에 노출되는 로그인 메뉴의 색상을 설정할 수 있습니다.
로그인 사용하기
사용 [✔︎] 선택 시 모바일 메뉴에 로그인 메뉴가 노출됩니다.
상품 검색
모바일 메뉴에 노출되는 상품 검색 창의 색상을 설정할 수 있습니다.
상품 검색 사용하기
사용 [✔︎] 선택 시 모바일 메뉴에 상품 검색 창이 노출됩니다.
메뉴
메뉴의 색상과 크기를 설정할 수 있습니다.
단, 메인 배너 섹션이 머리글과 합치기 설정이 되어 있는 경우 메뉴의 색상은 [디자인 편집 > 메뉴(좌측 하단≡) > 스타일 편집 > 메인 배너 섹션]의 스타일을 따라갑니다.
밝은: 흰색
어두운: 검은색
아이콘
아이콘의 색상과 크기를 설정할 수 있습니다.
[ 장바구니 / 마이페이지 / 상품 검색 - 공통 스타일 설정 ]
머리글을 선택한 상태에서 장바구니 / 마이페이지...를 선택하거나 마우스를 올리면 보이는 요소 태그에서 파레트 모양의 공통 스타일 설정 버튼을 누르면 화면 좌측에서 아래와 같은 설정 패널을 볼 수 있습니다.
항목
장바구니
장바구니 버튼 유형을 선택할 수 있습니다.
한글
영어
아이콘 - 카트
아이콘 - 쇼핑백
로그인
로그인 버튼 유형을 선택할 수 있습니다.
한글
영어
아이콘 - 사람
아이콘 - 눈사람
상품 검색
상품 검색 버튼 유형을 선택할 수 있습니다.
한글
영어
아이콘
아이콘
아이콘 스타일을 선택할 수 있습니다.
일반
테두리
색상
버튼의 상태별 색상을 설정할 수 있습니다.
기본
마우스 오버
버튼 위에 마우스를 올렸을 때 보여질 색상을 설정할 수 있습니다.
선택
선택된 버튼의 색상을 설정할 수 있습니다.
간격
버튼 사이의 간격을 설정할 수 있습니다.
글자
메뉴 항목에 적용된 글꼴, 굵기, 크기, 자간을 설정할 수 있습니다. 단 아이콘 유형의 버튼을 사용할 경우 글꼴과 굵기는 적용되지 않습니다.
[ 아이콘 - 개별 편집 ]
머리글을 선택한 상태에서 아이콘 링크를 선택하거나 마우스를 올리면 보이는 요소 태그에서 연필 모양의 개별 편집 버튼을 누르면 화면 좌측에서 아래와 같은 설정 패널을 볼 수 있습니다. 노출을 원하는 아이콘에 해당하는 입력란에 전화번호, 이메일 주소 혹은 웹 URL을 입력하세요.
항목
항목
전화번호
핀터레스트
이메일
텀블러
페이스북
플리커
인스타그램
링크드인
블로그
구글플러스
카카오톡
유튜브
카카오 스토리
비메오
카카오톡채널
네이버 포스트
안드로이드
네이버 카페
애플
다음 카페
윈도우즈
지구
라인
한국 국기
밴드
미국 국기
네이버 톡톡
중국 국기
네이버 모두
일본 국기
에어비앤비
영국 국기
텔레그램
베트남 국기
트위터
스페인 국기
[ 아이콘 - 공통 스타일 설정 ]
머리글을 선택한 상태에서 아이콘 링크를 선택하거나 마우스를 올리면 보이는 요소 태그에서 파레트 모양의 공통 스타일 설정 버튼을 누르면 화면 좌측에서 아래와 같은 설정 패널을 볼 수 있습니다.
항목
종류
아이콘 링크의 스타일을 설정할 수 있습니다.
일반
투명 바탕 아이콘이 보여집니다.
원
원형 바탕 위에 아이콘이 보여집니다.
사각형
사각형 바탕 위에 아이콘이 보여집니다.
둥근 사각형
둥근 사각형 바탕 위에 아이콘이 보여집니다.
색상
아이콘 링크의 색상을 설정할 수 있습니다.
기본
마우스 오버
아이콘 링크 위에 마우스를 올렸을 때 보여질 색상을 설정할 수 있습니다.
대표 색상 넣기
사용 [✔︎] 선택 시 각 아이콘이 갖는 기본 색상을 사용합니다.
간격
각 아이콘 사이 간격을 설정할 수 있습니다.
크기
아이콘의 크기를 설정할 수 있습니다.
5-3. 바닥글이란?
바닥글 역시 책, 잡지, 신문 등 출판물의 하단에 반복적으로 보여지는 콘텐츠 영역에서 따온 이름으로 상점 웹사이트 내 페이지 하단에 노출되는 메뉴 영역을 뜻합니다.
아래는 식스샵 고객사 상점의 바닥글 메뉴 예시입니다. 형태는 조금씩 다르지만 바닥글엔 아래와 같은 정보가 포함됩니다.
설명
법적 필수 정보
상점 운영 주체인 사업자의 정보를 보여주는 영역입니다. 이에 대한 자세한 사항은 법적 필수 정보 안내서를 참고하세요.
저작권 표시
상점 웹사이트에 게재된 콘텐츠에 대한 저작권을 표기할 수 있습니다.
에스크로 가맹점 마크
고객이 안심하고 상품을 구매할 수 있도록 안전구매(에스크로)서비스 가맹점 마크를 노출할 수 있습니다.
마이페이지 버튼
누르면 회원 정보 및 주문 내역 등을 볼 수 있는 마이페이지로 이동합니다.
아이콘 링크
누르면 판매자가 등록한 소셜 미디어, 해외 상점 및 기타 링크 주소로 이동합니다.
바닥글 메뉴
판매자가 등록한 바닥글 메뉴가 보이며 눌렀을 때, 각 페이지나 링크로 이동합니다.
5-4. 바닥글 설정하기
[ 바닥글 - 개별 편집 ]
바닥글을 선택하면 보이는 섹션 태그에서 연필 모양의 개별 편집 버튼을 누르면 화면 좌측에서 아래와 같은 설정 패널을 볼 수 있습니다.
항목
아이콘
아이콘 링크 사용 여부를 설정할 수 있습니다.
에스크로 인증 마크
구매 안전 서비스(에스크로) 인증 마크 출력 여부를 설정할 수 있습니다.
저작권 표시
저작권 표시 사용 여부를 설정할 수 있습니다.
[ 바닥글 - 공통 스타일 설정 ]
바닥글을 선택하면 보이는 섹션 태그에서 파레트 모양의 공통 스타일 설정 버튼을 누르면 화면 좌측에서 아래와 같은 설정 패널을 볼 수 있습니다.
항목
배치
바닥글에 포함된 요소들의 배치 유형을 선택할 수 있습니다.
가운데 정렬
양쪽 정렬
색상
바닥글과 바닥글 내 요소의 색상을 설정할 수 있습니다.
배경
바닥글의 배경색을 설정할 수 있습니다.
기본 글자
일반 텍스트 출력시 보여질 색상을 설정할 수 있습니다.
마우스 오버 글자
바닥글에 포함된 링크 위에 마우스를 올리면 보여질 색상을 설정할 수 있습니다.
여백
바닥글의 위 아래 여백을 설정할 수 있습니다.
경계선 넣기
사용 [✔︎] 하면 지정한 색상으로 바닥글 상단에 얇은 경계선을 넣어줍니다.
[ 바닥글 - 배치 ]
위에서 부터 왼쪽 정렬과 가운데 정렬이다.
[ 법적 필수 정보 - 개별 편집 ]
바닥글을 선택한 상태에서 법적 필수 정보를 선택하거나 마우스를 올리면 보이는 요소 태그에서 연필 모양의 개별 편집 버튼을 누르면 아래와 같은 속성 패널이 보입니다.