koriweb
a3f63e56e2
- 10_Wiki/Comfyui/: ComfyUI docs generated via /wikify - 00_Raw/_youtube/: /youtube extraction outputs - Move some 00_Raw originals into 10_Wiki/Topics_meeting; remove empty canvases and stray files Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
61 lines
5.4 KiB
Markdown
61 lines
5.4 KiB
Markdown
---
|
|
id: frontend-format
|
|
title: "Frontend Format"
|
|
category: "10_Wiki/Topics"
|
|
status: "draft"
|
|
verification_status: "conceptual"
|
|
canonical_id: ""
|
|
aliases: ["workflow.json", "UI Format"]
|
|
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: ["workflow.json", "flux_workflow.json"]
|
|
github_commit: "bc85382"
|
|
---
|
|
|
|
# [[Frontend Format]]
|
|
|
|
## 🎯 한 줄 통찰 (One-line insight)
|
|
Frontend Format은 ComfyUI 웹 인터페이스의 시각적 상태와 노드 실행 로직을 완벽하게 보존하기 위해 노드 좌표, 크기, 그룹화 등의 풍부한 UI 메타데이터를 포함하는 Litegraph 기반 직렬화 규격이다 [1], [2], [3].
|
|
|
|
## 🧠 핵심 개념 (Core concepts)
|
|
- **시각적 메타데이터 (Visual Metadata):** 노드의 캔버스 좌표(`pos`), 크기(`size`), 그룹 구조, 노드의 접힘(collapsed) 또는 고정(pinned) 상태 등 사용자 인터페이스 구성을 위한 정보를 포함한다 [1], [2], [4].
|
|
- **Litegraph 표준 기반:** 웹 기반 그래프 편집기의 시각적 조작과 렌더링을 위해 설계된 Litegraph 형식을 따르며, 이는 인간이 읽고 이해하기 쉬운 구조를 제공한다 [1], [3].
|
|
- **명시적 연결 객체 (Explicit Links):** 노드 간의 데이터 흐름이 별도의 `links` 배열 내에 정의된 독립적인 연결 객체로 표현되어, 그래프의 시각적 연결성을 관리한다 [2], [5].
|
|
- **고유 숫자 식별자:** 각 노드는 "1", "2", "3"과 같은 고유한 숫자 기반 문자열 ID를 통해 관리되며, 이는 시각적 위치와 논리적 연결을 매핑하는 기준이 된다 [2], [3].
|
|
|
|
## 🧩 추출된 패턴 (Extracted patterns)
|
|
- **GUI 기본 저장 패턴:** ComfyUI 제어판에서 'Save' 버튼을 누르거나 단축키 `Ctrl + S`(Mac은 `Cmd + S`)를 사용할 때 기본적으로 생성되는 포맷이다 [6], [7].
|
|
- **미디어 메타데이터 내장 패턴:** PNG 또는 WebP 이미지 생성 시, 파일의 `tEXt` 또는 `zTXt` 청크에 Frontend Format JSON이 주입되어 이미지가 자체적인 워크플로우 컨테이너 역할을 하게 된다 [8], [9], [10].
|
|
- **노드 오브젝트 표준화:** 모든 노드는 `id`, `type`, `pos`, `size`, `widgets_values`, `order`, `mode`라는 필수/선택 속성 세트를 가지는 일관된 객체 구조를 유지한다 [11], [4].
|
|
|
|
## 📖 세부 내용 (Details)
|
|
Frontend Format은 주로 **시각적 편집 및 인간 간의 공유**를 목적으로 사용된다 [2], [7]. 이 포맷은 단순한 실행 로직을 넘어 아티스트가 구성한 작업 환경의 모든 세부 사항을 저장하기 때문에, 파일을 다시 불러왔을 때 노드들이 정확히 같은 위치에 배치되고 설정된 시각적 그룹이 유지된다 [6], [3].
|
|
|
|
기술적으로 Frontend JSON은 `nodes`와 `links`라는 두 가지 핵심 배열을 포함한다 [4]. `nodes` 배열의 각 객체는 특정 노드의 클래스 타입과 위젯 값뿐만 아니라 캔버스상의 좌표(`[x, y]`)와 차원(`[width, height]`)을 명시한다 [11], [4]. `links` 배열은 출력 노드 ID, 출력 슬롯, 입력 노드 ID, 입력 슬롯을 포함하는 6개 항목의 배열 또는 객체로 구성되어 노드 간의 물리적 연결을 정의한다 [5].
|
|
|
|
이 포맷은 파일 크기가 API Format에 비해 상대적으로 크지만, 모델 가중치(Weights) 파일에 비하면 매우 작아 독립적인 보관과 공유가 용이하다 [12], [2]. 하지만 백엔드 엔진이 직접적으로 해석하기에는 불필요한 UI 정보가 너무 많아, 서버 사이드 실행이나 API 호출 시에는 대개 API Format으로의 변환이 필요하다 [13], [14].
|
|
|
|
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
|
|
- **실행 호환성:** Frontend Format(workflow.json)은 ComfyUI 웹 인터페이스에서는 드래그 앤 드롭으로 즉시 실행되지만, 외부 애플리케이션에서 `/prompt` 엔드포인트를 통해 서버에 직접 전송할 경우 에러가 발생하며 실행되지 않는다 [14].
|
|
- **데이터 손실 위험:** 이미지에 내장된 워크플로우 메타데이터는 일반적인 이미지 편집기(GIMP 등)로 편집하거나 소셜 미디어 플랫폼에 업로드할 때 압축 및 최적화 과정에서 삭제될 위험이 크다 [15], [9], [16].
|
|
|
|
## 🛠️ 적용 사례 (Applied in summary)
|
|
- **표준 워크플로우 파일:** `workflow.json`이라는 기본 파일명으로 시스템 전반에서 시각적 저장 단위로 사용된다 [1], [7].
|
|
- **FLUX 예시:** `flux_workflow.json` 파일은 노드 ID, 위치, 위젯 값 및 명시적 링크 구조를 보여주는 Frontend Format의 대표적인 기술 사례로 문서화되어 있다 [7], [17].
|
|
- **버그 수정 기록:** Git 커밋 `bc85382`에서는 Frontend 포맷에서 API 포맷으로 변환할 때 콤보 위젯의 대소문자 불일치 문제를 해결하기 위해 노드 레지스트리를 대조하는 로직이 적용되었다 [18], [19].
|
|
|
|
## ✅ 검증 상태 및 신뢰도
|
|
- **상태:** draft
|
|
- **검증 단계:** conceptual (실제 적용 사례 및 공식 사양을 통해 확인됨)
|
|
- **출처 신뢰도:** B (공식 문서 및 오픈소스 기술 문서 기반)
|
|
- **중복 검사 결과:** 신규 생성 (New discovery)
|
|
|
|
## 📝 변경 이력 (Change history)
|
|
- 2026-05-20: Initial draft generated via Datacollector_MAC P-Reinforce engine. |