좁으면 ’2/5’로

KRDS CP-221 — [모바일] 화면 크기가 충분하지 않은 경우 도형형 항목 탐색 식별자는 분수형으로 전환하고 있다. (페이지 너비가 1023px 미만)

0. 들어가며 — 점이 다 안 들어가는 좁은 화면

이번 341편은 화면 크기가 충분하지 않은 경우(너비 1023px 미만) 도형형 식별자를 분수형으로 전환하라는 규칙 입니다.

앞 편(CP-220)에서 화면이 충분하면 도형형(점) 식별자를 버튼으로 제공했습니다. 그런데 화면이 좁으면 — 점들과 간격이 다 안 들어가거나 너무 작아지죠. 이때 점 나열 대신 분수형(“2/5”) 텍스트로 전환하면, 좁은 공간에서도 전체 수·위치를 명확히 보여줍니다. CP-221은 이 반응형 전환을 규정합니다. CP-220의 짝이죠. 이번 편을 풀어 냅니다.

1. 규칙 원문 — 좁은 화면 분수형 전환

CP-221 (컴포넌트 > 캐러셀) [모바일] “화면 크기가 충분하지 않은 경우 도형형 항목 탐색 식별자는 분수형으로 전환하고 있다. (페이지 너비가 1023px 미만)”

페이지 너비가 1023px 미만으로 좁을 때는, 도형형(점) 탐색 식별자를 분수형(“현재/전체”) 텍스트로 전환해 좁은 공간에서도 위치 정보를 명확히 표시하라는 뜻입니다.

정리: 좁은 화면(1023px 미만)에선 점 식별자를 “2/5” 분수형으로 전환하라. 이게 CP-221입니다.

2. 왜 좁으면 분수형으로 전환하나

탐색 식별자(전체 수·현재 위치 표시, CP-216)는 두 형태가 있습니다 — 도형형(점 나열)과 분수형(“2/5” 텍스트). 각각 장단점이 있어, 화면 크기에 맞게 골라야 하죠.

도형형(점)의 한계 — 좁은 화면. 도형형은 슬라이드 수만큼 점을 가로로 나열합니다. 직관적이고 클릭으로 직접 이동(CP-220)도 되지만 — 가로 공간이 필요하죠. 슬라이드 5개면 점 5개 + 간격이 들어가야 하고, 각 점은 누를 수 있게 충분히 크고 떨어져 있어야(CP-217) 합니다. 그런데 좁은 화면(작은 모바일)에서는:

점들과 간격이 다 안 들어가 점이 작아지거나 겹쳐 — 누르기 어렵고(CP-217 위반) 위치도 안 읽힘.

슬라이드가 좀 많으면(예: 5개) 좁은 화면에 점 5개가 빽빽해 어수선.

분수형의 강점 좁은 공간. 분수형(“2/5”)은 슬라이드 수와 무관하게 고정된 작은 공간(“숫자/숫자”)만 차지합니다. 슬라이드가 2개든 5개든 “2/5”, “1/5” 처럼 일정한 크기죠. 그래서 좁은 화면에서도 전체 수와 현재 위치를 명확히 보여줍니다 점이 작아 안 읽히는 문제가 없죠. 다만 분수형은 ’직접 이동(특정 슬라이드 클릭)’은 안 되므로, 좁은 화면에서는 이전/다음 버튼·스와이프(CP-218)로 넘기게 됩니다.

그래서 CP-221은 — 너비 1023px 미만에서 도형형을 분수형으로 전환하라고 합니다. KRDS가 1023px를 기준으로 제시하는데, 이는 일반적인 태블릿/데스크톱 경계(1024px) 미만, 즉 태블릿 이하 좁은 화면을 뜻하죠. 이 기준 에서:

1023px 미만(좁음) → 분수형(“2/5”). 공간 절약, 위치 명확.

1024px 이상(넓음) → 도형형 점 버튼(CP-220). 직관적, 직접 이동.

이는 페이지네이션이 넓으면 숫자 11개·좁으면 7개(CP-119·122)로, 또는 모바일 수직 배치(CP-121)로 대응한 것과 같은 반응형 정신이죠. 같은 정보(전체 수·위치)를 화면 크기에 맞는 형태로 보여줍니다.

전환 시 일관성. 도형형↔분수형 전환에서도 — 전체 수·현재 위치 정보 자체는 일정해야 합니다(페이지네이션 전체 수 일정 CP-123 정신). 분수형 “2/5”든 점 5개 중 2번째든, 사용자가 받는 정보는 같죠. 그리고 분수형도 스크린 리더가 “슬라이드 2 / 5”로 읽게 접근성을 갖춰야 합니다(CP-216·225).

이 규칙은 CP-220(넓으면 도형형)과 함께 캐러셀 탐색 식별자의 반응형 대응을 완성합니다 — 넓으면 점 버튼(직관· 직접 이동), 좁으면 분수형(공간 절약·명확). 화면 크기에 맞는 최적의 탐색 식별자를 제공하죠.

정리하면 — 좁은 화면에서는 점 나열이 공간 부족·가독성 문제를 일으키므로, 고정 공간의 분수형(“2/5”)으로 전환해 전체 수·위치를 명확히 보여줘야 합니다.

3. 점검 / 개선

무엇을 점검하나

분수형 전환 — 너비 1023px 미만에서 도형형이 분수형(“2/5”)으로 전환되는가.

정보 일관성 — 전환돼도 전체 수·현재 위치 정보가 동일한가.

접근성 — 분수형이 스크린 리더에 “슬라이드 N / M”으로 전달되는가.

개선 방향

미디어 쿼리(1023px 기준)로 도형형↔분수형 전환.

분수형도 충분한 크기·접근성(aria-label) 확보. 이전/다음·스와이프 병행.

4. 누가 담당하나 / 우리 사이트에 해당될까?

역할	책임
디자이너	분수형 표현·전환 기준 정의
퍼블리셔/개발	반응형 전환·접근성 구현

기관 유형	CP-221 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (모바일 지원 + 캐러셀 사용 시)

캐러셀을 쓰는 모든 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 너비 1023px 미만에서 도형형이 분수형(“2/5”) 으로 전환되나요?

□ 전환돼도 전체 수·현재 위치 정보가 동일한가요?

□ 분수형이 스크린 리더에 “슬라이드 N / M”으로 전달되나요?

❓ FAQ

Q1. 왜 1023px 기준인가요? 태블릿/데스크톱 경계(1024px) 미만, 즉 태블릿 이하 좁은 화면을 뜻합니다. KRDS가 제시한 기준이죠. Q2. 분수형은 직접 이동이 안 되지 않나요? 맞습니다. 좁은 화면에선 이전/다음·스와이프로 넘깁니다. 직접 이동 (점 클릭)은 넓은 화면의 도형형에서 제공하죠. Q3. 왜 좁으면 점이 안 좋나요? 점들과 간격이 다 안 들어가 작아지고 누르기 어렵습니다. 분수형은 고정 공간 이라 좁아도 명확하죠.

6. 마무리

CP-221의 메시지:

좁으면 ’2/5’로 — 도형형 식별자를 분수형으로 전환하라(1023px 미만).

좁은 화면에서 점 나열은 공간 부족·가독성 문제를 일으킵니다. 고정 공간의 분수형(“2/5”)으로 전환하면 좁아도 전체 수·위치가 명확하죠. CP-220(넓으면 도형형 버튼)과 함께 반응형 탐색 식별자를 완성합니다. 다음 편은 자동 재생 정지 버튼의 우선 접근입니다.

다음 편 예고 ▶ 「342. (CP-222) 자동 재생 캐러셀에서 정지 버튼이 상호작용 가능한 첫 요소로 제공하고 있다.」

ViewCheck는 좁은 화면에서 탐색 식별자가 분수형으로 전환되는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 캐러셀(Carousel) 가이드 — https://www.krds.go.kr/html/site/component/component_20.html

KRDS #ViewCheck #공공웹사이트 #전자정부 #디지털정부 #웹접근성 #디자인시스템 #UIUX #UI컴포넌트 #웹표준

KRDS,ViewCheck,공공웹사이트,전자정부,디지털정부,웹접근성,디자인시스템,UIUX,UI컴포넌트,웹표준