대부분의 AI 도구는 상자 하나만 줍니다. 프롬프트를 입력하고, 결과 하나를 얻고, 다시 반복하는 식이죠. 아이디어가 한 단계로 끝나는 동안에는 그것으로 충분합니다. 그러나 여섯 개의 숏 내내 똑같아 보여야 하는 캐릭터. 먼저 스토리보드가 되고, 다음에 이미지가 되고, 마지막으로 영상이 되어야 하는 대본. 나란히 놓고 비교하려고 렌더링하고 싶은 스무 가지 변형. 작업이 파이프라인이 되는 순간, 이 '상자 하나' 모델은 무너집니다.
바로 그 틈을 메우려고 만든 것이 Floniks의 워크플로 에디터입니다. 노드를 드래그하고, 출력 포트를 입력 포트에 연결하면 Floniks가 그래프 전체를 대신 실행해 주는 노드 기반 AI 파이프라인 캔버스입니다——여러 모델을, 직렬과 병렬로, 하나의 화면 위에서 말이죠. 이 글은 우리가 이것을 어떻게 바라보는지, 노드가 실제로 무엇을 하는지, 그리고 커다란 그래프에서도 빠른 느낌을 유지하기 위해 내부에서 한 엔지니어링을 둘러보는 안내입니다.
캔버스는 채팅 박스가 아니라 DAG입니다
/editor를 열면 눈앞에 보이는 것은 XYFlow/ReactFlow 위에 구축된 방향성 비순환 그래프(DAG) 캔버스입니다. 모든 노드는 작업 단위이고, 모든 엣지는 데이터 의존성입니다. '비순환'이라는 점이 중요합니다. 데이터는 앞으로 흐르고, 무엇도 자기 자신으로 되돌아오지 않습니다. 바로 이 제약이 그래프를 위상 정렬하고, 입력이 준비되는 즉시 노드를 실행하게 해 줍니다——독립적인 가지들을 하나의 직선으로 몰아넣는 대신 병렬로 돌리는 것이죠.
만드는 일은 드래그로 합니다. 노드를 캔버스로 끌어내고, 그 출력 포트에서 다른 노드의 입력 포트로 드래그하면 연결이 제자리에 착 달라붙습니다. 우리는 호환되는 포트 유형을 자동으로 짝지어 주는 스마트 노드 드래그를 더했습니다. 그래서 이미지 출력은 자연스럽게 이미지 입력에 내려앉으려 합니다——캔버스가 실제로 작동할 연결로 당신을 이끄는 것이죠. 아무 곳에서나 우클릭하면 사이드바를 뒤질 필요 없이 노드 추가 메뉴가 나옵니다. 툴바 자체도 두 갈래로 나뉩니다. Skill 노드(더 높은 수준의, 의도가 담긴 구성 블록)와 API 노드(개별 모델로의 직접 접근)입니다. 어느 높이에서 작업할지는 당신이 고릅니다.
노드의 해부
세 가지 노드 범주가 당신이 만들 것의 대부분을 덮습니다.
입력 노드는 원재료를 들여옵니다. imageInput, videoInput, audioInput은 업로드를 받습니다——하지만 브라우저에서 직접 캡처할 수도 있습니다. 당신의 카메라, 당신의 화면/녹화 도구, 그리고 당신의 마이크에서요. 즉 참조 사진도, 화면 캡처도, 음성 메모도 탭을 떠나지 않고 그래프의 입력이 됩니다.
AI 생성 노드는 모델이 일하는 곳입니다. 각 노드가 카드 위에 노드별 크레딧 비용을 그대로 보여 주므로, 실행을 결정하기 전에 한 번의 실행에 얼마가 들지 알 수 있습니다. 노드에 세밀한 설정이 길게 꼬리를 물 때는, 그것들을 Advanced 토글(is_advanced) 뒤로 숨깁니다——자주 쓰는 컨트롤은 보이는 채로, 깊숙한 노브는 한 번의 클릭 너머에, 카드는 읽기 좋은 채로 둡니다.
파일 출력 노드는 결과가 내려앉는 곳입니다. 스스로 번호를 매겨——File Output1, File Output2, File Output3——여러 갈래의 그래프도 한눈에 읽힙니다.
그래프가 커지면 노드 그룹화가 정신을 붙들어 줍니다. 그룹은 이름과 색이 있는 반투명 영역으로, 한 덩어리로 함께 드래그됩니다. 그래서 '캐릭터 설정'이나 '최종 렌더링'을 상자로 둘러 한 조각처럼 옮길 수 있습니다. 여기에 미리 만들어 둔 기능 노드를 떨어뜨려 넣는 Skill 피커를 곁들이면, 뻗어 나가는 파이프라인도 스파게티가 되는 대신 정돈된 채로 남습니다.
크레딧을 쓰기 전의 검증
렌더링을 기다린 끝에 입력이 틀렸다는 걸 알게 되는 것만큼 끔찍한 일은 없습니다. 그래서 우리는 크레딧 하나가 잔액에서 빠져나가기 전에 문제를 잡아내는 통합 프런트엔드 검증 계층을 만들었습니다. 각 AI 노드에서 모델이 실제로 선택되었는지 확인하고, 노드별 파일 개수 한도를 강제하며(모든 AI 노드는 자신의 max_input_images를 선언합니다), 미디어 길이를 검증해 너무 긴 클립이 실행 도중에 실패하는 대신 미리 표시되게 합니다. 원칙은 단순합니다——고칠 수 있는 실수는 청구서가 아니라 캔버스 위에 떠오르게 한다.
진짜 파이프라인을 가능하게 하는 노드들
범용 노드 유형이 당신을 출발시킵니다. 전용 노드들이야말로 '몇 개의 프롬프트'를 프로덕션 워크플로로 바꿔 주는 것입니다.
- **
characterRegistry**는 숏과 에피소드를 가로질러 캐릭터를 일관되게 유지합니다——캐릭터를 한 번 등록해 재사용하면 장면마다 얼굴이 흔들리지 않습니다. 이것은 모든 멀티 에피소드 AI 스토리의 척추입니다. - **
styleLock**은 한 장면의 시각 스타일을 고정해, 시퀀스가 여러 모습 사이를 떠돌지 않고 하나로 묶이게 합니다. - **
consistencyEval**은 시각적 일관성을 0에서 100까지 자동으로 채점해, 한 묶음의 결과가 정말로 어우러지는지 객관적으로 읽어 줍니다——더는 썸네일을 눈을 가늘게 뜨고 들여다볼 필요가 없습니다. - **
batchRender**는 한 번의 패스로 많은 변형을 렌더링하고, **imageBatch**는 최대 20장의 이미지를 받아 **fileBatchOutput**으로 보내 대량의 결과를 냅니다. 생성하고, 채점하고, 고른다——규모를 갖춰서요. - **
multimodalToVideo**는 이미지·영상·오디오·텍스트 참조를 하나의 생성으로 모으고,@Element1같은@Element태그로 지정합니다. 그래서 모델에게 어느 참조를 근거로 삼아야 할지 정확히 가리킬 수 있습니다. 이것은 진지한 AI 영상 파이프라인의 심장입니다. - **
storyboardSplit**과 **storyboardRowPicker**는 대본을 편집 가능한 스토리보드 테이블로 바꿉니다——서사를 숏으로 쪼갠 뒤, 행을 골라 하류의 생성을 구동합니다. - Inpaint 노드는 내장 마스크 브러시를 갖췄습니다——크기 조절 가능한 브러시, 지우개, 완전한 실행 취소/다시 실행——마스킹이 캔버스 위에서 이뤄지므로 Photoshop을 오갈 일이 없습니다. 주로 편집을 하고 싶다면, 우리의 AI 이미지 편집 가이드가 더 깊이 들어갑니다.
이들 하나하나가 같은 그래프에 배선하는 노드이며, 바로 거기에 핵심이 있습니다. 캐릭터 일관성, 스타일 잠금, 스토리보드, 배치 렌더링, 일관성 채점은 별개의 앱이 아니라——조합되는 노드입니다.
실행되는 모습을 지켜보기
실행을 누르면 그래프가 살아납니다. 실시간 노드 상태, 진행률, 결과가 Server-Sent Events(SSE)로 흘러 돌아오므로, 각 노드가 대기에서 처리 중으로, 다시 완료로 옮겨 가는 것을 실시간으로 봅니다. 제출하는 그 순간, 즉각적인 플레이스홀더 카드가 기록에 떨어집니다. 그래서 '실행을 눌렀다'와 '무언가 일어나고 있다' 사이에 정적의 공백이 결코 생기지 않습니다. 결과는 도착하는 대로 채워집니다.
큰 캔버스를 매끄럽게 유지하기
노드 에디터는 그래프가 무거워져도 반응을 유지할 때라야 비로소 즐겁습니다. 그리고 그것은 의도적인 엔지니어링을 요구했습니다.
첫 번째 주범은 상태였습니다. 우리의 실행 취소/다시 실행과 자동 저장은 매 프레임마다 캔버스 전체 상태를 직렬화하고 있었습니다——노드 다섯 개면 괜찮지만, 쉰 개가 되면 가혹합니다. 우리는 이 프레임마다의 전체 상태 직렬화를 고쳐, 큰 그래프를 편집할 때 더는 끊기지 않게 했습니다. 두 번째는 렌더링이었습니다. 활성 엣지의 광채가 CPU에서 그려지고 있었고, 많은 엣지가 한꺼번에 켜지면 캔버스가 버벅였습니다. 우리는 엣지 광채를 GPU 컴포지팅으로 옮겨, 노드와 라이브 연결이 많아도 캔버스를 매끄럽게 유지했습니다.
일상의 작은 승리도 중요합니다. 당신은 페이지 새로 고침 없이 저장하고, 캔버스 깜빡임 없이 실행합니다——기능 페이지에는 결코 적지 않을 작은 것들이지만, 바로 그것이 '참고 쓰는 도구'와 '눌러앉아 사는 도구'의 차이입니다.
캔버스에서 공유 가능하고 호출 가능한 워크플로로
당신이 만든 그래프는 모두 My Workflows 갤러리에 안착합니다. 거기서 작성자 표기를 곁들인 공유 페이지를 게시할 수 있고, 각 공유에는 'API 및 AI 에이전트로 사용하기' 항목이 포함됩니다——그래서 시각적으로 설계한 워크플로를 개발자를 위한 MCP 및 API를 통해 MCP, REST, Skills로 호출할 수 있습니다. 파이프라인은 일회성이기를 멈추고, 에이전트나 앱이 호출할 수 있는 인프라가 됩니다.
빈 캔버스에서 시작하고 싶지 않다면, 프리셋 템플릿을 둘러보고 그중 하나를 리믹스하세요——에디터에서 열어 모델을 바꾸고, 가지를 다시 연결해 당신의 것으로 만드세요.
왜 그래프가 프롬프트를 이기는가
DAG 캔버스 위에 짓는 더 깊은 이유는 그것이 인상적으로 보이기 때문이 아닙니다. 진짜 창작 작업에는 구조가 있기 때문입니다——의존, 분기, 재사용, 평가——그리고 그래프는 그 구조의 정직한 표현입니다. 프롬프트 박스는 모든 것을 한 단계로 납작하게 만듭니다. 노드 기반 AI 파이프라인은 당신이 정말 의미하는 바를 말하게 해 줍니다. 이 캐릭터는 이 세 개의 숏에 공급되고, 그 숏들은 스타일 잠금되며, 그 묶음은 채점되고, 승자는 최종 렌더링으로 간다. 캔버스는 아이디어의 형태 전체를 담고, Floniks가 그것을 실행합니다.
그것이 보고, 편집하고, 공유하고, 호출할 수 있는 멀티 모델 AI 워크플로입니다. 워크플로 에디터를 열어 첫 그래프를 배선해 보세요.
자주 묻는 질문
Floniks 워크플로 에디터란 무엇인가요?
/editor에 있는 노드 기반 AI 파이프라인 에디터로, DAG(방향성 비순환 그래프) 캔버스 위에 구축되어 있습니다. 노드를 드래그하고 출력 포트를 입력 포트에 연결하면 Floniks가 그래프 전체를 실행합니다——여러 AI 모델을 하나의 화면 위에서 직렬과 병렬로 이어 가면서요.
여러 숏에서 캐릭터를 똑같이 유지하려면 어떻게 하나요?
characterRegistry 노드를 사용하세요. 캐릭터를 한 번 등록하면 숏과 에피소드를 가로질러 재사용할 수 있어 얼굴이 일관되게 유지됩니다. 장면의 시각 스타일을 붙드는 styleLock, 시각적 일관성을 0에서 100까지 자동 채점하는 consistencyEval과 함께 짝지으세요.
설정을 잘못하면 크레딧을 낭비하나요?
에디터는 실행 전에 통합 프런트엔드 검증을 한 차례 돌립니다——모델 선택, 노드별 파일 개수 한도(max_input_images), 미디어 길이를 확인합니다. 문제는 어떤 크레딧이 쓰이기 전에 캔버스 위로 떠오릅니다. 각 AI 노드도 카드에 크레딧 비용을 표시합니다.
워크플로를 에디터 밖에서 실행할 수 있나요?
네. 모든 워크플로는 My Workflows 갤러리에 있으며 공유 페이지와 함께 게시할 수 있습니다. 각 공유에는 'API 및 AI 에이전트로 사용하기' 항목이 포함되어, 파이프라인을 MCP, REST, Skills로 호출할 수 있습니다——개발자를 위한 MCP 및 API를 참고하세요.