카운트다운 디자인하기
색상, 글꼴, 배경, 테두리, 간격을 바꿔 카운트다운을 스토어에 맞추세요.
템플릿은 시작 모양을 제공합니다. Design 탭에서는 이를 나만의 스타일로 바꾸거나, 모든 부분을 편집할 수 있으므로 완전히 새로 구성할 수도 있습니다.
카운트다운 타이머와 예상 배송일에는 전체 Design 탭이 있습니다. 재고 카운트다운과 장바구니 카운트다운은 옵션이 더 적으며 Settings 탭 안에 있습니다.
Design 탭이며, 설정을 바꾸면 미리보기가 함께 업데이트됩니다.
템플릿 바꾸기
섹션 제목: “템플릿 바꾸기”처음에 선택한 디자인에 묶여 있지 않습니다. 빌더 안에서 템플릿 선택기를 열고 다른 템플릿을 선택하세요. 상단에 시즌별 탭이 있습니다. Default, New year, Valentine, Summer Sale, Moon Festival, Halloween, Black Friday, Christmas, Winter Sales입니다.
템플릿을 바꾸면 디자인이 교체됩니다. 텍스트, 시간 설정, 조건은 유지됩니다.
카운트다운 타이머 디자인
섹션 제목: “카운트다운 타이머 디자인”타이머의 Design 탭에는 네 개의 섹션과 사용자 지정 CSS가 있습니다.
Design Main Section
섹션 제목: “Design Main Section”카운트다운의 바깥 컨테이너로, 다른 모든 요소가 들어 있는 패널입니다.
| 그룹 | 컨트롤 |
|---|---|
| Background | 단색 또는 업로드한 이미지. 색상을 선택하면 Main background color에 Left와 Right 값이 따로 있어서, 단색은 양쪽에 같은 색을, 그라디언트는 두 가지 색을 지정합니다 |
| Overlay image | 업로드한 배경을 어둡게 하여 그 위의 텍스트가 읽기 쉽도록 합니다 |
| Text | 카운트다운 전체의 글꼴입니다. Use custom font style을 켜면 글꼴 패밀리와 굵기를 선택할 수 있습니다 |
| Padding | 패널 안쪽 여백으로, Top / Right와 Bottom / Left로 설정합니다 |
| Border | 테두리 크기, 반경, 스타일(Solid, Dotted, Dashed), 색상 |
| Shadow | Yes 또는 No |
Element styling: Title and Subtitle
섹션 제목: “Element styling: Title and Subtitle”Title과 Subtitle에는 각각 글꼴, 글꼴 크기, 색상, 여백이 있습니다. 제목을 돋보이게 하고 부제목은 뒤로 물러나게 하거나, 둘을 가깝게 붙일 때 사용합니다.
Design Timer Section
섹션 제목: “Design Timer Section”숫자 자체에 대한 설정입니다.
| 그룹 | 컨트롤 |
|---|---|
| Font | 숫자의 Timer font size와 아래 문구의 Label font size |
| Border | 각 단위를 둘러싼 상자의 크기와 스타일 |
| Color | Number color, 레이블의 Data text color, 각 단위 상자의 Background color, 구분자의 Dot color, Border color |
| Padding | 각 단위 상자 안쪽의 여백 |
단위에 배경과 테두리를 설정하면 상자 모양이 되고, 둘 다 비워 두면 패널 위에 일반 숫자만 표시됩니다.
Button
섹션 제목: “Button”버튼을 켰다면 버튼에는 자체 테두리(반경, 크기, 스타일), 색상(배경, 텍스트, 테두리), 여백이 있습니다.
Design Mobile Section
섹션 제목: “Design Mobile Section”휴대폰용 별도의 글꼴 크기입니다. 앱에서는 “Optimize countdown appearance and layout for mobile devices to ensure a smooth and responsive user experience.“라고 설명합니다.
Title, Subtitle, Timer number, Timer label의 모바일 전용 크기와 모바일 여백을 설정할 수 있습니다.
모든 카운트다운에서 이 섹션을 잠깐 확인해 볼 가치가 있습니다. 데스크톱에서 25px로 보기 좋은 제목은 휴대폰에서는 대개 너무 크고, 데스크톱 크기의 타이머 단위 네 개는 줄바꿈되거나 넘치는 경우가 많습니다.
예상 배송일 디자인
섹션 제목: “예상 배송일 디자인”배송일의 Design 탭은 두 부분에 맞춰 나뉩니다.
- Design Main Widget — 메시지: 글꼴, 색상, 크기, 테두리, 간격.
- Design Process Widget — Ordered → Dispatched → Delivered 바: 아이콘, 색상, 간격.
레이아웃이 Message only 또는 Progress bar only라면 해당하는 쪽만 중요합니다.
재고 및 장바구니 카운트다운 디자인
섹션 제목: “재고 및 장바구니 카운트다운 디자인”이 두 유형의 디자인 컨트롤은 Settings 탭 안에 있습니다.
Stock countdown에는 Alignment, 메시지·슬라이더·재고 수치·배경의 개별 색상, Animation(None, Flash, Pulse)이 있습니다.
Cart countdown에는 위치, 메시지·타이머·배경의 색상, 테두리, 글꼴이 있습니다.
Custom CSS
섹션 제목: “Custom CSS”모든 유형의 마지막에는 컨트롤로 다룰 수 없는 부분을 위한 Custom CSS (Developer Zone) 상자가 있습니다. 사용자 지정 CSS를 참고하세요.
실용적인 조언
섹션 제목: “실용적인 조언”테마에서 가져오세요. 브랜드 색상의 카운트다운은 스토어의 일부처럼 보이지만, 템플릿 기본값 그대로인 카운트다운은 덧붙인 것처럼 보입니다. 테마의 강조 색상이 대개 알맞은 배경색입니다.
색상보다 대비가 중요합니다. 핵심은 숫자이므로, 뒤에 무엇이 있든 작은 크기에서도 숫자가 잘 읽히는지 확인하세요.
실제 페이지에서 확인하세요. 미리보기에는 카운트다운만 자체 배경 위에 표시됩니다. 실제 제품 페이지에는 가격, 버튼, 이미지가 함께 주목을 다툽니다.
휴대폰에서 확인하세요. 데스크톱 크기가 작은 화면에서 어떻게 보이든 그냥 두지 말고 Design Mobile Section을 사용하세요.