Files
2nd/10_Wiki/Topics/Comfyui/Frontend Format.md
T
koriweb a3f63e56e2 Add ComfyUI wikified docs and youtube extracts; tidy raw→Topics
- 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>
2026-05-20 18:41:10 +09:00

5.4 KiB

id, title, category, status, verification_status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, created_at, updated_at, review_reason, merge_history, tags, raw_sources, applied_in, github_commit
id title category status verification_status canonical_id aliases duplicate_of source_trust_level confidence_score created_at updated_at review_reason merge_history tags raw_sources applied_in github_commit
frontend-format Frontend Format 10_Wiki/Topics draft conceptual
workflow.json
UI Format
B 0.85 2026-05-20 2026-05-20
research
Comfyui workflow json 생성 방법
NotebookLM Synthesis
workflow.json
flux_workflow.json
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은 nodeslinks라는 두 가지 핵심 배열을 포함한다 [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.