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