> ## Documentation Index
> Fetch the complete documentation index at: https://docs.comfy.org/llms.txt
> Use this file to discover all available pages before exploring further.

# ComfyUI LiteGraph (캔버스) 설정

> ComfyUI 그래픽 렌더링 엔진 LiteGraph의 설정 옵션에 대한 자세한 설명

<Info>
  이 페이지에 설명된 설정은 **ComfyUI 인앱 설정 메뉴**에 있습니다. **설정**(톱니바퀴 아이콘)으로 이동하거나 `Ctrl + ,` 키보드 단축키를 사용하여 해당 메뉴를 열고, 해당 카테고리를 선택하면 이러한 옵션을 확인하고 구성할 수 있습니다.
</Info>

LiteGraph는 ComfyUI의 기본 그래픽 렌더링 엔진입니다. 이 카테고리의 설정은 주로 캔버스, 노드, 링크와 같은 그래픽 인터페이스의 동작과 모양을 제어합니다.

## 캔버스

### 선택 도구 상자 표시

* **기본값**: 활성화됨
* **기능**: 선택 도구 상자는 노드를 선택한 후 나타나는 플로팅된 빠른 작업 도구 모음으로, 부분 실행, 고정, 삭제, 색상 수정 등 일반적인 빠른 작업을 제공합니다.

<img src="https://mintcdn.com/dripart/qYv6P0RgI3co7-eH/images/interface/setting/lite-graph/selection-toolbox.jpg?fit=max&auto=format&n=qYv6P0RgI3co7-eH&q=85&s=58f8da6ea3f276272d9be4c4e1e5ebb1" alt="선택 도구 상자 표시" width="1316" height="756" data-path="images/interface/setting/lite-graph/selection-toolbox.jpg" />

### 저품질 렌더링 확대 비율 임계값

* **기본값**: 0.6
* **범위**: 0.1 - 1.0
* **기능**: 인터페이스를 렌더링할 때, 특히 워크플로가 매우 복잡하고 캔버스 전체가 매우 큰 경우, 해당 요소들의 프론트엔드 렌더링이 많은 메모리를 소비하고 지연을 유발할 수 있습니다. 이 임계값을 낮추면 특정 비율로 확대될 때 요소들이 저품질 렌더링 모드로 전환되도록 제어하여 메모리 소비를 줄일 수 있습니다. 각각의 다른 렌더링 모드는 아래와 같습니다.

<img src="https://mintcdn.com/dripart/qYv6P0RgI3co7-eH/images/interface/setting/lite-graph/render-mode.jpg?fit=max&auto=format&n=qYv6P0RgI3co7-eH&q=85&s=e6481f3430f77f8312d78b853d307774" alt="저품질 렌더링" width="1536" height="1008" data-path="images/interface/setting/lite-graph/render-mode.jpg" />

### 최대 FPS

* **기본값**: 0 (화면 새로고침률 사용)
* **범위**: 0 - 120
* **기능**: 캔버스의 렌더링 프레임 속도를 제한합니다. 0은 화면 새로고침률을 사용하는 것을 의미합니다. 높은 FPS는 캔버스 렌더링을 더 부드럽게 만들지만 성능 소모도 커집니다. 너무 낮은 값은 더 뚜렷한 끊김 현상을 일으킬 수 있습니다.

### 항상 그리드에 스냅

* **기본값**: 비활성화됨
* **기능**: 이 옵션이 활성화되지 않은 경우, `Shift` 키를 누르고 있으면 노드 가장자리를 그리드에 맞출 수 있습니다. 활성화된 경우, `Shift` 키를 누르지 않아도 노드 가장자리가 자동으로 그리드에 맞춰집니다.

<video controls>
  <source src="https://mintcdn.com/dripart/NmGUk_QSXQXRVtZP/images/interface/setting/lite-graph/snap-to-grid.mp4?fit=max&auto=format&n=NmGUk_QSXQXRVtZP&q=85&s=2afb1c5c09f9fca9f4b8333e975d0f44" type="video/mp4" data-path="images/interface/setting/lite-graph/snap-to-grid.mp4" />
</video>

### 그리드 크기에 스냅

* **범위**: 1 - 500
* **기능**: 자동 스냅이 활성화되었거나 `Shift` 키를 누른 채 노드를 이동할 때, 이 매개변수는 스냅할 그리드 크기를 결정합니다. 기본값은 10이며 필요에 따라 조정할 수 있습니다.

### 빠른 확대 단축키 활성화 (Ctrl + Shift + 드래그)

* **기본값**: 활성화됨
* **기능**: `Ctrl + Shift + 마우스 왼쪽 버튼 드래그` 빠른 확대 기능을 활성화해 보다 빠른 확대 방법을 제공합니다.

<video controls>
  <source src="https://mintcdn.com/dripart/qYv6P0RgI3co7-eH/images/interface/setting/lite-graph/fast-zoom.mp4?fit=max&auto=format&n=qYv6P0RgI3co7-eH&q=85&s=2d6e53041600bb97d28cb81786af40fd" type="video/mp4" data-path="images/interface/setting/lite-graph/fast-zoom.mp4" />
</video>

### 그래프 캔버스 메뉴 표시

* **기본값**: 활성화됨
* **기능**: 캔버스 오른쪽 하단에 캔버스 메뉴를 표시할지 여부를 제어합니다.

캔버스 메뉴는 ComfyUI 인터페이스의 오른쪽 하단에 위치하며, 캔버스 확대/축소, 모든 연결 일시 숨기기, 워크플로를 캔버스에 맞게 빠르게 스케일 조정 등의 작업을 포함하고 있습니다. 아래 이미지와 같습니다.

<img src="https://mintcdn.com/dripart/qYv6P0RgI3co7-eH/images/interface/setting/lite-graph/canvas_menu.jpg?fit=max&auto=format&n=qYv6P0RgI3co7-eH&q=85&s=23c8c2f94f2befbfc9cd3a484140af5b" alt="그래프 캔버스 메뉴 표시" width="360" height="764" data-path="images/interface/setting/lite-graph/canvas_menu.jpg" />

### 캔버스 확대 속도

* **기본값**: 1.1
* **범위**: 1.01 - 2.5
* **기능**: 캔버스 확대 속도를 제어하며, 마우스 휠 확대의 민감도를 조정합니다.

### 캔버스 정보를 왼쪽 하단에 표시 (FPS 등)

* **기본값**: 활성화됨
* **기능**: 캔버스 정보를 왼쪽 하단에 표시할지 여부를 제어하며, FPS와 같은 성능 지표를 표시합니다.

<img src="https://mintcdn.com/dripart/qYv6P0RgI3co7-eH/images/interface/setting/lite-graph/canvas-info.jpg?fit=max&auto=format&n=qYv6P0RgI3co7-eH&q=85&s=5ed9833f409780098accd32464b864fe" alt="캔버스 정보" width="732" height="498" data-path="images/interface/setting/lite-graph/canvas-info.jpg" />

## 컨텍스트 메뉴

### 확대 시 노드 콤보 위젯 메뉴(목록) 스케일 조정

* **기본값**: 활성화됨
* **기능**: 확대 시 노드 콤보 위젯 메뉴(목록)의 스케일을 조정할지 여부를 제어하며, 사용자가 노드 콤보 위젯을 선택할 수 있도록 합니다.

## 그래프

### 링크 렌더링 모드

* **기본값**: 2 (스플라인)
* **옵션**: 직선, 선형, 스플라인, 숨김
* **기능**: 연결의 렌더링 스타일을 설정하며, 노드 간 링크의 시각적 스타일을 제어합니다.

<img src="https://mintcdn.com/dripart/qYv6P0RgI3co7-eH/images/interface/setting/lite-graph/link-render-mode.jpg?fit=max&auto=format&n=qYv6P0RgI3co7-eH&q=85&s=b5ab460adf08e167a83fb640d5c5a4bb" alt="링크 렌더링 모드" width="1324" height="478" data-path="images/interface/setting/lite-graph/link-render-mode.jpg" />

## 그룹

이 설정 섹션은 주로 노드 그룹 기능과 관련이 있습니다.

<img src="https://mintcdn.com/dripart/qYv6P0RgI3co7-eH/images/interface/setting/lite-graph/node-group.png?fit=max&auto=format&n=qYv6P0RgI3co7-eH&q=85&s=02765d28e1720e5cc0bc2f6a1f70ab02" alt="노드 그룹" width="1487" height="915" data-path="images/interface/setting/lite-graph/node-group.png" />

### 그룹 제목을 더블클릭해 편집하기

* **기본값**: 활성화됨
* **기능**: 노드 제목을 더블클릭해 편집할 수 있도록 제어하며, 사용자가 노드 이름을 바꿀 수 있게 합니다. 이미지에서 '1'로 표시된 부분입니다.

### 선택된 노드의 패딩 설정

* **기본값**: 10
* **범위**: 0 - 100
* **기능**: 선택된 노드를 그룹화할 때 내부 패딩을 설정하며, 그룹 프레임과 노드 사이의 간격을 제어합니다. 이미지에서 화살표 주석으로 표시된 '2' 부분입니다.

## 링크

### 링크 중간점 마커

* **기본값**: 원
* **옵션**: 없음, 원, 화살표
* **기능**: 링크 중간점의 마커 스타일을 설정하며, 링크 중간점에 방향 표시를 표시합니다.

<img src="https://mintcdn.com/dripart/qYv6P0RgI3co7-eH/images/interface/setting/lite-graph/link-midpoint.jpg?fit=max&auto=format&n=qYv6P0RgI3co7-eH&q=85&s=119b8c37616b50cda464333cbc87d2d6" alt="링크 중간점 마커" width="1026" height="568" data-path="images/interface/setting/lite-graph/link-midpoint.jpg" />

## 링크 해제

이 메뉴 섹션은 현재 링크 연결이 해제될 때 관련 작업을 주로 제어합니다. 현재 두 가지 관련 작업은 다음과 같습니다:

**해제 후 현재 입력/출력과 관련된 노드 추천 목록이 나타납니다**

<video controls>
  <source src="https://mintcdn.com/dripart/qYv6P0RgI3co7-eH/images/interface/setting/lite-graph/link-release-contenxt-menu.mp4?fit=max&auto=format&n=qYv6P0RgI3co7-eH&q=85&s=1b8a078d5a122fa327f9ffefebc9e489" type="video/mp4" data-path="images/interface/setting/lite-graph/link-release-contenxt-menu.mp4" />
</video>

**해제 후 검색창이 열립니다**

<video controls>
  <source src="https://mintcdn.com/dripart/qYv6P0RgI3co7-eH/images/interface/setting/lite-graph/link-release-search-box.mp4?fit=max&auto=format&n=qYv6P0RgI3co7-eH&q=85&s=52747dcfcf1d0c31b2163961c62e9efb" type="video/mp4" data-path="images/interface/setting/lite-graph/link-release-search-box.mp4" />
</video>

### 링크 해제 시 액션 (Shift)

* **기본값**: 검색창
* **옵션**: 컨텍스트 메뉴, 검색창, 아무런 액션 없음
* **기능**: Shift 키를 누른 상태에서 링크를 해제할 때의 액션을 설정하며, Shift 키를 누른 상태에서 링크를 해제할 때 특별한 동작을 수행합니다.

### 링크 해제 시 액션 (수정자 없음)

* **기본값**: 컨텍스트 메뉴
* **옵션**: 컨텍스트 메뉴, 검색창, 아무런 액션 없음
* **기능**: 링크를 해제할 때의 기본 액션을 설정하며, 링크를 드래그한 후 해제했을 때의 동작을 제어합니다.

## 노드

### 새 노드를 항상 축소

* **기본값**: 활성화됨
* **기능**: 새 노드를 생성할 때 자동으로 축소하도록 제어하며, 노드가 항상 최소 크기로 표시되지만 추가 시 일부 텍스트 표시가 잘려 보일 수 있으므로 수동으로 노드 크기를 조정해야 합니다.

### DOM 요소 클리핑 활성화 (활성화 시 성능 저하 가능)

* **기본값**: 활성화됨
* **기능**: DOM 요소 클리핑을 활성화하면(성능에 영향을 줄 수 있음), 렌더링을 최적화하지만 성능이 저하될 수 있습니다.

### 가운데 클릭 시 새 리루트 노드 생성

* **기본값**: 활성화됨
* **기능**: 가운데 클릭 시 새 리루트 노드를 생성하며, 연결을 정리하기 위한 리루트 노드를 빠르게 생성합니다.

### 노드 삭제 시 모든 링크 유지

* **기본값**: 활성화됨
* **기능**: 중간 노드를 삭제할 때 자동으로 연결을 우회하며, 노드를 삭제할 때 입력 및 출력 링크를 다시 연결하려고 시도합니다.

### 스냅 시 노드 강조 표시

* **기본값**: 활성화됨
* **기능**: 링크를 끌어 노드에 연결할 때 노드를 강조 표시하며, 시각적 피드백을 제공하고 연결 가능한 노드를 표시합니다. 활성화 시 효과는 아래 이미지와 같으며, 링크의 해당 쪽이 강조된 스타일로 표시됩니다.

<img src="https://mintcdn.com/dripart/qYv6P0RgI3co7-eH/images/interface/setting/lite-graph/highlights-node.jpg?fit=max&auto=format&n=qYv6P0RgI3co7-eH&q=85&s=242f3b88d95229d99744f720cf86c935" alt="스냅 시 노드 강조 표시" width="1600" height="1117" data-path="images/interface/setting/lite-graph/highlights-node.jpg" />

### 링크를 노드 슬롯에 자동 스냅

* **기본값**: 활성화됨
* **기능**: 링크를 노드에 끌어갈 때 자동으로 사용 가능한 슬롯에 스냅하며, 연결 작업을 간소화하고 적합한 입력 슬롯을 자동으로 찾습니다.

<video controls>
  <source src="https://mintcdn.com/dripart/qYv6P0RgI3co7-eH/images/interface/setting/lite-graph/snap-link-to-node-slot.mp4?fit=max&auto=format&n=qYv6P0RgI3co7-eH&q=85&s=1f517cf34f3f994c4c03a267d8fbbd91" type="video/mp4" data-path="images/interface/setting/lite-graph/snap-link-to-node-slot.mp4" />
</video>

### 툴팁 활성화

* **기본값**: 활성화됨
* **기능**: 일부 노드 정보에는 툴팁이 포함되며, 매개변수 설명 등을 포함합니다. 활성화 시 마우스를 가져다 대면 이러한 툴팁이 표시됩니다. 아래 이미지와 같습니다.

<img src="https://mintcdn.com/dripart/NmGUk_QSXQXRVtZP/images/interface/setting/lite-graph/tooltips.jpg?fit=max&auto=format&n=NmGUk_QSXQXRVtZP&q=85&s=df329458465d6f20efea955e638c9656" alt="툴팁 활성화" width="970" height="812" data-path="images/interface/setting/lite-graph/tooltips.jpg" />

### 툴팁 지연 시간

* **기본값**: 500
* **기능**: 툴팁의 지연 시간을 밀리초 단위로 제어합니다. 0으로 설정하면 즉시 툴팁이 표시됩니다.

### 노드 수명 주기 배지 모드

* **기본값**: 모두 표시
* **기능**: 노드 수명 주기 마커의 표시를 제어하며, 노드 상태 정보를 표시합니다.

### 노드 ID 배지 모드

* **기본값**: 모두 표시
* **기능**: 노드 ID 마커의 표시를 제어하며, 노드 고유 식별자를 표시합니다.

<img src="https://mintcdn.com/dripart/qYv6P0RgI3co7-eH/images/interface/setting/lite-graph/node-id-badge.jpg?fit=max&auto=format&n=qYv6P0RgI3co7-eH&q=85&s=ca8e1edfff6c7673f1432ba0ac2edde5" alt="노드 ID 배지 모드" width="1934" height="882" data-path="images/interface/setting/lite-graph/node-id-badge.jpg" />

### 노드 소스 배지 모드

* **옵션**:
  * 없음
  * 내장 숨기기
  * 모두 표시
* **기능**: 노드 소스 마커의 표시 모드를 제어하며, 노드 소스 정보를 표시합니다. 해당 표시 효과는 아래 이미지와 같습니다. 모두 표시를 선택하면 사용자 정의 노드와 내장 노드 모두에 라벨이 표시되어 해당 노드 소스를 쉽게 파악할 수 있습니다. 해당 여우 로고는 ComfyUI 내장 노드를 나타냅니다.

<img src="https://mintcdn.com/dripart/qYv6P0RgI3co7-eH/images/interface/setting/lite-graph/node-source-badge.jpg?fit=max&auto=format&n=qYv6P0RgI3co7-eH&q=85&s=383afc337b63f52be2f8d3cb9e7c4ed7" alt="노드 소스 배지 모드" width="1934" height="1444" data-path="images/interface/setting/lite-graph/node-source-badge.jpg" />

### 노드 제목을 더블클릭해 편집하기

* **기본값**: 활성화됨
* **기능**: 노드 제목을 더블클릭해 편집할 수 있도록 제어하며, 사용자가 노드 이름을 바꿀 수 있게 합니다.

## 노드 위젯

### 플로트 위젯 소수점 자리 반올림 \[0 = 자동]

* **기본값**: 0 (자동)
* **범위**: 0 - 6
* **기능**: 플로트 위젯 소수점 반올림의 소수점 자리를 설정하며, 0은 자동을 의미하며 페이지 재로드가 필요합니다.

### 기본 플로트 위젯 반올림 비활성화

* **기본값**: 비활성화됨
* **기능**: 기본 플로트 위젯 반올림을 비활성화할지 여부를 제어하며, 페이지 재로드가 필요하며 노드 백엔드에서 반올림을 설정한 경우 비활성화할 수 없습니다.

### 노드 위젯 슬라이더 비활성화

* **기본값**: 비활성화됨
* **기능**: 노드 위젯의 슬라이더 컨트롤을 비활성화할지 여부를 제어하며, 슬라이더 대신 텍스트 입력을 강제합니다.

### 미리보기 이미지 형식

* **기본값**: 빈 문자열 (원본 형식 사용)
* **기능**: 이미지 위젯의 미리보기 이미지 형식을 설정하며, webp, jpeg 등 경량 형식으로 변환합니다.

### 이미지 미리보기 아래에 가로×세로 표시

* **기본값**: 활성화됨
* **기능**: 이미지 미리보기 아래에 가로×세로 정보를 표시하며, 이미지의 치수 정보를 보여줍니다.

<img src="https://mintcdn.com/dripart/qYv6P0RgI3co7-eH/images/interface/setting/lite-graph/show-size.jpg?fit=max&auto=format&n=qYv6P0RgI3co7-eH&q=85&s=e7fdfd5227158a413b5b0051a6e171bf" alt="이미지 미리보기 아래에 가로×세로 표시" width="1344" height="904" data-path="images/interface/setting/lite-graph/show-size.jpg" />

## 포인터

### 트랙패드 제스처 활성화

* **기본값**: 활성화됨
* **기능**: 이 설정은 캔버스의 트랙패드 모드를 활성화하며, 두 손가락으로 핀치 확대 및 드래그를 가능하게 합니다.

### 더블클릭 간격 (최대)

* **기본값**: 300
* **기능**: 두 번의 더블클릭 사이의 최대 시간(밀리초)입니다. 이 값을 늘리면 때때로 더블클릭이 인식되지 않는 문제를 해결할 수 있습니다.

### 포인터 클릭 드리프트 지연 시간

* **기본값**: 150
* **기능**: 포인터 버튼을 누른 후 포인터 움직임을 무시하는 최대 시간(밀리초)입니다. 클릭 시 실수로 마우스가 움직이는 것을 방지하는 데 도움이 됩니다.

### 포인터 클릭 드리프트 (최대 거리)

* **기본값**: 6
* **기능**: 포인터가 버튼을 누른 채 이 거리를 초과해 움직이면 드래그로 간주됩니다(클릭이 아닌). 클릭 시 실수로 마우스가 움직이는 것을 방지하는 데 도움이 됩니다.

## 리루트

### 리루트 스플라인 오프셋

* **기본값**: 20
* **기능**: 리루트 노드 양쪽 곡선의 부드러움을 결정하는 데 사용됩니다. 값이 클수록 곡선이 더 부드러워지고, 작을수록 곡선이 더 날카로워집니다.

<img src="https://mintcdn.com/dripart/qYv6P0RgI3co7-eH/images/interface/setting/lite-graph/reroute-spline-offset.jpg?fit=max&auto=format&n=qYv6P0RgI3co7-eH&q=85&s=a76bc935bc5e37fe1b3c99129c7b5fe3" alt="리루트 스플라인 오프셋" width="1568" height="752" data-path="images/interface/setting/lite-graph/reroute-spline-offset.jpg" />
