워크플로 스튜디오

워크플로 스튜디오가 곧 캔버스입니다. 워크플로는 방향이 있는 그래프입니다: 자료 노드가 변환으로 흘러가고, 변환은 다시 다른 변환이나 조합 노드로 이어지며, 말단 노드에 내가 원하는 최종 출력이 담깁니다.

워크플로 구성하기

  1. 자료 추가. 생성 모드에서 스마트 아일랜드의 추가 툴바를 열고 필요한 모달리티(텍스트, 이미지, 영상, 오디오, 문서, URL, 3D 모델)를 고릅니다. 클릭할 때마다 뷰포트 중앙에 노드가 하나씩 추가됩니다.
  2. 선택 후 변환. 자료 노드를 클릭합니다. 스마트 아일랜드의 추가 툴바가 컨텍스트 작업으로 바뀝니다 — 예를 들어 텍스트 노드를 선택하면 이미지 생성, 영상 생성, 음악 생성 등이 보입니다. 하나를 클릭하면 선택한 노드에 이미 연결된 변환 노드가 생깁니다.
  3. 직접 연결. 출력 핸들(노드의 오른쪽 가장자리)에서 입력 핸들(다른 노드의 왼쪽 가장자리)로 드래그해도 됩니다. 연결은 모달리티와 형태가 맞을 때만 성립합니다 — ABI가 기준입니다.
  4. 입력 설정. 노드를 클릭해 파라미터를 편집합니다: 프롬프트 텍스트, 모델 드롭다운, 슬라이더, 파일 선택기. 어떤 필드가 보이는지는 그 노드의 ABI 스키마가 정합니다.

연결 규칙

  • 출력 핸들의 이름은 out:<field>입니다(예: out:image, out:text).
  • 입력 핸들의 이름은 in:<field>입니다.
  • out:<field>의 모달리티와 형태가 대상 노드의 in:<field>와 맞을 때만 연결이 유효합니다. 캔버스는 유효하지 않은 엣지를 만들지 않습니다.
  • 출력 하나는 여러 입력으로 나뉘어 갈 수 있지만, 입력 하나는 업스트림 엣지를 최대 하나만 받습니다.
  • 입력이 N개인 노드(예: 이미지 N장을 받는 image-fusion)에는 라벨이 붙은 입력 핸들이 N개 있습니다.

저장

워크플로 제목은 상단 중앙에 있습니다. 클릭하면 제목 메뉴가 열립니다:

  • Save — 현재 캔버스 + 노드 상태를 새 워크플로로 SQLite에 기록하거나 기존 것을 덮어씁니다.
  • Save as… — 캔버스를 새 이름의 워크플로로 포크합니다.
  • Rename — 워크플로 제목을 바꿉니다.
  • Delete — 워크플로를 데이터베이스에서 삭제합니다(참조하던 자료는 포트폴리오에 남습니다).

캔버스 위치와 줌은 브라우저가 자동 저장하고, 노드 파라미터 편집은 포커스가 벗어날 때 자동 저장됩니다. 명시적인 Save는 전체 그래프를 DB의 버전 관리된 행으로 커밋합니다.

불러오기

왼쪽 사이드바의 Workflow 버튼(첫 번째 아이콘)을 엽니다. 대화상자에 저장된 워크플로가 나열되고, 클릭하면 불러옵니다.

실행

실행 모드(헤더의 Sparkles → Play 토글)로 전환합니다.

  1. 스마트 아일랜드의 Play를 클릭합니다.
  2. 저장되지 않은 편집이 있으면 먼저 저장할지 묻는 확인 대화상자가 나타납니다.
  3. 워크플로 익스포터가 그래프를 위상 순서로 순회하며, 캐시된 결과가 없는 노드마다 작업을 하나씩 만듭니다.
  4. 각 작업은 Modal(변환 노드)이나 LLM 제공자(gen-text 등)로 보내집니다.
  5. 출력이 내 컴퓨터로 돌아오면 해당 노드가 결과로 업데이트되며 초록색으로 켜집니다. 오류가 나면 빨간색으로 켜지고 메시지는 Tasks 패널에 나타납니다.

화면 상단의 토스트가 전체 진행 상황을 보여 주고, 여기서 실행을 중지할 수 있습니다.

캐싱

바뀌지 않은 업스트림 노드는 다음 실행에서 캐시된 출력을 반환합니다. 특정 노드만 다시 실행하려면:

  • 그 노드의 입력 값(프롬프트, 파라미터, 첨부한 자료) 중 하나를 바꾸거나,
  • 우클릭 → Clear cache(구현 예정 — 지금은 노드를 지우고 다시 추가하는 것이 대안입니다).

가져오기 / 내보내기

워크플로 익스포터(tongflow 저장소의 src/lib/workflow/exporter.ts)는 캔버스 + 노드 스펙을 다른 컴퓨터에서 다시 가져올 수 있는 JSON으로 직렬화합니다. Discord에서 워크플로를 공유하거나 GitHub 이슈에 첨부할 때 유용합니다.

이동, 확대/축소, 다중 선택

  • 이동(Pan) — 가운데 버튼 드래그, 스페이스 + 드래그, 또는 두 손가락 스크롤.
  • 확대/축소(Zoom) — 핀치 또는 스크롤 휠. 100% / 화면 맞춤은 오른쪽 하단 컨트롤을 씁니다.
  • 다중 선택 — 박스 드래그 또는 Shift 클릭.
  • 삭제 — 노드를 선택하고 Backspace나 Delete를 누릅니다. 사이의 엣지는 자동으로 정리됩니다.
  • 복사 / 붙여넣기 — Cmd/Ctrl+C, Cmd/Ctrl+V. 붙여넣은 노드는 원본에서 조금 비껴 나타납니다.

관련 문서