에디터 기본 기능
사이트 제작에 필요한 핵심 도구들이 모여 있는 상단, 좌측, 우측 패널의 기능이에요.
상단 메뉴
화면 맨 위 파란색 영역에서 사이트 관리와 저장 기능을 사용할 수 있어요.
페이지 선택: 현재 작업 중인 페이지의 이름을 확인할 수 있어요.
뷰 모드: PC와 모바일 아이콘을 눌러 각 기기에서 화면이 어떻게 보이는지 확인해요.
[참고]: 모바일 뷰에서는 요소의 위치나 크기를 확인할 수 있지만, 직접 수정은 불가능해요.
스킨명 확인: 현재 작업 중인 스킨의 이름을 확인할 수 있어요.
스킨명이 editor_smartsync인 경우 ‘스마트스토어 연동 스킨’ 문서를 참고해 주세요.
디자인 백업: 최근 동안 저장된 디자인 내역을 확인하고 복원할 수 있어요.
복원하기: 목록에서 원하는 시점을 선택하고 [복원] 버튼을 누르면, 에디터의 모든 내용이 그 당시 상태로 되돌아가요.
실행 취소 / 다시 실행: 작업 중 실수했다면 이전 상태로 되돌리거나, 취소한 작업을 다시 실행해요.
단축키 : 실행 취소:
Ctrl+Z, 다시 실행:Ctrl+Y
메뉴얼: 에디터 기능을 소개한 메뉴얼을 제공해요.
기본 디자인 설정: 사이트 전체에 공통으로 적용될 디자인을 설정해요. 배경, 텍스트, 문단 스타일 등을 미리 정의하여 통일감 있는 사이트를 만들 수 있어요.
미리보기: 현재 작업 내용을 실제 브라우저 창에서 미리 확인해요.
저장: 작업한 내용을 저장해요.
좌측 도구 패널
화면 왼쪽의 아이콘 메뉴를 통해 웹사이트의 뼈대를 만들고 관리할 수 있어요.
요소 추가: 페이지를 구성하는 작은 부품들을 추가하는 메뉴예요.
사용법: 원하는 요소를 클릭하거나 화면으로 드래그해서 섹션 or 셀 안에 넣어보세요.
[참고] 요소는 둥둥 떠 있을 수 없어서, 반드시 섹션이나 셀 안으로만 넣을 수 있어요. 빈 공간에는 추가되지 않으니 먼저 섹션을 만들어 주세요.
요소종류
텍스트
기본 텍스트: '기본 디자인 설정'에서 정해둔 스타일을 따르는 제목과 문단이에요.
개별 텍스트: 다양한 스타일로 미리 디자인된 제목과 문단을 제공해요.
버튼
클릭을 유도할 수 있는 깔끔하고 기본적인 디자인의 버튼들을 제공해요.
이미지
이미지 등록: 내 컴퓨터에 있는 사진 파일을 직접 업로드해서 사용해요.
무료 이미지: 저작권 걱정 없이 쓸 수 있는 고퀄리티 이미지를 기본으로 제공해 드려요.
섹션 추가: 화면 전체를 가로지르는 큰 배경 구역을 추가해요. 용도에 맞는 템플릿을 선택해 보세요.
사용법: 마음에 드는 템플릿을 드래그해서 본문으로 끌고 와 보세요. 원하는 섹션 사이에 넣을 수 있어요.
섹션 종류
기본 섹션: 요소를 자유롭게 추가하고 배치할 수 있는 기본적인 섹션이에요.
디자인 섹션: 전문가가 미리 디자인해 둔 완성형 섹션을 바로 사용할 수 있어요.
배너 섹션: 큰 이미지나 홍보 문구가 들어간 배너 영역을 만들어요.
메인 진열 상품: 쇼핑몰의 상품 목록을 자동으로 불러와 보여주는 영역이에요.
레이어 구조: 현재 페이지에 쌓여 있는 모든 섹션과 요소들의 계층 구조를 한눈에 볼 수 있어요.
구조 확인:
ROOT > 섹션 > 셀 > 요소순서로 내 사이트가 어떻게 이루어져 있는지 트리 형태로 보여줘요.요소 선택: 화면에서 클릭하기 어려운 겹친 요소나 작은 요소도 여기서 이름을 클릭하면 쉽게 선택할 수 있어요.
우측 속성 패널
선택한 대상의 속성과 디자인을 설정하는 공간이에요. 무엇을 선택했느냐에 따라 메뉴가 자동으로 변경돼요.
기본 디자인 설정: 상단 메뉴의 '기본 디자인 설정' 버튼을 누르면 나타나요. 홈페이지 전체의 레이아웃과 공통 스타일을 관리해요.
배경: 사이트 전체의 기본 배경색이나 배경 이미지를 설정해요.
텍스트: 사이트에서 사용할 기본 글꼴, 크기, 색상을 지정해요.
문단: 줄 간격이나 문단 간격 등 텍스트의 배치 스타일을 미리 정의해요.
섹션 및 셀 설정: 배경 구역인 '섹션'과 '셀'을 선택하면 전체적인 스타일을 디자인할 수 있어요.
레이아웃 : 태블릿이나 모바일 환경에서 이 섹션의 노출 방식을 설정해요.
배경 디자인: 배경을 투명하게 하거나, 원하는 색상 또는 이미지를 등록하여 배경을 채울 수 있어요. 정렬 방식이나 여백도 조절 가능해요.
테두리: 박스 테두리의 종류, 굵기, 색상을 지정하여 구역을 구분해요.
요소 설정: 텍스트, 버튼, 이미지 등 요소를 선택하면 전용 옵션이 나타나요.
텍스트: 글꼴, 크기, 색상 등 스타일을 변경하고, 클릭 시 이동할 링크를 설정해요.
버튼: 버튼의 문구, 배경색, 테두리 디자인을 변경하고 링크를 연결해요.
이미지: 노출할 이미지를 설정하고, 클릭 시 이동할 링크를 연결해요.
Last updated