에디터 기본정보
Last updated
Was this helpful?
Last updated
Was this helpful?
에디터는 웹 사이트 제작 목적에 맞춰, 레이아웃을 구성하고 상품 진열 및 페이지 디자인을 위한 편집 도구 입니다. 코드를 사용하지 않아도 쉽고 빠르게 목적에 맞는 사이트 디자인을 해 나갈 수 있습니다.
이 가이드에서는 에디터의 구조와 각각의 기능들에 대해 설명하고 있습니다 보다 자세한 내용은 이어지는 에디터 세부 가이드를 참고 해주세요.
에디터는 크게 캔버스와 뷰포트로 나뉘게 됩니다.
캔버스 영역에는 사이트를 구성하는 과정에서 필요한 메뉴 관리 및 다양한 설정들을 할 수 있으며 뷰포트를 통해 레이아웃 구성 및 페이지 디자인을 하여 실제 사이트에 반영이 되는 화면을 만들어 나가게 됩니다.
캔버스 영역은 상단메뉴바, 구조패널, 속성패널, 추가패널을 담고 있으며 각 패널을 통해 컨텐츠를 추가하고 설정을 할 수 있습니다.
뷰포트 영역은 상단, 본문, 하단으로 구성이 되어있어며 각각의 영역을 섹션이라고 부르고 있습니다.
PC로 보기, 모바일로 보기, 되돌리기, 저장 등 페이지 디자인 과정에 사용이 되는 요소들이 담긴 영역입니다.
각 요소의 자세한 내용은 아래 표를 참고해주세요.
패널 닫기 추가패널과 속성패널을 숨김처리합니다.
PC로 보기 디자인 에디터 뷰포트를 PC로 변경합니다.
모바일로 보기 디자인 에디터를 모바일 뷰포트로 변경합니다.
고정 콘텐츠 고정 된 콘텐츠를 확인하고 레이아웃을 수정할 수 있습니다. 자세한 방법은 [블록 고정하기] 가이드를 참고 해주세요.
비율조정 뷰포트의 비율을 확대/축소할 수 있습니다.
페이지 이름 현재 작업 중인 페이지의 이름을 표시합니다.
더블클릭 후 페이지 이름 변경 가능
크레딧 현재 보유하고 있는 크레딧이 표시 됩니다. 크레딧에 대한 자세한 내용은 [마이베네핏] 가이드를 참고해주세요.
가이드 바로가기 큐샵의 가이드를 확인할 수 있습니다.
실시간 채팅 바로가기 에디터 내에서 실시간 채팅 상담을 열 수 있습니다.
실행취소 이전 디자인 내 용로 돌아갑니다.
저장 및 게시내역 저장/게시 히스토리가 페이지 별로 각각 기록 됩니다.
재실행 실행 취소 이전로 돌아갑니다.
사이트 전체 설정 사이트에 공통으로 적용되는 색상, 폰트, 섹션의 너비와 간격 등을 설정할 수 있습니다. 자세한 내용은 [속성 패널] 가이드를 참고해주세요.
저장하기 현재 페이지 디자인을 저장합니다. 방문자는 편집중인 페이지를 볼 수 없으며, 게시하기를 눌러야 실제 홈페이지에 반영됩니다.
사이트 미리보기 현재 디자인 된 페이지를 새 탭을 통해 확인합니다.
게시하기 디자인을 한 내용을 실제 방문자가 볼 수 있도록 사이트에 반영합니다.
에디터 왼쪽 위에 위치한 구조패널을 활용하여 사이트에 보여질 페이지를 생성,이동, 그룹을 지을 수 있으며 레이어를 통해 페이지에 담긴 콘텐츠의 구성을 확인하고 각 콘텐츠를 설정 할 수 있습니다.
에디터 오른쪽에 위치한 속성 패널을 활용하여 섹션 및 블록의 설정을 할 수 있습니다. 속성패널의 가장 위에는 선택한 콘텐츠가 표시가 되며, 해당 콘텐츠에 대한 설정을 하게 됩니다.
섹션의 배경색, 여백, 라운드 등의 설정이 가능하며 블록에 색상, 여백 등 기본 설정과 애니메이션과 클릭 이벤트 등의 고급 설정을 할 수 있습니다.
각 설정 요소의 자세한 내용은 속성패널 가이드를 참고 부탁드립니다.
콘텐츠 이름 선택한 콘텐츠에 따라 섹션 또는 블록의 이름이 보여지게 됩니다.
정렬 가로 정렬 및 수직 정렬을 할 수 있습니다.
배경 섹션 및 블록의 배경색 또는 이미지를 설정 할 수 있습니다.
여백 색션 및 블록의 여백의 크기를 조정할 수 있습니다.
라운드 섹션 및 블록의 라운딩을 지정할 수 있습니다.
테두리 섹션 및 블록의 테두리 선의 모양 굵기 등을 설정할 수 있습니다
그림자 블록의 그림자 효과를 적용할 수 있습니다.
섹션에 적용 불가능
애니메이션 ( 고급 ) 블록에 애니메이션 효과를 적용 할 수 있습니다.
섹션에 적용 불가능
클릭 이벤트 ( 고급 ) 블록에 클릭 이벤트를 설정 할 수 있습니다.
섹션에 적용 불가능
에디터 왼쪽에 위치한 추가 패널을 통해 섹션 단위 또는 블록 단위의 콘텐츠를 추가하여 사용할 수 있습니다.
사이트 제작을 보다 쉽고 편하게 진행할 수 있도록 다양한 디자인의 섹션 템플릿을 사용할 수 있습니다. 섹션 템플릿을 바탕으로 사이트의 업종, 성격에 맞춰 이미지, 내용 등을 수정하에 빠르게 페이지 디자인을 할 수 있습니다.
또한 빈 섹션을 생성하여 다양한 형태의 블록들을 사용해 직접 페이지를 만들어 나갈 수 있습니다.
뷰포트영역은 실제 사이트에 반영이 되는 영역으로, 섹션 내 블록들을 추가, 이동, 배치를 하여 레이아웃을 구성하고 주제에 맞는 페이지 디자인을 하게 됩니다.
크게 헤더 / 바디 / 푸터의 영역으로 나뉘어져 있으며 각각의 영역을 섹션이라고 부르고 있습니다.
1
헤더 사이트의 메뉴 및 로그인/가입 등의 공통 설정을 하게 됩니다.
2
본문 각 페이지의 주제에 맞는 콘텐츠를 등록합니다.
3
푸터 사업자 정보 / 고객센터 등 고객에게 전달하는 사이트 정보를 입력합니다.
