> ## Documentation Index
> Fetch the complete documentation index at: https://docs.pensiv.so/llms.txt
> Use this file to discover all available pages before exploring further.

# 캔버스 그리기 도구

> 캔버스에 사각형·타원·선·화살표·펜·텍스트를 그리고, 도형 속성 패널에서 선과 채우기와 손그림 느낌을 손보는 방법입니다.

캔버스에 놓이는 것이 카드만은 아닙니다. 두 인물을 화살표로 잇고 3부에 들어갈 장면들을 사각형으로 둘러 두면, 카드를 옮기지 않고도 이야기의 뼈대가 드러납니다.

## 여섯 가지 도구

화면 아래 도구 막대의 구분선 오른쪽에 사각형, 타원, 선, 화살표, 펜, 텍스트가 놓여 있습니다. `R`, `O`, `L`, `A`, `P`, `T` 키로도 바로 잡힙니다.

도구를 고르면 캔버스 위에 그리기 층이 덮여 카드를 집을 수 없게 되고, 도구 막대 위에 `Esc` 그리기 종료 안내가 뜹니다. 도형은 원하는 크기만큼 끌어서 그리고, 텍스트는 놓을 자리를 한 번 누르면 됩니다. 하나를 그리면 곧 선택 상태로 돌아오지만 펜만은 예외라 계속 그을 수 있습니다. 그리다 만 것을 물릴 때도, 그리기를 끝낼 때도 `Esc`입니다.

<div className="app-window block dark:hidden">
  <img src="https://mintcdn.com/raumlabsinc/yDXrCkeujAozathm/images/ko/structure/canvas-drawing--01.png?fit=max&auto=format&n=yDXrCkeujAozathm&q=85&s=bf021bb96a090f54832b17f8d05db4c5" alt="도구 막대에서 사각형 도구가 눌린 채 캔버스 위를 끌고 있어 점선 미리보기가 떠 있고, 도구 막대 바로 위에 “Esc 그리기 종료” 안내가 보인다." width="2880" height="1800" data-path="images/ko/structure/canvas-drawing--01.png" />
</div>

<div className="app-window hidden dark:block">
  <img src="https://mintcdn.com/raumlabsinc/yDXrCkeujAozathm/images/ko/structure/canvas-drawing--01-dark.png?fit=max&auto=format&n=yDXrCkeujAozathm&q=85&s=26f18c0a5fe7bcb228033ce29b99f550" alt="도구 막대에서 사각형 도구가 눌린 채 캔버스 위를 끌고 있어 점선 미리보기가 떠 있고, 도구 막대 바로 위에 “Esc 그리기 종료” 안내가 보인다." width="2880" height="1800" data-path="images/ko/structure/canvas-drawing--01-dark.png" />
</div>

<p className="app-caption">도구를 고르고 끌면 그려집니다. Esc로 빠져나옵니다.</p>

## 도형 속성

그린 것을 하나만 골라 두면 캔버스 위에 도형 속성 패널이 뜹니다. 머리말을 잡아 끌면 자리를 옮기고 오른쪽 꺾쇠로 패널 접기와 패널 펼치기를 합니다. 항목은 고른 도형에 따라 달라집니다.

| 항목                 | 나오는 도형          |
| ------------------ | --------------- |
| 선 색                | 모두              |
| 정렬 / 세로 정렬 / 글자 크기 | 펜을 뺀 모두         |
| 선 두께               | 텍스트를 뺀 모두       |
| 선 스타일 / 선·화살표      | 선, 화살표          |
| 손그림 느낌             | 사각형, 타원, 선, 화살표 |
| 채우기 색 / 채우기 패턴     | 사각형, 타원         |

선 색은 기본에 일곱 색을 더한 여덟 칸입니다. 손그림 느낌은 세 단계로, 자로 그은 듯 반듯한 선부터 두 번 덧그은 듯 부스스한 선까지 갑니다. 선·화살표는 곧은 선과 완만한 곡선과 직각으로 꺾인 선 셋입니다. 새로 그은 선과 화살표는 곡선으로 시작합니다. 채우기 색에서 색을 고르면 그 아래 채우기 패턴이 나타나 빗금·교차 빗금·단색을 내놓고, 채우기 없음으로 되돌리면 사라집니다.

<div className="app-window block dark:hidden">
  <img src="https://mintcdn.com/raumlabsinc/R8FLrW_am3mX03Ak/images/ko/structure/canvas-drawing--02.png?fit=max&auto=format&n=R8FLrW_am3mX03Ak&q=85&s=aaac65ff2b969a9b2c7501c05eeab393" alt="채우기 색이 지정된 타원 하나만 선택되어 캔버스 위에 도형 속성 패널이 펼쳐진 상태. 선 색·정렬·세로 정렬·글자 크기·선 두께·손그림 느낌·채우기 색·채우기 패턴이 모두 보인다." width="2880" height="1800" data-path="images/ko/structure/canvas-drawing--02.png" />
</div>

<div className="app-window hidden dark:block">
  <img src="https://mintcdn.com/raumlabsinc/R8FLrW_am3mX03Ak/images/ko/structure/canvas-drawing--02-dark.png?fit=max&auto=format&n=R8FLrW_am3mX03Ak&q=85&s=769298108c51484c289f3b34e6807e43" alt="채우기 색이 지정된 타원 하나만 선택되어 캔버스 위에 도형 속성 패널이 펼쳐진 상태. 선 색·정렬·세로 정렬·글자 크기·선 두께·손그림 느낌·채우기 색·채우기 패턴이 모두 보인다." width="2880" height="1800" data-path="images/ko/structure/canvas-drawing--02-dark.png" />
</div>

<p className="app-caption">도형 하나를 고르면 뜨는 속성 패널. 끌어서 옮기고 접을 수 있습니다.</p>

## 글자와 회전

사각형·타원·선·화살표를 두 번 누르면 그 안에 바로 글이 써집니다. 텍스트 도형은 그린 직후부터 입력을 받습니다. 글자 크기는 작게부터 가장 크게까지 다섯 단계라, 멀리서도 읽히는 장 제목을 붙여 둘 수 있습니다. 세로 정렬의 위·가운데·아래로 글자를 도형 어디에 붙일지 정합니다.

고른 도형 위에는 회전 손잡이가 달립니다. 끌어서 돌리고 Shift를 누른 채 끌면 15° 단위로 맞춰집니다. 선과 화살표는 가운데 마름모 손잡이를 끌어 활처럼 휘게 하고 다시 가운데 근처에서 놓으면 곧게 펴집니다.