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

# 체크아웃 브랜딩 설정

> 이 문서는 체크아웃 브랜딩 설정과 각 섹션을 사용하여 체크아웃을 사용자 지정하는 방법을 안내해요.

브랜딩 설정을 사용하면 색상과 타이포그래피부터 버튼, 양식 필드, 페이지 레이아웃까지 체크아웃의 모양과 느낌을 사용자 지정할 수 있어요. 이 도구들을 사용하면 체크아웃 디자인을 브랜드 아이덴티티에 쉽게 맞출 수 있어요.

<div id="how-to-access-it">
  # 접근 방법
</div>

Aftersell에서 **Checkout** 대시보드를 열고 페이지 상단의 **Edit branding**을 클릭하세요.

<Note>
  여기서 브랜딩을 편집하려면 **Shopify Plus** 플랜이 필요해요. Shopify는 Plus에서만 앱이 체크아웃 브랜딩을 읽고 쓸 수 있도록 허용하므로 다른 플랜에서는 이 설정을 저장할 수 없어요. 스토어가 Plus가 아니라면 대신 Shopify 체크아웃 편집기에서 동일한 변경을 하세요: Shopify 관리자에서 **Settings → Checkout → Customize**.
</Note>

<img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/checkout-branding-dashboard-arrow-edit-button.gif?s=a24b8a487de57cad22f82a84d193eebd" alt="Edit branding 버튼을 가리키는 화살표가 있는 Aftersell Checkout 대시보드" width="1432" height="1080" data-path="images/aftersell/checkout-branding-dashboard-arrow-edit-button.gif" />

편집기는 세 그룹으로 구성되어 있어요: **Design system**, **Customizations**, **Advanced**.

***

<div id="design-system">
  # Design system
</div>

Design system 설정은 기초예요. 더 구체적인 설정이 재정의하지 않는 한 체크아웃 전체의 구성 요소가 이를 상속받아요.

<div id="global-colors">
  ## 전역 색상
</div>

스토어와 구매 후 경험 전반에서 사용되는 브랜드 및 시스템 색상이에요. 색상 스킴이 설정되지 않은 경우 구성 요소가 이 색상을 사용해요.

**브랜드 색상**

* **Brand** – 기본 브랜드 색상이에요.
* **Accent** – 상호작용 요소와 강조 요소에 사용돼요.
* **Decorative** – 보조 장식 요소에 사용돼요.

**상태 및 시스템 색상**

* **Success** – 확인 상태예요.
* **Warning** – 주의 메시지예요.
* **Critical** – 오류와 경고예요.
* **Info** – 정보성 메시지예요.

<Note>
  표면 및 버튼 색상은 여기서 설정하지 않아요. **Advanced > Color schemes**에 있어요.
</Note>

<div id="typography">
  ## 타이포그래피
</div>

* **Font size** – **Base size**와 나머지 타입 스케일을 파생시키는 **Scale ratio**를 설정하세요.
* **Primary font** – 일반 텍스트, 버튼, 양식 컨트롤 같은 대부분의 구성 요소에 사용돼요. **Font family**, **Base weight**, **Bold weight**를 선택하세요.
* **Secondary font** – 제목 구성 요소에 사용되며 동일한 세 가지 컨트롤이 있어요.

<div id="corner-radius">
  ## 모서리 반경
</div>

버튼, 양식 필드, 컨테이너 및 기타 구성 요소가 참조하는 공유 모서리 반경 값을 설정해요. 세 가지 크기를 정의해요: **Small**, **Medium**, **Large**.

***

<div id="customizations">
  # Customizations
</div>

<div id="buttons">
  ## 버튼
</div>

**Primary buttons**(페이지의 주요 작업)와 **Secondary buttons**(보조 작업)로 나누어 별도 구성해요. 각각 다음을 포함해요:

* **Corner radius** – Small, Medium, Large 또는 None(각진 모서리).
* **Background** – Solid 또는 None.
* **Vertical padding** 및 **Horizontal padding**.
* **Show border**.

<Note>
  버튼 색상은 색상 스킴에서 상속돼요. 스킴 값이 설정되지 않은 경우 전역 색상이 사용돼요.
</Note>

<div id="form-fields">
  ## 양식 필드
</div>

지원되는 모든 필드 유형에 적용돼요:

* **Corner radius**
* **Label position** – Inside 또는 Outside.
* **Show border**

**필드별 재정의**를 사용하면 특정 필드 유형에 대해 공유 스타일에서 벗어날 수 있어요: **Text field borders**, **Dropdown borders**, **Choice list group spacing**, **Checkbox corner radius**.

<div id="product-thumbnails">
  ## 제품 썸네일
</div>

페이지에서 제품 이미지가 표시되는 방식을 제어해요:

* **Show border**
* **Border radius**
* **Fit**
* **Badge background color** – Accent(스킴 강조 색상) 또는 Base(스킴 기본 색상).

<div id="header">
  ## 헤더
</div>

* **Layout** – **Placement**(Top bar, Left section 또는 Right section)와 **Alignment**(Left, Center 또는 Right).
* **Container** – **Padding**, **Color scheme**, **Show divider**.

<img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/checkout-branding-store-name-header.gif?s=b55fc223b38987bab5e5db18e2bf54ad" alt="왼쪽 상단에 스토어 이름 헤더가 강조 표시된 체크아웃 페이지" width="1872" height="1080" data-path="images/aftersell/checkout-branding-store-name-header.gif" />

<div id="content-area">
  ## 콘텐츠 영역
</div>

메인 영역과 주문 요약 영역 사이의 **Divider**를 제어해요: **Show divider**, **Border style**, **Border weight**.

<div id="main-area">
  ## 메인 영역
</div>

* **Section containers** – 각 섹션 주위의 배경 및 테두리 래퍼: **Background**, **Show border**, **Border style**, **Border weight**.
* **Section dividers** – 섹션 사이에 표시되는 선.

<div id="order-summary">
  ## 주문 요약
</div>

* **Container** – 전체 주문 요약 컨테이너에 적용되는 **Color scheme**.
* **Section dividers** – **Show divider**, **Border style**, **Border weight**.
* **Section containers** – 각 섹션 주위의 배경과 테두리: **Show border**, **Background**, **Border style**, **Border weight**, **Color scheme**, **Corner radius**, **Padding**, **Shadow**.

<img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/checkout-branding-order-summary-product-thumbnail.gif?s=76af2d4e5b5f6e740da03a01a9b79124" alt="이미지 테두리가 강조 표시된 주문 요약 제품 썸네일" width="1264" height="1080" data-path="images/aftersell/checkout-branding-order-summary-product-thumbnail.gif" />

<div id="footer">
  ## 푸터
</div>

* **Layout** – **Placement**와 **Alignment**.
* **Container** – **Show footer content**, **Padding**, **Color scheme**, **Show divider**.

***

<div id="advanced">
  # Advanced
</div>

<div id="color-schemes">
  ## 색상 스킴
</div>

색상 스킴은 다른 섹션이 참조하는 표면, 텍스트, 버튼 색상의 재사용 가능한 세트예요. 두 가지 스킴을 사용할 수 있어요:

* **Scheme 1 - Main area**
* **Scheme 2 - Supporting areas**

각 스킴은 세 그룹으로 나뉘어요:

* **Buttons** – 주요 결제 버튼과 보조 작업에 사용돼요. **Primary button**과 **Secondary button**은 별도로 구성되며 각각 기본 상태와 호버 상태가 있어요.
* **Form controls** – 텍스트 필드, 드롭다운, 선택 목록에 사용돼요.
* **Base surfaces** – 표면 배경, 본문 텍스트 및 보조 역할: 테두리, 강조(링크와 포커스), 장식(은은한 강조), 아이콘 색상.

섹션에 **Color scheme** 컨트롤이 있는 경우 **Scheme 1**, **Scheme 2** 또는 **Transparent**를 지정할 수 있어요.