---
url: 'https://dxpr.com/ko/hc/documentation/learn-dxpr-builder/elements/circle-counter'
title: '서클 카운터 추가 | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T14:03:06+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  비율이나 점수 같은 핵심 숫자 하나를 보여주는 애니메이션 링을 만들 수 있습니다. 랜딩 페이지나 소개 페이지에서 통계를 강조하는 데 사용하세요.

  서클 카운터 추가
  로그인한 상태에서 페이지를 엽니다. 콘텐츠 영역에 마우스를 올리면 빌더 컨트롤이 나타납니다. 기본 사용법은 첫 페이지에서 확인하세요.
tags:
  - 'Data and motion'
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T14:03:06+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: '서클 카운터 추가'
      description: |-
        비율이나 점수 같은 핵심 숫자 하나를 보여주는 애니메이션 링을 만들 수 있습니다. 랜딩 페이지나 소개 페이지에서 통계를 강조하는 데 사용하세요.

        서클 카운터 추가
        로그인한 상태에서 페이지를 엽니다. 콘텐츠 영역에 마우스를 올리면 빌더 컨트롤이 나타납니다. 기본 사용법은 첫 페이지에서 확인하세요.
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T14:03:06+0000'
      dateModified: '2026-10-24T14:03:06+0000'
      author:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      mainEntityOfPage: 'https://dxpr.com/ko/hc/documentation/learn-dxpr-builder/elements/circle-counter'
      articleSection: '데이터와 모션'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/ko/hc/documentation/learn-dxpr-builder/elements/circle-counter'
      description: |-
        비율이나 점수 같은 핵심 숫자 하나를 보여주는 애니메이션 링을 만들 수 있습니다. 랜딩 페이지나 소개 페이지에서 통계를 강조하는 데 사용하세요.

        서클 카운터 추가
        로그인한 상태에서 페이지를 엽니다. 콘텐츠 영역에 마우스를 올리면 빌더 컨트롤이 나타납니다. 기본 사용법은 첫 페이지에서 확인하세요.
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: 홈
            item: 'https://dxpr.com/ko'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: ko
---
[도움말 센터](/ko/node/75)/[문서](/ko/hc/documentation) /[DXPR Builder 배우기](/ko/hc/documentation/learn-dxpr-builder) /[페이지 만들기](/ko/hc/documentation/learn-dxpr-builder/build) /[콘텐츠 추가](/ko/hc/documentation/learn-dxpr-builder/elements) /[데이터와 모션](/ko/hc/documentation/learn-dxpr-builder/elements/data-and-motion) # 서클 카운터 추가.

 DXPR Builder 배우기페이지 만들기콘텐츠 추가데이터와 모션

   ## 이 가이드의 내용

 관련 가이드

- [스타일 패널에서 요소 모양 변경](/ko/hc/documentation/learn-dxpr-builder/element-settings/style-tab)

비율이나 점수 같은 핵심 숫자 하나를 보여주는 애니메이션 링을 만들 수 있습니다. 랜딩 페이지나 소개 페이지에서 통계를 강조하는 데 사용하세요.

## 서클 카운터 추가

로그인한 상태에서 페이지를 엽니다. 콘텐츠 영역에 마우스를 올리면 빌더 컨트롤이 나타납니다. 기본 사용법은 [첫 페이지](/hc/documentation/learn-dxpr-builder/getting-started/first-page)에서 확인하세요.

1. 컬럼에 마우스를 올리고 컨트롤 바에서 **+**를 클릭하거나, 빈 페이지에서 **요소 추가**를 클릭합니다. **콘텐츠** 탭을 열고 **서클 카운터**를 클릭합니다. 컬럼 맨 위에 요소가 추가되고 설정 대화상자가 열립니다.
2. 링이 채워지는 정도를 **비율** 슬라이더로 정하거나 옆의 입력란에 값을 직접 입력합니다. 여기에서는 78을 입력합니다.
3. 호의 색상으로 **전경색**을 선택합니다.
4. 서클 콘텐츠 섹션을 열고 측정 항목의 **텍스트** 라벨을 입력합니다.
5. 아래의 **아이콘** 필드에서 **검색** 상자에 chart를 입력하고 그리드에서 아이콘을 클릭합니다.
6. 대화상자에서 **저장**을 클릭합니다. 그런 다음 콘텐츠 영역 상단의 툴바에서 **저장**을 클릭하여 페이지를 저장합니다.

  ## 표시 내용

링이 설정한 비율만큼 채워지고 가운데에 아이콘과 라벨이 표시됩니다. 동영상에서는 보라색 링이 78%까지 채워지고 갱신율이라고 적혀 있습니다. 링은 화면에 스크롤되어 나타날 때 애니메이션으로 채워집니다. 페이지를 저장하고 게시하면 방문자에게 표시됩니다.

## 서클 카운터 설정

요소에 마우스를 올리고 컨트롤 바에서 **더보기 > 설정**을 엽니다. 옵션:

- **비율:** 링이 채워지는 정도(0~100).
- **크기:** 픽셀 단위의 원 크기(100~500).
- **전경색:** 채워진 호의 색상.
- **배경색:** 빈 트랙의 색상.
- **채우기 색:** 원 안쪽의 색상.
- **전경 너비:** 호의 두께.
- **애니메이션:** 호를 0부터 채웁니다. **애니메이션 시간**과 **애니메이션 지연**으로 밀리초 단위 타이밍을 정합니다.
- **화면 내 애니메이션:** 원이 화면에 스크롤되어 들어올 때까지 애니메이션을 기다립니다.

모든 슬라이더 옆에는 정확한 값을 입력하는 숫자 입력란이 있습니다. **서클 콘텐츠** 섹션에서 가운데에 표시되는 내용을 정합니다.

- **진행률 표시:** 직접 입력한 텍스트와 아이콘 대신 비율 숫자를 표시합니다. 기본적으로 꺼져 있습니다.
- **텍스트:** 짧은 라벨. **글꼴 크기**와 **텍스트 색상**으로 스타일을 정합니다.
- **정보:** 텍스트 아래에 표시되는 작은 두 번째 줄.
- **아이콘:** 텍스트 앞에 표시되는 아이콘. **검색** 옆의 드롭다운에서 그리드를 하나의 아이콘 세트로 제한합니다. **아이콘 크기**와 **아이콘 색상**으로 스타일을 정합니다.

## 표시되지 않는 경우

- **콘텐츠 탭에 서클 카운터가 없습니다.** 사용자 프로필에서 숨겨져 있습니다. 관리자에게 [사용자 프로필](/hc/documentation/learn-dxpr-builder/admin/user-profiles-admin)에서 활성화해 달라고 요청하세요.
- **다시 로드하면 사라집니다.** 페이지가 저장되지 않았습니다. 다시 추가하고 콘텐츠 영역 상단의 툴바에서 **저장**을 클릭합니다.
- **링이 흐릿하거나 표시되지 않습니다.** **전경색**과 **배경색**이 페이지 색상과 너무 비슷합니다. 요소에 마우스를 올리고 컨트롤 바에서 **더보기 > 설정**을 연 뒤 대비가 큰 색상을 선택합니다.
- **링에 애니메이션이 적용되지 않습니다.** **애니메이션**이 꺼져 있거나, 링이 화면에 스크롤되어 나타날 때까지 기다리는 중입니다. **애니메이션**을 켜고 원을 화면에 스크롤하여 표시합니다.
- **텍스트와 아이콘이 표시되지 않습니다.** **진행률 표시**가 켜져 있어 링에 비율이 표시됩니다. **서클 콘텐츠**에서 **진행률 표시**를 끕니다.

## 다음 단계

[스타일 탭](/hc/documentation/learn-dxpr-builder/element-settings/style-tab)에서 서클 카운터의 간격과 배경을 변경할 수 있습니다.