페이지와 메뉴
페이지를 만들고 관리하는 방법을 알아보고 이를 메뉴로 구성해보겠습니다.
혹시 좋아하는 브랜드나 백화점에서 우편으로 보내주던 쇼핑 카탈로그를 본 적 있으세요?
멋진 사진으로 장식된 표지를 넘기면 목차가 나오고 다시 몇 장을 넘기면 신상품과 할인/인기 상품을 소개하는 페이지 그리고 브랜드와 관련된 다양한 소식과 정보까지 여러 콘텐츠로 소비자의 지갑을 노렸습니다.
브랜드 LUSH의 종이로 만든 쇼핑 카탈로그
그런데 사실 상점 웹사이트도 크게 다르지 않습니다. 종이가 디지털 화면으로 바뀌었을뿐 여러 페이지의 콘텐츠를 통해 방문자의 흥미를 유발하고 브랜드에 대한 신뢰를 제공하여 궁극적으론 상품을 판매하는 것이 목적입니다.
다만 지면에 제한이 있는 종이 카탈로그에서 페이지는 종이 낱장을 뜻하지만 웹사이트의 페이지는 '쪽'보단 '콘텐츠의 종류나 주제 단위로 구분됩니다.
그리고 종이 카탈로그에서 보고 싶은 콘텐츠가 있을 때 목차를 통해 해당 페이지를 찾아 펼치듯 웹사이트에선 메뉴를 통해 원하는 페이지로 이동할 수 있습니다.
식스샵 고객사 분코(www.boonco.co.kr)의 메뉴와 페이지 화면 예시
'즉, 콘텐츠의 종류나 주제별로 페이지를 만들고 그것들을 메뉴에 추가해 상점의 고객이 살펴볼 수 있게 한다.'
이것이 앞으로 살펴볼 내용의 핵심입니다.
페이지는 템플릿마다 다소 차이가 있을 순 있겠으나 기본적으로 아래와 같은 구조를 갖추고 있습니다.
| 설명 |
1 | |
2 | |
3 | 여백 콘텐츠가 표시되지 않는 빈 영역입니다. |
아래 이미지는 실제 상점 페이지 위에 세개의 영역을 겹쳐 표시한 것입니다.
페이지 관리 메뉴에서 페이지를 추가할 수 있습니다.
| 설명 |
1 | + 모양의 '메뉴 추가' 버튼을 누르면 '메뉴 추가하기' 패널을 열어줍니다. |
2 | |
3 | 메뉴 항목 유형이 페이지일 때 '비어있는 페이지'와 템플릿이 제공하는 미리 디자인 된 '샘플 페이지'중 원하는 것을 선택하여 추가할 수 있습니다. |
'머리글 메뉴' 우측에 위치한 '메뉴 추가(+)' 버튼을 누르면 '메뉴 추가하기' 패널이 보입니다. '메뉴 항목 유형'을 '페이지'로 선택한 뒤 목록의 '비어있는 페이지' 혹은 '샘플 페이지' 중 하나를 누르면 아래와 같은 화면을 볼 수 있습니다.
설정 항목 |
이름 메뉴에 보여질 페이지 이름을 입력하세요. (예시: Shop, 브랜드 소개 등) |
하위 주소 하위 주소는 '상점 기본 주소', 이미 도메인 연결을 마쳤다면 '상점 도메인 주소' 다음에 오는 페이지 경로입니다.
입력시 띄워쓰기 특수문자 없이 영어, 숫자 그리고 빼기기호(-), 밑줄기호(_) 만 입력할 수 있습니다. |
메뉴에서 숨기기 |
추가하기 버튼 누르면 새로운 페이지를 생성합니다. |
페이지 관리 메뉴에서 페이지의 속성을 설정할 수 있습니다.
| 설명 |
1 | 페이지 설정 버튼 메뉴 목록의 페이지 위에 마우스를 올리면 보이는 톱니바퀴 모양의 '설정' 버튼을 누르면 '페이지 설정 패널'을 열 수 있습니다. |
2 | 페이지 설정 패널
|
3 | 페이지 설정 버튼
|
상점을 운영하기 위해 필수적인 페이지들이 있습니다. 예를 들어 장바구니 페이지나 주문/결제 페이지와 같은 전자상거래 기능을 포함한 페이지는 직접 추가하지 않아도 상점 웹사이트에 포함되어 있으며 이런 페이지를 기본 제공 페이지라고 부릅니다.
[ 회원/비회원 인증 관련 페이지 ]
상점에서 상품을 구매하거나 접근 권한이 설정된 페이지를 보기 위해 상점 웹사이트에 가입하거나 로그인하는 등 인증이 필요할 때 보이는 페이지입니다. 비밀번호를 잊었을 때 찾을 수 있는 '비밀번호 찾기 페이지'와 비회원 구매 기능을 제공할 때 보이는 '비회원 주문 내역 조회 페이지'도 포함됩니다.
페이지 | 페이지 하위 주소 |
로그인 페이지 | /login |
/signup | |
비밀번호 찾기 페이지 | /findPassword |
마이 페이지 | /myPage |
/checkGuestOrder | |
/introAdultAuth/... |
[ 전자상거래 관련 페이지 ]
상점 방문자가 상점의 상품을 구매하는 과정에서 보게 되는 상품 상세, 장바구니, 주문/결제 페이지도 기본 제공되는 페이지입니다.
페이지 | 페이지 하위 주소 |
상품 상세 페이지 | |
장바구니 페이지 | /cart |
주문 페이지 | /order/... |
결제 요청 페이지 | /payment/request/... |
주문 완료 페이지 | /payment/success/... |
[ 약관/정책고지 관련 페이지 ]
페이지 | 페이지 하위 주소 |
이용약관 | /policy |
개인정보처리방침 | /privacy |
개인정보 수집 및 이용에 대한 동의 | /signupPrivacy |
메뉴는 상점에 방문한 사용자가 길을 잃지 않게 안내하는 길잡이 역할을 하는 요소입 니다. 상점에 방문한 사용자들은 메뉴를 통해 상점에서 판매하는 상품과 제공하는 다양한 콘텐츠를 살펴볼 수 있습니다.
메뉴는 페이지 관리 메뉴에 위치한 '+' 버튼을 눌러 추가할 수 있습니다. 원하는 위치에 따라 각각 머리글 메뉴와 바닥글 메뉴에 추가하세요.
추가할 수 있는 메뉴 유형은 아래와 같습니다.
항목 |
페이지 |
폴더 하위 메뉴 구성 시 활용하는 메뉴 유형으로 폴더를 상위 메뉴로 만들 경우 눌러도 페이지 이동하지 않습니다. |
링크 상점 웹사이트 내 특정 페이지나 외부 웹사이트 링크를 제공할 때 사용할 수 있습니다.
메뉴에 링크 추가 시 '새 탭에서 열기' 옵션 사용 [✔︎] 하면 새 탭으로 해당 링크를 열어 볼 수 있습니다. |
원페이지 원페이지 메뉴 유형을 활용하여 여러 페이지를 하나로 묶어서 '원페이지 웹사이트'를 구성할 수 있습니다. 주로 모바일 앱 소개 페이지나 프로모션 페이지 제작 시 활용하며, 보다 자세한 사항은 원페이지 만들기 안내를 참고하세요. |
페이지 관리 메뉴에서 페이지 위에 마우스를 올리면 '≡' 모양의 아이콘으로 바뀌는데 이걸 잡아서 우측으로 끌어당기면 위 이미지와 같이 하위 메뉴 설정이 가능합니다.
상위 메뉴에서도 콘텐츠를 보여주고 싶다면 '페이지', 콘텐츠 없이 하위 메뉴만 출력하고자 한다면 '폴더'를 상위에 두면 됩니다.
메뉴 유형 중 원페이지 항목을 추가하여 여러 페이지를 하나로 합치면, 메뉴를 통해 화면을 위 아래로 이동하며 콘텐츠를 살펴볼 수 있습니다. 회사 소개, 프로모션 페이지 등에 주로 활용되는 기능입니다.
항목 |
이름 원페이지 메뉴 항목을 메뉴 영역에 노출할 때 보여질 이름입니다. |
하위 주소 상점도메인주소 뒤에 붙을 경로명으로 'https://상점도메인주소/하위주소' 형태로 사용됩니다. |
네비게이션 사용 시 원페이지 내 화면 이동을 돕는 버튼을 보여 줍니다.
|
메뉴에서 숨기기 페이지를 메뉴 영역에서 숨김 처리합니다. |
하위 메뉴 펼치기 원페이지 하위 페이지를 메뉴 영역에 출력합니다. |
[ 원페이지 사용 예시 ]
Step 1.
합쳐서 보여줄 두 개 페이지를 원페이지 메뉴의 하위에 넣습니다.
Step 2.
원페이지 메뉴를 열어보면 아래 이미지 같이 두 페이지가 위아래로 합쳐진 것을 확인 할 수 있습니다.
[ 원페이지 - 네비게이션 ]
화면 우측 영역에 화면 이동을 위한 도트 모양의 버튼 이 노출됩니다.
네비게이션 - 점 (좌측) / 네비게이션 - 점+글자 (우측)
[ 원페이지 - 하위 메뉴 펼치기 ]
'하위 메뉴 펼치기' 옵션 사용 [✔︎] 시 원페이지 하위 페이지 명이 메뉴 영역에 노출됩니다.
머리글(Page Header)과 바닥글은 (Page Footer) 웹사이트 내 모든 페이지에 노출되는 공통 정보 및 네비게이션 영역입니다.
머리글은 책, 잡지, 신문 등 출판물의 모든 페이지 상단에 반복적으로 보여지는 콘텐츠 영역에서 따온 이름으로 상점 웹사이트 내 모든 페이지 상단에 노출되는 메뉴 영역을 일컫는 이름입니다.
아래는 식스샵 고객사 상점의 머리글 메뉴를 모아 놓은 이미지입니다. 형태는 조금씩 다르지만 머리글엔 아래와 같은 정보가 포함됩니다.
설명 |
상점 로고 상점 이름이나 로고가 보이며 눌렀을 때, 상점 첫 페이지로 이동합니다. |
머리글 메뉴 판매자가 등록한 머리글 메뉴가 보이며 눌렀을 때, 각 페이지나 링크로 이동합니다. |
로그인 버튼 누르면 기존 회원이 로그인 할 수 있는 로그인 페이지로 이동합니다. |
마이페이지 버튼 누르면 회원 정보 및 주문 내역 등을 볼 수 있는 마이페이지로 이동합니다. |
장바구니 버튼 누르면 구매자가 담아 놓은 상품을 볼 수 있는 장바구니로 이동합니다. |
검색 버튼 |
아이콘 링크 누르면 판매자가 등록한 소셜 미디어, 해외 상점 및 기타 링크 주소로 이동합니다. |
말풍선 로그인 버튼 하단에 노출되며 말풍선을 눌렀을 때, 로그인 페이지로 이동합니다. |
[ 머리글 - 개별 편집 ]
설명 |
아이콘 아이콘 링크 사용 여부를 설정할 수 있습니다. |
장바구니 머리글 메뉴에서 장바구니 버튼 노출 여부를 설정할 수 있습니 다. |
로그인 머리글 메뉴에서 로그인 버튼 노출 여부를 설정할 수 있습니 다. |
말풍선 넣기 '말풍선 넣기'를 [✔︎] 체크하면 로그인 버튼 하 단에 노출할 말풍선의 메시지와 애니메이션을 설정할 수 있습니다.
(코드 삽입으로 말풍선을 노출했다면 말풍선이 겹쳐서 노출되지 않도록 [애드온 > 코드 삽입]에 입력한 스크립트를 삭제해 주세요.)
|
상품 검색 머리글 메뉴에서 장바구니 버튼 노출 여부를 설정할 수 있습니다. |
[디자인 편집 > 메뉴(좌측 하단≡) > 스타일 편집 > 머리글 - 공통]에서 머리글 공통 스타일 설정이 가능합니다.
.png?alt=media&token=23974ee3-c59f-4f80-b2f3-aaa70d0d92a3)
항목 |
종류
|
배치 종류에 따라 머리글에 포함된 요소들의 배치 유형을 선택할 수 있습니다.
|
배경 머리글의 배경 색상과 불투명도를 설정할 수 있습니다. |
여백 머리글의 위아래 여백을 설정할 수 있습니다. |
경계선 넣기 사용 [✔︎] 하면 지정한 색상으로 머리글 하단에 얇은 경계선을 넣어줍니다. |
스크롤 할 때 화면 스크롤 할 때 머리글 메뉴를 어떻게 보일지 설정할 수 있습니다.
|
[ 머리글 배치 ]
위에서 부터 한줄 왼쪽 로고 1, 2, 3 / 한줄 가운데 로고 / 한줄 왼쪽 로고 / 두줄 왼쪽 / 두줄 가운데 로고
[ 로고 - 개별 편집 ]
항목 |
상점 이름 로고 이미지가 등록되어 있지 않을 경우 텍스트 로고를 화면에 출력합니다. |
이미지 만약 상점의 로고 이미지가 있다면 해당 파일을 업로드하여 이미지 로고를 화면에 출력합니다. |
[ 로고 - 공통 스타일 설정 ]
항목 |
상점 이름 텍스트 로고를 사용중인 경우 색상, 글꼴, 굵기, 크기, 자간(글자 간격) 등을 설정할 수 있습니다. |
기울이기 사용 [✔︎] 하면 텍스트 로고에 기울임(italic)이 적용됩니다. |
이미지 이미지 로고를 사용중인 경우 원하는 너비를 입력하여 로고 크기를 설정할 수 있습니다. 높이는 비율에 따라 자동으로 설정됩니다. |
[ 메뉴 - 개별 편집 ]
- 머리 글 종류가 '메뉴 나열하기'인 경우
머리글 종류를 '메뉴 나열하기'로 선택한 상태에서는 [디자인 편집 > 메뉴(좌측 하단≡) > 스타일 편집 > 머리글 - 메뉴]에서 아래와 같이 메뉴 공통 스타일 설정이 가능합니다.
항목 |
색상 메뉴 항목의 색상을 설정할 수 있습니다.
|
간격 메뉴 항목 사이의 간격을 설정할 수 있습니다. |
글자 메뉴 항목의 글꼴, 굵기, 크기, 자간을 설정할 수 있습니다. |
- 머리글 종류가 '데스크톱에서 ≡ 메뉴 사용하기'인 경우
머리글 종류를 '데스크톱에서 ≡ 메뉴 사용하기'로 선택한 상태에서는 [디자인 편집 > 메뉴(좌측 하단≡) > 스타일 편집 > 머리글 - 메뉴]에서 아래와 같이 메뉴 아이콘(≡)의 색상만 선택이 가능합니다.
항목 |
색상 메뉴 아이콘(≡)의 색상을 설정할 수 있습니다.
|
모바일 메뉴는 [식스샵 > 디자인 편집 > 모바일 뷰포트 전환 > 메뉴(왼쪽 하단≡) > 스타일 편집 > 모바일 메뉴]에서 설정이 가능합니다. 혹은 머리글의 종류가 '데스크톱에서 ≡ 메뉴 사용하기'라면 [식스샵 > 디자인 편집 >메뉴(왼쪽 하단≡) > 스타일 편집 > 모바일 메뉴]에서도 설정이 가능합니다.
항목 |
앞 배경 모바일 메뉴의 색상과 불투명도를 설정할 수 있습니다. |
뒷 배경 모바일 메뉴 뒷 배경의 색상과 불투명도를 설정할 수 있습니다. |
로고 상점 이름 색상, 상점 이름 크기, 이미지 너비를 설정할 수 있습니다. |
로그인 모바일 메뉴에 노출되는 로그인 메뉴의 색상을 설정할 수 있습니다. |
로그인 사용하기
사용 [✔︎] 선택 시 모바일 메뉴에 로그인 메뉴가 노출됩니다. |
상품 검색 모바일 메뉴에 노출되는 상품 검색 창의 색상을 설정할 수 있습니다. |
상품 검색 사용하기
사용 [✔︎] 선택 시 모바일 메뉴에 상품 검색 창이 노출됩니다. |
메뉴 메뉴의 색상과 크기를 설정할 수 있습니다.
단, 메인 배너 섹션이 머리글과 합치기 설정이 되어 있는 경우 메뉴의 색상은 [디자인 편집 > 메뉴(좌측 하단≡) > 스타일 편집 > 메인 배너 섹션]의 스타일을 따라갑니다.
|
하위 메뉴 항상 펼치기
사용 [✔︎] 선택 시 모바일 메뉴에 하위 메뉴가 항상 펼쳐집니다. |
아이콘 아이콘의 색상과 크기를 설정할 수 있습니다. |
[ 장바구니 / 마이페이지 / 상품 검색 - 공통 스타일 설정 ]
머리글을 선택한 상태에서 장바구니 / 마이페이지...를 선택하거나 마우스를 올리면 보이는 요소 태그에서 파레트 모양의 공통 스타일 설정 버튼을 누르면 화면 좌측에서 아래와 같은 설정 패널을 볼 수 있습니다.
항목 |
장바구니 장바구니 버튼 유형을 선택할 수 있습니다.
|
로그인 로그인 버튼 유형을 선택할 수 있습니다.
|
상품 검색 상품 검색 버튼 유형을 선택할 수 있습니다.
|
아이콘 아이콘 스타일을 선택할 수 있습니다.
|
색상 버튼의 상태별 색상을 설정할 수 있습니다.
|
간격 버튼 사이의 간격을 설정할 수 있습니다. |
글자 메뉴 항목에 적용된 글꼴, 굵기, 크기, 자간을 설정할 수 있습니다. 단 아이콘 유형의 버튼을 사용할 경우 글꼴과 굵기는 적용되지 않습니다. |
[ 아이콘 - 개별 편집 ]
머리글을 선택 한 상태에서 아이콘 링크를 선택하거나 마우스를 올리면 보이는 요소 태그에서 연필 모양의 개별 편집 버튼을 누르면 화면 좌측에서 아래와 같은 설정 패널을 볼 수 있습니다. 노출을 원하는 아이콘에 해당하는 입력란에 전화번호, 이메일 주소 혹은 웹 URL을 입력하세요.
항목 | 항목 |
전화번호 | 핀터레스트 |
이메일 | 텀블러 |
페이스북 | 플리커 |
인스타그램 | 링크드인 |
블로그 | 구글플러스 |
카카오톡 | 유튜브 |
카카오 스토리 | 비메오 |
카카오톡채널 | 네이버 포스트 |
안드로이드 | 네이버 카페 |
애플 | 다음 카페 |
윈도우즈 | 지구 |
라인 | 한국 국기 |
밴드 | 미국 국기 |
네이버 톡톡 | 중국 국기 |
네이버 모두 | 일본 국기 |
에어비앤비 | 영국 국기 |
텔레그램 | 베트남 국기 |
트위터 | 스페인 국기 |
[ 아이콘 - 공통 스타일 설정 ]
머리글을 선택한 상태에서 아이콘 링크를 선택하거나 마우스를 올리면 보이는 요소 태그에서 파레트 모양의 공통 스타일 설정 버튼을 누르면 화면 좌측에서 아래와 같은 설정 패널을 볼 수 있습니다.
항목 |
종류 아이콘 링크의 스타일을 설정할 수 있습니다.
|
색상
아이콘 링크의 색상을 설정할 수 있습니다.
|
간격 각 아이콘 사이 간격을 설정할 수 있습니다. |
크기 아이콘의 크기를 설정할 수 있습니다. |
바닥글 역시 책, 잡지, 신문 등 출판물의 하단에 반복적으로 보여지는 콘텐츠 영역에서 따온 이름으로 상점 웹사이트 내 페이지 하단에 노출되는 메뉴 영역을 뜻합니다.
아래는 식스샵 고객사 상점의 바닥글 메뉴 예시입니다. 형태는 조금씩 다르지만 바닥글엔 아래와 같은 정보가 포함됩니다.
설명 |
법적 필수 정보 |
저작권 표시 상점 웹사이트에 게재된 콘텐츠에 대한 저작권을 표기할 수 있습니다. |
에스크로 가맹점 마크 고객이 안심하고 상품을 구매할 수 있도록 안전구매(에스크로)서비스 가맹점 마크를 노출할 수 있습니다. |
마이페이지 버튼 누르면 회원 정보 및 주문 내역 등을 볼 수 있는 마이페이지로 이동합니다. |
아이콘 링크 누르면 판매자가 등록한 소셜 미디어, 해외 상점 및 기타 링크 주소로 이동합니다. |
바닥글 메뉴 판매자가 등록한 바닥글 메뉴가 보이며 눌렀을 때, 각 페이지나 링크로 이동합니다. |
[ 바닥글 - 개별 편집 ]
항목 |
아이콘 아이콘 링크 사용 여부를 설정할 수 있습니다. |
에스크로 인증 마크 구매 안전 서비스(에스크로) 인증 마크 출력 여부를 설정할 수 있습니다. |
저작권 표시 저작권 표시 사용 여부를 설정할 수 있습니다. |
[ 바닥글 - 공통 스타일 설정 ]
항목 |
배치 바닥글에 포함된 요소들의 배치 유형을 선택할 수 있습니다.
|
색상 바닥글과 바닥글 내 요소의 색상을 설정할 수 있습니다.
|
여백 바닥글의 위 아래 여백을 설정할 수 있습니다. |
경계선 넣기 사용 [✔︎] 하면 지정한 색상으로 바닥글 상단에 얇은 경계선을 넣어줍니다. |
[ 바닥글 - 배치 ]
위에서 부터 왼쪽 정렬과 가운데 정렬이다.
[ 법적 필수 정보 - 개별 편집 ]
.png?alt=media&token=bc9854e6-ab59-4340-a6fe-7d78c2a86561)
패널을 통해 법적 필수 정보의 타이틀 언어, 글꼴, 굵기, 크기, 자간, 줄간격 등을 설정할 수 있습니다.
[ 저작권 표시 - 개별 편집 ]
이곳에 저작권 표시를 입력해주세요. (예시: © (주)식스샵 All rights reserved.)
[ 저작권 표시 - 공통 스타일 설정 ]
이곳에서 입력한 저작권 표시의 글꼴, 굵기, 크기, 자간을 설정하세요.
[ 아이콘 - 개별 편집 ]
노출 가능한 아이콘 종류는 머리글과 동일합니다.
[ 아이콘 - 공통 스타일 설정 ]
항목 |
종류 아 이콘 링크의 스타일을 설정할 수 있습니다.
|
색상
아이콘 링크의 색상을 설정할 수 있습니다.
|
크기 아이콘의 크기를 설정할 수 있습니다. |
바닥글 영역에 상점 로고, 고객센터 운영 시간, 계좌 정보 등과 같이 추가로 안내하고 싶은 정보를 상점 내 모든 페이지에 동일하게 적용하여 노출할 수 있습니다. 한 번의 설정으로 모든 페이지에 일괄 적용이 가능합니다.
추가한 섹션은 파란색 가이드라인 아래로 순차적으로 노출되며 모든 페이지에 동일하게 적용됩니다.
동기화 섹션은 사용자 편집 섹션과 전광판 배너 섹션만 추가할 수 있습니다. 추가한 섹션은 바닥글 위에 있는 동기화 섹션 내에서만 이동 또는 복사가 가능합니다.
동기화 섹션은 최대 5개까지 추가할 수 있고, 5개가 모두 추가되면 [+ 바닥글 위에 동기화 섹션 추가] 버튼이 비활성화됩니다.
템플릿 변경하기를 '초기화하기'로 선택하면 디자인 편집 페이지를 [발행하기] 하지 않아도 추가한 동기화 섹션이 모두 초기화됩니다.
머리글 종류를 '데스크톱에서 ≡ 메뉴 사용하기'로 선택한 경우 상위 메뉴 클릭해야 하위 메뉴를 확인할 수 있습니다. 머리글의 종류는 [디자인 편집 > 메뉴(좌측 하단≡) > 스타일 편집 > 머리글 - 공통]에서 변경할 수 있습니다.
페이지에서 바닥글 숨기기 [✓] 체크가 되어 있다면 동기화 섹션 추가하기 가이드라인과 바닥글 영역이 노출되지 않습니다. 페이지에서 바닥글 숨기기 [ ] 체크 해제를 한 후에 동기화 섹션을 이용해 주세요.
숨겨진 바닥글 노출하기는 [디자인 편집 > 좌측 하단 메뉴(≡) > 수정을 원하는 메뉴의 설정 아이콘 > 페이지에서 바닥글 숨기기[ ] 체크 해제하기]로 설정이 가능합니다.
템플릿 변경하기를 '초기화하기'로 선택하면 상점에서 동기화 섹션이 사라지게 됩니다.
디자인 편집 페이지에서 [발행하기] 버튼을 클릭하지 않아도 상점에서 동기화 섹션이 없어지기 때문에 다시 동기화 섹션을 추가하여 이용해 주세요.
Last modified 4mo ago