ComfyUI 모양 맞춤화

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

ComfyUI는 유연한 모양 맞춤화 옵션을 제공하여 인터페이스를 사용자 취향에 맞게 개인화할 수 있습니다.

색상 팔레트 시스템

ComfyUI의 모양을 맞춤화하는 주된 방법은 내장된 색상 팔레트 시스템을 이용하는 것입니다.

이를 통해 다음을 수행할 수 있습니다:

ComfyUI 테마 전환
현재 선택된 테마를 JSON 형식으로 내보내기
JSON 파일에서 맞춤형 테마 설정 로드
맞춤형 테마 설정 삭제

색상 팔레트로 만족할 수 없는 모양 관련 요구사항은 user.css 파일을 통해 고급 모양 맞춤화를 수행할 수 있습니다.

색상 테마 맞춤화 방법

색상 팔레트를 통해 많은 특정 속성을 수정할 수 있습니다. 가장 일반적으로 맞춤화되는 요소 중 일부는 16진수 형식으로 표현된 색상입니다:

아래의 JSON 주석은 설명용일 뿐입니다. 내용을 복사해 수정하면 테마가 제대로 작동하지 않을 수 있으니 절대 복사하지 마세요.
아직 자주 반복해서 업데이트되고 있으므로, 아래 내용은 ComfyUI 프론트엔드 업데이트에 따라 변경될 수 있습니다. 수정이 필요하다면 설정에서 테마 설정을 내보낸 후 수정하세요.

{
  "id": "dark",                     // 반드시 고유해야 하며, 다른 테마 ID와 같으면 안 됩니다
  "name": "Dark (기본)",         // 테마 이름, 테마 선택기에 표시됩니다
  "colors": {
    "node_slot": {                  // 노드 연결 슬롯 색상 설정
      "CLIP": "#FFD500",            // CLIP 모델 연결 슬롯 색상
      "CLIP_VISION": "#A8DADC",     // CLIP Vision 모델 연결 슬롯 색상
      "CLIP_VISION_OUTPUT": "#ad7452", // CLIP Vision 출력 연결 슬롯 색상
      "CONDITIONING": "#FFA931",     // 컨디셔닝 제어 연결 슬롯 색상
      "CONTROL_NET": "#6EE7B7",     // ControlNet 모델 연결 슬롯 색상
      "IMAGE": "#64B5F6",           // 이미지 데이터 연결 슬롯 색상
      "LATENT": "#FF9CF9",          // 잠재 공간 연결 슬롯 색상
      "MASK": "#81C784",            // 마스크 데이터 연결 슬롯 색상
      "MODEL": "#B39DDB",           // 모델 연결 슬롯 색상
      "STYLE_MODEL": "#C2FFAE",     // 스타일 모델 연결 슬롯 색상
      "VAE": "#FF6E6E",             // VAE 모델 연결 슬롯 색상
      "NOISE": "#B0B0B0",           // 노이즈 데이터 연결 슬롯 색상
      "GUIDER": "#66FFFF",          // 가이더 연결 슬롯 색상
      "SAMPLER": "#ECB4B4",         // 샘플러 연결 슬롯 색상
      "SIGMAS": "#CDFFCD",          // 시그마 데이터 연결 슬롯 색상
      "TAESD": "#DCC274"            // TAESD 모델 연결 슬롯 색상
    },
    "litegraph_base": {             // LiteGraph 기본 인터페이스 설정
      "BACKGROUND_IMAGE": "",        // 배경 이미지, 기본값은 비어 있음
      "CLEAR_BACKGROUND_COLOR": "#222", // 메인 캔버스 배경색
      "NODE_TITLE_COLOR": "#999",    // 노드 제목 텍스트 색상
      "NODE_SELECTED_TITLE_COLOR": "#FFF", // 선택된 노드 제목 색상
      "NODE_TEXT_SIZE": 14,          // 노드 텍스트 크기
      "NODE_TEXT_COLOR": "#AAA",     // 노드 텍스트 색상
      "NODE_TEXT_HIGHLIGHT_COLOR": "#FFF", // 노드 텍스트 강조 색상
      "NODE_SUBTEXT_SIZE": 12,       // 노드 서브텍스트 크기
      "NODE_DEFAULT_COLOR": "#333",   // 노드 기본 색상
      "NODE_DEFAULT_BGCOLOR": "#353535", // 노드 기본 배경색
      "NODE_DEFAULT_BOXCOLOR": "#666", // 노드 기본 테두리 색상
      "NODE_DEFAULT_SHAPE": 2,        // 노드 기본 도형
      "NODE_BOX_OUTLINE_COLOR": "#FFF", // 노드 테두리 외곽선 색상
      "NODE_BYPASS_BGCOLOR": "#FF00FF", // 노드 바이패스 배경색
      "NODE_ERROR_COLOUR": "#E00",    // 노드 오류 상태 색상
      "DEFAULT_SHADOW_COLOR": "rgba(0,0,0,0.5)", // 기본 그림자 색상
      "DEFAULT_GROUP_FONT": 24,       // 그룹 기본 글꼴 크기
      "WIDGET_BGCOLOR": "#222",       // 위젯 배경색
      "WIDGET_OUTLINE_COLOR": "#666", // 위젯 외곽선 색상
      "WIDGET_TEXT_COLOR": "#DDD",    // 위젯 텍스트 색상
      "WIDGET_SECONDARY_TEXT_COLOR": "#999", // 위젯 보조 텍스트 색상
      "WIDGET_DISABLED_TEXT_COLOR": "#666", // 위젯 비활성 상태 텍스트 색상
      "LINK_COLOR": "#9A9",          // 연결선 색상
      "EVENT_LINK_COLOR": "#A86",    // 이벤트 연결선 색상
      "CONNECTING_LINK_COLOR": "#AFA", // 연결선 색상
      "BADGE_FG_COLOR": "#FFF",      // 배지 전경색
      "BADGE_BG_COLOR": "#0F1F0F"    // 배지 배경색
    },
    "comfy_base": {                  // ComfyUI 기본 인터페이스 설정
      "fg-color": "#fff",            // 전경색
      "bg-color": "#202020",         // 배경색
      "comfy-menu-bg": "#353535",    // 메뉴 배경색
      "comfy-menu-secondary-bg": "#303030", // 보조 메뉴 배경색
      "comfy-input-bg": "#222",      // 입력 필드 배경색
      "input-text": "#ddd",          // 입력 텍스트 색상
      "descrip-text": "#999",        // 설명 텍스트 색상
      "drag-text": "#ccc",           // 드래그 텍스트 색상
      "error-text": "#ff4444",       // 오류 텍스트 색상
      "border-color": "#4e4e4e",     // 테두리 색상
      "tr-even-bg-color": "#222",    // 테이블 짝수 행 배경색
      "tr-odd-bg-color": "#353535",  // 테이블 홀수 행 배경색
      "content-bg": "#4e4e4e",       // 콘텐츠 영역 배경색
      "content-fg": "#fff",          // 콘텐츠 영역 전경색
      "content-hover-bg": "#222",    // 콘텐츠 영역 호버 배경색
      "content-hover-fg": "#fff",    // 콘텐츠 영역 호버 전경색
      "bar-shadow": "rgba(16, 16, 16, 0.5) 0 0 0.5rem" // 바 그림자 효과
    }
  }
}

캔버스

배경 이미지

요구사항: ComfyUI 프론트엔드 버전 1.20.5 이상
기능: 캔버스에 맞춤형 배경 이미지를 설정해 더욱 개인화된 작업 공간을 제공합니다. 이미지를 업로드하거나 웹 이미지를 사용해 캔버스의 배경을 설정할 수 있습니다.

노드

노드 불투명도

기능: 노드의 불투명도를 설정하며, 0은 완전히 투명, 1은 완전히 불투명을 나타냅니다.

노드 위젯

텍스트 영역 위젯 글꼴 크기

범위: 8 - 24
기능: 텍스트 영역 위젯의 글꼴 크기를 설정합니다. 텍스트 입력 상자의 텍스트 표시 크기를 조정해 가독성을 높입니다.

사이드바

통합된 사이드바 폭

기능: 활성화 시, 서로 다른 사이드바를 전환할 때 사이드바 폭이 일정하게 통합됩니다. 비활성화 시, 서로 다른 사이드바는 각각의 맞춤 폭을 유지할 수 있습니다.

사이드바 크기

기능: 사이드바의 크기를 조절하며, 일반 또는 작은 사이드바로 설정할 수 있습니다.

사이드바 위치

기능: 사이드바가 인터페이스의 좌측 또는 우측에 표시되도록 제어하며, 사용자의 사용 습관에 따라 사이드바 위치를 조정할 수 있습니다.

사이드바 스타일

기능: 사이드바의 시각적 스타일을 제어합니다. 옵션:
- 연결됨: 사이드바가 인터페이스 가장자리와 연결되어 나타납니다.
- 떠다니는: 사이드바가 인터페이스 가장자리와 시각적으로 분리된 떠다니는 패널처럼 나타납니다.

트리 탐색기

트리 탐색기 항목 패딩

기능: 트리 탐색기(사이드바 패널)의 항목 패딩을 설정해 트리 구조 내 항목 간의 간격을 조정합니다.

user.css를 이용한 고급 맞춤화

색상 팔레트로 충분한 제어가 되지 않는 경우, user.css 파일을 통해 맞춤 CSS를 사용할 수 있습니다. 이 방법은 색상 팔레트 시스템에 없는 요소를 맞춤화해야 하는 고급 사용자에게 권장됩니다.

요구사항

ComfyUI 프론트엔드 버전 1.20.5 이상

user.css 설정하기

ComfyUI 사용자 디렉토리에 user.css라는 파일을 생성하세요 (워크플로우 및 설정과 같은 위치 - 아래 위치 정보 참조)
이 파일에 맞춤 CSS 규칙을 추가하세요
ComfyUI를 다시 시작하거나 페이지를 새로고침해 변경 사항을 적용하세요

사용자 디렉토리 위치

ComfyUI 사용자 디렉터리는 개인 설정, 워크플로우 및 맞춤화가 저장되는 곳입니다. 위치는 설치 유형에 따라 달라집니다.

데스크톱 - Windows
데스크톱 - macOS
데스크톱 - Linux
수동 설치
휴대용

C:\Users\<귀하의 사용자 이름>\AppData\Roaming\ComfyUI\user

~/<ComfyUI 설치 경로>/ComfyUI/user

~/.config/ComfyUI/user

사용자 디렉터리는 ComfyUI 설치 폴더에 있습니다:

<ComfyUI 설치 경로>/user

예를 들어, ComfyUI를 C:\ComfyUI에 복제한 경우, 사용자 디렉터리는 C:\ComfyUI\user\default가 됩니다(또는 사용자 이름을 맞춤설정한 경우 C:\ComfyUI\user\john이 됩니다).

ComfyUI는 한 설치당 여러 사용자를 지원합니다. 사용자 이름을 맞춤설정하지 않은 경우 기본값은 “default”입니다. 각 사용자는 user 폴더 내에 고유한 하위 디렉터리를 갖게 됩니다.

사용자 디렉터리는 ComfyUI 휴대용 폴더에 있습니다:

<ComfyUI_windows_portable>/ComfyUI/user

예: ComfyUI_windows_portable/ComfyUI/user/default

이 위치에는 워크플로우, 설정 및 기타 사용자별 파일이 포함되어 있습니다. 위의 폴더 위치를 찾은 후, 해당 CSS 파일을 대응하는 사용자 디렉토리에 복사하세요. 예를 들어 기본 사용자 폴더는 ComfyUI/user/default이며, ComfyUI를 다시 시작하거나 페이지를 새로고침해 변경 사항을 적용하세요.

user.css 예제 및 관련 지침

user.css 파일은 애플리케이션 시작 과정 초기에 로드됩니다. 따라서 CSS 규칙에 !important를 사용해 기본 스타일을 덮어쓰도록 해야 합니다. user.css 맞춤화 예제

/* 입력 및 메뉴의 글꼴 크기를 늘려 더 나은 가독성 확보 */
.comfy-multiline-input, .litecontextmenu .litemenu-entry {
    font-size: 20px !important;
}

/* 컨텍스트 메뉴 항목을 더 크게 만들어 선택하기 쉽게 함 */
.litegraph .litemenu-entry,
.litemenu-title {
  font-size: 24px !important; 
}

/* 색상 팔레트에 없는 특정 요소에 대한 맞춤 스타일 */
.comfy-menu {
    border: 1px solid rgb(126, 179, 189) !important;
    border-radius: 0px 0px 0px 10px !important;
    backdrop-filter: blur(2px);
}

최적의 사용법

대부분의 맞춤화는 색상 팔레트를 먼저 사용하세요
색상 팔레트로 커버되지 않은 요소에 대해서만 user.css를 사용하세요
중요한 변경을 하기 전에 테마를 내보내서 필요할 경우 원상복구할 수 있도록 하세요
자신의 테마를 커뮤니티와 공유해 다른 사람들에게 영감을 주세요

문제 해결

색상 팔레트 변경 사항이 적용되지 않으면 페이지를 새로고침해 보세요
CSS 맞춤화가 작동하지 않으면 프론트엔드 버전 1.20.5 이상인지 확인하세요
적용되지 않는 user.css 규칙에 !important를 추가해 보세요
맞춤화 백업을 유지해 쉽게 복원할 수 있도록 하세요

​색상 팔레트 시스템

​색상 테마 맞춤화 방법

​캔버스

​배경 이미지

​노드

​노드 불투명도

​노드 위젯

​텍스트 영역 위젯 글꼴 크기

​사이드바

​통합된 사이드바 폭

​사이드바 크기

​사이드바 위치

​사이드바 스타일

​트리 탐색기

​트리 탐색기 항목 패딩

​user.css를 이용한 고급 맞춤화

​요구사항

​user.css 설정하기

​사용자 디렉토리 위치

​user.css 예제 및 관련 지침

색상 팔레트 시스템

색상 테마 맞춤화 방법

캔버스

배경 이미지

노드

노드 불투명도

노드 위젯

텍스트 영역 위젯 글꼴 크기

사이드바

통합된 사이드바 폭

사이드바 크기

사이드바 위치

사이드바 스타일

트리 탐색기

트리 탐색기 항목 패딩

user.css를 이용한 고급 맞춤화

요구사항

user.css 설정하기

사용자 디렉토리 위치

user.css 예제 및 관련 지침