---
title: "브랜딩과 테마: CheckoutOS 문서 | Chargezen"
description: "결제 확장 기능의 디자인을 브랜드에 맞게 설정해요. Chargezen CheckoutOS 문서의 설정과 구성 섹션에 있어요."
url: "https://chargezen.com/ko/docs/checkoutos/setup/branding"
lang: "ko"
updated: "2025-01-16"
---

Canonical URL: https://chargezen.com/ko/docs/checkoutos/setup/branding

# 브랜딩과 테마

결제 확장 기능의 디자인을 브랜드에 맞게 설정해요

마지막 업데이트: 2025-01-16

CheckoutOS 확장 기능은 Shopify 결제 브랜딩을 자동으로 적용해요. 색상, 글꼴, 스타일을 추가로 조정해 브랜드 정체성과 어울리는 자연스러운 경험을 만들 수 있어요.

**Dashboard → Settings → Branding**에서 브랜딩 설정을 열어요.

Shopify 결제 브랜딩

CheckoutOS는 Shopify 결제 브랜딩 설정을 따라요. 먼저 **Shopify Admin → Settings → Checkout**에서 기본 결제 디자인을 설정한 다음 CheckoutOS 브랜딩에서 확장 기능별로 조정하세요.

## 브랜드 색상

모든 결제 확장 기능에서 사용할 브랜드 색상 팔레트를 지정하세요.

### 기본 색상

브랜드의 기본 색상은 다음에 사용돼요.

*   행동 유도 버튼(Accept, Add to Order)
*   진행률 표시줄 채우기
*   활성 상태 표시
*   링크 텍스트

색상 변수

```css
/* CheckoutOS automatically generates these CSS variables */
--checkoutos-primary: #4F46E5;
--checkoutos-primary-hover: #4338CA;
--checkoutos-primary-light: #EEF2FF;
--checkoutos-primary-contrast: #FFFFFF;
```

### 보조 색상

보조 색상은 기본 색상을 보완해요.

*   **Accent Color** — 배지, 강조 표시, 보조 버튼
*   **Success Color** — 확인 메시지와 체크 표시
*   **Warning Color** — 긴급성 표시와 타이머

## 타이포그래피

기본적으로 CheckoutOS는 Shopify 결제 글꼴을 사용해요. 특정 요소에는 다른 글꼴을 적용할 수 있어요.

### 글꼴 설정

*   **Heading Font** — 추가 판매 제목과 확장 기능 머리말에 사용해요
*   **Body Font** — 설명과 본문에 사용해요
*   **Button Font** — 행동 유도 버튼 텍스트에 사용해요

CheckoutOS는 Google Fonts와 모든 웹 안전 글꼴을 지원해요. 맞춤 글꼴은 CSS로 불러올 수 있어요.

성능 고려 사항

맞춤 글꼴을 불러오면 결제 성능에 영향을 줄 수 있어요. 추가 네트워크 요청을 피하려면 Shopify 테마에서 이미 불러온 글꼴을 사용하는 것이 좋아요.

## 로고 설정

브랜드 일관성을 위해 구매 후 추가 판매 페이지에 로고를 추가하세요.

1

#### 로고 업로드

2

#### 로고 위치 설정

3

#### 다크 모드 버전 설정

## 버튼 스타일

동작 버튼의 디자인을 맞춤 설정하세요.

### 버튼 모양

*   **Rounded** — 부드럽게 둥근 모서리(반경 8px)
*   **Pill** — 양 끝이 완전히 둥근 모양
*   **Square** — 각진 모서리(반경 0px)
*   **Custom** — 모서리 반경을 직접 지정해요

### 버튼 크기

*   **Small** — 공간을 적게 차지하는 작은 버튼
*   **Medium** — 균형 잡힌 크기(권장)
*   **Large** — 강조하기 좋은 눈에 잘 띄는 버튼

버튼 구성

```json
{
  "primaryButton": {
    "backgroundColor": "#4F46E5",
    "textColor": "#FFFFFF",
    "borderRadius": "8px",
    "fontSize": "16px",
    "padding": "12px 24px",
    "hoverEffect": "darken"
  },
  "secondaryButton": {
    "backgroundColor": "transparent",
    "textColor": "#4F46E5",
    "border": "1px solid #4F46E5",
    "borderRadius": "8px"
  }
}
```

## 맞춤 CSS

고급 맞춤 설정을 위해 모든 CheckoutOS 확장 기능에 적용되는 CSS를 추가할 수 있어요.

맞춤 CSS 예시

```css
/* Target upsell offer cards */
.checkoutos-upsell-card {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border: 1px solid #E5E7EB;
}

/* Customize the accept button */
.checkoutos-accept-btn {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

/* Style the countdown timer */
.checkoutos-timer {
  background: linear-gradient(90deg, #EF4444, #DC2626);
  color: white;
  padding: 4px 12px;
  border-radius: 999px;
}
```

CSS 명시도

맞춤 CSS는 Shopify 결제 스타일보다 명시도가 낮아요. `!important`는 꼭 필요한 경우에만 사용하고 여러 기기에서 충분히 테스트하세요.

## 미리 보기와 테스트

브랜딩 변경 사항은 게시 전에 항상 미리 확인하세요.

*   **Live Preview** — 편집하면서 변경 사항을 실시간으로 확인해요
*   **Device Preview** — 데스크톱, 태블릿, 모바일 화면에서 테스트해요
*   **Test Mode** — 고객에게 영향을 주지 않고 실제 주문에서 변경 사항을 보도록 테스트 모드를 활성화해요

1

#### 변경 사항 적용

2

#### 모든 기기에서 미리 보기

3

#### 테스트 모드 활성화

4

#### 변경 사항 게시

## 다음 단계

[

### 첫 추가 판매 만들기

구매 후 추가 판매에 브랜드 경험을 활용해요

자세히 보기



](https://chargezen.com/ko/docs/checkoutos/one-click-upsells/creating-first-upsell)[

### 결제 확장 기능

브랜드 디자인을 적용한 신뢰 배지와 진행률 표시줄을 추가해요

자세히 보기



](https://chargezen.com/ko/docs/checkoutos/checkout-extensions/overview)

이 페이지가 도움이 되었나요?

도움이 더 필요하신가요? [고객 지원 문의](https://chargezen.com/ko/docs/checkoutos/troubleshooting/support)