인터페이스 개요

http://localhost:3000을 열면 /workspace에 도착합니다. 화면은 네 개의 영역으로 나뉩니다:

1. 왼쪽 사이드바 — 버튼 세 개: Workflow, Tasks, Portfolio(자료).
2. 상단 헤더 — 워크플로 제목 메뉴, 모드 전환(생성 / 실행).
3. 캔버스 — 노드를 놓고 엣지로 잇는 무한 캔버스.
4. 스마트 아일랜드 — 선택 상태와 모드에 따라 내용이 바뀌는 하단 플로팅 독.

왼쪽 사이드바 (왼쪽 상단)

아이콘 버튼 세 개가 다음 순서로 놓여 있습니다:

자료 버튼이 스마트 아일랜드에 있다고 안내하던 예전 문서를 보고 왔다면, 그 내용은 바뀌었습니다. 지금은 왼쪽 사이드바의 세 번째 아이콘입니다.

상단 헤더

워크플로 제목 메뉴는 상단 중앙에 있습니다. 워크플로 이름을 클릭하면 현재 캔버스의 이름 변경, 저장, 포크가 가능합니다.

그 오른쪽에 모드 전환이 있습니다:

• 생성 모드(Sparkles 아이콘) — 기본 모드. 노드를 배치하고 연결하며 워크플로를 준비합니다. 스마트 아일랜드에 추가 툴바가 나타납니다.
• 실행 모드(Play 아이콘) — 실행을 시작하는 모드. 스마트 아일랜드가 Play 버튼 하나로 접힙니다.

두 모드의 자세한 차이는 워크플로 모드를 참고하세요.

캔버스

주 작업 영역은 React Flow 기반의 무한 캔버스로, 자유롭게 이동하고 확대/축소할 수 있습니다. 기본 조작:

• 이동(Pan) — 가운데 버튼 드래그, 스페이스를 누른 채 드래그, 또는 트랙패드 두 손가락 스크롤.
• 확대/축소(Zoom) — 핀치, 스크롤 휠, 또는 오른쪽 하단의 확대/축소 컨트롤.
• 노드 선택 — 클릭. 무엇을 선택했는지에 따라 스마트 아일랜드에 표시되는 내용이 달라집니다.
• 다중 선택 — 여러 노드 위로 박스를 드래그하거나 Shift 클릭.
• 연결 — 출력 핸들(노드의 오른쪽)에서 입력 핸들(다른 노드의 왼쪽)로 드래그합니다. 연결은 ABI 기준으로 검증됩니다: 텍스트 출력은 텍스트 입력에만, 이미지는 이미지에만 연결됩니다.

스마트 아일랜드 (하단)

캔버스 하단의 플로팅 독입니다. 모드와 선택 상태에 따라 내용이 바뀝니다:

• 생성 모드 + 아무것도 선택 안 함 → 추가 툴바(아이콘 일곱 개: 3D 모델, 문서, 이미지, 텍스트, 영상, 오디오, 링크). 아무거나 클릭하면 뷰포트 중앙에 새 자료 노드가 추가됩니다.
• 생성 모드 + 노드 하나 이상 선택 → 선택한 노드에 맞는 컨텍스트 작업(예: 텍스트 노드를 선택하면 “변환 → 이미지 생성”, 오디오와 영상을 선택하면 “조합 → 립싱크”).
• 실행 모드 → 큼직한 Play 버튼 하나. 워크플로 실행 중에는 버튼이 여러 색으로 숨 쉬듯 일렁입니다.

버튼 전체 목록은 스마트 아일랜드를 참고하세요.

노드의 구조

캔버스의 모든 노드는 다음으로 구성됩니다:

• 노드 유형과 이동/드래그용 작은 핸들이 있는 헤더.
• 왼쪽의 입력 핸들 — 노드가 ABI에 선언한 타입 지정 입력마다 하나씩.
• 오른쪽의 출력 핸들 — 타입 지정 출력마다 하나씩.
• 노드 유형에 따라 달라지는 본문 — 텍스트 입력, 이미지 미리보기, 오디오 파형, 영상 플레이어, 문서 파일명 등.
• 이 노드에 연결된 작업이 실행되는 동안 켜지고, 끝나면 결과나 오류를 보여 주는 상태 표시기.

노드 유형별 입력/출력 전체 목록은 노드 유형을 참고하세요.

무엇이 어디에 저장되나

• 워크플로와 노드 위치 — data/tongflow.db(SQLite).
• 업로드한 자료 — 디스크의 data/uploads/. 포트폴리오가 이를 참조합니다.
• 작업 실행 이력 — 같은 SQLite 데이터베이스. Zap(Tasks) 버튼으로 확인합니다.

외부 변환 노드(Modal / LLM)에 직접 연결하지 않는 한, 어떤 데이터도 내 컴퓨터를 떠나지 않습니다.