에디터 화면 구성: 상단바·레일·패널·캔버스

에디터를 처음 열면 버튼과 패널이 많아 어디서부터 봐야 할지 막막할 수 있습니다. 이 글은 각 기능의 사용법이 아니라, 무엇이 어디에 있고 무슨 역할을 하는지를 한눈에 보는 지도입니다. 자세한 사용법은 시리즈의 다른 글에서 이어서 다룹니다.

1. 화면은 크게 네 부분입니다

새 페이지를 만들면 에디터가 열리고, 아직 섹션이 없는 빈 페이지에는 새 페이지 시작하기 화면이 나타납니다. 여기서 AI 페이지 생성 또는 섹션 추가하기를 눌러 시작합니다. 섹션이 하나라도 생기면 이 화면은 사라집니다.

내용이 있는 페이지에서는 아래 그림처럼 1) 상단바(1~3번), 4) 왼쪽 레일, 5) 캔버스(가운데 흰 영역), 6) 오른쪽 속성 패널로 나뉩니다.

2. 상단바: 페이지 단위의 버튼

상단바는 세 구역으로 나뉩니다. 왼쪽에는 뒤로가기, 페이지 이름(누르면 이름 변경), HTML 가져오기, AI 페이지 생성, 팝업, 전체 소스가 있습니다. 가운데에는 데스크탑·태블릿·모바일 기기 전환과 숨김 요소 표시 토글, 반응형 버튼이 있습니다. 오른쪽에는 실행취소·재실행, 저장, 배포, 라이브 미리보기, 배포 페이지가 있습니다.

3. 왼쪽 레일: 작업 도구 모음

왼쪽의 좁은 세로 막대가 레일입니다. 위에서부터 요소 추가, 템플릿, 레이어, 에셋, 프리셋 테마, 메뉴 편집 탭이 있고, 맨 아래에 AI 조정과 페이지 설정이 있습니다. 맨 위의 화살표 아이콘은 열려 있는 패널을 닫는 버튼입니다.

탭을 누르면 왼쪽에 패널이 열립니다. 패널은 레일 위를 덮으며 열리므로, 다른 탭으로 옮기려면 패널 제목 옆의 × 를 누르거나 캔버스를 눌러 먼저 닫습니다. 각 패널의 역할은 다음과 같습니다.

• 요소 추가: 레이아웃·텍스트·미디어 등 요소 목록이 있고 위쪽 검색창으로 찾을 수 있습니다.
• 템플릿: AI 페이지 생성과 섹션 추가(빈 섹션 또는 템플릿 선택)로 들어가는 입구입니다.
• 레이어: 페이지를 섹션 단위 목록으로 보여 줍니다.
• 에셋: 미디어 저장소입니다. 업로드한 이미지를 모아 보고 업로드 버튼으로 추가합니다.
• 프리셋 테마: 색 조합 목록과 '더 많은 팔레트', 페이지 색상 자동 매핑 옵션이 있습니다.
• 메뉴 편집: 웹사이트에 속한 페이지에서만 메뉴를 관리할 수 있다는 안내가 나옵니다. 독립 페이지는 웹사이트로 옮긴 뒤 설정합니다.
• 페이지 설정: 패널 제목은 '설정'으로 표시되며 레이아웃 테마, 데이터 소스, SEO 설정(페이지 주소 등)이 들어 있습니다.
• AI 조정: 화면 아래쪽에 입력 바가 뜹니다. 범위(선택 섹션/전체 페이지), 템플릿, 히스토리를 고를 수 있습니다.

4. 캔버스와 오른쪽 속성 패널

가운데 캔버스에서 요소를 누르면 선택 테두리와 작은 도구 막대가 나타납니다. 막대에는 요소 설정 열기, 레이아웃/간격, 링크 넣기, 요소 복제, 요소 삭제 버튼이 있습니다. 섹션과 섹션 사이에는 + 표시가 보입니다.

요소 설정 열기를 누르면 작은 설정 창이 뜨고, 그 아래의 전체 속성 패널 열기를 누르면 오른쪽 속성 패널이 열립니다. 패널 위쪽에는 선택한 요소의 종류와 태그, 현재 기기 표시가 있고, 콘텐츠·스타일·효과·반응형 탭으로 나뉩니다. 머리글 아이콘으로 상위 요소 선택, 패널 좌우 이동, 패널 고정, 섹션 HTML 코드 편집, 고급 설정을 쓸 수 있습니다.

5. 저장과 나가기: 자동 저장은 없습니다

에디터에는 자동 저장이 없습니다. 변경한 뒤 상단바의 저장을 직접 눌러야 하며, 저장하지 않은 변경이 있으면 저장 버튼이 보랏빛으로 바뀝니다. 저장하면 '저장됨'이 잠시 표시됩니다. 저장 단축키(Ctrl+S)는 없었습니다. 실행취소는 Ctrl+Z, 재실행은 Ctrl+Y입니다.

저장하지 않고 왼쪽 위 뒤로가기를 누르면 '에디터 나가기' 확인창이 나타나며, 취소를 누르면 편집을 계속할 수 있습니다. 변경이 있는 상태에서 새로고침하면 브라우저의 확인 경고도 나타났습니다.

6. 이렇게 활용해 보세요

• 처음에는 상단바와 레일의 이름만 눈으로 훑어 두면 다른 글을 읽을 때 위치를 찾기 쉽습니다.
• 중간중간 저장 버튼 색을 확인하는 습관을 들이면 저장을 빠뜨릴 가능성을 줄일 수 있습니다.

7. 알아 두실 점

• AI 페이지 생성과 AI 조정은 AI 기능이라 크레딧이 쓰일 수 있습니다. 실행 전 화면의 안내를 확인해 주세요.
• 일부 기능은 플랜이나 계정 설정에 따라 보이는 탭과 항목이 다를 수 있습니다.

다음 글부터 시작 화면, 저장·배포, 요소 편집 등 각 영역을 하나씩 자세히 살펴봅니다.