> ## 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 모양 맞춤화

> 색상 팔레트와 고급 CSS 옵션을 사용해 ComfyUI의 모양을 맞춤화하는 방법을 알아보세요.

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

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

## 색상 팔레트 시스템

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

<img src="https://mintcdn.com/dripart/qYv6P0RgI3co7-eH/images/interface/setting/appearance/color-palette.jpg?fit=max&auto=format&n=qYv6P0RgI3co7-eH&q=85&s=206dbb5bcf19ba1923bd722e20ba868e" alt="색상 팔레트" width="1180" height="174" data-path="images/interface/setting/appearance/color-palette.jpg" />

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

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

<Note>
  색상 팔레트로 만족할 수 없는 모양 관련 요구사항은 [user.css](#advanced-customization-with-user-css) 파일을 통해 고급 모양 맞춤화를 수행할 수 있습니다.
</Note>

### 색상 테마 맞춤화 방법

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

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

```json theme={null}
{
  "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 이상
* **기능**: 캔버스에 맞춤형 배경 이미지를 설정해 더욱 개인화된 작업 공간을 제공합니다. 이미지를 업로드하거나 웹 이미지를 사용해 캔버스의 배경을 설정할 수 있습니다.

<img src="https://mintcdn.com/dripart/qYv6P0RgI3co7-eH/images/interface/setting/appearance/set-as-bg.jpg?fit=max&auto=format&n=qYv6P0RgI3co7-eH&q=85&s=f393d494dfdc8b7b84997d58735d2f86" alt="배경 이미지 설정" width="1768" height="1524" data-path="images/interface/setting/appearance/set-as-bg.jpg" />

## 노드

### 노드 불투명도

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

<img src="https://mintcdn.com/dripart/qYv6P0RgI3co7-eH/images/interface/setting/appearance/node-opacity.jpg?fit=max&auto=format&n=qYv6P0RgI3co7-eH&q=85&s=43e2a908124028996938fedd96869b25" alt="노드 불투명도" width="956" height="594" data-path="images/interface/setting/appearance/node-opacity.jpg" />

## 노드 위젯

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

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

<img src="https://mintcdn.com/dripart/qYv6P0RgI3co7-eH/images/interface/setting/appearance/textarea-font-size.jpg?fit=max&auto=format&n=qYv6P0RgI3co7-eH&q=85&s=2406917ddcec26ddb4e882202d433d0a" alt="텍스트 영역 위젯 글꼴 크기" width="1206" height="650" data-path="images/interface/setting/appearance/textarea-font-size.jpg" />

## 사이드바

### 통합된 사이드바 폭

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

### 사이드바 크기

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

### 사이드바 위치

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

### 사이드바 스타일

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

<img src="https://mintcdn.com/dripart/0LfkiFdUyOZfrZN7/images/interface/setting/appearance/sidbar_style.jpg?fit=max&auto=format&n=0LfkiFdUyOZfrZN7&q=85&s=c2bba9162ac584f219d9be2e912076b3" alt="사이드바 스타일" width="615" height="707" data-path="images/interface/setting/appearance/sidbar_style.jpg" />

## 트리 탐색기

### 트리 탐색기 항목 패딩

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

<img src="https://mintcdn.com/dripart/qYv6P0RgI3co7-eH/images/interface/setting/appearance/padding.jpg?fit=max&auto=format&n=qYv6P0RgI3co7-eH&q=85&s=9fb818218a4713f0a88700de25633a8c" alt="트리 탐색기 항목 패딩" width="1254" height="650" data-path="images/interface/setting/appearance/padding.jpg" />

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

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

### 요구사항

* ComfyUI 프론트엔드 버전 1.20.5 이상

### user.css 설정하기

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

### 사용자 디렉토리 위치

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

<Tabs>
  <Tab title="데스크톱 - Windows">
    ```
    C:\Users\<귀하의 사용자 이름>\AppData\Roaming\ComfyUI\user
    ```
  </Tab>

  <Tab title="데스크톱 - macOS">
    ```
    ~/<ComfyUI 설치 경로>/ComfyUI/user
    ```
  </Tab>

  <Tab title="데스크톱 - Linux">
    ```
    ~/.config/ComfyUI/user
    ```
  </Tab>

  <Tab title="수동 설치">
    사용자 디렉터리는 ComfyUI 설치 폴더에 있습니다:

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

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

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

  <Tab title="휴대용">
    사용자 디렉터리는 ComfyUI 휴대용 폴더에 있습니다:

    ```
    <ComfyUI_windows_portable>/ComfyUI/user
    ```

    예: `ComfyUI_windows_portable/ComfyUI/user/default`

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

이 위치에는 워크플로우, 설정 및 기타 사용자별 파일이 포함되어 있습니다.

위의 폴더 위치를 찾은 후, 해당 CSS 파일을 대응하는 사용자 디렉토리에 복사하세요. 예를 들어 기본 사용자 폴더는 `ComfyUI/user/default`이며, ComfyUI를 다시 시작하거나 페이지를 새로고침해 변경 사항을 적용하세요.

### user.css 예제 및 관련 지침

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

**user.css 맞춤화 예제**

```css theme={null}
/* 입력 및 메뉴의 글꼴 크기를 늘려 더 나은 가독성 확보 */
.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);
}
```

**최적의 사용법**

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

**문제 해결**

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