ComfyUI 에서 내가 만든 타입에 색깔을 넣을 순 없나

가능해요. “내가 만든 타입(예: MYTYPE)”의 링크 색을 정해두면, 그 타입으로 들어오고 나가는 연결선이 원하는 색으로 보입니다. 핵심은 프런트엔드(LiteGraph 캔버스) 쪽의 “타입→색상” 매핑을 추가하는 겁니다.

아래 순서대로 하면 됩니다.

  1. 파이썬 노드에서 타입 이름 정하기
    커스텀 노드의 RETURN_TYPES / INPUT_TYPES 등에 사용할 문자열이 실제 타입 이름이 됩니다. 예: RETURN_TYPES = ("MYTYPE",). 이 문자열이 프런트엔드에서도 색상 키로 쓰입니다. 타입 문자열과 링크 색은 LiteGraph가 타입별로 구분합니다. ComfyUI

  2. 프런트엔드 확장 스크립트 만들기
    ComfyUI는 브라우저에서 실행될 때 작은 JS 확장(extension)을 자동 로드할 수 있습니다. 여기에 “타입→색상” 매핑을 추가합니다. 확장은 docs의 ComfyNode/JS 하이재킹 가이드가 안내하는 app.registerExtension 패턴을 쓰면 깔끔합니다. ComfyUI

예시: ComfyUI/web/extensions/mytype-colors.js 파일을 만들고 아래처럼 작성합니다.

js

// ComfyUI 0.7대 LiteGraph 기준 예시
app.registerExtension({
  name: "mytype.color.map",
  setup() {
    const LGC = LGraphCanvas; // LiteGraph 캔버스
    // 연결선(활성/비활성) 색상을 타입 문자열 키로 지정
    LGC.default_connection_color_byType = {
      ...(LGC.default_connection_color_byType || {}),
      "MYTYPE": "#a26bff"   // 원하는 HEX
    };
    LGC.default_connection_color_byTypeOff = {
      ...(LGC.default_connection_color_byTypeOff || {}),
      "MYTYPE": "#5b3a9a"   // 비활성(꺼짐) 상태일 때 어두운 톤
    };
    // 색상 변경 후 캔버스 다시 그리기
    if (app?.graph?.canvas) app.graph.canvas.setDirty(true, true);
  }
});

LiteGraph는 타입 문자열별 기본 연결선 색을 default_connection_color_byType / default_connection_color_byTypeOff 두 객체에서 찾습니다. 이 두 맵에 키를 추가하면 됩니다. 이 방법은 LiteGraph에 직접 물어본 답과 동일한 메커니즘을 씁니다. Stack Overflow

  1. 브라우저 새로고침
    ComfyUI를 재시작하거나 브라우저를 새로고침하면, 이제 MYTYPE 타입 링크가 지정한 색으로 보입니다.

추가 팁

• 노드 카드(헤더) 배경색은 타입 색과 별개입니다. 헤더 배경은 테마/팔레트(설정의 Appearance)나 CSS로 바꿀 수 있지만, “데이터 타입” 링크 색은 위처럼 타입 매핑을 손대야 바뀝니다. 팔레트만 바꾸면 “색이 더 잘 보이게” 되는 경우가 있으나, 타입별 고유색을 새로 정의하는 건 아닙니다. ComfyUI+1

• ComfyUI는 커스텀 LiteGraph 빌드를 씁니다. 버전마다 내부 경로가 약간 다를 수 있지만, 공개 패키지 설명에서도 ComfyUI가 수정된 litegraph를 사용한다고 명시되어 있어 위 패턴이 안정적입니다. Npm

• 코드로 헤더 색까지 강제하고 싶다면 node.color / node.bgcolor 같은 LiteGraph 속성도 건드릴 수 있습니다. 다만 워크플로 전반의 일관성을 생각하면 “링크(타입) 색은 타입-맵으로, 전체 테마는 팔레트/스타일로” 나누는 편이 유지보수에 유리합니다. 관련 JS 훅은 Comfy의 JS 오브젝트/하이재킹 문서가 출발점으로 좋습니다. ComfyUI

정리하면, 파이썬 쪽에서 타입 문자열을 하나 정해 쓰고, 프런트엔드 확장으로 LGraphCanvas.default_connection_color_byType(및 Off)에 그 문자열 키를 원하는 색으로 추가하세요. 그러면 그 타입의 입출력 링크가 지정한 색으로 깔끔하게 표시됩니다. 다음으로는 여러 커스텀 타입을 쓰는 워크플로에서 색 팔레트를 체계적으로 정리해 두면, 복잡한 그래프도 한눈에 읽히는 “시각적 문법”이 됩니다.

위에 임포트 같은건 따로 안해도 되나

아니요. 따로 임포트할 거 없습니다.

왜냐면 ComfyUI가 브라우저에서 이미 필요한 것들을 전역으로 올려둡니다. 확장 스크립트를 web/extensions/*.js에 두고 app.registerExtension({...})를 쓰면, 내부에서 app(ComfyUI 앱 객체)와 LGraphCanvas(LiteGraph 캔버스)가 자동으로 보입니다. 그래서 추가 임포트 없이 바로 맵을 건드릴 수 있습니다.

정리해두면 이렇게 됩니다.

  1. JS 쪽
    파일 위치: ComfyUI/web/extensions/mytype-colors.js
    코드 안에서 따로 import 안 해도 됨. app과 LGraphCanvas는 전역. registerExtension이 로딩 타이밍도 책임져줘서 “먼저 로드됐나?” 걱정도 줄어듭니다.

  2. 파이썬 노드 쪽
    색상 매핑을 위해 별도의 임포트 필요 없음. 커스텀 노드 클래스에서 RETURN_TYPES = ("MYTYPE",) 같은 타입 문자열을 평소처럼 정의하면 끝. 색상은 JS 확장에서 타입 문자열 키로 매핑합니다.

  3. 재시작/새로고침
    파일을 넣은 뒤 ComfyUI 재시작 또는 브라우저 새로고침만 하면 반영됩니다. 캐시가 끼면 강력 새고침 정도면 충분합니다.

예시 스니펫(임포트 없음):

js

app.registerExtension({
  name: "mytype.color.map",
  setup() {
    const LGC = LGraphCanvas;
    LGC.default_connection_color_byType = {
      ...(LGC.default_connection_color_byType || {}),
      "MYTYPE": "#a26bff"
    };
    LGC.default_connection_color_byTypeOff = {
      ...(LGC.default_connection_color_byTypeOff || {}),
      "MYTYPE": "#5b3a9a"
    };
    if (app?.graph?.canvas) app.graph.canvas.setDirty(true, true);
  }
});

주의할 점 몇 가지만 덧붙이면 더 탄탄해집니다.
• 파일 위치가 맞아야 자동 로드됩니다. 다른 경로를 쓰면 직접 로더에 등록해야 해요.
• TypeScript로 작성한다면 “전역 app, LGraphCanvas”에 대한 타입 선언만 추가하면 됩니다. JS라면 그냥 넘어가도 됩니다.
• 만약 브라우저 콘솔에서 즉석 실행한다면 window.app, window.LGraphCanvas로 접근하세요.

한 줄 결론: 기본 설치 그대로라면 임포트는 전혀 필요 없습니다. 타입 문자열만 맞추고, 확장 스크립트에서 전역 객체를 살짝 손대면 링크 색상 커스터마이징이 깔끔하게 동작합니다.

Categories:

Updated:

You may also enjoy