에디터 기본정보

에디터란?

에디터는 웹 사이트 제작 목적에 맞춰, 레이아웃을 구성하고 상품 진열 및 페이지 디자인을 위한 편집 도구 입니다. 코드를 사용하지 않아도 쉽고 빠르게 목적에 맞는 사이트 디자인을 해 나갈 수 있습니다.

이 가이드에서는 에디터의 구조와 각각의 기능들에 대해 설명하고 있습니다 보다 자세한 내용은 이어지는 에디터 세부 가이드를 참고 해주세요.

에디터 사용은 PC버전에서만 가능합니다.

에디터의 구조

에디터는 크게 캔버스와 뷰포트로 나뉘게 됩니다.

캔버스 영역에는 사이트를 구성하는 과정에서 필요한 메뉴 관리 및 다양한 설정들을 할 수 있으며 뷰포트를 통해 레이아웃 구성 및 페이지 디자인을 하여 실제 사이트에 반영이 되는 화면을 만들어 나가게 됩니다.

캔버스 영역은 상단메뉴바, 구조패널, 속성패널, 추가패널을 담고 있으며 각 패널을 통해 컨텐츠를 추가하고 설정을 할 수 있습니다.

뷰포트 영역은 상단, 본문, 하단으로 구성이 되어있어며 각각의 영역을 섹션이라고 부르고 있습니다.

캔버스 영역

상단 메뉴바

PC로 보기, 모바일로 보기, 되돌리기, 저장 등 페이지 디자인 과정에 사용이 되는 요소들이 담긴 영역입니다.

각 요소의 자세한 내용은 아래 표를 참고해주세요.

항목	설명
	패널 닫기 추가패널과 속성패널을 숨김처리합니다.
	PC로 보기 디자인 에디터 뷰포트를 PC로 변경합니다.
	모바일로 보기 디자인 에디터를 모바일 뷰포트로 변경합니다.
	고정 콘텐츠 고정 된 콘텐츠를 확인하고 레이아웃을 수정할 수 있습니다. 자세한 방법은 [블록 고정하기] 가이드를 참고 해주세요.
	비율조정 뷰포트의 비율을 확대/축소할 수 있습니다.
	페이지 이름 현재 작업 중인 페이지의 이름을 표시합니다. 더블클릭 후 페이지 이름 변경 가능
	크레딧 현재 보유하고 있는 크레딧이 표시 됩니다. 크레딧에 대한 자세한 내용은 [마이베네핏] 가이드를 참고해주세요.
	가이드 바로가기 큐샵의 가이드를 확인할 수 있습니다.
	실시간 채팅 바로가기 에디터 내에서 실시간 채팅 상담을 열 수 있습니다.
	실행취소 이전 디자인 내 용로 돌아갑니다.
	저장 및 게시내역 저장/게시 히스토리가 페이지 별로 각각 기록 됩니다.
	재실행 실행 취소 이전로 돌아갑니다.
	사이트 전체 설정 사이트에 공통으로 적용되는 색상, 폰트, 섹션의 너비와 간격 등을 설정할 수 있습니다. 자세한 내용은 [속성 패널] 가이드를 참고해주세요.
	저장하기 현재 페이지 디자인을 저장합니다. 방문자는 편집중인 페이지를 볼 수 없으며, 게시하기를 눌러야 실제 홈페이지에 반영됩니다.
	사이트 미리보기 현재 디자인 된 페이지를 새 탭을 통해 확인합니다.
	게시하기 디자인을 한 내용을 실제 방문자가 볼 수 있도록 사이트에 반영합니다.

구조 패널

에디터 왼쪽 위에 위치한 구조패널을 활용하여 사이트에 보여질 페이지를 생성,이동, 그룹을 지을 수 있으며 레이어를 통해 페이지에 담긴 콘텐츠의 구성을 확인하고 각 콘텐츠를 설정 할 수 있습니다.

큐샵 메뉴 (≡)

추가 패널 가장 아래 위치한 큐샵 메뉴는 에디터 사용 중 사이트 바로가기, 관리자 바로가기 등 관리자 페이지로 쉽게 이동을 하거나 에디터 사용에 도움을 받을 수 있는 튜토리얼 단축키 문의하기 등의 내용을 담고 있습니다.

항목 설명
사이트 바로가기 새 탭을 통해 최종 게시 시점의 사이트를 열어봅니다.
관리자 바로가기 새 탭을 통해 [상점설정 > 기본정보 > 사이트 정보] 페이지로 이동합니다.
가이드 바로가기 새 탭을 통해 큐샵의 가이드 페이지로 이동합니다.
마이 페이지 새 탭을 통해 [큐브 홈페이지 > 마이페이지]로 이동하여, 사용자 정보를 설정할 수 있습니다.
마이 사이트 새 탭을 통해 [큐브 홈페이지 > 마이사이트]로 이동하여, 생성한 사이트 리스트를 확인 할 수 있습니다.
구독관리 새 탭을 통해 마이 페이지의 구독관리 탭으로 이동하여, 사이트의 구독 상태를 확인 할 수 있습니다.
문의하기 새 탭을 통해 큐샵 채널톡으로 이동이 되어, 실시간 채팅 문의를 할 수 있습니다.
튜토리얼 에디터 기본 사용법이 담긴 튜토리얼을 확인합니다.
단축키 에디터 사용 시 도움이 되는 단축키 정보를 모달창을 통해 확인 할 수 있습니다.

사이트

사이트 이름, 제목, 설명 등 [관리자 페이지 > 상점 설정 > 기본 정보]의 사이트 정보 페이지를 통해 수정하는 사이트 정보를 수정합니다. 이곳에서 수정한 정보는 사이트 정보 페이지에 동일하게 적용이됩니다.

항목	설명
사이트 이름	사이트의 이름을 등록합니다.
사이트 제목	네이버, Google등의 포털사이트 검색에 반영이 되는 이름입니다. 사이트 성격에 맞는 독특한 이름 사용을 권장 드리며, 일반적으로 많이 사용하는 단어를 사용하게 될 경우 검색 결과 반영에 어려움이 있을 수 있습니다.
사이트 설명	사이트를 설명할 수 있는 키워드를 사용하여 내용을 기재합니다. 작성 된 설명은 네이버, Google 등 검색 결과에 영향을 줄 수 있습니다.
사이트 파비콘	파비콘은 브라우저의 주소창이나 즐겨찾기 등에 표시되는 아이콘입니다. 권장 해상도: 512 x 512 최소 해상도: 192 x 192px 이상 파일형식: PNG
대표 이미지	카카오톡 또는 인스타그램 등에 내 사이트 URL(링크) 입력 시 함께 출력되는 이미지를 설정합니다. 권장 해상도: 1200 x 630 최소 해상도: 200 x 200px 이상 파일형식: PNG, JPG

페이지

실제 사이트에 반영이 되는 화면으로 메뉴 구성 및 각 메뉴의 설정을 할 수 있습니다. 메뉴는 용도에 따라 폴더, 페이지, 링크의 형태로 생성이 가능하며 최대 2뎁스 형태로 구성이 가능합니다.

항목 설명
페이지 주제에 맞는 페이지 디자인 구성을 할 수 있습니다
폴더 페이지들을 하나의 그룹으로 지정 할 수 있습니다.
링크 클릭 시 내부 페이지가 아닌 원하는 경로로 이동 및 클릭 이벤트를 지정할 수 있습니다.

레이어

페이지의 섹션과 블록 위치를 확인하고 설정이 가능합니다.

항목 설명
검색 콘텐츠 또는 색션의 위치를 검색합니다.
섹션 추가 새로운 섹션을 추가합니다.

속성 패널

에디터 오른쪽에 위치한 속성 패널을 활용하여 섹션 및 블록의 설정을 할 수 있습니다. 속성패널의 가장 위에는 선택한 콘텐츠가 표시가 되며, 해당 콘텐츠에 대한 설정을 하게 됩니다.

섹션의 배경색, 여백, 라운드 등의 설정이 가능하며 블록에 색상, 여백 등 기본 설정과 애니메이션과 클릭 이벤트 등의 고급 설정을 할 수 있습니다.

각 설정 요소의 자세한 내용은 속성패널 가이드를 참고 부탁드립니다.

콘텐츠 이름 선택한 콘텐츠에 따라 섹션 또는 블록의 이름이 보여지게 됩니다.
정렬 가로 정렬 및 수직 정렬을 할 수 있습니다.
배경 섹션 및 블록의 배경색 또는 이미지를 설정 할 수 있습니다.
여백 색션 및 블록의 여백의 크기를 조정할 수 있습니다.
라운드 섹션 및 블록의 라운딩을 지정할 수 있습니다.
테두리 섹션 및 블록의 테두리 선의 모양 굵기 등을 설정할 수 있습니다
그림자 블록의 그림자 효과를 적용할 수 있습니다. 섹션에 적용 불가능
애니메이션 ( 고급 ) 블록에 애니메이션 효과를 적용 할 수 있습니다. 섹션에 적용 불가능
클릭 이벤트 ( 고급 ) 블록에 클릭 이벤트를 설정 할 수 있습니다. 섹션에 적용 불가능

추가 패널

에디터 왼쪽에 위치한 추가 패널을 통해 섹션 단위 또는 블록 단위의 콘텐츠를 추가하여 사용할 수 있습니다.

사이트 제작을 보다 쉽고 편하게 진행할 수 있도록 다양한 디자인의 섹션 템플릿을 사용할 수 있습니다. 섹션 템플릿을 바탕으로 사이트의 업종, 성격에 맞춰 이미지, 내용 등을 수정하에 빠르게 페이지 디자인을 할 수 있습니다.

또한 빈 섹션을 생성하여 다양한 형태의 블록들을 사용해 직접 페이지를 만들어 나갈 수 있습니다.

각 요소의 자세한 내용은 추가 패널 가이드를 참고해주세요.

뷰포트 영역

뷰포트영역은 실제 사이트에 반영이 되는 영역으로, 섹션 내 블록들을 추가, 이동, 배치를 하여 레이아웃을 구성하고 주제에 맞는 페이지 디자인을 하게 됩니다.

크게 헤더 / 바디 / 푸터의 영역으로 나뉘어져 있으며 각각의 영역을 섹션이라고 부르고 있습니다.

자세한 내용은 섹션 상세 가이드 를 참고 부탁드립니다.

	항목 설명
1	헤더 사이트의 메뉴 및 로그인/가입 등의 공통 설정을 하게 됩니다.
2	본문 각 페이지의 주제에 맞는 콘텐츠를 등록합니다.
3	푸터 사업자 정보 / 고객센터 등 고객에게 전달하는 사이트 정보를 입력합니다.