페이지와 메뉴
페이지를 만들고 관리하는 방법을 알아보고 이를 메뉴로 구성해보겠습니다.
목차
1. 페이지와 메뉴
혹시 좋아하는 브랜드나 백화점에서 우편으로 보내주던 쇼핑 카탈로그를 본 적 있으세요?
멋진 사진으로 장식된 표지를 넘기면 목차가 나오고 다시 몇 장을 넘기면 신상품과 할인/인기 상품을 소개하는 페이지 그리고 브랜드와 관련된 다양한 소식과 정보까지 여러 콘텐츠로 소비자의 지갑을 노렸습니다.
그런데 사실 상점 웹사이트도 크게 다르지 않습니다. 종이가 디지털 화면으로 바뀌었을뿐 여러 페이지의 콘텐츠를 통해 방문자의 흥미를 유발하고 브랜드에 대한 신뢰를 제공하여 궁극적으론 상품을 판매하는 것이 목적입니다.
다만 지면에 제한이 있는 종이 카탈로그에서 페이지는 종이 낱장을 뜻하지만 웹사이트의 페이지는 '쪽'보단 '콘텐츠의 종류나 주제 단위로 구분됩니다.
그리고 종이 카탈로그에서 보고 싶은 콘텐츠가 있을 때 목차를 통해 해당 페이지를 찾아 펼치듯 웹사이트에선 메뉴를 통해 원하는 페이지로 이동할 수 있습니다.
'즉, 콘텐츠의 종류나 주제별로 페이지를 만들고 그것들을 메뉴에 추가해 상점의 고객이 살펴볼 수 있게 한다.'
이것이 앞으로 살펴볼 내용의 핵심입니다.
2. 페이지
2-1. 페이지의 화면 구조
페이지는 템플릿마다 다소 차이가 있을 순 있겠으나 기본적으로 아래와 같은 구조를 갖추고 있습니다.
아래 이미지는 실제 상점 페이지 위에 세개의 영역을 겹쳐 표시한 것입니다.
2-2. 페이지 추가하기
페이지 관리 메뉴에서 페이지를 추가할 수 있습니다.
'머리글 메뉴' 우측에 위치한 '메뉴 추가(+)' 버튼을 누르면 '메뉴 추가하기' 패널이 보입니다. '메뉴 항목 유형'을 '페이지'로 선택한 뒤 목록의 '비어있는 페이지' 혹은 '샘플 페이지' 중 하나를 누르면 아래와 같은 화면을 볼 수 있습니다.
2-3. 페이지 설정하기
페이지 관리 메뉴에서 페이지의 속성을 설정할 수 있습니다.
2-4. 페이지 열기
페이지 관리 메뉴의 메뉴 목록에 위치한 페이지를 선택하면 페이지 편집 화면으로 해당 페이지를 편집할 수 있습니다.
3. 그 외 상점 페이지
3-1. 기본 제공 페이지
상점을 운영하기 위해 필수적인 페이지들이 있습니다. 예를 들어 장바구니 페이지나 주문/결제 페이지와 같은 전자상거래 기능을 포함한 페이지는 직접 추가하지 않아도 상점 웹사이트에 포함되어 있으며 이런 페이지를 기본 제공 페이지라고 부릅니다.
[ 회원/비회원 인증 관련 페이지 ]
상점에서 상품을 구매하거나 접근 권한이 설정된 페이지를 보기 위해 상점 웹사이트에 가입하거나 로그인하는 등 인증이 필요할 때 보이는 페이지입니다. 비밀번호를 잊었을 때 찾을 수 있는 '비밀번호 찾기 페이지'와 비회원 구매 기능을 제공할 때 보이는 '비회원 주문 내역 조회 페이지'도 포함됩니다.
[ 전자상거래 관련 페이지 ]
상점 방문자가 상점의 상품을 구매하는 과정에서 보게 되는 상품 상세, 장바구니, 주문/결제 페이지도 기본 제공되는 페이지입니다.
[ 약관/정책고지 관련 페이지 ]
그 외 법적으로 상점 웹사이트에 노출되어야 하는 이용약관 등의 일부 약관/정책고지 페이지가 기본 제공 페이지에 포함됩니다.
3-2. 게시판, 후기와 질문 페이지
새로운 게시판, 후기 게시판, 질문 게시판 등을 추가하면 페이지 관리 메뉴에도 해당 게시판이 페이지 형태로 자동 추가 됩니다.
해당 페이지는 메뉴에서 보이지 않도록 숨김 처리할 수 있으며 페이지 내 게시판 위·아래로 섹션을 추가할 수 있습니다.
4. 메뉴 구성하기
메뉴는 상점에 방문한 사용자가 길을 잃지 않게 안내하는 길잡이 역할을 하는 요소입니다. 상점에 방문한 사용자들은 메뉴를 통해 상점에서 판매하는 상품과 제공하는 다양한 콘텐츠를 살펴볼 수 있습니다.
4-1. 메뉴 추가하기
메뉴는 페이지 관리 메뉴에 위치한 '+' 버튼을 눌러 추가할 수 있습니다. 원하는 위치에 따라 각각 머리글 메뉴와 바닥글 메뉴에 추가하세요.
추가할 수 있는 메뉴 유형은 아래와 같습니다.
4-2. 하위 메뉴 만들기
페이지 관리 메뉴에서 페이지 위에 마우스를 올리면 '≡' 모양의 아이콘으로 바뀌는데 이걸 잡아서 우측으로 끌어당기면 위 이미지와 같이 하위 메뉴 설정이 가능합니다.
상위 메뉴에서도 콘텐츠를 보여주고 싶다면 '페이지', 콘텐츠 없이 하위 메뉴만 출력하고자 한다면 '폴더'를 상위에 두면 됩니다.
4-3. 원페이지 만들기
메뉴 유형 중 원페이지 항목을 추가하여 여러 페이지를 하나로 합치면, 메뉴를 통해 화면을 위 아래로 이동하며 콘텐츠를 살펴볼 수 있습니다. 회사 소개, 프로모션 페이지 등에 주로 활용되는 기능입니다.
[ 원페이지 사용 예시 ]
Step 1. 합쳐서 보여줄 두 개 페이지를 원페이지 메뉴의 하위에 넣습니다.
Step 2. 원페이지 메뉴를 열어보면 아래 이미지 같이 두 페이지가 위아래로 합쳐진 것을 확인 할 수 있습니다.
[ 원페이지 - 네비게이션 ]
화면 우측 영역에 화면 이동을 위한 도트 모양의 버튼이 노출됩니다.
[ 원페이지 - 하위 메뉴 펼치기 ]
'하위 메뉴 펼치기' 옵션 사용 [✔︎] 시 원페이지 하위 페이지 명이 메뉴 영역에 노출됩니다.
5. 머리글과 바닥글
머리글(Page Header)과 바닥글은 (Page Footer) 웹사이트 내 모든 페이지에 노출되는 공통 정보 및 네비게이션 영역입니다.
5-1. 머리글이란?
머리글은 책, 잡지, 신문 등 출판물의 모든 페이지 상단에 반복적으로 보여지는 콘텐츠 영역에서 따온 이름으로 상점 웹사이트 내 모든 페이지 상단에 노출되는 메뉴 영역을 일컫는 이름입니다.
아래는 식스샵 고객사 상점의 머리글 메뉴를 모아 놓은 이미지입니다. 형태는 조금씩 다르지만 머리글엔 아래와 같은 정보가 포함됩니다.
5-2. 머리글 설정하기
[ 머리글 - 개별 편집 ]
머리글 메뉴를 선택하면 보이는 섹션 태그에서 연필 모양의 개별 편집 버튼을 누르면 아래와 같은 속성 패널이 보입니다.
[ 머리글 - 공통 스타일 설정 ]
[디자인 편집 > 메뉴(좌측 하단≡) > 스타일 편집 > 머리글 - 공통]에서 머리글 공통 스타일 설정이 가능합니다.
[ 머리글 배치 ]
위에서 부터 한줄 왼쪽 로고 1, 2, 3 / 한줄 가운데 로고 / 한줄 왼쪽 로고 / 두줄 왼쪽 / 두줄 가운데 로고
[ 로고 - 개별 편집 ]
머리글을 선택한 상태에서 로고를 선택하거나 마우스를 올리면 보이는 요소 태그에서 연필 모양의 개별 편집 버튼을 누르면 아래와 같은 속성 패널이 보입니다.
[ 로고 - 공통 스타일 설정 ]
머리글을 선택한 상태에서 로고를 선택하거나 마우스를 올리면 보이는 요소 태그에서 파레트 모양의 공통 스타일 설정 버튼을 누르면 아래와 같은 속성 패널이 화면 좌측에 보입니다.
[ 메뉴 - 개별 편집 ]
머리글을 선택한 상태에서 메뉴를 선택하거나 마우스를 올리면 보이는 요소 태그에서 연필 모양의 개별 편집 버튼을 누르면 페이지 관리 메뉴가 열립니다.
[ 메뉴 - 공통 스타일 설정 ]
머리글 종류가 '메뉴 나열하기'인 경우
머리글 종류를 '메뉴 나열하기'로 선택한 상태에서는 [디자인 편집 > 메뉴(좌측 하단≡) > 스타일 편집 > 머리글 - 메뉴]에서 아래와 같이 메뉴 공통 스타일 설정이 가능합니다.
머리글 종류가 '데스크톱에서 ≡ 메뉴 사용하기'인 경우
머리글 종류를 '데스크톱에서 ≡ 메뉴 사용하기'로 선택한 상태에서는 [디자인 편집 > 메뉴(좌측 하단≡) > 스타일 편집 > 머리글 - 메뉴]에서 아래와 같이 메뉴 아이콘(≡)의 색상만 선택이 가능합니다.
[ 모바일 메뉴 - 공통 스타일 설정 ]
모바일 메뉴는 [식스샵 > 디자인 편집 > 모바일 뷰포트 전환 > 메뉴(왼쪽 하단≡) > 스타일 편집 > 모바일 메뉴]에서 설정이 가능합니다. 혹은 머리글의 종류가 '데스크톱에서 ≡ 메뉴 사용하기'라면 [식스샵 > 디자인 편집 >메뉴(왼쪽 하단≡) > 스타일 편집 > 모바일 메뉴]에서도 설정이 가능합니다.
[ 장바구니 / 마이페이지 / 상품 검색 - 공통 스타일 설정 ]
머리글을 선택한 상태에서 장바구니 / 마이페이지...를 선택하거나 마우스를 올리면 보이는 요소 태그에서 파레트 모양의 공통 스타일 설정 버튼을 누르면 화면 좌측에서 아래와 같은 설정 패널을 볼 수 있습니다.
[ 아이콘 - 개별 편집 ]
머리글을 선택한 상태에서 아이콘 링크를 선택하거나 마우스를 올리면 보이는 요소 태그에서 연필 모양의 개별 편집 버튼을 누르면 화면 좌측에서 아래와 같은 설정 패널을 볼 수 있습니다. 노출을 원하는 아이콘에 해당하는 입력란에 전화번호, 이메일 주소 혹은 웹 URL을 입력하세요.
[ 아이콘 - 공통 스타일 설정 ]
머리글을 선택한 상태에서 아이콘 링크를 선택하거나 마우스를 올리면 보이는 요소 태그에서 파레트 모양의 공통 스타일 설정 버튼을 누르면 화면 좌측에서 아래와 같은 설정 패널을 볼 수 있습니다.
5-3. 바닥글이란?
바닥글 역시 책, 잡지, 신문 등 출판물의 하단에 반복적으로 보여지는 콘텐츠 영역에서 따온 이름으로 상점 웹사이트 내 페이지 하단에 노출되는 메뉴 영역을 뜻합니다.
아래는 식스샵 고객사 상점의 바닥글 메뉴 예시입니다. 형태는 조금씩 다르지만 바닥글엔 아래와 같은 정보가 포함됩니다.
5-4. 바닥글 설정하기
[ 바닥글 - 개별 편집 ]
바닥글을 선택하면 보이는 섹션 태그에서 연필 모양의 개별 편집 버튼을 누르면 화면 좌측에서 아래와 같은 설정 패널을 볼 수 있습니다.
[ 바닥글 - 공통 스타일 설정 ]
바닥글을 선택하면 보이는 섹션 태그에서 파레트 모양의 공통 스타일 설정 버튼을 누르면 화면 좌측에서 아래와 같은 설정 패널을 볼 수 있습니다.
[ 바닥글 - 배치 ]
위에서 부터 왼쪽 정렬과 가운데 정렬이다.
[ 법적 필수 정보 - 개별 편집 ]
바닥글을 선택한 상태에서 법적 필수 정보를 선택하거나 마우스를 올리면 보이는 요소 태그에서 연필 모양의 개별 편집 버튼을 누르면 아래와 같은 속성 패널이 보입니다.
속성 패널에 노출되는 항목은 법적 필수 정보와 같으며 설정 > 법적 필수 정보에서도 동일하게 수정할 수 있습니다.
[ 법적 필수 정보 - 공통 스타일 설정 ]
바닥글을 선택한 상태에서 법적 필수 정보를 선택하거나 마우스를 올리면 보이는 요소 태그에서 파레트 모양의 공통 스타일 설정 버튼을 누르면 아래와 같은 속성 패널이 보입니다.
패널을 통해 법적 필수 정보의 타이틀 언어, 글꼴, 굵기, 크기, 자간, 줄간격 등을 설정할 수 있습니다.
[ 저작권 표시 - 개별 편집 ]
바닥글을 선택한 상태에서 저작권 표시를 선택하거나 마우스를 올리면 보이는 요소 태그에서 연필 모양의 개별 편집 버튼을 누르면 아래와 같은 속성 패널이 보입니다.
이곳에 저작권 표시를 입력해주세요. (예시: © (주)식스샵 All rights reserved.)
[ 저작권 표시 - 공통 스타일 설정 ]
바닥글을 선택한 상태에서 법적 필수 정보를 선택하거나 마우스를 올리면 보이는 요소 태그에서 파레트 모양의 공통 스타일 설정 버튼을 누르면 아래와 같은 속성 패널이 보입니다.
이곳에서 입력한 저작권 표시의 글꼴, 굵기, 크기, 자간을 설정하세요.
[ 아이콘 - 개별 편집 ]
바닥글을 선택한 상태에서 아이콘 링크를 선택하거나 마우스를 올리면 보이는 요소 태그에서 연필 모양의 개별 편집 버튼을 누르면 아래와 같은 속성 패널이 보입니다.
노출 가능한 아이콘 종류는 머리글과 동일합니다.
[ 아이콘 - 공통 스타일 설정 ]
바닥글을 선택한 상태에서 아이콘 링크를 선택하거나 마우스를 올리면 보이는 요소 태그에서 파레트 모양의 공통 스타일 설정 버튼을 누르면 아래와 같은 속성 패널이 보입니다.
5-5. 바닥글 위에 동기화 섹션 추가하기
바닥글 영역에 상점 로고, 고객센터 운영 시간, 계좌 정보 등과 같이 추가로 안내하고 싶은 정보를 상점 내 모든 페이지에 동일하게 적용하여 노출할 수 있습니다. 한 번의 설정으로 모든 페이지에 일괄 적용이 가능합니다.
Step1. 디자인 편집 페이지 하단에 있는 [+ 바닥글 위에 동기화 섹션 추가] 버튼을 클릭해 주세요.
추가한 섹션은 파란색 가이드라인 아래로 순차적으로 노출되며 모든 페이지에 동일하게 적용됩니다.
Step2. 추가를 원하는 섹션을 클릭해 주세요.
동기화 섹션은 사용자 편집 섹션과 전광판 배너 섹션만 추가할 수 있습니다. 추가한 섹션은 바닥글 위에 있는 동기화 섹션 내에서만 이동 또는 복사가 가능합니다.
동기화 섹션은 최대 5개까지 추가할 수 있고, 5개가 모두 추가되면 [+ 바닥글 위에 동기화 섹션 추가] 버튼이 비활성화됩니다.
사용자 편집 섹션과 전광판 배너 섹션의 개별 편집, 스타일 편집은 기존 방식과 동일합니다.
템플릿 변경하기를 '초기화하기'로 선택하면 디자인 편집 페이지를 [발행하기] 하지 않아도 추가한 동기화 섹션이 모두 초기화됩니다.
🤔 페이지와 메뉴 FAQ
Q. 데스크톱에서 ≡ 메뉴 사용하기 했더니 하위 메뉴가 보이지 않습니다.
머리글 종류를 '데스크톱에서 ≡ 메뉴 사용하기'로 선택한 경우 상위 메뉴 클릭해야 하위 메뉴를 확인할 수 있습니다. 머리글의 종류는 [디자인 편집 > 메뉴(좌측 하단≡) > 스타일 편집 > 머리글 - 공통]에서 변경할 수 있습니다.
Q. 말풍선 메시지를 설정했는데 말풍선이 노출되지 않아요.
데스크탑에서 노출되지 않는 경우
말풍선 메시지는 상점에서 로그아웃한 상태에서만 확인할 수 있습니다.
머리글의 종류에 따라 말풍선을 별도로 설정할 수 있습니다. 머리글 종류를 변경하였다면 말풍선을 다시 설정해 주세요.
모바일에서 노출되지 않는 경우
말풍선 메시지는 상점에서 로그아웃한 상태에서만 확인할 수 있습니다.
모바일 뷰포트로 전환 > 머리글 영역 클릭 > 개별 편집(연필 모양 아이콘)을 클릭하면 모바일 말풍선을 설정할 수 있습니다.
Q. 바닥글 위에 동기화 섹션 추가하기 가이드라인이 보이지 않습니다.
페이지에서 바닥글 숨기기 [✓] 체크가 되어 있다면 동기화 섹션 추가하기 가이드라인과 바닥글 영역이 노출되지 않습니다. 페이지에서 바닥글 숨기기 [ ] 체크 해제를 한 후에 동기화 섹션을 이용해 주세요.
숨겨진 바닥글 노출하기는 [디자인 편집 > 좌측 하단 메뉴(≡) > 수정을 원하는 메뉴의 설정 아이콘 > 페이지에서 바닥글 숨기기[ ] 체크 해제하기]로 설정이 가능합니다.
Q. 템플릿 변경하기를 했는데 상점에서 동기화 섹션이 사라졌습니다.
템플릿 변경하기를 '초기화하기'로 선택하면 상점에서 동기화 섹션이 사라지게 됩니다.
디자인 편집 페이지에서 [발행하기] 버튼을 클릭하지 않아도 상점에서 동기화 섹션이 없어지기 때문에 다시 동기화 섹션을 추가하여 이용해 주세요.
Last updated