---
id: frontend-json-(workflow.json)
title: "Frontend JSON (workflow.json)"
category: "10_Wiki/Topics"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["workflow.json", "UI Format JSON"]
duplicate_of: ""
source_trust_level: "B"
confidence_score: 0.85
created_at: 2026-05-20
updated_at: 2026-05-20
review_reason: ""
merge_history: []
tags: ["research", "Comfyui workflow json 생성 방법"]
raw_sources: ["NotebookLM Synthesis"]
applied_in: ["Mystic pipeline root directory", "RunComfy FLUX workflow example (flux_workflow.json)", "ComfyUI Official RFCs repository", "ComfyUI Output folder (metadata embedding)"]
github_commit: ""
---

# [[Frontend JSON (workflow.json)]]

## 🎯 한 줄 통찰 (One-line insight)
ComfyUI의 시각적 작업 공간 전체(노드 좌표, 그룹, 링크 구조)를 Litegraph 표준에 따라 보존하여 사용자의 편집, 재구성 및 커뮤니티 협업을 가능하게 하는 종합적인 시각적 설계도이다. [1-3]

## 🧠 핵심 개념 (Core concepts)
- **Litegraph 표준 기반 시각적 메타데이터**: 노드의 캔버스 좌표(`pos`), 크기(`size`), 색상, 그룹화 구조 및 노드 확장/축소 상태와 같은 UI 전용 정보를 포함한다. [1, 2, 4, 5]
- **명시적 링크 배열 (Explicit Link Representation)**: 노드 간의 연결을 별도의 `links` 배열 내 개별 객체로 관리하며, 각 링크는 고유 ID를 통해 원본 노드와 대상 노드의 슬롯을 정의한다. [1, 2, 6, 7]
- **인간 중심의 교환 포맷**: 시각적 편집과 공유를 목적으로 설계되었으며, 모델 가중치와 독립적으로 워크플로우 로직을 작고 가독성 있는 텍스트 파일로 아카이브할 수 있게 한다. [6, 8, 9]

## 🧩 추출된 패턴 (Extracted patterns)
- **결과물 내 로직 자가 수용 패턴 (Metadata Embedding)**: 생성된 이미지(PNG/WebP)의 `tEXt` 또는 `zTXt` 청크에 Frontend JSON을 주입하여, 이미지 자체가 해당 이미지를 만든 로직을 운반하는 컨테이너 역할을 수행하게 한다. [3, 10, 11]
- **비가역적 정보 손실 패턴 (Frontend to API Transformation)**: Frontend JSON은 실행 최적화된 API JSON으로 변환 가능하지만, 역변환 시 시각적 레이아웃 정보는 복구할 수 없는 비가역적 관계를 가진다. [12, 13]
- **의존성 탐지 및 해결 휴리스틱**: 외부 JSON 로드 시 `class_type`을 로컬 레지스트리와 대조하여 누락된 커스텀 노드를 식별하고(Red Nodes), ComfyUI-Manager를 통해 이를 일괄 설치하는 복구 패턴이 존재한다. [14-16]

## 📖 세부 내용 (Details)
Frontend JSON(주로 `workflow.json`으로 명명됨)은 ComfyUI 웹 인터페이스의 상태를 저장하는 표준 포맷이다. [1, 17] 이 파일은 사용자가 구성한 그래프의 시각적 배치와 모든 매개변수를 캡처하는 포괄적인 청사진 역할을 한다. [8]

### 1. 기술적 구조 및 속성
- **노드 배열 (`nodes`)**: 워크플로우를 구성하는 개별 객체들의 리스트이다. [5]
    - `id`: 그래프 탐색을 위한 고유 식별자(숫자 문자열)이다. [4, 18]
    - `type`: 노드 레지스트리의 클래스 이름과 매핑된다. [4, 5]
    - `pos` & `size`: 캔버스 렌더링을 위한 [x, y] 좌표 및 치수이다. [4, 5]
    - `widgets_values`: 슬라이더, 텍스트 박스 등 사용자 입력 값을 저장하는 배열이다. [4, 5]
- **링크 시스템 (`links`)**: 별도의 최상위 배열에서 관리되며, `origin_id`, `origin_slot`, `target_id`, `target_slot`을 정의하여 데이터 흐름을 명시한다. [7]

### 2. 생성 및 로드 방법
- **수동 내보내기**: 제어판 메뉴의 'Export' 옵션이나 `Ctrl + S` (macOS는 `Cmd + S`) 단축키를 통해 현재 그래프 상태를 JSON으로 다운로드할 수 있다. [5, 19, 20]
- **이미지 기반 추출**: ComfyUI에서 생성된 PNG 파일을 캔버스에 드래그 앤 드롭하면 내장된 메타데이터를 분석하여 워크플로우가 즉시 재구성된다. [19, 21-23] `exiftool`과 같은 CLI 도구를 사용하여 바이너리 태그에서 직접 추출할 수도 있다. [24, 25]
- **자동 생성**: 최근에는 자연어 설명을 LLM(Qwen2.5 등)이 해석하여 논리적 그래프 구조를 합성하고, 이를 실행 가능한 JSON으로 컴파일하는 기술이 도입되고 있다. [26-28]

### 3. API JSON(workflow_api.json)과의 차이
- **목적**: Frontend JSON은 시각적 편집용이며, API JSON은 서버 측 실행 및 프로그래밍 방식의 호출에 최적화되어 있다. [1, 6, 9, 29]
- **메타데이터**: API 포맷은 노드 위치, 크기, 그룹 등 UI 관련 데이터를 제거하여 파일 크기를 압축한다. [1, 30]
- **연결 방식**: API 포맷은 링크를 별도 객체가 아닌 노드 입력 내의 직접적인 참조(Origin 노드 ID 및 슬롯)로 임베딩한다. [1, 6, 29]

## ⚖️ 모순 및 업데이트 (Contradictions & updates)
- **메타데이터 휘발성**: 생성된 이미지 내의 JSON 데이터는 일반적인 이미지 편집기, 소셜 미디어 플랫폼, 또는 파일 압축 유틸리티를 거칠 때 삭제될 위험이 크다. [3, 11, 21]
- **버전 호환성 문제**: ComfyUI의 빈번한 업데이트로 인해 구버전의 JSON 파일이 최신 버전에서 정상적으로 작동하지 않을 수 있으며, 특히 커스텀 노드 클래스 이름의 변경이 주요 원인이 된다. [19, 31]
- **실행 제한**: Frontend JSON을 API 엔드포인트(`/prompt`)에 직접 전달하면 실행 그래프가 아니라는 이유로 오류가 발생하므로, 반드시 'Dev mode'를 활성화하여 API 포맷으로 변환하거나 서버 측 변환기를 거쳐야 한다. [12, 32]

## 🛠️ 적용 사례 (Applied in summary)
- **Mystic 파이프라인**: 서버리스 엔드포인트 배포 시 메인 디렉토리에 `workflow.json`을 포함하여 관리한다. [33]
- **RunComfy 플랫폼**: FLUX 워크플로우 예시로 `flux_workflow.json` 파일이 제공되며, 이는 전체 UI 상태를 포함하는 표준 Frontend 포맷이다. [9, 30]
- **추출 도구 활용**: `exiftool -b -workflow input.png > workflow.json` 명령어를 통해 이미지 메타데이터에서 Frontend JSON을 물리적으로 분리하는 방식이 실무에서 사용된다. [24, 25]
- **ComfyUI-to-Python-Extension**: Frontend JSON의 시각적 메타데이터를 포함한 상태로 Python 스크립트로 변환하여 드래그 앤 드롭 재가져오기 기능을 유지한다. [34]

## ✅ 검증 상태 및 신뢰도
- **상태:** draft
- **검증 단계:** conceptual (실제 적용 사례 발견 시 applied/validated로 승격 가능)
- **출처 신뢰도:** B (Official Documentation / Primary Source via NotebookLM)
- **중복 검사 결과:** 신규 생성 (New discovery)

## 📝 변경 이력 (Change history)
- 2026-05-20: Initial draft generated via Datacollector_MAC P-Reinforce engine.