---
id: frontend-format-(workflow.json)
title: "Frontend Format (workflow.json)"
category: "10_Wiki/Topics"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: []
duplicate_of: ""
source_trust_level: "B"
confidence_score: 0.85
created_at: 2026-05-19
updated_at: 2026-05-19
review_reason: ""
merge_history: []
tags: ["research", "Comfyui workflow json 생성 방법"]
raw_sources: ["NotebookLM Synthesis"]
applied_in: ["comfyui-workflow-to-api-converter-endpoint", "ComfyUI-to-Python-Extension", "RunComfy Serverless API"]
github_commit: ""
---

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

## 🎯 한 줄 통찰 (One-line insight)
Frontend Format(`workflow.json`)은 ComfyUI의 **Litegraph 표준**을 따르며, 노드 간의 실행 로직뿐만 아니라 캔버스상의 시각적 레이아웃과 그룹 정보를 모두 보존하는 **인간 중심의 공유 및 편집용 블루프린트**이다 [1-3].

## 🧠 핵심 개념 (Core concepts)
- **시각적 메타데이터(UI Metadata) 포함**: 노드의 위치(`pos`), 크기(`size`), 색상, 그룹화 구조 및 노드의 축소(collapsed) 또는 고정(pinned) 여부와 같은 시각적 상태 정보를 모두 포함한다 [1, 4, 5].
- **Litegraph 표준 준수**: 웹 인터페이스에서의 시각적 렌더링 및 조작에 최적화된 데이터 구조를 따른다 [1, 2].
- **명시적 링크 표현 (Explicit Links)**: 연결을 노드 내부에 매핑하는 대신, 별도의 `links` 배열 내에서 고유 ID를 가진 명시적인 연결 객체로 관리한다 [2, 4, 6].
- **가역성(Reversibility)**: 생성된 이미지 메타데이터에 포함되어 드래그 앤 드롭만으로 원본 노드 그래프를 완벽하게 재구성할 수 있게 한다 [7-9].

## 🧩 추출된 패턴 (Extracted patterns)
- **포맷의 이분화(Bifurcation)**: ComfyUI는 사용자의 시각적 편집을 위한 'Frontend 포맷'과 서버의 실행 효율성을 위한 'Backend/API 포맷'을 엄격히 구분하여 운영한다 [1, 10].
- **메타데이터 임베딩(Metadata Embedding)**: 생성된 PNG/WebP 파일의 `tEXt` 또는 `zTXt` 청크에 프론트엔드 워크플로우를 저장하여 이미지가 곧 소스 코드가 되는 패턴을 형성한다 [8, 9, 11].
- **의존성 기반 노드 ID 할당**: 각 노드는 생성 순서 또는 사용자 정의에 따라 고유한 숫자형 문자열 ID(예: "37")를 부여받아 그래프 탐색의 키로 활용된다 [4, 5, 12].

## 📖 세부 내용 (Details)
프론트엔드 포맷은 ComfyUI 웹 인터페이스에서 **기본 저장(Ctrl+S)** 시 생성되는 표준 규격이다 [13]. 이는 사용자 경험을 유지하기 위해 설계되었으며, 워크플로우를 재로드했을 때 모든 노드가 정확한 좌표에 나타나도록 보장한다 [13, 14].

**JSON 스키마 v1.0 구성 요소 [5, 6, 15]**:
- **nodes**: 개별 노드 객체의 배열로 구성된다.
    - `id`: 그래프 탐색을 위한 고유 식별자.
    - `type`: 노드 레지스트리에 매핑된 클래스 이름.
    - `pos`/`size`: 캔버스 좌표 및 시나리오 렌더링 크기.
    - `widgets_values`: 슬라이더, 텍스트 박스, 토글 등 사용자 입력값의 배열.
    - `order`: 실행 또는 렌더링 권장 순서.
    - `mode`: 노드의 활성/비활성/바이패스 상태.
- **links**: 노드 간의 연결을 정의하는 상위 레벨 배열로, `[origin_id, origin_slot, target_id, target_slot, type]` 등의 정보를 포함하는 6개 항목 배열 또는 구조화된 객체 형태를 띤다 [6].

이 포맷은 **API 포맷과 대조**적이다. API 포맷은 시각적 메타데이터를 제거하고 실행에 필요한 로직만 남긴 '스트림라인' 버전으로, 프론트엔드 파일을 API 엔드포인트에 직접 보낼 경우 오류가 발생할 수 있다 [1, 14, 16]. 따라서 전문적인 자동화 환경에서는 프론트엔드 포맷을 원본(Source of truth)으로 관리하고, 실행 직전에 API 포맷으로 변환하는 프로세스가 권장된다 [17, 18].

## ⚖️ 모순 및 업데이트 (Contradictions & updates)
- **버전 호환성 문제**: ComfyUI의 잦은 업데이트로 인해 구버전에서 생성된 프론트엔드 JSON 파일이 최신 버전에서 제대로 작동하지 않거나 시각적으로 깨지는 현상이 발생할 수 있다 [19].
- **데이터 유실 위험**: 이미지에 포함된 프론트엔드 메타데이터는 소셜 미디어나 이미지 편집기(GIMP 등)를 거칠 경우 파일 크기 최적화 또는 개인정보 보호를 이유로 제거되는 경우가 많아 가역성이 파괴될 수 있다 [9, 20].
- **API 실행 불가**: 프론트엔드 JSON은 `/prompt` 엔드포인트에서 직접 실행할 수 없으며, 반드시 API 포맷으로의 변환 과정이 선행되어야 한다 [16, 17].

## 🛠️ 적용 사례 (Applied in summary)
- **comfyui-workflow-to-api-converter-endpoint**: `workflow.json`(프론트엔드 포맷)을 입력받아 서버 측에서 API 포맷으로 자동 변환해 주는 커스텀 노드 프로젝트에 적용됨 [16, 18, 21].
- **ComfyUI-to-Python-Extension**: 프론트엔드 메타데이터를 유지하여 생성된 Python 스크립트로 만든 이미지가 다시 ComfyUI로 드래그 앤 드롭될 때 워크플로우를 복구할 수 있도록 구현됨 [11].
- **RunComfy Serverless**: 배포 시 사용자가 업로드한 `workflow.json`에서 레이아웃 정보를 추출하고 시각화 가이드로 활용함 [3, 10].

## ✅ 검증 상태 및 신뢰도
- **상태:** draft
- **검증 단계:** conceptual (실제 적용 사례 발견으로 applied 단계로 승격 가능)
- **출처 신뢰도:** B (Official Documentation 및 전문 개발자 기술 문서 기반)
- **중복 검사 결과:** 신규 생성 (New discovery)

## 📝 변경 이력 (Change history)
- 2026-05-19: Initial draft generated via Datacollector_MAC P-Reinforce engine. 본 문서는 소스 데이터의 기술적 명세(v1.0 스키마)와 운영 패턴(포맷 이분화)을 중심으로 합성됨.