워크플로우 에디터¶
w5w의 비주얼 에디터는 ReactFlow 기반의 노드 에디터입니다. 드래그 앤 드롭으로 워크플로우를 설계할 수 있습니다.
에디터 구성¶
1. 캔버스(Canvas)¶
에디터의 중앙 영역입니다. 노드를 배치하고 연결하는 작업 공간입니다.
| 조작 | 방법 |
|---|---|
| 줌 | 마우스 휠 또는 핀치 |
| 패닝 | 빈 영역을 드래그 |
| 선택 | 노드 클릭 |
| 다중 선택 | Shift + 클릭 또는 드래그로 영역 선택 |
2. 상단 도구 모음¶
| 영역 | 기능 |
|---|---|
| 워크플로우 이름 | 클릭하여 이름 수정 |
| 저장 | 현재 상태 저장 (Ctrl+S) |
| 테스트 실행 | 워크플로우를 테스트 모드로 실행 |
| 활성화 토글 | 프로덕션에 배포/중지 |
3. 우측 패널¶
노드를 클릭하면 우측에 설정 패널이 열립니다. 노드 타입에 따라 다른 탭이 표시됩니다.
| 탭 | 설명 | 해당 노드 |
|---|---|---|
| 설정 | 노드의 핵심 설정 | 모든 노드 |
| 인증 | 인증 정보 선택 | 트리거(앱 이벤트), 스킬 |
| 테스트 | 테스트 데이터 설정 | 트리거 |
| 스킬 | 할당할 스킬 선택 | AI 에이전트 |
노드 추가¶
새 노드를 추가하는 3가지 방법:
방법 1: + 버튼 (가장 많이 사용)¶
기존 노드 하단의 + 버튼을 클릭하면 노드 선택 메뉴가 나타납니다. 노드를 선택하면 자동으로 엣지가 연결됩니다.
방법 2: 캔버스 더블 클릭¶
캔버스 빈 영역을 더블 클릭하면 노드 선택 메뉴가 나타납니다. 이 방법은 엣지가 자동 연결되지 않으므로 수동으로 연결해야 합니다.
방법 3: 엣지 드래그¶
노드의 출력 핸들에서 빈 영역으로 드래그하면 노드 선택 메뉴가 나타납니다.
노드 타입 선택 메뉴¶
| 노드 | 용도 |
|---|---|
| AI 에이전트 | LLM 기반 AI 작업 |
| 스킬 | 단일 기능 직접 실행 |
| 조건 (IF/ELSE) | 데이터 값에 따른 분기 |
| 텍스트 분류 | AI 기반 텍스트 분류 |
| 반복 (Iterator) | 배열 데이터 순회 |
| 파일 검색 | 지식 베이스 검색 (RAG) |
| 응답 | 웹훅 HTTP 응답 정의 |
| 메모 | 설명/주석 용도 |
트리거 노드
트리거 노드는 워크플로우당 하나만 존재하며, 워크플로우 생성 시 자동으로 추가됩니다. 노드 추가 메뉴에는 표시되지 않습니다.
노드 연결 (엣지)¶
노드 간 연결을 만드는 방법:
- 소스 노드의 출력 핸들(노드 하단의 원형 포인트)에 마우스를 올립니다.
- 드래그하여 대상 노드의 입력 핸들(노드 상단의 원형 포인트)에 놓습니다.
분기 연결¶
일부 노드는 여러 출력 핸들을 가집니다:
| 노드 | 출력 핸들 |
|---|---|
| 조건 | True 핸들, False 핸들 |
| 텍스트 분류 | 카테고리별 핸들 (카테고리 수만큼) |
| 반복 | 반복 본체 핸들, 완료 후 핸들 |
엣지 삭제¶
엣지를 클릭하여 선택한 후 Delete 또는 Backspace 키를 누릅니다.
노드 설정¶
노드를 클릭하면 우측 패널에 설정 UI가 표시됩니다.
AI 에이전트 노드¶
| 설정 | 설명 |
|---|---|
| LLM 모델 | 제공자(OpenAI/Anthropic/Google/xAI)와 모델 선택 |
| 시스템 프롬프트 | 에이전트의 역할과 규칙 정의 |
| 입력 프롬프트 | 실행 시 전달할 메시지 (변수 참조 가능) |
| 스킬 할당 | 에이전트가 사용할 스킬 선택 및 파라미터 설정 |
스킬 노드¶
| 설정 | 설명 |
|---|---|
| 스킬 선택 | 실행할 스킬 선택 (이메일 전송, DB 조회 등) |
| 인증 정보 | 필요한 인증 정보 연결 |
| 파라미터 | 스킬별 입력 파라미터 (고정값 또는 변수) |
조건 노드¶
| 설정 | 설명 |
|---|---|
| 조건식 | 변수 비교 또는 JavaScript 표현식 |
| True 경로 | 조건이 참일 때 실행할 노드 |
| False 경로 | 조건이 거짓일 때 실행할 노드 |
키보드 단축키¶
| 단축키 | 기능 |
|---|---|
Ctrl+S / Cmd+S |
워크플로우 저장 |
Ctrl+Z / Cmd+Z |
실행 취소 |
Delete / Backspace |
선택한 노드/엣지 삭제 |
Space (드래그) |
캔버스 패닝 |
| 마우스 휠 | 줌 인/아웃 |