디자인 편집하기

이제 본격적으로 디자인 편집 도구를 사용하여 페이지를 만들어봅시다. 식스샵만의 방식으로 만들어진 디자인 편집 도구는 처음에 다소 낯설게 느껴질 수 있지만, 금방 익힐 수 있으며 능숙해지면 정말 빠르고 편리하게 페이지를 만들 수 있습니다.

1. 디자인 편집 화면 둘러보기

식스샵 디자인 편집 도구는 페이지의 변경 사항을 실시간으로 확인하는 것에 초점을 두고, 화면 아래쪽에 패널을 배치했습니다. 기능들은 버튼과 아이콘을 통해 언제든 사용할 수 있습니다.

1. 메뉴와 스타일 편집 : 페이지 설정, 스타일 편집 메뉴를 열 수 있습니다.
2. 추가하기 버튼 : 섹션이나 요소를 추가할 수 있는 버튼의 위치입니다.
3. 뷰포트 : 뷰포트를 변경하여 모바일 버전으로 확인할 수 있습니다. (일부만 편집 가능)
4. 미리보기 : 데스크탑 버전 페이지를 웹 페이지 형태로 미리 보기 할 수 있습니다. (발행하기 전에도 볼 수 있습니다.)
5. 발행하기 - 현재 보이는 상태로 페이지를 발행합니다. 발행하기를 누르기 전까지는 방문자들이 변경 사항을 확인할 수 없습니다. 리뉴얼 시 활용할 수 있습니다.

2. 페이지 설정하기

페이지 설정 메뉴에서는 제작 중인 쇼핑몰의 전체 페이지를 관리합니다. 페이지들은 머리글이나 바닥글 네비게이션 바에 들어갈 메뉴 부분에 노출됩니다. 이제 페이지 설정 사용법을 알려드리겠습니다.

2-1. 메뉴와 설정 페이지 버튼 클릭 시 나타납니다.

2-2. 페이지 추가하기

페이지는 머리글과 바닥글에 각각 추가할 수 있으며, 빈 페이지, 현재 사용 중인 템플릿의 샘플 디자인 페이지, 폴더, 외부 링크, 원페이지를 추가할 수 있습니다.

2-3. 페이지 이름, 주소, 접근 권한, 숨기기 설정하기

각 페이지 이름 위에 마우스를 올려보면 오른쪽에 톱니 모양 설정 아이콘이 보입니다. 클릭하면 페이지에 대해 설정을 할 수 있습니다. 페이지의 이름, 주소, 접근 권한, 숨기기 설정이 가능합니다. 설정을 변경했을 경우, 저장하기 버튼을 꼭 클릭해야만 변경한 내용이 저장됩니다.

+
주소에 대한 이야기를 더 자세히 알려드리고자 합니다. 주소는 해당 페이지에 접속할 때 url 제일 마지막에 붙는 간단한 단어입니다. 주소는 띄어쓰기나 특수문자 없이 영어로만 입력을 해주셔야 합니다.
예를 들어 shop이라는 주소를 저장한다면 브라우저의 url에는 다음과 같이 반영됩니다.

http://도메인주소/shop

도메인을 등록하지 않았을 경우 - http://www.sixshop.com/아이디/shop

2-4. 페이지 순서 변경, 하위 메뉴 만들기

드래그 앤 드랍 방식으로 손쉽게 순서 변경과 하위 메뉴를 변경할 수 있습니다.
메뉴 이름 왼쪽의 아이콘 부분을 잡고 상하 이동 시에는 순서 변경, 오른쪽으로 이동 시에는 해당 메뉴 위에 있는 메뉴의 하위 메뉴가 됩니다. 반대로 다시 왼쪽으로 이동하면 하위 메뉴에서 독립합니다.

위 예시 이미지는 머리글 메뉴와 바닥글 메뉴의 실제 적용 모습입니다. 2-3. 페이지 설정하기에서 확인했던 '메뉴에서 숨기기'설정이 적용되면 페이지 이름에 빗금이 표시되며 머리글이나 바닥글 메뉴에는 노출되지 않지만 어딘가에 이 페이지의 주소가 링크되어 있다면 누구나 확인할 수 있습니다.

2-5. 링크 메뉴 만들기

원하는 메뉴 이름을 입력하고 링크 주소를 입력하면 외부 링크를 메뉴에 노출할 수 있습니다.

2-6. 폴더메뉴로 하위 메뉴 만들기

기본적으로 페이지 메뉴에 하위 메뉴를 생성하지만, 페이지 기능이 없는 폴더 메뉴를 사용할 수도 있습니다. 폴더 메뉴는 머리글에서 이름만 보이고 페이지가 없는 형태이기 때문에 클릭해도 변화가 없습니다. 하위 메뉴만 사용하고자 할 때 유용하게 사용할 수 있습니다.

3. 태그와 아이콘

태그와 아이콘을 통해 디자인 편집 도구를 더욱 손쉽게 사용할 수 있습니다. 특히 스타일 편집으로 접근하기에 굉장히 용이하지만, 바로 가기 아이콘으로 접근할 수 없는 경우도 있으니 참고하세요. (예 - 링크 색 변경)

4. 스타일 편집, 개별 편집

4-1. 스타일 편집이란?

쇼핑몰 디자인의 핵심인 스타일 편집 기능은 주로 글꼴 설정, 색 변경 등 눈에 보이는 디자인 위주의 설정을 일괄적으로 담당합니다. 섹션이나 요소의 태그 부분에 있는 팔레트 모양 아이콘이나 스타일 편집 메뉴를 통해 설정할 수 있습니다.

4-2. 스타일 편집에서 설정한 값은 모든 섹션과 요소에 일괄적으로 적용됩니다.

4-3. 개별 편집이란?

스타일 편집에서 설정한 디자인과 별개로 개별 편집을 통해 해당 요소만 디자인을 다르게 수정하거나 스타일 편집에 없는 기타 설정(이미지 너비, 구글 지도 주소 값 등)을 적용할 수 있습니다. 태그의 연필 모양 아이콘이나 더블 클릭으로 설정할 수 있습니다.

4-4. 아래 이미지는 스타일 편집 값과 다르게 개별적으로 디자인을 변경하는 모습입니다. (글꼴, 버튼 디자인 등)

4-5. 디자인 설정 값의 우선순위와 초기화

이렇게 디자인한 설정값들은
개별 편집 > 스타일 편집
의 우선순위를 가집니다.

사용자가 직접 변경한 사항을 기본값으로 되돌리고 싶을 경우, 각 패널에 보이는 버튼을 통해 되돌릴 수 있습니다. 스타일 편집 값은 사용 중인 템플릿의 기본값으로 초기화되고, 개별 편집값은 지금 설정된 스타일 편집 값으로 되돌아갑니다.

5. 모바일 디자인 편집

일부 요소와 섹션을 모바일 환경에서 더 멋지게 꾸밀 수 있습니다. 디자인 편집 도구 화면 오른쪽 아래의 [뷰포트 > 모바일]에서 모바일 디자인을 편집해보세요.

섹션, 요소에 대한 안내서와 함께 디자인 편집하기 안내서까지 모두 잘 숙지하셨다면 이제 충분히 식스샵을 큰 어려움 없이 사용하실 수 있습니다. 안내서에 부족한 점이 있다면, 고객님들의 피드백을 참고하여 수시로 보충하겠습니다. 

관련된 안내서 보기

모바일 디자인 편집하기

섹션이란?

요소란?

자주 사용하는 동작 및 단축키

SixShop | 식스샵 안내서입니다.

SixShop | 식스샵 안내서입니다.