버튼이 콘텐츠를 가리지 않게

KRDS CP-213 — 캐러셀 관련 컨트롤, 항목 탐색 식별자가 캐러셀 항목과 중첩되지 않도록 하고 있다.

0. 들어가며 — 화살표가 글자를 덮으면

이번 333편은 캐러셀 컨트롤·탐색 식별자가 캐러셀 항목과 중첩되지 않도록 하라는 규칙입니다.

캐러셀에는 이전/다음 화살표 버튼, 점 인디케이터(탐색 식별자) 같은 컨트롤이 있습니다. 그런데 이 컨트롤이 슬라이드 콘텐츠(이미지·텍스트) 위에 겹쳐 놓이면 — 화살표가 글자를 가리거나, 점이 이미지의 중요 부분을 덮죠. CP-213은 컨트롤과 항목 콘텐츠가 겹치지 않게 배치하라고 규정합니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 컨트롤·식별자 항목 비중첩

CP-213 (컴포넌트 > 캐러셀) “캐러셀 관련 컨트롤, 항목 탐색 식별자가 캐러셀 항목과 중첩되지 않도록 하고 있다.”

이전/다음 버튼, 점 인디케이터 등 캐러셀 컨트롤·탐색 식별자가 슬라이드 콘텐츠를 가리거나 겹치지 않게 배치하라는 뜻입니다.

정리: 컨트롤·식별자가 슬라이드 콘텐츠를 가리지 않게 하라. 이게 CP-213입니다.

2. 왜 중첩을 피해야 하나

캐러셀은 두 종류의 요소로 구성됩니다 — 콘텐츠(슬라이드의 이미지·텍스트, 사용자가 보려는 것)와 컨트롤 (이전/다음 버튼, 점 인디케이터, 정지 버튼 등, 캐러셀을 조작하는 것). 이 둘은 역할이 다르므로, 서로 방해하지 않게 배치해야 하죠. 컨트롤이 콘텐츠 위에 겹치면 문제가 생깁니다.

중첩의 문제:

콘텐츠 가림 — 이전/다음 화살표가 슬라이드 양옆 콘텐츠 위에 놓이면, 그 부분의 이미지·텍스트를 가립니다. 화살표 뒤에 중요한 정보(인물, 글자)가 있으면 안 보이죠. 점 인디케이터가 하단 콘텐츠 위에 겹치면 그 부분 텍스트를 덮습니다.

가독성 충돌 — 컨트롤(버튼·점)과 그 아래 콘텐츠가 색이 비슷하면, 컨트롤도 콘텐츠도 서로 묻혀 둘 다 안 보이죠. 화살표 위에 글자가 걸치면 글자가 잘려 읽히고요.

조작 방해 — 거꾸로, 콘텐츠가 컨트롤을 가려 컨트롤을 누르기 어려워질 수도 있습니다.

이러면 — 사용자는 콘텐츠를 온전히 못 보거나, 컨트롤을 제대로 못 쓰죠. 캐러셀의 두 기능(콘텐츠 전달 + 조작)이 서로 방해합니다.

그래서 CP-213은 — 컨트롤·탐색 식별자를 콘텐츠와 겹치지 않는 위치에 배치하라고 합니다. 방법:

콘텐츠 영역 밖에 배치 — 이전/다음 버튼을 슬라이드 콘텐츠 영역 바깥(좌우 여백)에, 점 인디케이터를 슬라이드 아래 별도 영역에 두어, 콘텐츠를 침범하지 않게. 가장 안전합니다.

전용 여백 확보 — 컨트롤이 들어갈 별도 공간(상하좌우 여백)을 슬라이드 레이아웃에 마련해, 콘텐츠와 컨트롤이 각자 영역을 갖게.

불가피하게 겹친다면 분리 처리 — 디자인상 컨트롤을 콘텐츠 위에 둬야 하면(공간 제약), 컨트롤 뒤에 반투명 배경·그림자를 줘 콘텐츠와 시각적으로 분리하고(이미지 CP-203의 오버레이 정신), 콘텐츠의 중요 영역(텍스트· 핵심 이미지)은 컨트롤이 가리지 않게 콘텐츠 배치를 조정합니다.

핵심은 — 콘텐츠와 컨트롤이 각자의 영역을 갖고 서로 방해하지 않는 것입니다. 사용자가 콘텐츠를 온전히 보고, 컨트롤도 명확히 인지·조작하게요.

이 규칙은 CP-212(항목 윤곽 명확)·CP-214(컨트롤 명확 인지)와 함께 캐러셀의 시각 구조를 정돈합니다 — 항목은 또렷이(212), 컨트롤은 콘텐츠와 안 겹치게(213), 컨트롤 자체도 명확하게(214). 함께 사용자가 콘텐츠와 컨트롤을 모두 분명히 인지·사용하게 하죠.

정리하면 — 캐러셀의 콘텐츠와 컨트롤은 역할이 다르므로 서로 겹치지 않게 배치해, 콘텐츠 가림과 조작 방해를 막아야 합니다.

3. 점검 / 개선

무엇을 점검하나

콘텐츠 비가림 — 이전/다음 버튼·점 인디케이터가 슬라이드 콘텐츠를 가리지 않는가.

컨트롤 영역 — 컨트롤이 콘텐츠 밖이나 전용 여백에 배치됐는가.

불가피 중첩 처리 — 겹친다면 반투명 배경 등으로 분리되고 핵심 콘텐츠는 안 가리는가.

개선 방향

이전/다음 버튼을 콘텐츠 영역 밖(좌우 여백), 점 인디케이터를 슬라이드 아래에 배치.

불가피한 중첩은 컨트롤 배경 분리 + 핵심 콘텐츠 회피 배치.

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

역할	책임
디자이너	컨트롤·콘텐츠 비중첩 레이아웃 정의
퍼블리셔/개발	컨트롤 위치·여백 구현

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 이전/다음 버튼·점 인디케이터가 슬라이드 콘텐츠를 가리지 않나요?

□ 컨트롤이 콘텐츠 밖이나 전용 여백에 배치됐나요?

□ 겹친다면 반투명 배경 등으로 분리되고 핵심 콘텐츠는 안 가리나요?

❓ FAQ

Q1. 화살표를 슬라이드 위에 두면 안 되나요? 콘텐츠를 가리면 안 됩니다. 콘텐츠 밖 여백에 두거나, 불가피하면 배경 분리 + 핵심 콘텐츠 회피로 처리합니다. Q2. 점 인디케이터가 글자를 덮어요. 점을 슬라이드 아래 별도 영역으로 옮기거나, 콘텐츠 텍스트를 점과 겹치지 않게 배치합니다. Q3. 공간이 좁아 겹칠 수밖에 없으면요? 컨트롤 뒤에 반투명 배경을 주고, 콘텐츠의 중요 영역은 컨트롤이 가리지 않게 배치를 조정합니다.

6. 마무리

CP-213의 메시지:

버튼이 콘텐츠를 가리지 않게 — 컨트롤·식별자를 항목과 겹치지 않게 배치하라.

캐러셀의 콘텐츠와 컨트롤은 역할이 다릅니다. 컨트롤이 콘텐츠 위에 겹치면 정보가 가려지고 조작도 방해받죠. 각자의 영역을 둬 서로 방해하지 않게 하고, 불가피한 중첩은 배경 분리로 처리합니다. 다음 편은 컨트롤·식별자를 명확히 인지되게 하는 규칙입니다.

다음 편 예고 ▶ 「334. (CP-214) 캐러셀 관련 컨트롤과 항목 탐색 식별자가 명확하게 인지될 수 있도록 표현하고 있다.」

ViewCheck는 캐러셀 컨트롤·식별자가 항목과 중첩되지 않는지를 진단합니다.

📚 참고 출처

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

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

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