사이트 생성 후 [사이트 편집하기]로 진입시 볼 수 있는 화면입니다.
ⓛ 사이트 이름
•
사이트 생성시 입력한 사이트 이름이 표시됩니다.
•
사이트 이름은 사이트 기본 정보에서 수정할 수 있습니다.
② 편집 환경 표시
•
모바일, 테블릿, 데스크톱 환경에서 표시되는 크기로 편집 환경이 설정됩니다.
•
화면을 축소/확대할 수 있습니다.
③ 편집 영역
•
좌측 패널에서 가져온 개별 컴포넌트를 중앙으로 드래그앤드롭하여 배치할 수 있습니다.
•
추가한 요소들은 텍스트 수정, 이미지 변경, 크기 조정, 스타일 변경 등이 가능하며, 직접 클릭하여 원하는 디자인을 완성할 수 있습니다.
④ 컴포넌트
•
컴포넌트 : 사이트를 구성하는 개별 요소들을 유형별로 구분해 놓은 것
1.
디자인 추천 : 미리 구성된 완성형 디자인을 활용하여 빠르게 사이트를 만들 수 있습니다.
2.
배경 : 웹사이트의 배경을 설정하는 요소입니다.
3.
레이아웃 : 레이아웃은 콘텐츠를 배치하는 틀(그리드, 컬럼) 역할을 하는 구조적인 요소입니다.
a.
원하는 컴포넌트를 드래그앤드롭하여 사이트에 배치한 후, 크기와 스타일을 조정할 수 있습니다.
4.
요소 : 웹사이트를 구성하는 개별적인 기능 단위 컴포넌트입니다.
⑤ 아웃라인
•
아웃 라인 : 현재 편집 영역에 배치된 컴포넌트들의 구성 목록
◦
웹사이트의 레이아웃, 요소들의 계층 구조를 시각적으로 정리한 목록이라고 볼 수 있습니다.
•
아웃 라인의 활용 방법
1.
컴포넌트를 편집 영역(중앙)에 추가하면 아웃 라인에 자동으로 반영됨.
2.
아웃라인을 통해 현재 페이지의 구조를 직관적으로 확인 가능.
3.
필요하면 컴포넌트를 클릭하여 빠르게 수정, 삭제, 순서 변경 가능.
*참고. 컴포넌트의 삭제 관련
컴포넌트는 계층 구조를 가지기 때문에 컴포넌트 삭제시 해당 컴포넌트 하위에 존재하는 컴포넌트들도 모두 삭제됩니다. 따라서 상위 컴포넌트를 변경 및 삭제해야하는 경우, 하위 컴포넌트를 유지하기 위해서는 하위 컴포넌트를 다른 영역으로 옮겨놓은 뒤 상위 컴포넌트를 수정해주세요.
⑥ 컴포넌트 속성 설정
•
웹사이트의 컴포넌트를 추가한 후, 세부적인 스타일을 조정하고 원하는 디자인을 완성하는 영역이 우측 설정 패널입니다.
•
이 패널에서 컴포넌트의 폰트, 크기, 색상, 간격 등 다양한 속성을 설정할 수 있습니다.
•
컴포넌트별로 설정 가능한 속성값이 다릅니다.
⑦ 상단 버튼
•
되돌리기 ; 최근 수행한 작업을 한 단계 이전으로 되돌리는 기능입니다.
•
다시 실행하기 : Undo(되돌리기)로 되돌린 작업을 다시 복구하는 기능입니다.
•
미리보기
◦
현재 편집한 사이트가 실제로 어떻게 보이는지 확인합니다.
◦
편집 모드에서는 보이지 않는 인터랙션, 클릭 이벤트등 실제 사용자 환경처럼 확인 가능합니다.
◦
PC, 태블릿, 모바일 화면별 미리보기를 지원하여 다양한 기기에서 어떻게 보이는지 테스트 가능합니다.
•
게시하기
◦
편집한 내용을 저장하고, 실제 웹사이트로 공개합니다.
◦
게시한 후에도 추가 수정이 가능하며, 수정 후 다시 게시하면 변경 내용이 반영됩니다.
◦
게시 후에는 이전 버전으로 복원할 수 없으니 참고해주세요!
•
더보기
◦
가이드 바로가기
▪
편집시 어려운 점이 있을 경우 가이드를 확인할 수 있습니다.
◦
도움말 보기
▪
진입시 표시되는 도움말을 다시 한 번 확인할 수 있습니다.