> ## 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 서명 편집기 안에서 서명을 디자인하는 시각적 워크스페이스인 캔버스에서 블록을 바로 선택, 편집, 순서 변경, 크기 조절할 수 있어요.

캔버스는 에디터의 중심 영역으로, 서명이 완성되어 가는 모습을 직접 보고 다룰 수 있어요. 시각적 디자인 도구처럼 작동해요. 클릭해서 선택하고, 드래그해서 재정렬하고, 텍스트는 인라인으로 편집할 수 있으며, 그동안 트리 패널과 스타일링 패널은 항상 함께 업데이트돼요.

<Frame>
  <img src="https://mintcdn.com/scribe/Z_G2D9X-Tlrxu_Eh/images/canvas-editor-overview-full.png?fit=max&auto=format&n=Z_G2D9X-Tlrxu_Eh&q=85&s=43103cb126a92c2c6b71e934c69bc1fc" alt="서명 블록과 패널이 있는 Scribe 에디터 캔버스" width="3456" height="1928" data-path="images/canvas-editor-overview-full.png" />
</Frame>

## 블록 선택

캔버스에서 아무 블록이나 클릭하면 선택할 수 있어요. 선택한 블록 주위에 파란색 테두리가 나타나고, 다음과 같이 동작해요.

* **트리 패널**에서 해당 항목이 강조 표시돼요
* 오른쪽 **스타일링 패널**이 해당 블록의 설정으로 업데이트돼요

이 동작은 양방향으로 작동해요. 트리 패널에서 블록을 클릭해도 캔버스에서 선택되고, 해당 위치로 스크롤돼요.

<Frame>
  <img src="https://mintcdn.com/scribe/Z_G2D9X-Tlrxu_Eh/images/canvas-block-selected-blue-border.png?fit=max&auto=format&n=Z_G2D9X-Tlrxu_Eh&q=85&s=c8cc218981ed8bf4dcfc88c135fcae8b" alt="파란색 테두리로 선택된 캔버스 블록과 스타일링 패널" width="3456" height="1928" data-path="images/canvas-block-selected-blue-border.png" />
</Frame>

<Tip>
  중첩된 블록(예: 컬럼 안의 텍스트 요소)은 한 번 클릭해서 상위 컨테이너를 선택한 다음, 다시 클릭해서 안쪽의 하위 블록을 선택하세요.
</Tip>

## 텍스트 인라인 편집

텍스트 블록은 캔버스에서 바로 내용을 편집할 수 있어요. 텍스트 블록을 클릭해서 선택한 다음, 다시 클릭해서 커서를 놓고 입력을 시작하세요. 단어나 구절을 선택하면 스타일링 패널에서 서식을 적용할 수 있어요.

텍스트를 인라인으로 편집할 때는 스타일링 패널에 텍스트 단위 컨트롤이 표시돼요. 글꼴, 크기, 색상, 줄 높이, 그리고 서식 옵션(굵게, 기울임, 대문자, 취소선, 밑줄)을 다룰 수 있어요.

<Frame>
  <img src="https://mintcdn.com/scribe/Z_G2D9X-Tlrxu_Eh/images/canvas-text-inline-editing.png?fit=max&auto=format&n=Z_G2D9X-Tlrxu_Eh&q=85&s=f672931097ae87ea925ca6ebf2780fb1" alt="캔버스에서 인라인 편집 모드인 텍스트 블록" width="3456" height="1930" data-path="images/canvas-text-inline-editing.png" />
</Frame>

<Note>
  Smartfield(이름, 직책 등)에 연결된 텍스트 블록은 캔버스에 Smartfield 값을 표시해요. 값 자체는 데이터 소스에서 가져오기 때문에 여기에서는 편집할 수 없어요. 다만 표시되는 스타일은 그대로 지정할 수 있어요.
</Note>

## 행과 열 추가

캔버스의 블록을 마우스 오른쪽 버튼으로 클릭하면 **Add Row**와 **Add Column** 두 가지 옵션이 있는 컨텍스트 메뉴가 열려요. 캔버스를 벗어나지 않고도 블록을 빠르게 묶을 수 있어요.

<Frame>
  <img src="https://mintcdn.com/scribe/Z_G2D9X-Tlrxu_Eh/images/canvas-right-click-context-menu.png?fit=max&auto=format&n=Z_G2D9X-Tlrxu_Eh&q=85&s=a5df92eb1060a397f1cc6381858ef144" alt="Add Row와 Add Column 옵션이 표시된 마우스 오른쪽 버튼 컨텍스트 메뉴" width="3456" height="1928" data-path="images/canvas-right-click-context-menu.png" />
</Frame>

예를 들어 버튼 두 개를 나란히 배치하고 싶다면, 그중 하나를 선택하고 마우스 오른쪽 버튼으로 클릭한 다음 **Add Column**을 선택하세요. 그러면 선택한 블록이 새 열 컨테이너로 감싸지고, 그 옆에 다른 블록을 손쉽게 놓을 수 있어요. 같은 컨테이너 안에서 요소를 세로로 쌓으려면 **Add Row**를 선택하세요.

소셜 아이콘 한 줄, 콜투액션 버튼 한 쌍처럼 여러 블록을 함께 묶고 정렬해야 하는 섹션을 만들 때 특히 유용해요.

## 블록 순서 변경

캔버스에서 블록을 드래그하면 같은 컨테이너 안에서 순서를 바꿀 수 있어요. 드래그하는 동안 파란색 점선 테두리가 표시되어 손을 놓으면 블록이 놓일 위치를 알려줘요.

트리 패널에서 블록을 드래그해서 순서를 바꿀 수도 있어요. 결과는 동일해요.

<Frame>
  <img src="https://mintcdn.com/scribe/Z_G2D9X-Tlrxu_Eh/images/canvas-block-drag-reorder.png?fit=max&auto=format&n=Z_G2D9X-Tlrxu_Eh&q=85&s=a510ddd4e8c403d6fa94a35d7d6eb44c" alt="파란색 점선 드롭 표시와 함께 순서 변경을 위해 드래그 중인 블록" width="3456" height="1929" data-path="images/canvas-block-drag-reorder.png" />
</Frame>

## 크기 조절

이미지와 같은 일부 블록은 선택하면 가장자리와 모서리에 크기 조절 핸들(작은 파란색 사각형)이 표시돼요. 이 핸들을 드래그하면 캔버스에서 바로 블록 크기를 조절할 수 있어요. 정확한 치수는 스타일링 패널에 실시간으로 업데이트돼요.

<Frame>
  <img src="https://mintcdn.com/scribe/Z_G2D9X-Tlrxu_Eh/images/canvas-image-resize-handles.png?fit=max&auto=format&n=Z_G2D9X-Tlrxu_Eh&q=85&s=43adfd56f04195f6f0092cf1e6dcc7e0" alt="캔버스 위 파란색 크기 조절 핸들이 있는 이미지 블록" width="3456" height="1930" data-path="images/canvas-image-resize-handles.png" />
</Frame>

## 캔버스 탐색하기

캔버스는 무한한 워크스페이스예요. 하단의 [액션 바](/ko/editor/action-bar)에서 확대·축소하거나, 손 도구를 활성화해 블록을 실수로 선택하지 않고 화면을 이동할 수 있어요.

<Frame>
  <img src="https://mintcdn.com/scribe/Z_G2D9X-Tlrxu_Eh/images/canvas-action-bar-zoom-controls.png?fit=max&auto=format&n=Z_G2D9X-Tlrxu_Eh&q=85&s=21abcbc64fe94aad3a79258f30c95881" alt="캔버스 하단의 확대·축소 및 손 도구가 있는 액션 바" width="3448" height="1908" data-path="images/canvas-action-bar-zoom-controls.png" />
</Frame>
