2nd/10_Wiki/Topics/Comfyui/Litegraph Standard.md

---
id: litegraph-standard
title: "Litegraph Standard"
category: "10_Wiki/Topics"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["Litegraph Format", "Frontend JSON Format"]
duplicate_of: ""
source_trust_level: "B"
confidence_score: 0.90
created_at: 2026-05-19
updated_at: 2026-05-19
review_reason: ""
merge_history: []
tags: ["research", "Comfyui workflow json 생성 방법", "Litegraph", "Frontend"]
raw_sources: ["NotebookLM Synthesis"]
applied_in: ["comfyui-frontend-package/src/scripts/metadata", "ComfyUI Settings/Lite Graph"]
github_commit: ""
---

# [[Litegraph Standard]]

## 🎯 한 줄 통찰 (One-line insight)
Litegraph Standard는 ComfyUI의 시각적 워크플로우를 구성하는 노드의 배치, 크기, 그룹 등 **UI 메타데이터를 포함한 그래프 구조를 정의하는 프론트엔드 직렬화 규격**이다 [1, 2].

## 🧠 핵심 개념 (Core concepts)
- **Frontend JSON (workflow.json):** 사용자 상호작용 및 시각화를 위해 설계된 포맷으로, Litegraph 표준을 준수하여 노드의 좌표와 레이아웃 정보를 보존한다 [1, 3].
- **Visual Metadata:** 노드의 위치(pos), 크기(size), 색상, 그룹 구조, 노드의 축소(collapsed) 또는 고정(pinned) 상태와 같은 시각적 속성을 포함한다 [1, 4].
- **Explicit Link Objects:** 노드 간의 연결을 별도의 배열 내에서 명시적인 연결 객체(link ID)로 표현하여 그래프 시각화를 용이하게 한다 [1, 3, 5].
- **Node-Based Interface Compatibility:** Maya, Blender, Unreal Engine 등 타 시각적 프로그래밍 환경과 유사한 그래프 시각화 및 조작 패러다임을 제공한다 [6].

## 🧩 추출된 패턴 (Extracted patterns)
- **형식의 이분화 (Serialization Bifurcation):** 워크플로우를 저장할 때 시각적 편집을 위한 Litegraph 기반 '프론트엔드 포맷'과 실행 효율을 위한 'API 포맷'으로 구분하여 관리하는 패턴이 발견된다 [1].
- **스키마 제약 조건 (Schema Constraints):** JSON v1.0 규격에 따라 노드 객체는 고유 ID, 클래스 타입, 좌표, 크기, 실행 순서(order), 모드 등을 반드시 정의해야 한다 [4].
- **메타데이터 임베딩 (Metadata Embedding):** PNG 파일의 tEXt 또는 zTXt 청크에 Litegraph 형식의 워크플로우 데이터를 삽입하여 이미지 자체가 백업 및 공유 수단이 되도록 설계한다 [7, 8].

## 📖 세부 내용 (Details)
Litegraph 표준은 ComfyUI 워크플로우의 **'소스 코드' 역할을 수행하는 프론트엔드 JSON 포맷**의 기술적 근간이다 [1, 9]. 이 표준은 노드 기반의 시각적 프로그래밍 환경에서 노드 간의 데이터 흐름뿐만 아니라, 사용자가 구성한 캔버스 상의 시각적 질서를 보존하는 데 중점을 둔다 [1, 10].

주요 기술적 특성은 다음과 같다:
- **데이터 구조:** 루트 레벨에서 `nodes` 배열과 `links` 배열을 포함하며, 각 노드는 캔버스 상의 X, Y 좌표(`pos`)와 너비, 높이(`size`) 정보를 보유한다 [4, 5].
- **연결 방식:** 노드 내부의 `inputs`와 `outputs`는 단순한 참조가 아닌, 전역 `links` 배열에 정의된 고유한 링크 ID를 통해 상호 연결된다 [5]. 이는 API 포맷에서 입력값에 소스 노드 정보를 직접 내장하는 방식과 대조적이다 [1].
- **사용자 경험 지원:** 그룹화 기능 및 노드 상태(Active, Bypassed 등)를 지원하여 복잡한 워크플로우의 가독성을 높인다 [4]. 
- **호환성 및 확장:** ComfyUI 설정 메뉴에는 'Lite Graph' 관련 전용 설정 카테고리가 존재하며, 이를 통해 인터페이스 동작을 제어할 수 있다 [11, 12].

## ⚖️ 모순 및 업데이트 (Contradictions & updates)
- **실행 호환성 문제:** Litegraph 표준 기반의 JSON(workflow.json)은 노드 좌표 등 불필요한 메타데이터가 많아 백엔드 엔진이 직접 해석하기에 비효율적이며, 종종 `/prompt` 엔드포인트에서 오류를 발생시킨다 [1, 9, 13]. 따라서 서버 실행을 위해서는 이를 API 포맷으로 변환해야 한다 [14].
- **데이터 취약성:** PNG 이미지에 포함된 Litegraph 메타데이터는 표준 이미지 편집기나 소셜 미디어 플랫폼에서 압축/편집 시 쉽게 손실될 수 있다는 점이 지적된다 [7, 8].

## 🛠️ 적용 사례 (Applied in summary)
- **comfyui-frontend-package:** 프론트엔드 자바스크립트 컨텍스트 내의 `src/scripts/metadata` 경로에서 공식적인 메타데이터 파싱 로직으로 적용됨 [15].
- **ComfyUI 설정 메뉴:** 인터페이스 내 Settings > Lite Graph 섹션을 통해 관련 기능이 구현되어 있음 [11].
- **workflow.json 내보내기:** ComfyUI 제어판의 'Export' 기능을 통해 생성되는 모든 표준 워크플로우 파일의 규격으로 사용됨 [16, 17].

## ✅ 검증 상태 및 신뢰도
- **상태:** draft
- **검증 단계:** conceptual (공식 문서 및 아키텍처 분석을 통해 확인됨)
- **출처 신뢰도:** B (Official Documentation 및 기술 블로그 분석 결과)
- **중복 검사 결과:** 신규 생성

## 🔗 관련 문서 링크 (Related document links)

### 상위/유사 개념
#### [아키텍처/기반 기술]
- [[ComfyUI Workflow JSON Generation and Serialization]]
  - 연결 이유: Litegraph 표준이 직렬화 프로세스의 핵심 구성 요소임.
  - 이 개념을 통해 더 깊게 이해할 수 있는 부분: 프론트엔드와 API 포맷 간의 기술적 차이점.
- [[Visual Programming Environment]]
  - 연결 이유: Litegraph가 지향하는 사용자 인터페이스 패러다임.
  - 이 개념을 통해 더 깊게 이해할 수 있는 부분: 노드 기반 시스템의 범용적 설계 원리.

#### [구현/활용 도구]
- [[ComfyUI Manager]]
  - 연결 이유: Litegraph JSON을 파싱하여 누락된 커스텀 노드를 식별하고 관리함.
  - 이 개념을 통해 더 깊게 이해할 수 있는 부분: 워크플로우 종속성 해결 메커니즘.

### 심층 후속 질문 (Deeper Research Questions)
- Litegraph 표준에서 정의하는 `links` 배열의 6가지 인덱스 값은 각각 구체적으로 어떤 데이터를 의미하는가? [5]
- API 포맷(workflow_api.json)으로 변환 시 Litegraph의 어떤 데이터가 가장 먼저 폐기되는가? [1, 3]
- `comfyui-frontend-package`의 자바스크립트 로직은 Litegraph 데이터를 어떻게 검증(Validation)하는가? [15]
- 노드 상태(`mode`) 중 'Bypassed' 처리가 Litegraph 직렬화 결과에 미치는 영향은 무엇인가? [18]
- 0.4 버전에서 1.0 버전으로의 Litegraph 스키마 변경 시 주요 차이점은 무엇인가? [19, 20]

### 실무 적용 맥락 (Practical Application Contexts)
- **Implementation:** 커스텀 노드 개발 시 `INPUT_TYPES`를 Litegraph 규격에 맞춰 정의하여 UI 상에서 올바르게 렌더링되도록 함 [21].
- **System Design:** 워크플로우 관리 시스템 설계 시, 시각적 편집용 데이터와 실행 전용 데이터를 분리하여 저장하는 구조를 채택함 [1].
- **Learning Path:** 초보자가 워크플로우 구조를 이해하기 위해 JSON 파일을 직접 열어 노드 ID와 연결 관계를 추적하는 학습 도구로 활용 가능함 [22].

### 인접 주변 주제 (Adjacent Topics)
- [[Directed Acyclic Graph (DAG)]]
  - 확장 방향: Litegraph가 시각적으로 표현하는 데이터 흐름의 수학적 모델.
- [[Metadata Stripping]]
  - 확장 방향: 이미지 공유 과정에서 Litegraph 정보가 소실되는 보안 및 기술적 이유 분석.

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