페이지 에디터의 화면 구성을 실제 캡처와 함께 자세히 안내합니다. 기본 편집 흐름은 페이지 에디터 사용하기를 먼저 참고하세요.
전체 화면
에디터는 상단 툴바 · 좌측 패널 · 가운데 캔버스 · 우측 패널 네 영역으로 구성됩니다.
| 영역 | 역할 |
|---|---|
| 상단 툴바 | 화면 크기 전환, 언어 선택, 실행취소·되돌리기, 미리보기, 저장 |
| 좌측 패널 | 요소 추가·구조·데이터 등 "무엇을 넣을지" |
| 캔버스 | 실제 페이지가 보이는 편집 영역 (클릭해서 선택) |
| 우측 패널 | 선택한 요소의 스타일·설정 등 "어떻게 보일지" |
상단 툴바
- 화면 크기 — 데스크톱 / 태블릿 / 모바일을 전환해 기기별 모습을 확인합니다.
- 언어 — 편집·미리보기할 언어를 선택합니다(다국어 사이트).
- 실행취소 / 되돌리기, 미리보기(편집 표시를 숨기고 실제 모습 보기), 저장.
변경사항은 저장해야 반영되고, 방문자에게 공개하려면 별도로 **게시(배포)**가 필요합니다.
좌측 패널 — 요소와 데이터
왼쪽 세로 아이콘으로 패널을 전환합니다.
| 패널 | 하는 일 |
|---|---|
| 요소(Elements) | 텍스트·이미지·버튼·레이아웃 등을 캔버스로 드래그해 추가 |
| 레이어(Layers) | 페이지 요소의 구조(트리)를 보고 선택·정리 |
| 변수(Variables) | 브랜드 색상·크기·글꼴 같은 디자인 값 관리 |
| 데이터(CMS) | 요소를 의사·진료과 등 동적 데이터에 연결 |
| 에셋(Assets) | 이미지·아이콘 등 미디어 선택 |
| AI(AI Prompt) | 자연어로 요소 생성 |
| 컨텍스트 값(Context Values) | 페이지에서 쓰는 값(기관 정보 등) 확인 |
데이터(CMS)·AI·다국어(I18n) 패널의 자세한 사용법은 데이터 연결·AI·다국어 가이드를 참고하세요.
요소 추가
Custom Components / Layouts / Typography / Basics 등 카테고리에서 원하는 요소를 찾아 캔버스로 끌어다 놓습니다.
레이어
페이지를 구성하는 요소들의 계층 구조입니다. 겹쳐 있거나 깊이 들어간 요소를 빠르게 찾을 때 유용합니다.
캔버스 — 요소 선택
캔버스에서 요소를 클릭하면 선택되고(테두리 표시), 우측 패널이 그 요소 기준으로 바뀝니다. 선택한 요소 위에는 빠른 작업 버튼도 나타납니다.
우측 패널 — 스타일과 설정
오른쪽 위 아이콘으로 패널을 전환합니다.
| 패널 | 하는 일 |
|---|---|
| 스타일(Style) | 색상·간격·크기·글꼴·배경·테두리·효과 등 |
| 설정(Settings) | 선택 요소별 속성(폼 항목, 이미지 설정, 링크 등) |
| 액션(Actions) | 클릭 시 동작(팝업 열기 등) 연결 |
| CSS | 선택 요소에 직접 CSS 작성(고급) |
| 스타일시트(Stylesheet) | 페이지 전역 스타일시트 작성(고급) |
| 메타데이터(Metadata) | 페이지 SEO(제목·설명 등) |
| 다국어(I18n) | 언어별 내용 관리 |
| 히스토리(History) | 편집 단계 기록 — 이전 상태로 되돌리기 |
스타일(Style) 패널은 일반·레이아웃·간격·치수·타이포그래피·위치·배경·테두리·효과 섹션으로 나뉘며, 기기(데스크톱/태블릿/모바일)별로 따로 지정해 반응형으로 만들 수 있습니다.
컨텍스트 값과 히스토리
아래는 좌측 컨텍스트 값과 우측 히스토리를 함께 펼친 모습입니다. 히스토리에서 편집 단계를 되짚어 되돌릴 수 있습니다.
정리
- 좌측 요소에서 끌어다 추가 → 2. 캔버스에서 클릭해 선택·내용 입력 → 3. 우측 스타일로 꾸미기 → 4. 데이터/다국어/메타데이터 설정 → 5. 미리보기 확인 → 6. 저장 후 게시.