> ## 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.

# 디자인 설정

> Aftersell Cart의 전역 및 블록별 디자인 설정: 색상, 버튼, 레이아웃, 그리고 블록 재정의가 적용되는 방식.

Aftersell Cart 디자인은 두 가지 수준에서 작동해요: 장바구니 전체의 스타일을 지정하는 **전역** 설정과, 개별 블록을 세밀하게 조정하는 **블록별** 재정의예요.

<div id="global-design-settings">
  ## 전역 디자인 설정
</div>

에디터 사이드바에서 **Cart settings**를 열어 장바구니의 전역 디자인에 접근하세요. 설정은 Design, Buttons, Layout으로 그룹화되어 있어요.

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

| 설정                       | 제어 대상                              | 기본값       |
| ------------------------ | ---------------------------------- | --------- |
| **Background color**     | 장바구니의 배경이에요.                       | `#ffffff` |
| **Text color**           | 기본 텍스트예요.                          | `#000000` |
| **Secondary text color** | 흐리게 표시되는 보조 텍스트예요.                 | `#a8a8a8` |
| **Accent color**         | 배지, 구분선, 취소선 가격이에요.                | `#f2f2f2` |
| **Border radius**        | 컨테이너, 카드, 이미지, 텍스트 입력란의 모서리 둥글기예요. | `8px`     |

<div id="buttons">
  ### Buttons
</div>

| 설정                   | 제어 대상                        | 기본값       |
| -------------------- | ---------------------------- | --------- |
| **Background color** | 버튼 배경색이에요.                   | `#000000` |
| **Text color**       | 버튼 라벨이에요.                    | `#ffffff` |
| **Border color**     | 버튼 테두리예요.                    | `#000000` |
| **Border radius**    | 버튼, 드롭다운, 수량 컨트롤의 모서리 둥글기예요. | `8px`     |

<div id="layout">
  ### Layout
</div>

| 설정                     | 제어 대상                       | 기본값     |
| ---------------------- | --------------------------- | ------- |
| **Horizontal padding** | 장바구니 내부의 좌우 여백이에요.          | `24px`  |
| **Desktop width**      | 데스크톱에서 드로어의 너비예요(최소 320px). | `440px` |

<div id="per-block-design-overrides">
  ## 블록별 디자인 재정의
</div>

[**Custom code**](/ko/aftersell/cart/custom-code-blocks)를 제외한 모든 블록은 설정 패널 하단에 자체 블록별 디자인 재정의가 있어요 — 모든 블록에서 **Design**이라는 제목이 붙지만, **Express payments**는 예외로 라벨이 없는 Style 및 Spacing 섹션에 재정의가 있어요. (Custom code는 설정 패널이 아예 없어요 — 블록 자체가 코드이므로 Code 탭만 표시돼요.) 이 설정은 스타일, 간격 및 기타 블록별 디자인 설정을 제어해요. 이 **블록별 디자인 설정**은 비어 있으면 해당 속성의 전역 설정으로 대체돼요.

또한 많은 블록의 Design 패널에는 **Text** 섹션이 포함되어 있어요. 이곳에서 해당 블록의 특정 텍스트 요소에 대한 타이포그래피 — 글꼴 패밀리, 크기, 줄 높이, 문자 간격 — 를 설정할 수 있어요. 텍스트 요소가 여러 개인 블록(Notes 및 Empty cart 등)에는 **Text element** 선택기가 표시되어 각 요소의 스타일을 독립적으로 지정할 수 있어요.

<Frame>
  <img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/cart-design-animated-preview-block-settings.gif?s=ae602b5294a5d8ef7caae96476df2d1b" alt="카트 에디터의 블록별 Design 설정 패널 애니메이션 미리보기" title="카트 에디터의 블록별 Design 설정 패널 애니메이션 미리보기" width="2188" height="1080" data-path="images/aftersell/cart-design-animated-preview-block-settings.gif" />
</Frame>

<div id="fonts-and-drawer-position">
  ## 글꼴과 드로어 위치
</div>

* **글꼴:** 장바구니는 기본적으로 **테마의 글꼴**을 상속해요. 각 블록의 Design 설정에 있는 **Text** 섹션에서 선택 텍스트 요소(상품 제목, 업셀 헤딩 등)에 커스텀 폰트 패밀리를 지정할 수 있어요 — 자세한 내용은 [Cart items 블록](/ko/aftersell/cart/cart-items-block)과 [Upsells 블록](/ko/aftersell/cart/upsells-block)을 참고하세요.
* **드로어 위치:** 드로어의 **너비**는 조정할 수 있어요(위의 Desktop width). 좌/우 위치 설정은 없어요.

<div id="behavior-settings">
  ## 동작 설정
</div>

스타일링 외에도 **Cart settings**에는 동작 옵션이 있어요 — 장바구니 추가 시 드로어 열기, 스토어프론트를 동기화하는 테마 선택자예요. [장바구니 설정](/ko/aftersell/cart/cart-settings)을 참고하세요.

<div id="when-to-use-custom-css-instead">
  ## 커스텀 CSS를 대신 사용해야 할 때
</div>

기본 제공 설정은 일반적인 경우를 다뤄요. 그 이상의 것 — 특정 요소 타겟팅, 커스텀 간격, 반응형 조정 — 에는 [커스텀 CSS](/ko/aftersell/cart/custom-css)를 사용하세요.