에디터 기본 정보

본격적인 상점 디자인을 시작하기 전에 디자인 에디터의 기본 구조를 살펴보세요.

1. 디자인 에디터 실행하기

상점 관리자 메뉴 상단에 위치한 '디자인 편집' 버튼을 누르면 디자인 에디터가 실행됩니다.

디자인 에디터의 화면 구성은 아래와 같이 크게 3개 영역으로 나뉘어져 있습니다. 모든 영역은 각기 다양한 기능을 포함하고 있으며 이 세 영역의 역할과 용도만 확실히 이해해도 앞으로 상점 디자인을 훨씬 편하게 진행할 수 있습니다.

페이지 편집 화면은 디자인 에디터에서 가장 핵심적인 영역으로, 내가 운영할 상점의 콘텐츠를 직접 눈으로 보면서 편집 하는 공간입니다. 이름에서 알 수 있듯 페이지를 선택하면 이곳에서 페이지 내 다양한 구성 요소를 편집할 수 있습니다.

[ 태그 ]

페이지 편집 화면에 위치한 섹션, 요소 등 특정 콘텐츠 구성 요소를 선택하면 아래와 같이 구성 요소의 이름과 여러 버튼이 포함된 '태그'를 볼 수 있습니다. 태그의 버튼을 통해 대부분의 편집 기능을 실행 할 수 있습니다. 각 버튼 별 기능은 아래 표를 참고하세요.

하단 도구 모음은 페이지 편집 화면을 조작할 수 있는 도구가 모여있는 영역이며 아래와 같은 구조를 가지고 있습니다.

[ 페이지 관리 메뉴 ]

단축키: Tab

하단 도구 모음의 좌측 끝에 위치한 '≡' 모양의 버튼을 누르면 페이지 관리 메뉴를 열 수 있습니다. 단축키: Esc 키를 누르거나 '닫기(X)' 버튼을 누르면 페이지 관리 메뉴가 닫힙니다.

[ 콘텐츠 설정 도구 ]

[ 뷰포트 전환 ]

단축키: Ctrl + Shift + M

뷰포트는 웹브라우저에서 사용자에게 보이는 영역을 뜻합니다. 뷰포트의 크기는 기기마다 다르기 때문에 데스크탑과 모바일에서 보이는 상점 화면 역시 다를 수 밖에 없습니다.

이러한 가변적인 특성이 '웹페이지 디자인'을 '스케치북에 그림 그리기' 보다 훨씬 어렵고 복잡한 일로 만드는 이유이기도 합니다. 왜냐면 여러 콘텐츠 및 여백이 화면 안에서 적절한 비율로 조화를 이룰 때 비로소 높은 전달력과 사용성을 갖기 때문입니다.

그래서 등장한 것이 '반응형 웹' 기술입니다. 화면 사이즈에 맞춰 콘텐츠 및 여백의 크기와 균형을 알아서 조절하기 때문에 콘텐츠가 가려지거나, 여백이 너무 넓어 주목성이 떨어지는 일을 방지합니다.

식스샵 디자인 에디터는 반응형 웹을 기반으로 만들어졌습니다. 10개의 화면에 맞춰 10번의 디자인 작업을 하는 대신, 고객님의 데스크탑에서 한 번만 디자인하면 더 큰 모니터와 훨씬 작은 스마트폰 화면에서도 깨지지 않고 살펴볼 수 있도록 자동으로 최적화하여 출력합니다.

하단 도구 모음 우측에 위치한 모니터 모양의 '뷰포트 전환 버튼'을 눌러 이를 확인할 수 있습니다.

상점 디자인은 더 많은 정보를 포함하는 데스크탑을 중심으로 진행하며 모바일 화면의 일부 설정을 고객이 직접 변경할 수 있습니다. 이에 대한 보다 자세한 사항은 모바일 디자인 안내서를 참고하세요.

아래는 페이지 편집 화면의 뷰포트를 각각 데스크탑과 모바일로 설정했을 때 보이는 모습입니다.

[ 미리보기 모드 ]

단축키: 'Shift + W'

하단 도구 모음 우측에 위치한 눈(eye) 모양의 '미리보기' 버튼을 누르면 아래와 같이 현재 페이지 편집 화면에서 작업중인 페이지를 직접 사용해 볼 수 있습니다.

[ 발행하기 ]

디자인 에디터에서 크롬 브라우저의 주소창을 보면 'sixshop.com/edit/상점아이디/...'로 표기되는 것을 확인할 수 있습니다. 이때 페이지 편집 화면에 보이는 상점 디자인은 고객에게 공개되지 않은 상태입니다.

그리고 디자인 편집을 마친 뒤 고객에게 공개할 준비가 되었을 때 '발행하기' 버튼을 누르면 편집 중인 상점 디자인이 실제 상점 웹사이트에 반영되어 'sixshop.com/상점아이디/' 혹은 상점 도메인 주소로 접속하는 모든 사람이 확인할 수 있게 됩니다.

단축키: 'Tab'

페이지 관리 메뉴의 구성은 아래와 같습니다.

Last updated 5 months ago