시작하기

TongFlow는 내 컴퓨터에서 Next.js 개발 서버로 실행됩니다. 5분 정도면 첫 워크플로가 돌아갑니다.

준비물

  • Node.js 20 이상과 pnpm
  • Modal 계정과 토큰 — modal.com에서 가입하세요. 무료 티어(월 USD 30)에 H100 시간이 넉넉히 포함되어 있어 TongFlow의 GPU 작업 대부분을 감당합니다.
  • LLM API 키 최소 하나 — OpenRouter, Gemini, OpenAI, DeepSeek 중에서 고릅니다. OpenRouter에는 무료 라우팅 티어가 있고, 나머지는 요청당 과금됩니다.

선택 사항: 막히는 부분이 있을 때 #tongflow에서 물어볼 Discord 계정.

1. 클론

git clone https://github.com/tong-io/tongflow
cd tongflow

2. 환경 변수 설정

예제 파일을 복사한 뒤 편집합니다:

cp .env.example .env

반드시 채워야 하는 변수:

변수용도
MODAL_TOKEN_IDModal 워커 인증
MODAL_TOKEN_SECRETModal 워커 인증
다음 중 최소 하나: OPENROUTER_API_KEY / GEMINI_API_KEY(또는 GOOGLE_API_KEY) / OPENAI_API_KEY / DEEPSEEK_API_KEY”Generate text” 노드와 그 밖의 LLM 경유 변환

선택 변수:

  • OPENROUTER_FREE_MODEL — 특정 OpenRouter 무료 라우트 고정
  • OPENAI_CHAT_MODEL — 비워 두면 gpt-4o-mini가 기본값
  • NEXT_PUBLIC_FILE_BASE_URL — 앱 앞단에 CDN을 둘 때 파일 저장소의 기본 URL

3. Modal 인증 (최초 1회)

토큰을 ~/.modal.toml에 기록하는 명령으로, 첫 실행 전에 한 번만 하면 됩니다:

pnpm modal:setup

4. 실행

Node.js 20 이상이 필요합니다.

pnpm install
pnpm dev

http://localhost:3000을 열면 /workspace로 이동합니다.

데이터는 전부 로컬에 남습니다: SQLite는 data/tongflow.db, 업로드 파일은 data/uploads/에 저장됩니다.

5. 첫 워크플로

/workspace가 열리면:

  1. 페이지는 생성 모드로 시작합니다(모드 전환의 Sparkles 아이콘 — 워크플로 모드 참고).
  2. 하단 스마트 아일랜드에 추가 아이콘 일곱 개가 보입니다: 3D / 문서 / 이미지 / 텍스트 / 영상 / 오디오 / 링크.
  3. 텍스트 아이콘(Type 글자 모양)을 클릭해 텍스트 노드를 놓고, “a watercolor portrait of a cat in a library” 같은 프롬프트를 입력합니다.
  4. 텍스트 노드의 출력 핸들에서 빈 캔버스로 드래그 → 이미지 생성 선택 → 이미 연결된 이미지 노드가 생깁니다.
  5. 실행 모드로 전환(Sparkles → Play 아이콘 토글)한 뒤 스마트 아일랜드의 Play 버튼을 클릭합니다.
  6. 작업이 내 Modal 계정으로 실행되고, 결과가 이미지 노드에 표시됩니다.

이것이 전체 흐름입니다. 여기서부터 다른 변환(이미지 → 영상, 이미지 → 3D, 이미지 업스케일)을 이어 붙이거나, 조합 노드(예: 립싱크)로 분기하거나, 워크플로를 저장할 수 있습니다.

무엇이 어디에 있나

  • 워크플로 — data/tongflow.db에 저장됩니다. Workflow 버튼(왼쪽 상단, 버튼 세 개짜리 왼쪽 사이드바)으로 엽니다.
  • 자료 / 포트폴리오 — 업로드한 파일은 포트폴리오 대화상자에 있습니다(왼쪽 상단 FolderOpen 아이콘, 스마트 아일랜드가 아닙니다).
  • 작업 — 실행 이력은 Task 패널에 있습니다(왼쪽 상단 Zap 아이콘).

다음