> ## 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="height">
  # 높이
</div>

Height 설정은 공지 바가 얼마나 두껍게 보일지 제어해요. **Slim**, **Normal**, **Thick** 세 가지 옵션이 있어요. Slim은 드로어를 더 컴팩트하게 유지해 카트 콘텐츠를 위한 공간을 확보해요 — 특히 작은 화면에서 유용해요. Normal은 둘의 중간이에요. Thick은 더 큰 시각적 강조를 주어 메시지가 고객에게 돋보이도록 해줘요.

<div id="position">
  # 위치
</div>

Position 설정을 사용해 공지 바가 카트 드로어 안에서 **Before products** 또는 **After products** 중 어디에 표시될지 선택하세요.

* **Before products**는 바를 카트 본문 상단, 헤더 바로 아래에 배치해요.
* **After products**는 바를 카트 본문 하단, 푸터 바로 위에 배치해요 — 노트와 업셀 모듈도 그곳에 배치되어 있다면 그 아래에요.

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/announcements-bar-position-comparison.png?fit=max&auto=format&n=uxKAdY-e0h16xa48&q=85&s=10c93ddb37a1b682ee6ffd8c22ca0365" alt="상품 위와 아래에 배치된 공지 바를 비교하는 두 개의 Upcart 카트" width="1845" height="1380" data-path="images/upcart/announcements-bar-position-comparison.png" />

<div id="timer-duration">
  ## 타이머 지속 시간
</div>

일정 시간 후 공지가 만료되도록 하려면 **Timer duration** 필드에 카운트다운을 설정하세요. `MM:SS` 형식을 사용해요 — 5분이면 `05:00`, 30초면 `00:30`이에요. 초는 `00`–`59`여야 하며, 그보다 높은 값은 거부돼요.

카운트다운은 공지 텍스트에 타이머 변수가 포함되어 있을 때만 작동해요. 시간이 다 되면 전체 공지 바가 카트에서 자동으로 제거돼요.

<Note>
  기본 제공되는 카운트다운 타이머는 세션 기반이며 설정된 분 단위 시간에서부터 카운트다운해요. 특정 시각에 리셋되는 반복 또는 일일 카운트다운(예: 매일 오후 2시까지 카운트다운)은 지원하지 않아요. 이 기능은 현재 Upcart에서 사용할 수 없어요.
</Note>

<div id="announcement-text">
  ## 공지 텍스트
</div>

이 섹션에서는 공지 배너에 표시되는 메시지를 입력하고 서식을 지정할 수 있어요. 입력 필드 위의 서식 바를 사용해 텍스트의 특정 부분에 굵게, 기울임, 밑줄, 색상 옵션을 적용할 수 있어요.

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/announcements-color-picker-open-styling.png?fit=max&auto=format&n=uxKAdY-e0h16xa48&q=85&s=b5cf7eef319675ff522346102babd4ff" alt="공지 텍스트 편집기에서 텍스트 스타일링을 위해 열린 색상 선택기" width="990" height="758" data-path="images/upcart/announcements-color-picker-open-styling.png" />

<Note>
  Announcement Text 필드는 하이퍼링크를 지원하지 않아요 — 서식 툴바에 링크나 URL 버튼이 없고, 붙여넣은 `<a>` 태그나 Markdown 링크는 저장 시 제거돼요. 공지를 클릭 가능하게 만들거나 링크를 포함하려면 대신 **Custom HTML** 모듈을 사용하세요(아래 참조).
</Note>

<div id="adding-a-link-or-url-to-the-announcement">
  ### 공지에 링크 또는 URL 추가하기
</div>

기본 Announcement Text 필드는 하이퍼링크를 렌더링하지 않기 때문에, Custom HTML로 링크를 삽입해 공지 바를 대체하거나 보완할 수 있어요:

1. **Upcart > Cart Editor > Settings > Custom HTML**로 이동하세요.

2. **HTML Location**을 **Above announcements/rewards**(공지 바 위에 표시) 또는 **Below header/announcements/rewards**(공지 바 바로 아래에 표시)로 설정하세요.

3. 링크가 포함된 스니펫을 붙여넣으세요. 예:

   ```html theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
   <div style="text-align: center; padding: 8px;">
     <a href="https://yourstore.com/sale" style="color: #ffffff; text-decoration: underline;">
       Shop the sale →
     </a>
   </div>
   ```

4. **Save**를 클릭한 다음 라이브 카트에서 테스트하세요.

Custom HTML 위치와 스타일링에 대한 자세한 내용은 [Custom HTML](/ko/upcart/custom_html)과 [Custom CSS](/ko/upcart/custom_css)를 참조하세요. Upcart 지원팀은 커스텀 코드를 작성하거나 디버깅하지 않아요 — 코드 작성에 도움이 필요하면 Shopify Expert에게 문의하세요.

카운트다운 기능을 사용한다면 타이머 변수를 메시지에 직접 삽입하세요. V2 카트에는 `{{timer}}`, V1 카트에는 `{TIMER}`를 사용하세요.

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/announcements-announcement-text-field-timer.png?fit=max&auto=format&n=uxKAdY-e0h16xa48&q=85&s=4ba5a19c53cfefb36cc37c1d560c6b3e" alt="메시지에 타이머 카운트다운 변수가 추가된 공지 텍스트 필드" width="1094" height="462" data-path="images/upcart/announcements-announcement-text-field-timer.png" />

<div id="important">
  ## 중요
</div>

타이머 변수(V2는 `{{timer}}`, V1은 `{TIMER}`)는 복사-붙여넣기 대신 직접 입력해 주세요. 이렇게 하면 라이브 카트에서 타이머가 올바르게 표시되지 않게 하는 숨겨진 서식 문제를 피할 수 있어요.

<div id="font-size">
  # 글꼴 크기
</div>

슬라이더를 사용해 공지 텍스트의 크기를 10px부터 24px까지 제어할 수 있어요. 이를 통해 모바일과 데스크톱 경험 모두에서 가독성을 확보할 수 있어요.

<div id="colors">
  # 색상
</div>

Background Color는 공지 바의 전체 채우기 색상을 정의할 수 있게 해줘요. Border Color는 배너 위아래의 가로선을 조정해 스타일이 적용된 컨테이너 느낌을 줄 수 있어요.

<div id="advanced-timer-configuration">
  # 고급 타이머 설정
</div>

추가 기능이 필요하다면 JavaScript를 사용해 카운트다운 타이머를 커스터마이징할 수 있어요. 스크립트는 Custom HTML 모듈이 아닌 **"Scripts (Before Load)"** 섹션에 추가하세요. 이는 보안 제한이 아니라 로드 타이밍 요구 사항이에요 — Custom HTML도 스크립트를 실행하지만, 카트의 로드 이벤트에 안정적으로 연결하기에는 너무 늦게 실행돼요. "Scripts (Before Load)" 섹션은 카트가 로드되기 전에 코드를 실행하므로 `upcartSubscribeCartLoaded` 같은 콜백이 올바르게 작동해요. 예시 코드:

```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
<script>
  window.upcartSubscribeCartLoaded(function(event) {
    // Your countdown timer code here
    // event.cart contains the cart object with .items[], .total, .currency
  });
</script>
```

레거시 참고: window\.upcartOnCartLoaded는 여전히 작동하지만 지원 중단(deprecated)되었으며 콘솔 경고를 기록해요. 새로운 스크립트에는 모두 upcartSubscribeCartLoaded를 사용하세요.

코드의 배치와 문법을 신중하게 테스트하세요. 일부 플랫폼 제한이 스크립트 처리 방식에 여전히 영향을 줄 수 있어요.