Canvas 편집기

Canvas는 Armox에서 ‘마법’이 일어나는 곳입니다. 노드 기반의 시각적 편집기로, 다양한 구성 요소를 연결해 강력한 콘텐츠 생성 워크플로를 만들 수 있습니다.

Canvas란 무엇인가요?

완성된 워크플로가 있는 Canvas 편집기: 여러 노드가 연결되어 콘텐츠 생성 파이프라인을 구성합니다.

Canvas는 Armox의 시각적 워크플로 편집기입니다. 코드를 작성하거나 복잡한 인터페이스를 다루는 대신, 다음과 같이 작업합니다:

• 🎨 드래그 앤 드롭으로 노드를 캔버스에 추가
• 🔗 연결선으로 노드들을 연결
• ▶️ 한 번의 클릭으로 워크플로 실행
• 👀 결과를 캔버스에서 바로 확인

실제로 실행되는 플로우차트라고 생각하면 됩니다—각 박스는 무언가를 수행하고, 선은 데이터가 어떻게 흐르는지 보여줍니다.

Canvas 인터페이스 개요

Canvas를 열면 다음이 보입니다:

탐색(Navigation)

확대/축소(Zooming)

• 스크롤 휠 — 확대/축소
• 핀치 제스처 — 트랙패드에서
• 줌 컨트롤 — 툴바에서

이동(Panning)

• 빈 캔버스에서 클릭 후 드래그
• 가운데 마우스 버튼 — 클릭 후 드래그
• 스페이스바 + 드래그 — 대체 방법

미니맵(Minimap)

오른쪽 아래의 미니맵은 전체 캔버스를 보여줍니다:

• 미니맵을 클릭해 해당 영역으로 점프
• 뷰포트 사각형을 드래그해 이동
• 설정에서 미니맵 켜기/끄기 토글

새 Canvas 만들기

1. 사이드바에서 Canvas를 클릭합니다.
2. + New Canvas를 클릭합니다.
3. 캔버스 이름을 입력합니다.
4. 노드를 추가하기 시작하세요!

워크플로를 만들 준비가 된 새 빈 캔버스.

캔버스는 작업하는 동안 자동 저장됩니다.

노드 추가하기

사이드바에서

1. 왼쪽 사이드바를 엽니다(숨겨져 있다면 메뉴 아이콘 클릭).
2. 노드 카테고리를 둘러봅니다:
   • Text — 프롬프트 및 텍스트 생성
   • Image — AI 이미지 생성
   • Video — AI 비디오 생성
   • Audio — 음악 및 음성
   • Upload — 내 파일 업로드
   • Tools — 처리/개선
3. 노드를 캔버스로 드래그하거나 클릭해서 추가합니다.

카테고리별로 정리된 모든 노드 타입이 보이는 Add Node 패널.

빠른 추가(Quick Add)

• 캔버스에서 우클릭해 컨텍스트 메뉴 열기
• 원하는 노드 타입을 선택하면 해당 위치에 추가됩니다

노드 선택하기

단일 선택(Single Selection)

• 노드를 클릭해 선택
• 선택된 노드는 하이라이트 테두리가 표시
• 오른쪽 패널에 노드 설정 표시

다중 선택(Multiple Selection)

• Shift + Click — 선택에 추가
• 박스 드래그 — 여러 노드를 한 번에 선택
• Ctrl/Cmd + A — 전체 노드 선택

노드 이동하기

• 선택된 노드를 드래그해 재배치
• 화살표 키 — 선택된 노드를 조금씩 이동
• 여러 노드를 선택하면 함께 이동합니다

노드 연결하기

연결 만들기(Creating Connections)

1. 출력 핸들(노드 오른쪽의 작은 원)을 찾습니다.
2. 출력 핸들에서 클릭 후 드래그합니다.
3. 다른 노드의 입력 핸들(왼쪽)로 드래그합니다.
4. 놓으면 연결이 생성됩니다.

연결 색상(Connection Colors)

연결은 데이터 타입에 따라 색상으로 구분됩니다:

연결 삭제(Deleting Connections)

• 연결선을 클릭해 선택
• Delete 또는 Backspace 누르기
• 또는 우클릭 후 “Delete” 선택

노드 설정(Node Settings)

노드를 선택하면 오른쪽 패널에 해당 노드의 설정이 표시됩니다:

공통 설정(Common Settings)

접을 수 있는 섹션(Collapsible Sections)

설정은 접을 수 있는 섹션으로 구성됩니다:

• Basic — 필수 설정
• Advanced — 세부 조정 옵션
• Output — 미리보기 및 다운로드

워크플로 실행하기

단일 노드 실행(Run a Single Node)

1. 실행할 노드를 선택합니다.
2. 노드의 ▶ Play 버튼을 클릭합니다.
3. 진행 표시를 확인합니다.
4. 노드의 미리보기에서 결과를 확인합니다.

전체 워크플로 실행(Run Entire Workflow)

1. 툴바에서 Run All을 클릭합니다.
2. 연결 관계에 따라 순서대로 노드가 실행됩니다.
3. 각 노드는 진행 상태를 표시합니다.
4. 노드가 완료될 때마다 결과가 나타납니다.

실행 순서(Execution Order)

노드는 의존성 순서대로 실행됩니다:

1. 입력이 없는 노드가 먼저 실행
2. 그 출력에 의존하는 노드가 다음 실행
3. 모든 노드가 완료될 때까지 반복

결과 보기(Viewing Results)

노드 내 미리보기(In-Node Preview)

생성된 콘텐츠는 노드 안에 바로 표시됩니다:

• Images — 썸네일 미리보기
• Videos — 비디오 플레이어
• Audio — 오디오 플레이어
• Text — 텍스트 표시

전체 미리보기(Full Preview)

• 미리보기를 클릭해 크게 보기
• Download 버튼으로 컴퓨터에 저장
• 콘텐츠는 Gallery에도 저장됩니다

저장 및 정리(Saving and Organizing)

자동 저장(Auto-Save)

Canvas는 작업 중 자동 저장됩니다. 툴바에 “Saved” 표시가 나타납니다.

수동 저장(Manual Save)

• Ctrl/Cmd + S로 강제 저장
• 또는 툴바에서 Save 클릭

이름 변경(Renaming)

1. 툴바에서 캔버스 이름을 클릭합니다.
2. 새 이름을 입력합니다.
3. Enter를 누릅니다.

캔버스 정리(Organizing Canvases)

• 설명적인 이름을 사용하세요
• 네이밍 규칙을 활용하세요(예: “Client - Project - Version”)
• 더 이상 필요 없는 캔버스는 삭제하세요

키보드 단축키(Keyboard Shortcuts)

Canvas 베스트 프랙티스

레이아웃 팁

• 왼쪽 → 오른쪽 흐름 — 입력은 왼쪽, 출력은 오른쪽
• 여백 확보 — 노드를 너무 빽빽하게 두지 않기
• 관련 노드 그룹화 — 유사 기능을 가까이 배치
• 미니맵 활용 — 큰 워크플로 탐색에 유용

워크플로 팁

• 단순하게 시작 — 2~3개 노드로 시작하고 확장
• 점진적으로 테스트 — 한 번에 하나씩 실행해 검증
• 자주 저장 — 자동 저장이 있어도 수동 저장이 도움이 됩니다
• 명확하게 이름짓기 — 설명적인 캔버스 이름 사용

성능 팁

• 과도하게 키우지 않기 — 매우 큰 캔버스는 느려질 수 있습니다
• 필요한 것만 실행 — 필요한 노드만 선택적으로 실행
• 정리하기 — 사용하지 않는 노드/연결은 삭제

문제 해결(Troubleshooting)

Canvas가 로드되지 않음

• 페이지를 새로고침하세요
• 인터넷 연결을 확인하세요
• 다른 브라우저에서 시도해 보세요

노드가 연결되지 않음

• 타입 호환성을 확인하세요(색상이 같거나 텍스트는 대부분 연결 가능)
• 출력 → 입력 방향으로 드래그하고 있는지 확인하세요
• 연결을 삭제한 뒤 다시 만들어 보세요

결과가 표시되지 않음

• 노드 실행이 끝났는지 확인하세요(스피너 없음)
• 노드에 오류 메시지가 있는지 확인하세요
• 크레딧 잔액을 확인하세요

다음 단계

이제 Canvas를 이해했으니 더 깊게 들어가 보세요:

• Connecting Nodes — 복잡한 워크플로 구축
• Running Workflows — 실행 및 생성물 관리
• Creating Apps — 워크플로를 재사용 가능한 Apps로 전환