에디터 기본정보
에디터란?
에디터는 웹 사이트 제작 목적에 맞춰, 레이아웃을 구성하고 상품 진열 및 페이지 디자인을 위한 편집 도구 입니다. 코드를 사용하지 않아도 쉽고 빠르게 목적에 맞는 사이트 디자인을 해 나갈 수 있습니다.
이 가이드에서는 에디터의 구조와 각각의 기능들에 대해 설명하고 있습니다 보다 자세한 내용은 이어지는 에디터 세부 가이드를 참고 해주세요.
에디터의 구조
에디터는 크게 캔버스와 뷰포트로 나뉘게 됩니다.
캔버스 영역에는 사이트를 구성하는 과정에서 필요한 메뉴 관리 및 다양한 설정들을 할 수 있으며 뷰포트를 통해 레이아웃 구성 및 페이지 디자인을 하여 실제 사이트에 반영이 되는 화면을 만들어 나가게 됩니다.
캔버스 영역은 상단메뉴바, 구조패널, 속성패널, 추가패널을 담고 있으며 각 패널을 통해 컨텐츠를 추가하고 설정을 할 수 있습니다.
뷰포트 영역은 상단, 본문, 하단으로 구성이 되어있어며 각각의 영역을 섹션이라고 부르고 있습니다.
캔버스 영역
상단 메뉴바
PC로 보기, 모바일로 보기, 되돌리기, 저장 등 페이지 디자인 과정에 사용이 되는 요소들이 담긴 영역입니다.
각 요소의 자세한 내용은 아래 표를 참고해주세요.
패널 닫기 추가패널과 속성패널을 숨김처리합니다.
PC로 보기 디자인 에디터 뷰포트를 PC로 변경합니다.
모바일로 보기 디자인 에디터를 모바일 뷰포트로 변경합니다.
고정 콘텐츠 고정 된 콘텐츠를 확인하고 레이아웃을 수정할 수 있습니다. 자세한 방법은 [블록 고정하기] 가이드를 참고 해주세요.
비율조정 뷰포트의 비율을 확대/축소할 수 있습니다.
페이지 이름 현재 작업 중인 페이지의 이름을 표시합니다.
더블클릭 후 페이지 이름 변경 가능
크레딧 현재 보유하고 있는 크레딧이 표시 됩니다. 크레딧에 대한 자세한 내용은 [마이베네핏] 가이드를 참고해주세요.
가이드 바로가기 큐샵의 가이드를 확인할 수 있습니다.
실시간 채팅 바로가기 에디터 내에서 실시간 채팅 상담을 열 수 있습니다.
실행취소 이전 디자인 내 용로 돌아갑니다.
저장 및 게시내역 저장/게시 히스토리가 페이지 별로 각각 기록 됩니다.
재실행 실행 취소 이전로 돌아갑니다.
사이트 전체 설정 사이트에 공통으로 적용되는 색상, 폰트, 섹션의 너비와 간격 등을 설정할 수 있습니다. 자세한 내용은 [속성 패널] 가이드를 참고해주세요.
저장하기 현재 페이지 디자인을 저장합니다. 방문자는 편집중인 페이지를 볼 수 없으며, 게시하기를 눌러야 실제 홈페이지에 반영됩니다.
사이트 미리보기 현재 디자인 된 페이지를 새 탭을 통해 확인합니다.
게시하기 디자인을 한 내용을 실제 방문자가 볼 수 있도록 사이트에 반영합니다.
구조 패널
에디터 왼쪽 위에 위치한 구조패널을 활용하여 사이트에 보여질 페이지를 생성,이동, 그룹을 지을 수 있으며 레이어를 통해 페이지에 담긴 콘텐츠의 구성을 확인하고 각 콘텐츠를 설정 할 수 있습니다.
큐샵 메뉴 (≡)
추가 패널 가장 아래 위치한 큐샵 메뉴는 에디터 사용 중 사이트 바로가기, 관리자 바로가기 등 관리자 페이지로 쉽게 이동을 하거나 에디터 사용에 도움을 받을 수 있는 튜토리얼 단축키 문의하기 등의 내용을 담고 있습니다.
사이트 바로가기 새 탭을 통해 최종 게시 시점의 사이트를 열어봅니다.
관리자 바로가기 새 탭을 통해 [상점설정 > 기본정보 > 사이트 정보] 페이지로 이동합니다.
가이드 바로가기 새 탭을 통해 큐샵의 가이드 페이지로 이동합니다.
마이 페이지 새 탭을 통해 [큐브 홈페이지 > 마이페이지]로 이동하여, 사용자 정보를 설정할 수 있습니다.
마이 사이트 새 탭을 통해 [큐브 홈페이지 > 마이사이트]로 이동하여, 생성한 사이트 리스트를 확인 할 수 있습니다.
구독관리 새 탭을 통해 마이 페이지의 구독관리 탭으로 이동하여, 사이트의 구독 상태를 확인 할 수 있습니다.
문의하기 새 탭을 통해 큐샵 채널톡으로 이동이 되어, 실시간 채팅 문의를 할 수 있습니다.
튜토리얼 에디터 기본 사용법이 담긴 튜토리얼을 확인합니다.
단축키 에디터 사용 시 도움이 되는 단축키 정보를 모달창을 통해 확인 할 수 있습니다.
사이트
사이트 이름, 제목, 설명 등 [관리자 페이지 > 상점 설정 > 기본 정보]의 사이트 정보 페이지를 통해 수정하는 사이트 정보를 수정합니다. 이곳에서 수정한 정보는 사이트 정보 페이지에 동일하게 적용이됩니다.
사이트 이름
사이트의 이름을 등록합니다.
사이트 제목
네이버, Google등의 포털사이트 검색에 반영이 되는 이름입니다. 사이트 성격에 맞는 독특한 이름 사용을 권장 드리며, 일반적으로 많이 사용하는 단어를 사용하게 될 경우 검색 결과 반영에 어려움이 있을 수 있습니다.
사이트 설명
사이트를 설명할 수 있는 키워드를 사용하여 내용을 기재합니다. 작성 된 설명은 네이버, Google 등 검색 결과에 영향을 줄 수 있습니다.
사이트 파비콘
파비콘은 브라우저의 주소창이나 즐겨찾기 등에 표시되는 아이콘입니다. 권장 해상도: 512 x 512 최소 해상도: 192 x 192px 이상 파일형식: PNG
대표 이미지
카카오톡 또는 인스타그램 등에 내 사이트 URL(링크) 입력 시 함께 출력되는 이미지를 설정합니다. 권장 해상도: 1200 x 630 최소 해상도: 200 x 200px 이상 파일형식: PNG, JPG
페이지
실제 사이트에 반영이 되는 화면으로 메뉴 구성 및 각 메뉴의 설정을 할 수 있습니다. 메뉴는 용도에 따라 폴더, 페이지, 링크의 형태로 생성이 가능하며 최대 2뎁스 형태로 구성이 가능합니다.
페이지 주제에 맞는 페이지 디자인 구성을 할 수 있습니다
폴더 페이지들을 하나의 그룹으로 지정 할 수 있습니다.
링크 클릭 시 내부 페이지가 아닌 원하는 경로로 이동 및 클릭 이벤트를 지정할 수 있습니다.
속성 패널
에디터 오른쪽에 위치한 속성 패널을 활용하여 섹션 및 블록의 설정을 할 수 있습니다. 속성패널의 가장 위에는 선택한 콘텐츠가 표시가 되며, 해당 콘텐츠에 대한 설정을 하게 됩니다.
섹션의 배경색, 여백, 라운드 등의 설정이 가능하며 블록에 색상, 여백 등 기본 설정과 애니메이션과 클릭 이벤트 등의 고급 설정을 할 수 있습니다.
정보
블록 ID를 확인할 수 있습니다.
복사 아이콘을 클릭하여 블록 ID를 복사 할 수 있습니다.
복사하기 단축키(Ctrl + C)통해 블록 ID를 복사 할 수 있습니다.
정렬
좌우 정렬, 수평 정렬을 할 수 있습니다.
배경
색상 : 색상 코드를 입력하거나, 컬러피커에서 색상을 선택할 수 있습니다.
% 조절을 통해 투명도를 설정합니다.
흐림 : 색상에 흐림 효과를 적용합니다 투명도 100%일 경우 흐림 효과는 적용이 되지않습니다.
이미지 : 배경에 이미지를 적용합니다.
흐림 : 이미지에 흐림 효과를 적용합니다
오버레이 : 이미지에 색상을 덮어씌워 표현을 합니다. %가 높을 수록 색상이 진해져 이미지를 가리게 됩니다.
여백
패딩 값을 설정하여, 상하좌우의 여백크기를 조절할 수 있습니다.
라운드
콘텐츠 영역의 각 테두리의 라운딩 설정을 할 수 있습니다.
테두리
섹션 테두리에 선을 지정합니다.
유형 : 선의 표시 형태를 설정합니다.
두께 : 테두리 의 두께를 설정합니다.
색상 : 색상 코드를 입력하거나, 컬러피커에서 색상을 선택할 수 있습니다.
% 조절을 통해 투명도를 설정합니다.
그림자
콘텐츠 뒤 그림자를 생성합니다
방향 : 그림자가 생기는 방향을 설정합니다.
x축, y축을 입력하여 지정 가능
흐림 : 그림자의 번짐 정도를 설정합니다.
크기 : 그림자의 크기를 설정합니다.
색상 : 색상 코드를 입력하거나, 컬러피커에서 색상을 선택할 수 있습니다.
% 조절을 통해 투명도를 설정합니다.
정보
블록 ID를 확인할 수 있습니다.
복사 아이콘을 클릭하여 복사를 할 수 있습니다.
복사하기 단축키(Ctrl + C)통해 섹션 ID를 복사할 수 있습니다.
애니메이션 (고급)
스크롤 시 적용이 되는 애니메이션 효과를 설정할 수 있습니다.
동작시간 : 애니메이션의 전환속도를 설정합니다.
방향 : 애니메이션의 전 방향을 설정합니다.
플립, 슬라이드 애니메이션만 사용 가능
클릭 이벤트 (고급)
클릭 시 특정 페이지 및 위치로 이동하거나, 문자 발송 등 다양한 설정을 할 수 있습니다.
사용하지않음
블록 클릭 시 아무런 동작을 하지않습니다.
사이트 링크 연결
블록 클릭 시 등록한 URL로 이동을 합니다.
새창으로 열기 설정 시 새로운 창에서 연결이 된 링크의 사이트가 열리게 됩니다.
내부링크연결
사이트 내 특정 페이지,섹션,블록의 위치를 지정하여 이동을 합니다.
페이지 이동 설정을 원하실 경우 섹션과 블록은 선택하지않음 으로 지정합니다.
SNS 공유하기
카카오톡, 네이버 카페/블로그, 페이스북, 트위터, 네이버 밴드 중 공유를 원하는 SNS 선택할 수 있습니다.
버튼 클릭 시 설정한 SNS로 이동이 되어 사이트 공유를 할 수 있습니다.
현재 URL복사하기
블록이 적용이 된 페이지의 URL을 복사합니다.
커스텀 자바스크립트
CTA 등 블록에 적용을 위한 스크립트를 적용 할 수 있습니다.
스크립트 입력 시 <script> </script> 는 제외한 자바스크립트만 입력을 합니다.
입력한 코드의 작동 여부 및 코드로 인해 발생하는 현상에 대해서는 조치 및 안내가 어렵습니다.
전화 걸기
버튼 클릭 시 입력한 전화번호로 전화걸기를 합니다.
전화번호 입력 시 - 을 포함하여 입력합니다. (예 : 010-1234-5678)
전화 걸기가 불가능한 경우 기능이 동작하지 않습니다.
문자 보내기
버튼 클릭 시 입력한 전화번호로 문자 발송을 합니다.
전화번호 입력 시 - 을 포함하여 입력합니다. (예 : 010-1234-5678)
전화 걸기가 불가능한 경우 기능이 동작하지 않습니다.
이메일 보내기
버튼 클릭 시 입력한 메일 주소로 메일을 발송합니다.
페이지 상단 이동
버튼 클릭 시 페이지 상단으로 이동합니다.
헤더 숨김 시 기능이 동작하지 않습니다.
페이지 하단 이동
버튼 클릭 시 페이지 하단으로 이동합니다.
푸터 숨김 시 기능이 동작하지 않습니다.
공통 페이지 이동
로그인 페이지 / 장바구니 페이지 중 이동 할 페이지 선택이 가능합니다.
추가 패널
에디터 왼쪽에 위치한 추가 패널을 통해 섹션 단위 또는 블록 단위의 콘텐츠를 추가하여 사용할 수 있습니다.
사이트 제작을 보다 쉽고 편하게 진행할 수 있도록 다양한 디자인의 섹션 템플릿을 사용할 수 있습니다. 섹션 템플릿을 바탕으로 사이트의 업종, 성격에 맞춰 이미지, 내용 등을 수정하에 빠르게 페이지 디자인을 할 수 있습니다.
또한 빈 섹션을 생성하여 다양한 형태의 블록들을 사용해 직접 페이지를 만들어 나갈 수 있습니다.
뷰포트 영역
뷰포트영역은 실제 사이트에 반영이 되는 영역으로, 섹션 내 블록들을 추가, 이동, 배치를 하여 레이아웃을 구성하고 주제에 맞는 페이지 디자인을 하게 됩니다.
크게 헤더 / 바디 / 푸터의 영역으로 나뉘어져 있으며 각각의 영역을 섹션이라고 부르고 있습니다.
1
헤더 사이트의 메뉴 및 로그인/가입 등의 공통 설정을 하게 됩니다.
2
본문 각 페이지의 주제에 맞는 콘텐츠를 등록합니다.
3
푸터 사업자 정보 / 고객센터 등 고객에게 전달하는 사이트 정보를 입력합니다.
Last updated
Was this helpful?