에디터 기본 정보

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

목차

• 디자인 에디터 실행하기

• 디자인 에디터 화면 구성

  • 페이지 편집 화면

  • 하단 도구 모음

  • 페이지 관리 메뉴

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

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

2. 디자인 에디터 화면 구성

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

	설명
1	페이지 편집 화면 실제 고객에게 노출되는 상점 페이지의 콘텐츠를 편집하는 영역입니다.
2	하단 도구 모음 페이지 편집 화면에 구성 요소를 추가하고 각각의 속성을 관리하는 도구 모음 영역입니다.
3	페이지 관리 메뉴 상점의 페이지와 메뉴를 관리하고 상점 공통 스타일을 설정하는 영역입니다.

2-1. 페이지 편집 화면

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

[ 태그 ]

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

	설명
	개별 편집 선택 대상의 속성을 변경할 수 있습니다. 버튼을 누르면 속성 패널이 열립니다. (예시: '갤러리 섹션'을 선택하고 '개별 편집' 시 '현재 선택된 갤러리 섹션'의 속성을 변경합니다.)
	공통 스타일 설정 선택 대상과 동일한 유형 전체의 공통 속성을 변경할 수 있습니다. (예시: '갤러리 섹션'을 선택하고 '공통 스타일 설정' 시 '상점 내 모든 갤러리 섹션'에 일괄 적용됩니다.)
	위로 이동 선택한 대상을 위로 올립니다. 섹션은 섹션 사이에서, 요소는 요소 사이에서만 이동할 수 있습니다.
	아래로 이동 선택한 대상을 아래로 내립니다. 섹션은 섹션 사이에서, 요소는 요소 사이에서 이동할 수 있습니다.
	다른 페이지로 이동 선택한 섹션을 지정한 다른 페이지로 보낼 수 있습니다.
	복제하기 현재 선택된 대상과 동일한 복제본을 아래 붙여 넣습니다.
	삭제하기 현재 선택된 대상을 지웁니다.
	안내서 보기 현재 선택한 대상과 관련된 안내서를 보여줍니다.

2-2. 하단 도구 모음

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

	설명
1	페이지 관리 메뉴 버튼 페이지 관리 메뉴를 열어볼 수 있습니다.
2	콘텐츠 설정 도구 영역 페이지 편집 화면에 콘텐츠 구성 요소를 추가/편집할 수 있는 버튼이 노출되는 영역입니다.
3	뷰포트 전환 버튼 페이지 편집 화면을 데스크탑/모바일 사이즈로 전환하여 편집할 수 있는 버튼입니다.
4	미리보기 버튼 현재 작업중인 화면을 미리보기 모드에서 사용해 볼 수 있는 버튼입니다.
5	발행하기 버튼 상점 디자인 변경사항을 실제 운영중인 상점에 적용하는 버튼입니다.

[ 페이지 관리 메뉴 ]

단축키: Tab

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

[ 콘텐츠 설정 도구 ]

	설명
1	기본 모드 페이지 편집 화면에서 아무 것도 선택하지 않았을 때의 모습입니다. 콘텐츠 구성 요소 중 섹션을 화면에 추가할 수 있습니다.
2	선택 모드 페이지 편집 화면에서 특정 콘텐츠 구성 요소를 선택했을 때 보여지는 모습입니다. 선택 모드일 때에는 연필 모양의 '편집' 버튼을 눌러 선택된 콘텐츠 구성 요소의 속성 패널을 열 수 있습니다. 선택된 콘텐츠 구성 요소가 사용자 편집 섹션일 경우 요소를 추가할 수 있습니다. 기본 모드로 돌아가려면 단축키: Esc 키를 누르거나 화면 좌측에 위치한 '닫기(X)' 버튼을 누르세요.
3	편집 모드 - 속성 패널 페이지 편집 화면에서 특정 콘텐츠 구성 요소를 더블 클릭하거나, 연필 모양의 '편집' 버튼을 눌렀을 때 편집 모드로 전환되며 텍스트(제목글, 줄글)의 경우 바 형태, 그 외의 경우 패널 형태로 설정 값을 변경할 수 있습니다. 선택 모드로 돌아가려면 단축키: Esc 키를 누르거나 화면 좌측에 위치한 '닫기(X)' 버튼을 누르세요.

[ 뷰포트 전환 ]

단축키: Ctrl + Shift + M

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

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

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

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

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

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

	설명
1	이 버튼을 누르면 데스크탑에서 보이는 상점 디자인을 확인할 수 있습니다.
2	이 버튼을 누르면 모바일 기기에서 보이는 상점 디자인을 확인할 수 있습니다.

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

[ 미리보기 모드 ]

단축키: 'Shift + W'

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

[ 발행하기 ]

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

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

2-3. 페이지 관리 메뉴

단축키: 'Tab'

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

	설명
1	좌측에 위치한 '나가기' 버튼을 누르면 디자인 에디터를 종료하고 상점 관리자로 이동합니다.
2	페이지 관리 메뉴는 기본적으로 상점의 페이지와 메뉴를 생성/관리 하는 영역입니다. 목록에 위치한 페이지를 누르면 페이지 편집 화면에서 편집할 수 있습니다. 위 아래로 머리글 메뉴와 바닥글 메뉴로 영역이 구분되어 있으며 페이지 혹은 그 외 메뉴 아이템을 각 영역에 위치시켜 상점의 메뉴 영역에 노출할 수 있습니다. 보다 자세한 사항은 페이지와 메뉴 안내서를 참고하세요.
3	'공통 스타일 편집' 버튼을 누르면 현재 상점 전체에 적용되는 공통 스타일 속성을 변경할 수 있습니다. 보다 자세한 사항은 상점 공통 스타일 안내서를 참고하세요.