> ## Documentation Index
> Fetch the complete documentation index at: https://help.scribe-mail.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 에디터 개요

> Scribe 서명 편집기를 둘러보고 트리 패널, 캔버스, 스타일링 패널, 상단 바, 액션 바가 어떻게 함께 작동해 서명을 만드는지 확인해 보세요.

Scribe 에디터는 이메일 서명을 디자인하는 공간이에요. Figma나 Framer 같은 디자인 도구와 비슷한 3분할 레이아웃을 따릅니다: 왼쪽의 [트리 패널](/ko/editor/tree-panel), 가운데의 [캔버스](/ko/editor/canvas), 오른쪽의 [스타일링 패널](/ko/editor/styling-panel)로 구성돼요.

<Frame>
  <img src="https://mintcdn.com/scribe/Z_G2D9X-Tlrxu_Eh/images/editor-overview-three-panel-layout.png?fit=max&auto=format&n=Z_G2D9X-Tlrxu_Eh&q=85&s=b921c9bfe8ba7ac80bfc5599c483157e" alt="트리, 캔버스, 스타일 패널로 구성된 Scribe 에디터의 3패널 레이아웃" width="3456" height="1928" data-path="images/editor-overview-three-panel-layout.png" />
</Frame>

## 레이아웃

**트리 패널(왼쪽)**: 서명의 계층 구조를 접을 수 있는 트리 형태로 보여줘요. 서명에 포함된 모든 블록(열, 텍스트 블록, 이미지, 배너)이 여기에 표시돼요. 이 패널에서 블록을 선택, 재정렬, 복제, 숨김, 삭제할 수 있어요.

<Frame>
  <img src="https://mintcdn.com/scribe/Z_G2D9X-Tlrxu_Eh/images/editor-overview-tree-panel.png?fit=max&auto=format&n=Z_G2D9X-Tlrxu_Eh&q=85&s=e00a98504c39679c23f6b1a558016e7d" alt="서명 블록 계층 구조를 보여주는 왼쪽 트리 패널" title="서명 블록 계층 구조를 보여주는 왼쪽 트리 패널" className="mx-auto" style={{ width:"34%" }} width="728" height="1764" data-path="images/editor-overview-tree-panel.png" />
</Frame>

**캔버스(가운데)**: 변경 사항이 실시간으로 반영되는 서명의 라이브 미리보기예요. 캔버스에서 블록을 직접 클릭해 선택하거나 트리 패널을 사용할 수 있어요. 캔버스에는 Smartfield의 실제 팀원 데이터가 표시되므로 서명이 실제로 어떻게 보일지 확인할 수 있어요.

<Frame>
  <img src="https://mintcdn.com/scribe/Z_G2D9X-Tlrxu_Eh/images/editor-overview-canvas-center.png?fit=max&auto=format&n=Z_G2D9X-Tlrxu_Eh&q=85&s=5015dd3876200251071a928ce99ebeff" alt="서명의 라이브 미리보기를 보여주는 가운데 에디터 캔버스 패널" title="서명의 라이브 미리보기를 보여주는 가운데 에디터 캔버스 패널" className="mx-auto" width="2156" height="1746" data-path="images/editor-overview-canvas-center.png" />
</Frame>

**스타일 패널(오른쪽)**: 블록을 선택하면 나타나요. 해당 블록의 모든 스타일 옵션(레이아웃 속성, 텍스트 서식, 색상, 간격, Smartfield 연결)을 보여줘요. 선택한 블록 유형에 따라 옵션이 달라져요.

<Frame>
  <img src="https://mintcdn.com/scribe/Z_G2D9X-Tlrxu_Eh/images/editor-overview-styling-panel.png?fit=max&auto=format&n=Z_G2D9X-Tlrxu_Eh&q=85&s=e8248501203acf14c76286f788b4b7cf" alt="블록 구성 옵션을 보여주는 오른쪽 스타일 패널" title="블록 구성 옵션을 보여주는 오른쪽 스타일 패널" className="mx-auto" style={{ width:"33%" }} width="696" height="1766" data-path="images/editor-overview-styling-panel.png" />
</Frame>

## 상단 바

[상단 바](/ko/editor/editor-top-bar)에는 주요 정보와 작업이 표시돼요:

* **뒤로 가기 화살표**: 서명 상세 페이지로 돌아가요
* **서명 이름과 상태**: 서명 이름, 할당된 팀원 수, 현재 상태(초안 또는 게시됨)를 표시해요
* **템플릿**: 템플릿 라이브러리를 둘러보고 미리 만들어진 디자인에서 시작하세요
* **품질 검사**: 서명 디자인의 호환성을 검사해요. 클릭하면 서명이 모든 화면 크기에 반응형으로 적응하는지, 모든 이메일 클라이언트와 브라우저에서 작동하는지, 데스크톱·모바일·태블릿 전반에서 동작하는지, 가벼운 HTML로 빠르게 로드되는지, 이메일 작성 시 올바르게 표시되는지, 모든 플랫폼에서 이미지 비율이 유지되는지 확인하는 체크리스트를 볼 수 있어요. 게시하기 전에 모든 항목이 녹색으로 표시되어야 해요.
* **미리 보기**: 미리 보기 창을 열어 각 팀원에게 서명이 어떻게 보이는지 확인하세요
* **게시**: 디자인 변경 사항을 실시간으로 반영해요. 게시 후에는 설치된 모든 팀원에게 업데이트가 자동으로 전송돼요.

<Frame>
  <img src="https://mintcdn.com/scribe/Z_G2D9X-Tlrxu_Eh/images/editor-overview-top-bar.png?fit=max&auto=format&n=Z_G2D9X-Tlrxu_Eh&q=85&s=c72972192e2a0ce27e68763eee6cbed9" alt="템플릿, 품질 검사, 미리 보기, 게시 작업이 있는 에디터 상단 바" width="3456" height="176" data-path="images/editor-overview-top-bar.png" />
</Frame>

## 작업 바

캔버스 하단의 작업 바에서는 다음 기능을 제공해요:

* **실행 취소 / 다시 실행**: 변경 사항을 한 단계 뒤로 또는 앞으로 이동해요
* **드래그 핸들**: 캔버스 보기를 이동해요
* **확대/축소 컨트롤**: 확대(+), 축소(−) 또는 특정 배율 설정(예: 100%)

<Frame>
  <img src="https://mintcdn.com/scribe/Z_G2D9X-Tlrxu_Eh/images/editor-overview-action-bar.png?fit=max&auto=format&n=Z_G2D9X-Tlrxu_Eh&q=85&s=8ffc4d4f58a9e87a76920ddacdaed15a" alt="실행 취소, 다시 실행, 확대/축소 컨트롤이 있는 에디터 작업 바" title="실행 취소, 다시 실행, 확대/축소 컨트롤이 있는 에디터 작업 바" className="mx-auto" style={{ width:"66%" }} width="668" height="226" data-path="images/editor-overview-action-bar.png" />
</Frame>

## 관련 문서

* [작업 바](/ko/editor/action-bar)
* [블록 추가](/ko/editor/add-blocks)
* [열과 행으로 레이아웃 만들기](/ko/editor/building-layouts-with-columns-and-rows)