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

# 헤더 모듈

> 로고, 제목 스타일, 닫기 버튼, 레이아웃을 포함하여 Upcart 드로어의 헤더를 업데이트하는 방법을 알아보세요.

<div id="overview">
  # 개요
</div>

헤더 모듈을 사용하면 브랜드 로고, 제목 텍스트, 레이아웃, 배경 색상, 닫기 버튼으로 Upcart 드로어의 상단 섹션을 커스터마이징할 수 있어요. 시각적 컨트롤 덕분에 정확한 픽셀 크기를 정의할 필요 없이 헤더를 쉽게 스타일링할 수 있어요.

<div id="header-module-settings">
  # **헤더 모듈 설정**
</div>

<div id="general">
  ## **일반**
</div>

**Height**는 **Slim**과 **Tall** 사이를 전환하여 수직 공간을 제어해요. **Bottom border**는 **None** 또는 **Thin**이에요. **Background color**는 hex 코드나 내장 색상 선택기를 사용할 수 있으며 투명도를 지원해요.

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/header-module-height-and-background.gif?s=982cf4fec081aa2c1b62901e53602b80" alt="카트 미리보기 옆에 높이와 배경 색상 컨트롤이 있는 Upcart 헤더 모듈 General 설정" width="2172" height="1080" data-path="images/upcart/header-module-height-and-background.gif" />

<div id="title">
  # **제목**
</div>

카트 드로어 헤더 제목을 정의하는 방법은 **세 가지**예요: 테마의 기본 제목 스타일 상속, 스토어 로고 표시, 완전히 커스텀한 텍스트 스타일 만들기. 각 방법은 디자인 요구 사항에 따라 유연성을 제공해요.

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/header-module-title-options.gif?s=18bfdb000570d453195ba19bd5f0288b" alt="Upcart 헤더 모듈 제목 옵션: 테마 제목 상속, 브랜드 로고, 커스텀 텍스트 스타일" width="1960" height="1080" data-path="images/upcart/header-module-title-options.gif" />

<div id="inherit-from-theme-titles">
  ## 테마 제목에서 상속하기
</div>

이 옵션은 테마의 기본 제목 스타일을 사용하여 사이트의 나머지 부분과 시각적으로 일관된 디자인을 유지하는 데 도움이 돼요. Text 필드로 자신만의 제목을 추가하고 `{{cart_quantity}}`를 사용하여 카트 아이템 수를 동적으로 포함할 수 있어요. 텍스트 정렬은 Side 또는 Center로 설정할 수 있으며, 스토어의 콘텐츠 구조에 따라 적절한 제목 레벨 H2, H3, H4를 선택할 수 있어요.

<div id="brand-logo">
  ## 브랜드 로고
</div>

텍스트 대신 브랜드 로고를 사용하고 싶다면 이 섹션에서 스토어 로고를 직접 업로드할 수 있어요. 로고를 Side 또는 Center로 정렬하고, 14px에서 48px까지 조절되는 **Logo size** 슬라이더로 크기를 조정하세요. 업로드하는 파일에 강제된 제한은 없지만, 깔끔한 투명도와 선명한 가장자리를 위해 PNG 파일 사용을 권장해요. JPEG도 지원되지만 배경 노이즈가 포함되거나 로고 디테일이 저하될 수 있어요. 성능을 위해 파일 크기를 최적화하는 것을 목표로 하세요.

* 최고의 품질과 투명 배경 지원을 위해 **PNG** 파일 사용을 권장해요.
* JPEG도 작동하지만, 특히 로고에 배경이나 미세한 디테일이 있는 경우 덜 깔끔하게 보일 수 있어요.

<div id="define-text-styles">
  ## 텍스트 스타일 정의하기
</div>

Text 옵션을 선택하면 스토어 테마와 독립적으로 제목 스타일링을 완전히 제어할 수 있어요. 커스텀 제목을 입력하고 동적 업데이트를 위해 `{{cart_quantity}}`를 포함할 수 있어요. 텍스트 정렬은 Side 또는 Center로 설정할 수 있고, 글꼴 두께를 Normal, Semibold, Bold로 변경하는 옵션이 있어요. 글자 크기는 시각적 슬라이더로 14px에서 48px까지 조정 가능하며, 선택적으로 텍스트 색상 재정의를 적용할 수 있어요.

<div id="close-button">
  # 닫기 버튼
</div>

닫기 버튼은 스토어 디자인에 맞게 커스터마이징할 수 있어요. **Location**은 드로어의 왼쪽 또는 오른쪽에 배치해요. **Background**, **Icon**, **Border**는 각각 색상과 별도의 호버 색상을 지정할 수 있어요. **Icon size**는 Small, Medium, Large이고 **Icon thickness**는 Normal 또는 Thick이에요. **Border**는 None, Thin, Normal, Thick이에요.

<Note>
  **Border**가 **None**으로 설정되어 있는 동안에는 테두리 색상과 테두리 호버 색상 필드가 비활성화돼요. 먼저 테두리 두께를 선택한 다음 색상을 설정하세요.
</Note>

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/header-module-close-button-settings.png?fit=max&auto=format&n=uxKAdY-e0h16xa48&q=85&s=c8f941c774ff6f7029b0833c09ca000d" alt="위치, 색상, 아이콘 크기, 테두리를 위한 Upcart 헤더 모듈 닫기 버튼 설정" width="1170" height="1166" data-path="images/upcart/header-module-close-button-settings.png" />

<div id="custom-template">
  # 커스텀 템플릿
</div>

헤더 모듈 버전 2.0에서는 설정 아래에 모듈 전체를 다루는 단일 **Full** 템플릿이 있는 **Custom template** 코드 편집기가 나타나요. React 기반 JSX를 사용하며, 먼저 Cart Editor의 **Settings > Cart settings > Advanced Settings**에서 **Access custom templates**를 체크해야 해요. [커스텀 템플릿 설정하기](/ko/upcart/setting_up_a_custom_template_in_upcart)를 참고하세요.

<div id="tips">
  # 팁
</div>

* **정밀한 간격이나 크기 조정이 필요하신가요?** 슬라이더를 넘어서는 완전한 제어를 위해 [커스텀 CSS](/ko/upcart/custom_css)를 사용하세요. 정확한 마진, 패딩, 로고 크기 조정에 좋아요.
* **데스크톱과 모바일에서 테스트하세요.** 텍스트, 로고, 버튼 같은 헤더 요소는 다양한 화면 크기에서 다르게 표시될 수 있어요
* **적절한 제목 레벨을 사용하세요.** 올바른 제목(H2, H3, H4)을 선택하면 접근성과 SEO에 도움이 돼요. 스토어 콘텐츠의 구조에 맞추세요.

카트를 개인화하는 더 많은 방법은 [Upcart 도움말 문서](/ko)를 살펴보세요. 커스텀 변경이 필요하면 [Shopify Expert](https://www.shopify.com/ca/partners/directory)에게 문의하는 것을 권장해요.