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

# 디자인 및 테마 커스터마이징

> 하나의 장소에서 결제, 스토어프론트, 고객 포털의 모양과 느낌을 맞춤화하세요. 미리 준비된 테마를 선택하고 타이포그래피와 색상 설정을 구성하며 섹션별 오버라이드를 적용하여 실시간 미리보기를 확인할 수 있습니다.

<Frame>
  <img src="https://mintcdn.com/dodopayments/vsqWNGxzquCPMqJB/images/design/general-overview.jpg?fit=max&auto=format&n=vsqWNGxzquCPMqJB&q=85&s=89f19bfb791cb903fccb3ea7127246ba" alt="결제, 고객 포털, 스토어프론트의 실시간 미리보기가 있는 디자인 설정 페이지" width="2880" height="1920" data-path="images/design/general-overview.jpg" />
</Frame>

<Info>
  디자인 페이지는 결제, 스토어프론트, 고객 포털 등 모든 고객 대면 환경의 브랜딩을 관리하는 중앙 허브입니다. 변경사항은 세 영역 전체에 즉시 적용되며 저장 전에 실시간으로 미리볼 수 있습니다.
</Info>

## 주요 하이라이트

1. **통합 디자인 허브** - 하나의 페이지에서 결제, 스토어프론트, 고객 포털 외관을 구성하세요.
2. **미리 제작된 테마** - 선별된 테마를 시작점으로 사용하고 커스터마이징하세요.
3. **라이트 및 다크 모드** - 각 모드에 대해 별도의 색상 팔레트를 정의하세요.
4. **실시간 미리보기** - 저장하기 전에 변경사항이 결제, 고객 포털, 스토어프론트에서 어떻게 보이는지 확인하세요.
5. **섹션별 오버라이드** - 서로 영향을 주지 않고 개별 섹션(결제, 스토어프론트, 고객 포털)을 세밀하게 조정하세요.
6. **프로그램 방식 제어** - API 또는 Checkout SDK를 통해 결제 시 테마를 오버라이드하세요.

## 시작하기

상인 대시보드의 왼쪽 사이드바에서 **디자인**으로 이동하세요. 디자인 페이지에는 네 개의 탭이 있습니다:

| 탭          | 용도                         |
| ---------- | -------------------------- |
| **일반**     | 상호명, 로고, 테마 선택, 글로벌 고급 설정  |
| **결제**     | 결제 페이지용 테마 설정을 별도로 오버라이드   |
| **스토어프론트** | 스토어프론트 레이아웃을 구성하고 테마 오버라이드 |
| **고객 포털**  | 고객 포털용 테마 오버라이드            |

## 일반 설정

**일반** 탭은 기본 브랜드 아이덴티티와 전역 테마를 제어합니다.

<Frame>
  <img src="https://mintcdn.com/dodopayments/vsqWNGxzquCPMqJB/images/design/general-advanced-settings.jpg?fit=max&auto=format&n=vsqWNGxzquCPMqJB&q=85&s=00131c2a9d74d4c120bf85f588e358d8" alt="타이포그래피, 색상, 테두리 구성이 표시된 고급 설정이 확장된 일반 탭" width="2880" height="2672" data-path="images/design/general-advanced-settings.jpg" />
</Frame>

### 기본 구성

| 설정         | 설명                         |
| ---------- | -------------------------- |
| **상호명**    | 결제, 스토어프론트, 고객 포털에 표시되는 이름 |
| **브랜드 로고** | 모든 고객 대상 페이지에 표시되는 로고      |
| **테마**     | 시작점으로 사용할 미리 제작된 테마 선택     |

### 고급 설정

**고급 설정**을 확장하여 세부 제어에 접근하세요:

<Frame>
  <img src="https://mintcdn.com/dodopayments/vsqWNGxzquCPMqJB/images/design/general-color-settings.jpg?fit=max&auto=format&n=vsqWNGxzquCPMqJB&q=85&s=c09ecc738beb79cff0d130f46bb72b0a" alt="라이트 및 다크 모드의 전체 색상 구성이 표시된 고급 설정 확장" width="2880" height="4192" data-path="images/design/general-color-settings.jpg" />
</Frame>

#### 타이포그래피

| 설정        | 옵션                                      | 설명                     |
| --------- | --------------------------------------- | ---------------------- |
| **기본 글꼴** | 모든 Google 글꼴                            | 제목 및 본문 텍스트에 사용할 주요 글꼴 |
| **보조 글꼴** | 모든 Google 글꼴                            | 라벨 및 보조 텍스트에 사용할 강조 글꼴 |
| **글꼴 크기** | `xs`, `sm`, `md`, `lg`, `xl`, `2xl`     | 전체 기본 글꼴 크기            |
| **글꼴 굵기** | `normal`, `medium`, `bold`, `extraBold` | 기본 글꼴 굵기               |

#### 색상 구성

**라이트 모드**와 **다크 모드**에 대해 별도의 색상 팔레트를 정의하세요. 각 모드는 다음 속성을 지원합니다:

| 속성            | 설명             |
| ------------- | -------------- |
| **배경 기본**     | 기본 배경 색상       |
| **배경 보조**     | 보조 배경(탭, 카드)   |
| **텍스트 기본**    | 주요 텍스트 색상      |
| **텍스트 보조**    | 흐릿한 텍스트 색상     |
| **기본 버튼**     | 기본 버튼 배경       |
| **기본 버튼 텍스트** | 기본 버튼 위 텍스트 색상 |
| **보조 버튼**     | 보조 버튼 배경       |
| **보조 버튼 텍스트** | 보조 버튼 위 텍스트 색상 |
| **테두리 기본**    | 주요 테두리 색상      |
| **테두리 보조**    | 강조 테두리 색상      |

#### 테두리

| 설정         | 설명                                                                            |
| ---------- | ----------------------------------------------------------------------------- |
| **테두리 반경** | 입력 필드, 버튼, 탭, 카드의 모서리 둥근 정도 제어 (예: `0`는 날카로운 모서리, `8px`는 둥근 모서리, `16px`는 캡슐형) |

## 미리 제작된 테마

Dodo Payments는 네 가지 선별 테마를 제공합니다. 일반 탭의 **테마** 드롭다운에서 하나를 선택하면 결제, 스토어프론트, 고객 포털 전반에 통합된 디자인이 즉시 적용됩니다.

### Dodo Pulses

기본 Dodo Payments 테마입니다. 라임색 강조는 에너지 넘치고 신선한 느낌을 주며, 깨끗한 산세리프 타이포그래피와 넉넉한 여백을 특징으로 합니다.

<Tabs>
  <Tab title="Light Mode">
    <Frame caption="Dodo Pulses in light mode">
      <img src="https://mintcdn.com/dodopayments/fsVpks_kbNisjAe1/images/design/theme-dodo-pulses-light.png?fit=max&auto=format&n=fsVpks_kbNisjAe1&q=85&s=f081086300770146c0df373b6304ea12" alt="결제, 고객 포털, 스토어프론트의 라이트 모드에서 Dodo Pulses 테마" width="912" height="525" data-path="images/design/theme-dodo-pulses-light.png" />
    </Frame>
  </Tab>

  <Tab title="Dark Mode">
    <Frame caption="Dodo Pulses in dark mode">
      <img src="https://mintcdn.com/dodopayments/fsVpks_kbNisjAe1/images/design/theme-dodo-pulses-dark.png?fit=max&auto=format&n=fsVpks_kbNisjAe1&q=85&s=d2fe47c69734ccb419471609095627fe" alt="결제, 고객 포털, 스토어프론트의 다크 모드에서 Dodo Pulses 테마" width="912" height="525" data-path="images/design/theme-dodo-pulses-dark.png" />
    </Frame>
  </Tab>
</Tabs>

### Terminal

모노스페이스 타이포그래피와 로열 블루 강조가 있는 개발자 지향 테마입니다. 날카로운 모서리와 기술적인 미학이 개발 도구 및 API 중심 제품과 잘 어울립니다.

<Tabs>
  <Tab title="Light Mode">
    <Frame caption="Terminal in light mode">
      <img src="https://mintcdn.com/dodopayments/fsVpks_kbNisjAe1/images/design/theme-terminal-light.png?fit=max&auto=format&n=fsVpks_kbNisjAe1&q=85&s=3e3320fc9c073ed9bf3ebe7b03bf7a3f" alt="파란색 강조 및 모노스페이스 글꼴이 있는 라이트 모드의 Terminal 테마" width="912" height="526" data-path="images/design/theme-terminal-light.png" />
    </Frame>
  </Tab>

  <Tab title="Dark Mode">
    <Frame caption="Terminal in dark mode">
      <img src="https://mintcdn.com/dodopayments/fsVpks_kbNisjAe1/images/design/theme-terminal-dark.png?fit=max&auto=format&n=fsVpks_kbNisjAe1&q=85&s=dea087e1c0fad9cf7a66fc37cfbda8ac" alt="파란색 강조 및 모노스페이스 글꼴이 있는 다크 모드의 Terminal 테마" width="912" height="526" data-path="images/design/theme-terminal-dark.png" />
    </Frame>
  </Tab>
</Tabs>

### Bumblebee

따뜻한 호박색 및 금색 강조와 둥근 현대적 스타일입니다. 대담하고 대비가 강해 프리미엄으로 보이길 원하는 소비자 대상 제품에 적합합니다.

<Tabs>
  <Tab title="Light Mode">
    <Frame caption="Bumblebee in light mode">
      <img src="https://mintcdn.com/dodopayments/fsVpks_kbNisjAe1/images/design/theme-bumblebee-light.png?fit=max&auto=format&n=fsVpks_kbNisjAe1&q=85&s=e276288fe683a831d10add3f8af4eae0" alt="호박색 강조가 있는 라이트 모드의 Bumblebee 테마" width="912" height="536" data-path="images/design/theme-bumblebee-light.png" />
    </Frame>
  </Tab>

  <Tab title="Dark Mode">
    <Frame caption="Bumblebee in dark mode">
      <img src="https://mintcdn.com/dodopayments/vsqWNGxzquCPMqJB/images/design/theme-bumblebee-dark.png?fit=max&auto=format&n=vsqWNGxzquCPMqJB&q=85&s=a35df24ccd45a9acb717652ce5b5fd19" alt="금색 강조가 있는 다크 모드의 Bumblebee 테마" width="912" height="536" data-path="images/design/theme-bumblebee-dark.png" />
    </Frame>
  </Tab>
</Tabs>

### Bubblegum

장난기 있는 핑크 및 마젠타 강조와 완전히 둥근 모서리입니다. 크리에이티브 도구, 디자인 제품, 라이프스타일 브랜드에 잘 어울리는 현대적이고 접근성 있는 룩입니다.

<Tabs>
  <Tab title="Light Mode">
    <Frame caption="Bubblegum in light mode">
      <img src="https://mintcdn.com/dodopayments/vsqWNGxzquCPMqJB/images/design/theme-bubblegum-light.png?fit=max&auto=format&n=vsqWNGxzquCPMqJB&q=85&s=3b53c9d3c6d07ef0ff44d4c613520789" alt="핑크 강조가 있는 라이트 모드의 Bubblegum 테마" width="912" height="536" data-path="images/design/theme-bubblegum-light.png" />
    </Frame>
  </Tab>

  <Tab title="Dark Mode">
    <Frame caption="Bubblegum in dark mode">
      <img src="https://mintcdn.com/dodopayments/vsqWNGxzquCPMqJB/images/design/theme-bubblegum-dark.png?fit=max&auto=format&n=vsqWNGxzquCPMqJB&q=85&s=ef4a70ff8f289715628377b0631adf25" alt="핑크 강조가 있는 다크 모드의 Bubblegum 테마" width="912" height="536" data-path="images/design/theme-bubblegum-dark.png" />
    </Frame>
  </Tab>
</Tabs>

<Tip>
  미리 제작된 테마를 선택하면 고급 설정에서 개별 속성을 추가로 커스터마이징할 수 있습니다. 지정하지 않은 속성은 테마 기본값을 따릅니다.
</Tip>

## 섹션별 오버라이드

각 섹션 탭(결제, 스토어프론트, 고객 포털)에는 **테마 오버라이드** 토글이 포함되어 있습니다. 활성화하면 그 섹션의 외관을 전역 테마와 별개로 커스터마이징할 수 있습니다.

### 결제 탭

<Frame>
  <img src="https://mintcdn.com/dodopayments/vsqWNGxzquCPMqJB/images/design/checkout-tab.jpg?fit=max&auto=format&n=vsqWNGxzquCPMqJB&q=85&s=a17880492490e6abe2f6b8b9e9f4680e" alt="제품 정보와 결제 폼을 포함한 전체 결제 미리보기가 있는 결제 탭" width="2880" height="2528" data-path="images/design/checkout-tab.jpg" />
</Frame>

결제 환경에 대해 타이포그래피, 색상, 테두리 설정을 개별적으로 오버라이드하세요. 실시간 미리보기에는 다음 항목이 표시됩니다:

* 제품 정보 및 가격
* 익스프레스 결제 옵션(Apple Pay, Google Pay)
* 결제 수단 선택 및 카드 폼
* 할인 코드 입력 및 가격 내역

### 스토어프론트 탭

<Frame>
  <img src="https://mintcdn.com/dodopayments/vsqWNGxzquCPMqJB/images/design/storefront-tab.jpg?fit=max&auto=format&n=vsqWNGxzquCPMqJB&q=85&s=3b45fc842eb771be573ae1a5744d82c5" alt="스토어 URL, 브랜딩 제어, 스토어프론트 미리보기가 있는 스토어프론트 탭" width="2880" height="2528" data-path="images/design/storefront-tab.jpg" />
</Frame>

스토어프론트 관련 설정을 구성하세요:

| 설정           | 설명                                                 |
| ------------ | -------------------------------------------------- |
| **스토어 URL**  | 스토어프론트 주소 (예: `store.dodopayments.com/your-store`) |
| **스토어 이름**   | 스토어프론트에 표시될 이름을 토글하고 설정                            |
| **스토어 로고**   | 스토어프론트 헤더에 표시할 로고를 토글 및 업로드                        |
| **스토어 배너**   | 배너 이미지를 토글 및 업로드                                   |
| **제품 설명**    | 카드에 제품 설명을 표시할지 숨길지 토글                             |
| **테마 오버라이드** | 스토어프론트에 대해 타이포그래피, 색상, 테두리를 별도로 커스터마이징하려면 활성화      |

### 고객 포털 탭

<Frame>
  <img src="https://mintcdn.com/dodopayments/vsqWNGxzquCPMqJB/images/design/customer-portal-tab.jpg?fit=max&auto=format&n=vsqWNGxzquCPMqJB&q=85&s=38c16ef9ed1648f0f5d3851d7c91f17c" alt="구독 관리, 청구 내역, 결제 수단 미리보기를 포함한 고객 포털 탭" width="2880" height="2528" data-path="images/design/customer-portal-tab.jpg" />
</Frame>

고객 포털의 테마를 오버라이드하여 다음을 포함합니다:

* 구독 관리
* 청구 내역
* 결제 수단
* 월렛 및 크레딧

## 관련 자료

<CardGroup cols={2}>
  <Card title="Checkout Features" icon="cart-shopping" href="/features/checkout">
    통화, 언어, 세금, 할인 등을 포함한 결제 기능입니다.
  </Card>

  <Card title="Overlay Checkout SDK" icon="layer-group" href="/developer-resources/overlay-checkout">
    결제를 페이지에 오버레이 모달로 삽입합니다.
  </Card>

  <Card title="Inline Checkout SDK" icon="credit-card" href="/developer-resources/inline-checkout">
    결제를 페이지 레이아웃에 직접 삽입합니다.
  </Card>

  <Card title="Storefront" icon="store" href="/features/storefront">
    브랜드화된 스토어프론트를 설정하고 관리합니다.
  </Card>

  <Card title="Customer Portal" icon="user" href="/features/customer-portal">
    구독 및 청구를 위한 고객 셀프 서비스 포털입니다.
  </Card>

  <Card title="Multi-Brand Setup" icon="building-columns" href="/features/multi-brands">
    별도 브랜딩으로 여러 브랜드를 하나의 계정에서 운영합니다.
  </Card>
</CardGroup>