캔버스 화면 구성
캔버스는 VEXPLOR Logic Studio에서 앱을 만드는 작업 공간입니다. 왼쪽에서 노드를 꺼내고, 가운데에서 배치하고, 오른쪽에서 설정을 바꿉니다.
소개
VEXPLOR Logic Studio에 로그인하면 가장 먼저 만나는 화면이 바로 캔버스입니다. 캔버스는 마치 넓은 화이트보드와 같습니다. 이 화이트보드 위에 다양한 블록(노드)을 올려놓고, 서로 연결해서 업무용 앱을 만듭니다.
코드를 한 줄도 작성하지 않아도 됩니다. 모든 것을 드래그 앤 드롭과 클릭만으로 완성할 수 있습니다.
이렇게 보입니다
위 화면은 캔버스에 접속했을 때 의 전체 모습입니다. 크게 세 영역으로 나뉘어 있습니다.
화면 레이아웃
캔버스 화면은 세 가지 영역으로 구성됩니다. 아래 그림을 참고하세요.
| 노드 팔레트 | 캔버스 작업 영역 | 속성 패널 |
|---|---|---|
| (왼쪽) | (가운데) | (오른쪽) |
좌측 노드 팔레트
노드 팔레트에는 사용 가능한 모든 노드가 카테고리별로 정리되어 있습니다.
노드 팔레트는 도구 상자와 같습니다. 여기에 테이블, 화면, 워크플로우 등 앱을 만드는 데 필요한 모든 부품(노드)이 카테고리별로 정리되어 있습니다.
| 기능 | 설명 |
|---|---|
| 카테고리 접기/펼치기 | 카테고 리 이름을 클릭하면 접거나 펼 수 있습니다 |
| 노드 검색 | 상단 검색창에 이름을 입력하면 빠르게 찾을 수 있습니다 |
| 노드 꺼내기 | 원하는 노드를 캔버스로 드래그하면 됩니다 |
| 팔레트 접기 | 팔레트 가장자리의 화살표를 클릭하면 숨길 수 있습니다 |
노드 팔레트가 너무 넓다고 느껴지면, 가장자리를 드래그하여 너비를 조절할 수 있습니다.
중앙 캔버스 영역
캔버스 영역은 노드를 자유롭게 배치하고 연결하는 핵심 작업 공간입니다.
가운데 넓은 영역이 실제 작업이 이루어지는 캔버스입니다. 여기에서 할 수 있는 것들:
- 노드 배치: 팔레트에서 드래그하여 노드를 놓습니다
- 노드 연결: 노드 사이에 선을 그어 관계를 만듭니다
- 자유 배치: 노드를 원하는 위치로 이동합니다
- 확대/축소: 마우스 휠로 줌인/줌아웃 합니다
캔버스 상단에는 도구모음 바가 있습니다:
| 버튼 | 기능 | 단축키 |
|---|---|---|
| 실행취소/다시실행 | 마지막 작업을 되돌리거나 다시 실행 | Ctrl+Z / Ctrl+Y |
| 저장 | 현재 캔버스 상태를 저장 | Ctrl+S |
| 배포 | 설계한 앱을 실제 사용할 수 있도록 배포 | - |
| 줌 컨트롤 | 캔버스 확대/축소 비율 조절 | 마우스 휠 |
우측 속성 패널
캔버스에서 노드를 클릭하면 오른쪽에 해당 노드의 속성 패널이 나타납니다.
캔버스에서 노드를 클릭하면 오른쪽에 해당 노드의 설정 화면이 나타납니다. 이곳에서 노드의 이름, 컬럼, 화면 타입 등 세부 사항을 설정합니다.
속성 패널에서 주로 설정하는 항목:
| 노드 종류 | 주요 설정 항목 |
|---|---|
| 테이블 노드 | 테이블 이름, 컬럼 목록, 컬럼 타입 |
| 화면 노드 | 화면 타입(목록/양식/전표 등), 표시할 컬럼 |
| 관계 연결선 | 관계 타입(1:1, 1:N, M:N), 표시 컬럼 |
| 워크플로우 노드 | 상태값, 전환 조건 |
노드를 선택하지 않으면 속성 패널이 비어 있습니다. 설정을 변경하려면 반드시 캔버스에서 해당 노드를 먼저 클릭하세요.
줌/팬 조작
캔버스가 복잡해지면 확대하거나 이동해야 할 때가 있습니다.
| 조작 | 방법 |
|---|---|
| 확대(줌인) | 마우스 휠 위로 스크롤 |
| 축소(줌아웃) | 마우스 휠 아래로 스크롤 |
| 캔버스 이동(팬) | 빈 공간을 마우스로 드래그 |
| 전체 보기 | 도구모음의 "전체 맞춤" 버튼 클릭 |
| 100% 보기 | 줌 컨트롤에서 비율을 100%로 설정 |
캔버스에 노드가 많아져서 전체를 한눈에 보고 싶다면, 줌 컨트롤의 "전체 맞춤" 버튼을 눌러보세요. 모든 노드가 화면에 들어오도록 자동으로 줌이 조절됩니다.
미니맵
캔버스 우측 하단에 있는 미니맵으로 전체 구조를 한눈에 파악할 수 있습니다.
캔버스 오른쪽 아래에 작은 지도 모양의 미니맵이 있습니다. 미니맵은 캔버스 전체를 축소해서 보여주며, 현재 보고 있는 영역이 사각형으로 표시됩니다.
- 미니맵의 사각형을 드래그하면 캔버스 보기 위치가 이동합니다
- 노드가 많을 때 원하는 위치로 빠르게 이동할 수 있습니다
- 미니맵은 접기/펼치기가 가능합니다
실무 예시
상황: MES(제조실행시스템)을 만들기 위해 캔버스를 처음 열었습니다.
- 왼쪽 노드 팔레트에서 데이터 카테고리를 펼칩니다
- 테이블 노드를 캔버스 가운데로 드래그합니다
- 배치된 테이블 노드를 클릭하면 오른쪽 속성 패널이 열립니다
- 속성 패널에서 테이블 이름을 "작업지시"로 입력합니다
- 같은 방식으로 "작업실적" 테이블도 추가합니다
- 두 테이블을 연결하면 관계가 만들어집니다
자주 묻는 질문
Q: 캔버스에서 실수로 노드를 삭제했어요. 되돌릴 수 있나요?
A: Ctrl+Z (실행취소)를 누르면 바로 복구됩니다.
Q: 캔버스가 너무 복잡해서 원하는 노드를 못 찾겠어요.
A: 미니맵을 활용하거나, Ctrl+F로 노드를 검색해 보세요.
Q: 속성 패널이 보이지 않아요. A: 캔버스에서 아무 노드나 클릭해 보세요. 노드를 선택해야 속성 패널이 나타납니다.
다음 단계
- 노드 카테고리 알아보기 - 어떤 노드들이 있는지 살펴봅니다
- 기 본 조작법 - 노드를 배치하고 연결하는 방법을 배웁니다