Page counter

콘텐츠에서 사용자의 현재 위치를 안내하는 정보성 컴포넌트입니다. 인터랙션이 없는 수동적 요소로 갤러리, 슬라이더, 문서 뷰어 등에서 진행 상황을 숫자로 간결하게 전달합니다.

Anatomy

  1. 1. Container
  2. 2. Current page number
  3. 3. Total page number

Variants

1/5
Variants
Size

Moving control

다음, 이전 화면 이동은 해당 컴포넌트와 별개의 요소로 작동되며, Counter는 전체 콘텐츠 중 사용자가 현재 보고 있는 위치를 숫자로 제공하는 역할만을 수행합니다.

Positioning

이미지 내부에 16px의 여백을 두고 위치할 수 있으며 상단과 하단의 좌측, 중앙, 우측에 끝에 자유롭게 배치할 수 있습니다.

Usage

Normal

기본 타입은 Web, iOS에서 사용되며, Chrome 효과로 배경 요소와 자연스러운 구분이 가능합니다.

Alternative

Android에서 Page counter를 사용할 시 Alternative 타입 사용을 권장합니다.

How to use

Do

모바일에서 Page counter 대신 Top navigation의 제목 영역을 활용하여 숫자를 표현할 수 있습니다.

Don’t

컨트롤 되는 요소와 매칭이 어려운 위치에 배치하지 않습니다.

© 2026 Wanted Lab, Inc.