Zip Ties: 와이어를 리본으로 묶는 ComfyUI 확장

대형 워크플로는 어디서나 같은 시각적 문제를 겪습니다. 한쪽의 로더와 다른 쪽의 샘플러 사이에 빽빽한 와이어가 얽혀 있고, 각각이 별도의 베지어 곡선으로 그려져 눈으로 따라가야 합니다. Zip Ties는 와이어를 숨기거나 장애물을 피해 우회시키지 않습니다. 직접 그린 선을 가로지르는 링크들을 모아, 케이블 타이가 다발을 묶듯 각 링크를 그 선에 고정합니다.

이 확장은 @cmzw_의 프로토타입에서 출발했으며, 첫 릴리스 후 하루 만에 r/comfyui와 r/StableDiffusion 모두의 첫 페이지에 올랐습니다.

제스처

드래그하는 동안 선이 가로지르는 와이어는 흰색으로 바뀝니다. 선이 기존 타이를 가로지르면 선과 타이가 모두 빨간색이 되고, 손을 떼면 해당 타이가 제거됩니다. 키는 Zip Ties → Key to hold while dragging across wires에서 변경할 수 있으며, ComfyUI가 단독으로 사용하지 않는 문자인 X, C, G, T, Y만 제공됩니다. Alt, Ctrl, Cmd, Shift를 누른 상태에서는 드래그가 원래 의미를 유지하므로, Alt-드래그는 여전히 노드를 복제합니다.

리본의 동작 방식

새 타이는 무작위 케이블 타이 색상을 가집니다. Zip Ties → Colour of new ties에서 이를 Match wires로 바꾸면 타이 안 와이어 중 가장 많은 색상을 선택하고, 단순 회색으로 바꿀 수도 있습니다. 우클릭하면 개별 타이의 색상을 변경할 수 있습니다. 와이어는 각자의 색상을 유지한 채 타이 사이를 나란히 지나가며, 타이에 마우스를 올리거나 드래그하면 그 안의 모든 와이어가 강조됩니다.

하나의 와이어는 여러 타이를 통과할 수 있고, 타이를 회전하면 그 타이를 통과하는 와이어의 방향이 바뀌므로 0도와 90도의 타이를 사용하면 직각으로 꺾입니다. 경유점 사이의 구간도 묶을 수 있습니다. 타이는 자신이 그어진 세그먼트를 고정하며, 경유점에서 끝나는 구간은 그 경유점을 통과하는 모든 와이어가 공유합니다.

타이는 와이어를 따라갑니다. 타이가 연결하는 모든 노드와 경유점을 이동하면 타이도 함께 이동하지만, 일부만 이동하면 타이는 제자리에 남습니다. 이는 경유점과 동일한 규칙입니다. 그룹 내부의 타이는 그룹과 함께 이동하며, 그룹 프레임을 Ctrl/Cmd-드래그하면 타이는 노드들과 함께 남습니다. 선택된 타이는 선택된 노드와 함께 이동하고, Delete는 하나의 실행 취소 단계에서 둘 다 제거합니다.

타이는 워크플로의 extra.zipTies에 저장되므로 그래프의 나머지와 함께 저장, 로드, 실행 취소됩니다. 확장 없이 연 워크플로도 정상적으로 로드되어 와이어를 그리며, 잘못된 형식의 항목은 로드 시 무시됩니다. 노드를 복사해 붙여넣을 때 타이 안의 모든 와이어가 복사본에 포함되어 있으면 타이도 함께 따라오며, 이 역시 하나의 실행 취소 단계 안에서 처리됩니다.

내부 동작과 한계

이 확장은 캔버스의 litegraph 메서드 몇 개를 감쌉니다. renderLink는 각 와이어 조각의 시작과 끝 위치를 기록하고 묶인 조각을 타이 중심에서 옆으로 오프셋된 가닥으로 다시 그리며, _renderAllLinkSegments는 양 끝이 화면 밖에 있더라도 타이가 화면에 보이면 묶인 와이어를 계속 그리게 하고, drawConnections는 와이어가 사라진 타이를 정리하고 따라가야 할 타이를 이동시킵니다. 세그먼트 그리기는 ComfyUI 자체 링크 렌더러에 넘기므로 색상, 테두리, 강조 동작이 그대로 유지됩니다. 드래그 제스처는 window의 캡처 단계 리스너에서 실행되어 litegraph보다 먼저 포인터 이벤트를 받으며, 그려진 선은 각 와이어의 베지어 곡선과 교차 검사됩니다.

이 프로젝트는 두 가지 한계를 밝히고 있습니다. 링크 배지에서 그린 경유점 조각, 즉 숨김 링크 단축키로 만든 조각은 묶을 수 없습니다. 또한 리본 형태는 스플라인 링크에 맞춰 조정되었습니다. 직선(Straight) 및 선형(Linear) 링크 모드에서도 타이를 통과해 라우팅되지만, 교차 검사는 각 세그먼트를 직선으로 취급합니다. ComfyUI 0.42.0 및 프론트엔드 1.57.1에서 클래식 캔버스와 Vue 노드 모드 모두로 테스트되었습니다.

이용 가능 여부

ComfyUI-Manager에서 "Zip Ties"를 검색하거나, comfy node install comfyui-zip-ties를 실행하거나, 저장소를 ComfyUI/custom_nodes에 복제한 뒤 재시작하여 설치할 수 있습니다. 릴리스와 전체 제스처 목록은 GitHub에서 확인할 수 있습니다.