# 구독 양식 위젯 맞춤 설정하기

기본적으로 구독 양식 위젯은 대부분의 페이지에서 잘 어울리는 중립적인 스타일을 사용합니다. [임베드 코드](/ko/product/audience-data-and-segmentation/subscription-forms/create-subscription-forms/#copy-the-embed-code-and-add-it-to-your-site)를 추가한 후, `pushwoosh-subscribe-widget` 요소에 CSS 사용자 지정 속성을 설정하여 사이트의 시각적 아이덴티티에 맞게 조정할 수 있습니다. 아래 표의 값들은 기본값을 대체합니다.

<Aside type="caution" icon="setting" title="개발자 지원 필요">
웹사이트에 이러한 위젯 스타일 변경 사항을 적용하려면 개발팀의 지원이 필요할 수 있습니다.
</Aside>

## 색상 맞춤 설정하기

| 변수 | 설명 | 기본값 |
| --- | --- | --- |
| `--esw-primary-color` | 버튼, 링크 및 강조 요소의 기본 색상 | `#0E72E5` |
| `--esw-primary-hover` | 기본 요소의 호버 색상 | `#1A85FF` |
| `--esw-text-color` | 주요 텍스트 색상 | `#4B5057` |
| `--esw-text-secondary` | 보조 텍스트 (플레이스홀더, 캡션) | `#969CA3` |
| `--esw-background` | 위젯 배경 | `#FFFFFF` |
| `--esw-surface-color` | 표면 색상 (호버, 보조 배경) | `#F7F9FA` |
| `--esw-border-color` | 테두리 색상 | `#DCE1E5` |
| `--esw-border-color-focus` | 포커스 상태의 테두리 색상 | `#0E72E5` |
| `--esw-error-color` | 오류 색상 | `#E52E59` |
| `--esw-success-color` | 성공 색상 | `#479900` |
| `--esw-success-bg` | 성공 메시지 배경 | `#F7F9FA` |

## 타이포그래피

| 변수 | 설명 | 기본값 |
| --- | --- | --- |
| `--esw-font-family` | 글꼴 모음 | `Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif` |
| `--esw-font-size-base` | 기본 글꼴 크기 | `14px` |
| `--esw-font-size-title` | 제목 글꼴 크기 | `18px` |
| `--esw-font-size-label` | 필드 레이블 글꼴 크기 | `12px` |
| `--esw-font-size-small` | 작은 텍스트 (오류, 메모) | `12px` |
| `--esw-font-weight-regular` | 보통 굵기 | `400` |
| `--esw-font-weight-medium` | 중간 굵기 | `500` |
| `--esw-font-weight-bold` | 굵은 굵기 | `700` |
| `--esw-line-height-base` | 기본 줄 높이 | `1.4` |
| `--esw-line-height-title` | 제목 줄 높이 | `1.2` |

## 크기 및 간격

| 변수 | 설명 | 기본값 |
| --- | --- | --- |
| `--esw-input-height` | 입력 필드 높이 | `36px` |
| `--esw-button-height` | 버튼 높이 | `36px` |
| `--esw-spacing-xs` | 가장 작은 간격 | `4px` |
| `--esw-spacing-sm` | 작은 간격 | `8px` |
| `--esw-spacing-md` | 중간 간격 | `16px` |
| `--esw-spacing-lg` | 큰 간격 | `24px` |
| `--esw-popup-width` | 모달 너비 | `380px` |
| `--esw-popup-max-width` | 모달 최대 너비 | `90vw` |

## 모양

| 변수 | 설명 | 기본값 |
| --- | --- | --- |
| `--esw-border-radius` | 요소의 모서리 반경 | `4px` |
| `--esw-border-radius-popup` | 모달 모서리 반경 | `8px` |
| `--esw-shadow-popup` | 모달 박스 섀도 | `0 0 6px rgba(0, 0, 0, 0.06), 0 10px 16px rgba(0, 0, 0, 0.1)` |

## 예시

<Tabs>
<TabItem label="CSS">

```css
pushwoosh-subscribe-widget {
  --esw-primary-color: #ff6b6b;
  --esw-border-radius: 12px;
  --esw-font-family: "Inter", sans-serif;
}
```

</TabItem>
<TabItem label="Style attribute">

```html
<pushwoosh-subscribe-widget
  formCode="YOUR_FORM_CODE"
  style="--esw-primary-color: #ff6b6b; --esw-border-radius: 12px;"
></pushwoosh-subscribe-widget>
```

</TabItem>
</Tabs>