# 2. 워크플로우 캔버스 화면 이해하기

### 2-1. 화면 구성

브라우저 준비가 끝나면 워크플로우 캔버스 화면이 나타납니다. 크게 세 영역으로 나뉩니다.

![Image](https://upload.cafenono.com/image/slashpageHome/20260320/122600_naVIFOBEKhaOD8THAx?q=80&s=1280x180&t=outside&f=webp)

| 영역 | 위치 | 설명 |
| --- | --- | --- |
| **워크플로우 캔버스** | 좌측 | 만든 작업들이 블록(노드)과 화살표로 연결되어 보이는 곳. 드래그로 이동, 스크롤로 확대/축소 가능 |
| **브라우저 패널** | 우측 | 자동화가 실행되는 실제 브라우저를 실시간으로 보여주는 곳 |
| **채팅 입력창** | 하단 중앙 | 자연어로 브라우저 동작을 지시하는 입력 영역 |

### 2-2. 브라우저 패널 조작하기

우측 브라우저 패널은 실시간으로 자동화 중인 브라우저 화면을 보여줍니다.

![Image](https://upload.cafenono.com/image/slashpageHome/20260320/124948_M0VIEquO6pDssXk0x2)

오른쪽 브라우저 화면에서 자동화가 실행되는 모습을 실시간으로 볼 수 있습니다.

- **탭 바**: 여러 탭이 열려있으면 상단에 표시됩니다.

- **주소 바**: 현재 페이지 주소가 보입니다.

- **화면 클릭**: 클릭하면 크게 확대해서 볼 수 있습니다. 다시 클릭하면 닫힙니다.

- **크기 조절**: 왼쪽 테두리를 드래그하면 너비를 조절할 수 있습니다.

- **접기**: 상단 버튼을 누르면 패널을 접을 수 있습니다.

### 2-3. 채팅 입력창

![Image](https://upload.cafenono.com/image/slashpageHome/20260320/131219_sIqziPzzdMVn5dZSr9)

아래쪽 입력창에서 브라우저에게 할 일을 지시합니다.

- **Enter**: 보내기

- **Shift+Enter**: 줄바꿈

- 아무것도 안 쓰면 보내기 버튼이 비활성화됩니다.

For the site tree, see the [root Markdown](https://slashpage.com/xeona.md).