> ## 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 설정 패널을 열면 표시될 설정 객체를 ComfyUI에 제공할 수 있습니다.

## 기본 작동

### 설정 추가하기

```javascript theme={null}
import { app } from "../../scripts/app.js";

app.registerExtension({
    name: "My Extension",
    settings: [
        {
            id: "example.boolean",
            name: "예제 부울 설정",
            type: "boolean",
            defaultValue: false,
        },
    ],
});
```

`id`는 모든 확장 프로그램에서 고유해야 하며, 값을 가져오는 데 사용됩니다.

[카테고리를 제공하지 않으면](#categories) `id`가 `.`로 분리되어 설정 패널의 위치를 결정합니다.

* `id`에 `.`이 없으면 "기타" 카테고리에 나타나며, `id`가 섹션 제목으로 사용됩니다.
* `id`에 적어도 하나의 `.`이 있으면 가장 왼쪽 부분이 설정 카테고리로 사용되고, 두 번째 부분이 섹션 제목으로 사용됩니다. 그 이상의 부분은 무시됩니다.

### 설정 읽기

```javascript theme={null}
import { app } from "../../scripts/app.js";

if (app.extensionManager.setting.get('example.boolean')) {
    console.log("설정이 활성화되었습니다.");
} else {
    console.log("설정이 비활성화되었습니다.");
}
```

### 변경 사항 반응하기

`onChange()` 이벤트 핸들러는 사용자가 설정 패널에서 설정을 변경하자마자 호출됩니다.

확장 프로그램이 등록될 때와 페이지가 로드될 때마다 이 이벤트 핸들러가 호출됩니다.

```javascript theme={null}
{
    id: "example.boolean",
    name: "예제 부울 설정",
    type: "boolean",
    defaultValue: false,
    onChange: (newVal, oldVal) => {
        console.log(`설정이 ${oldVal}에서 ${newVal}로 변경되었습니다.`);
    },
}
```

### 설정 쓰기

```javascript theme={null}
import { app } from "../../scripts/app.js";

try {
    await app.extensionManager.setting.set("example.boolean", true);
} catch (error) {
    console.error(`설정 변경 중 오류 발생: ${error}`);
}
```

### 추가 구성

설정 유형은 [PrimeVue](https://primevue.org/) 컴포넌트를 기반으로 합니다.
PrimeVue 문서에 설명된 속성을 `attrs` 필드에 추가하면 ComfyUI 설정에도 적용할 수 있습니다.

예를 들어, 숫자 입력에 증감 버튼을 추가하려면 다음과 같이 작성합니다:

```javascript theme={null}
{
    id: "example.number",
    name: "예제 숫자 설정",
    type: "number",
    defaultValue: 0,
    attrs: {
        showButtons: true,
    },
    onChange: (newVal, oldVal) => {
        console.log(`설정이 ${oldVal}에서 ${newVal}로 변경되었습니다.`);
    },
}
```

## 유형

### 부울

이것은 켜기/끄기 토글을 표시합니다.

[ToggleSwitch PrimeVue 컴포넌트](https://primevue.org/toggleswitch/)를 기반으로 합니다.

```javascript theme={null}
{
    id: "example.boolean",
    name: "예제 부울 설정",
    type: "boolean",
    defaultValue: false,
    onChange: (newVal, oldVal) => {
        console.log(`설정이 ${oldVal}에서 ${newVal}로 변경되었습니다.`);
    },
}
```

### 텍스트

이것은 자유 형식 텍스트입니다.

[InputText PrimeVue 컴포넌트](https://primevue.org/inputtext/)를 기반으로 합니다.

```javascript theme={null}
{
    id: "example.text",
    name: "예제 텍스트 설정",
    type: "text",
    defaultValue: "Foo",
    onChange: (newVal, oldVal) => {
        console.log(`설정이 ${oldVal}에서 ${newVal}로 변경되었습니다.`);
    },
}
```

### 숫자

숫자를 입력하는 데 사용됩니다.

소수점 자리를 허용하려면 `maxFractionDigits` 속성을 0보다 큰 숫자로 설정하세요.

[InputNumber PrimeVue 컴포넌트](https://primevue.org/inputnumber/)를 기반으로 합니다.

```javascript theme={null}
{
    id: "example.number",
    name: "예제 숫자 설정",
    type: "number",
    defaultValue: 42,
    attrs: {
        showButtons: true,
        maxFractionDigits: 1,
    },
    onChange: (newVal, oldVal) => {
        console.log(`설정이 ${oldVal}에서 ${newVal}로 변경되었습니다.`);
    },
}
```

### 슬라이더

사용자가 직접 숫자를 입력하거나 슬라이더를 통해 입력할 수 있도록 합니다.

[Slider PrimeVue 컴포넌트](https://primevue.org/slider/)를 기반으로 합니다. 범위는 지원되지 않습니다.

```javascript theme={null}
{
    id: "example.slider",
    name: "예제 슬라이더 설정",
    type: "slider",
    attrs: {
        min: -10,
        max: 10,
        step: 0.5,
    },
    defaultValue: 0,
    onChange: (newVal, oldVal) => {
        console.log(`설정이 ${oldVal}에서 ${newVal}로 변경되었습니다.`);
    },
}
```

### 콤보

사용자가 드롭다운 목록에서 값을 선택하도록 합니다.

옵션을 일반 문자열 또는 `text`와 `value` 필드가 있는 객체로 제공할 수 있습니다. 일반 문자열만 제공하면 두 값 모두에 사용됩니다.

`editable: true` 속성을 제공해 사용자가 자유 형식 텍스트를 입력하게 하거나, `filter: true` 속성을 제공해 검색할 수 있게 할 수 있습니다.

[Select PrimeVue 컴포넌트](https://primevue.org/select/)를 기반으로 합니다. 그룹은 지원되지 않습니다.

```javascript theme={null}
{
    id: "example.combo",
    name: "예제 콤보 설정",
    type: "combo",
    defaultValue: "first",
    options: [
        { text: "내 첫 번째 옵션", value: "first" },
        "내 두 번째 옵션",
    ],
    attrs: {
        editable: true,
        filter: true,
    },
    onChange: (newVal, oldVal) => {
        console.log(`설정이 ${oldVal}에서 ${newVal}로 변경되었습니다.`);
    },
}
```

### 색상

사용자가 색상 피커에서 색상을 선택하거나 16진수 참조를 입력할 수 있도록 합니다.

포맷은 6자리 16진수를 요구하며, 3자리 축약형은 작동하지 않습니다.

[ColorPicker PrimeVue 컴포넌트](https://primevue.org/colorpicker/)를 기반으로 합니다.

```javascript theme={null}
{
    id: "example.color",
    name: "예제 색상 설정",
    type: "color",
    defaultValue: "ff0000",
    onChange: (newVal, oldVal) => {
        console.log(`설정이 ${oldVal}에서 ${newVal}로 변경되었습니다.`);
    },
}
```

### 이미지

사용자가 이미지를 업로드할 수 있도록 합니다.

설정은 [데이터 URL](https://developer.mozilla.org/en-US/docs/Web/URI/Schemes/data)로 저장됩니다.

[FileUpload PrimeVue 컴포넌트](https://primevue.org/fileupload/)를 기반으로 합니다.

```javascript theme={null}
{
    id: "example.image",
    name: "예제 이미지 설정",
    type: "image",
    onChange: (newVal, oldVal) => {
        console.log(`설정이 ${oldVal}에서 ${newVal}로 변경되었습니다.`);
    },
}
```

### 숨겨진

숨겨진 설정은 설정 패널에 표시되지 않지만, 코드에서 읽고 쓸 수 있습니다.

```javascript theme={null}
{
    id: "example.hidden",
    name: "예제 숨겨진 설정",
    type: "hidden",
}
```

## 기타

### 카테고리

설정의 카테고리화를 `id`와 별도로 지정할 수 있습니다. 이는 카테고리화와 이름을 변경하면서도 `id`를 바꾸지 않고 사용자가 이미 설정한 값을 잃지 않도록 합니다.

```javascript theme={null}
{
    id: "example.boolean",
    name: "예제 부울 설정",
    type: "boolean",
    defaultValue: false,
    category: ["카테고리 이름", "섹션 제목", "설정 라벨"],
}
```

### 도구 설명

`tooltip` 필드를 통해 추가적인 상황별 도움말을 추가할 수 있습니다. 이는 필드 이름 뒤에 작은 ℹ︎ 아이콘을 추가하고, 사용자가 마우스를 갖다 대면 도움말 텍스트를 표시합니다.

```javascript theme={null}
{
    id: "example.boolean",
    name: "예제 부울 설정",
    type: "boolean",
    defaultValue: false,
    tooltip: "이것은 도움이 되는 정보입니다",
}
```