컨트롤은 늘 같은 자리에

KRDS CP-215 — 캐러셀 관련 컨트롤과 항목 탐색 식별자를 일관된 위치에 표시하고 있다.

0. 들어가며 — 슬라이드마다 버튼 자리가 바뀌면

이번 335편은 캐러셀 컨트롤·탐색 식별자를 일관된 위치에 표시하라는 규칙입니다.

캐러셀의 이전/다음 버튼과 점 인디케이터가 — 슬라이드가 넘어갈 때마다 위치가 바뀌거나, 사이트의 여러 캐러셀 마다 다른 자리에 있으면, 사용자는 컨트롤을 찾느라 헤매죠. CP-215는 컨트롤 위치를 모든 슬라이드·캐러셀에서 일관되게 고정하라고 규정합니다. 페이지네이션 순서(CP-132), 탭 바 배치(CP-140) 정신이죠. 이번 편을 풀어냅니다.

1. 규칙 원문 — 컨트롤·식별자 일관 위치

CP-215 (컴포넌트 > 캐러셀) “캐러셀 관련 컨트롤과 항목 탐색 식별자를 일관된 위치에 표시하고 있다.”

이전/다음 버튼, 점 인디케이터 등 캐러셀 컨트롤·탐색 식별자를, 슬라이드 전환·여러 캐러셀에 걸쳐 동일한 위치에 일관되게 배치하라는 뜻입니다.

정리: 컨트롤·식별자를 일관된 위치에 고정하라. 이게 CP-215입니다.

2. 왜 일관된 위치여야 하나

내비게이션·컨트롤의 사용성은 예측 가능성에서 나옵니다(브레드크럼 위치 CP-081, 페이지네이션 순서 CP-132, 탭 바 배치 CP-140에서 반복). 사용자가 ‘슬라이드를 넘기자’ 생각했을 때, 이전/다음 버튼이 어디 있는지 이미 알고 있어야 바로 누르죠. 컨트롤 위치가 흔들리면 매번 찾아야 합니다.

일관성이 깨지는 경우:

슬라이드마다 위치 변동 — 슬라이드가 넘어갈 때 컨트롤(버튼·점)의 위치가 콘텐츠 레이아웃에 따라 들쭉날쭉 하면 — 사용자가 방금 누른 버튼이 다음 슬라이드에선 다른 자리에 있어 헷갈리죠. 컨트롤은 슬라이드 콘텐츠가 바뀌어도 고정된 자리에 있어야 합니다(컨트롤은 콘텐츠와 별개 레이어).

캐러셀마다 다른 위치 — 사이트에 여러 캐러셀이 있을 때, 어떤 캐러셀은 화살표가 좌우에·점이 아래에, 다른 캐러셀은 화살표가 아래에·점이 옆에 있으면 — 사용자가 매번 컨트롤 위치를 새로 파악해야 합니다. 모든 캐러셀이 같은 컨트롤 배치를 쓰면, 한 번 익힌 패턴이 모든 캐러셀에 통하죠.

관습적 위치. 캐러셀 컨트롤의 일반적 위치는:

이전/다음 버튼 — 슬라이드 좌우 끝(중앙 높이), 또는 하단.

점 인디케이터(탐색 식별자) — 슬라이드 하단 중앙.

정지 버튼 — 보통 하단의 인디케이터 근처.

이 관습적 위치를 따르고, 모든 슬라이드·캐러셀에서 동일하게 유지하면 — 사용자는 컨트롤을 보지 않고도 손이 그 위치로 갑니다. 위치를 고정하는 구현은 — 컨트롤을 슬라이드 콘텐츠와 별개의 고정 레이어(캐러셀 컨테이너 기준 absolute 등)에 두어, 콘텐츠가 바뀌어도 컨트롤 위치는 불변이게 하죠.

이 일관성은 — 시각적 위치뿐 아니라 키보드 초점 순서(CP-224)와도 맞물려야 합니다. 컨트롤 위치가 일관되면 키보드 사용자도 예측 가능하게 접근하죠. 그리고 컨트롤이 일관된 위치에 있고(215), 콘텐츠를 안 가리며(213), 명확히 인지되면(214), 충분히 크면(217) — 사용자가 캐러셀을 편하고 예측 가능하게 조작합니다.

이 규칙은 캐러셀 컨트롤 4종 규칙(CP-213 비중첩, 214 명확 인지, 215 일관 위치, 217 충분한 크기)의 하나로, ’예측 가능한 조작’을 담당합니다. 공공 사이트는 여러 페이지에 캐러셀을 쓰므로, 사이트 전역 일관성이 특히 중요하죠.

정리하면 — 캐러셀 컨트롤·식별자는 사용자가 찾지 않고 바로 쓰도록, 모든 슬라이드·캐러셀에서 일관된(관습적) 위치에 고정해야 합니다.

3. 점검 / 개선

무엇을 점검하나

슬라이드 간 고정 — 슬라이드가 바뀌어도 컨트롤 위치가 고정되는가.

캐러셀 간 일관성 — 사이트의 여러 캐러셀에서 컨트롤 배치가 동일한가.

관습 부합 — 이전/다음(좌우), 점 인디케이터(하단 중앙) 등 관습적 위치인가.

개선 방향

컨트롤을 고정 레이어에 둬 콘텐츠 변화와 무관하게 위치 불변.

캐러셀을 공통 컴포넌트화해 사이트 전역 컨트롤 배치 통일.

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

역할	책임
디자이너	컨트롤 일관 위치·관습 부합 정의
퍼블리셔/개발	고정 위치·공통 컴포넌트 구현

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 슬라이드가 바뀌어도 컨트롤 위치가 고정되나요?

□ 사이트의 여러 캐러셀에서 컨트롤 배치가 동일한가요?

□ 이전/다음(좌우), 점 인디케이터(하단 중앙) 등 관습적 위치인가요?

❓ FAQ

Q1. 슬라이드 콘텐츠에 맞춰 컨트롤 위치를 바꾸면 안 되나요? 위치가 흔들리면 사용자가 매번 찾습니다. 컨트롤은 고정 레이어에 둬 위치 불변이어야 합니다. Q2. 캐러셀마다 디자인이 달라도 컨트롤은 같아야 하나요? 네. 외형은 달라도 컨트롤 배치는 일관돼야 예측 가능합니다. Q3. 어디에 두는 게 관습인가요? 이전/다음은 좌우 끝, 점 인디케이터는 하단 중앙이 일반적입니다.

6. 마무리

CP-215의 메시지:

컨트롤은 늘 같은 자리에 — 컨트롤·식별자를 일관된 위치에 고정하라.

컨트롤 위치가 슬라이드마다·캐러셀마다 흔들리면 사용자가 찾느라 헤맵니다. 고정 레이어에 두어 콘텐츠 변화와 무관하게, 모든 캐러셀에서 관습적 위치로 일관되게 배치하면 사용자가 보지 않고도 조작하죠. 다음 편은 전체 슬라이드 수와 탐색 위치 표시입니다.

다음 편 예고 ▶ 「336. (CP-216) 전체 슬라이드 수와 사용자의 탐색 위치를 표시하고 있다.」

ViewCheck는 캐러셀 컨트롤·식별자가 일관된 위치에 표시되는지를 진단합니다.

📚 참고 출처

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

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

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