---
url: 'https://dxpr.com/ko/hc/documentation/learn-dxpr-builder/elements/number-counter'
title: '숫자 카운터 추가 | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T14:03:41+00:00'
updated: '2026-10-24T17:19:22+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-24T17:19:22+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:41+0000'
      dateModified: '2026-10-24T17:19:22+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/number-counter'
      articleSection: '데이터와 모션'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/ko/hc/documentation/learn-dxpr-builder/elements/number-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)

방문자가 스크롤하여 이동하면 숫자가 올라가는 카운터를 만들 수 있으며, 원하면 접두사, 접미사, 구분 기호를 붙일 수 있습니다. 진료 환자 수나 완료한 프로젝트 수 같은 핵심 수치를 강조하는 데 사용하세요.

## 숫자 카운터 추가

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

1. 컬럼에 마우스를 올리고 컨트롤 바에서 **+**를 클릭하거나, 빈 페이지에서 **요소 추가**를 클릭합니다. **콘텐츠** 탭을 열고 **숫자 카운터**를 클릭합니다. 컬럼 맨 위에 요소가 추가되고 설정 대화상자가 열립니다.
2. 카운트업할 최종 숫자를 **종료값**에 숫자로만 입력합니다. 여기에서는 250000을 사용합니다.
3. 더하기 기호 같은 **접미사**를 추가합니다.
4. 천 단위 구분을 위해 **천 단위 구분 기호**를 선택합니다. 여기에서는 **쉼표**를 선택합니다.
5. 밀리초 단위로 **속도**를 설정합니다. 값이 클수록 천천히 셉니다. 여기에서는 약 3000(3초)으로 드래그합니다.
6. 대화상자에서 **저장**을 클릭합니다. 그런 다음 콘텐츠 영역 상단의 툴바에서 **저장**을 클릭하여 페이지를 저장합니다.

  ## 표시 내용

숫자가 입력한 종료값까지 올라가며, 접미사와 구분 기호가 함께 표시됩니다. 동영상에서는 3초 동안 250,000+까지 셉니다.

카운트업은 카운터가 화면에 들어올 때 한 번 실행됩니다. 에디터에서는 대화상자를 닫는 즉시 실행됩니다. 다시 보려면 카운터를 첫 화면 아래에 배치하고 저장된 페이지를 연 뒤 스크롤하여 이동합니다. 페이지를 저장하고 게시하면 방문자에게 표시됩니다.

## 숫자 카운터 설정

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

- **시작값:** 카운트를 시작하는 숫자. 기본값은 0입니다.
- **종료값:** 카운트가 멈추는 숫자. 기본값은 100입니다.
- **글꼴 크기:** 픽셀 단위의 숫자 크기. 기본값은 30입니다.
- **속도:** 밀리초 단위의 카운트 소요 시간. 기본값은 2000입니다.
- **천 단위 구분 기호:** 천 단위마다 구분하는 없음, 쉼표, 마침표, 공백.
- **접두사:** 숫자 앞의 텍스트(예: `$`, `€`).
- **접미사:** 숫자 뒤의 텍스트(예: `%`, `+`).

## 표시되지 않는 경우

- **콘텐츠 탭에 숫자 카운터가 없습니다.** 사용자 프로필에서 숨겨져 있습니다. 관리자에게 **숫자 카운터(Counter)**의 **요소** 항목을 [사용자 프로필](/ko/hc/documentation/learn-dxpr-builder/admin/user-profiles-admin)에서 선택해 달라고 요청하세요.
- **다시 로드하면 사라집니다.** 페이지가 저장되지 않았습니다. 다시 추가하고 콘텐츠 영역 상단의 툴바에서 **저장**을 클릭합니다.
- **숫자가 100에서 멈춥니다.** **종료값**이 아직 기본값입니다. 요소에 마우스를 올리고 컨트롤 바에서 **더보기 > 설정**을 연 뒤 원하는 숫자를 입력합니다.
- **숫자가 표시되지만 올라가지 않습니다.** 화면에 표시되는 동안(아마 페이지가 로드된 직후) 이미 카운트업이 끝났습니다. 미리보기에서는 다시 시작되지 않습니다. 카운터를 첫 화면 아래에 배치하고 저장된 페이지를 다시 로드한 뒤 스크롤하여 이동합니다.
- **페이지에 여전히 이전 숫자가 표시됩니다.** 변경 사항이 저장되지 않았습니다. 콘텐츠 영역 상단의 툴바에서 **저장**을 클릭한 뒤 다시 로드합니다.

## 다음 단계

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