슬라이드 하나가 어디까지인지

KRDS CP-212 — 캐러셀 항목의 콘텐츠의 윤곽이 명확하게 드러나도록 표현하고 있다.

0. 들어가며 — 슬라이드의 경계가 흐릿하면

이번 332편은 캐러셀 항목 콘텐츠의 윤곽이 명확하게 드러나도록 표현하라는 규칙입니다.

캐러셀에서 한 슬라이드가 어디서 시작해 어디서 끝나는지 — 그 윤곽(경계)이 흐릿하면, 사용자는 ‘지금 보는 게 하나의 슬라이드인지, 여러 개가 걸쳐 있는 건지’ 헷갈리죠. 특히 옆 슬라이드가 살짝 보이는 디자인에서 경계가 모호하면 혼란스럽습니다. CP-212는 각 슬라이드 항목의 윤곽을 명확히 드러내라고 규정합니다. 이번 편을 풀어 냅니다.

1. 규칙 원문 — 항목 콘텐츠 윤곽 명확

CP-212 (컴포넌트 > 캐러셀) “캐러셀 항목의 콘텐츠의 윤곽이 명확하게 드러나도록 표현하고 있다.”

각 캐러셀 슬라이드(항목)의 경계·범위가 시각적으로 명확히 구분되어, 사용자가 하나의 슬라이드 단위를 또렷이 인지하게 하라는 뜻입니다.

정리: 각 슬라이드 항목의 윤곽(경계)을 명확히 드러내라. 이게 CP-212입니다.

2. 왜 항목 윤곽을 명확히 하나

캐러셀은 여러 슬라이드를 한 자리에서 번갈아 보여줍니다. 사용자가 캐러셀을 제대로 인지하려면 — ’지금 보는 것이 하나의 슬라이드 단위’임을, 그리고 그 슬라이드가 어디서 시작해 어디서 끝나는지를 명확히 알아야 하죠. 윤곽이 흐릿하면 이 인지가 무너집니다.

윤곽이 모호한 경우:

옆 슬라이드가 걸쳐 보임 — 일부 캐러셀은 현재 슬라이드 양옆에 다음/이전 슬라이드를 살짝 보여줍니다(peek 디자인). 그런데 경계가 흐릿하면 — 사용자는 ’지금 슬라이드가 어디까지고 옆 건 어디부터’인지 헷갈리죠. 콘텐츠 들이 뒤섞여 보입니다.

배경과 융합 — 슬라이드 콘텐츠(이미지·텍스트)가 캐러셀 배경이나 주변 페이지 영역과 색·경계 없이 섞이면, 슬라이드의 범위가 안 보이죠.

여러 항목이 한 화면에 — 한 번에 여러 슬라이드를 보여주는 다중 캐러셀에서 각 항목 경계가 흐리면, 몇 개가 있는지·각각이 어디까지인지 모호합니다.

이러면 사용자는 — 캐러셀의 구조(‘슬라이드 단위로 넘어간다’)를 파악 못 하고, 한 슬라이드의 콘텐츠를 온전히 인지하기 어렵습니다.

그래서 CP-212는 — 각 슬라이드 항목의 윤곽(경계)을 명확히 드러내라고 합니다. 방법:

카드·박스 형태 — 각 슬라이드를 카드(테두리·그림자·배경색이 있는 박스)로 표현해 경계를 분명히. 슬라이드 하나가 하나의 카드로 또렷이 구분되죠.

여백·구분 — 슬라이드 사이에 충분한 여백(gap)을 둬 항목들이 분리되어 보이게.

경계선·그림자 — 슬라이드 영역에 테두리나 그림자를 줘 배경과 분리.

현재 슬라이드 강조 — 옆 슬라이드가 걸쳐 보이는 디자인이면, 현재(중앙) 슬라이드를 강조(불투명도·크기· 테두리)하고 옆은 흐리게(반투명·축소) 해 현재 항목을 명확히. 어느 게 ’지금 보는 슬라이드’인지 분명해지죠.

핵심은 — 사용자가 ‘이것이 하나의 슬라이드, 그 범위는 여기까지’를 한눈에 인지하게 하는 것입니다. 이는 게슈탈트 의 ’공통 영역·경계’ 원리로(사이드 메뉴 계층 CP-095, 아코디언 헤더-패널 CP-197 정신), 콘텐츠 단위를 시각적 으로 묶어 구분하는 것이죠.

이 규칙은 캐러셀의 ’구조 명확성’을 담당합니다 — 항목 윤곽(212)이 명확하고, 컨트롤이 항목과 안 겹치며(CP-213), 컨트롤·식별자가 명확히 인지되면(CP-214), 사용자가 캐러셀 구조를 또렷이 파악하죠. 슬라이드 5개 이내(CP-210) 라면 각 항목 윤곽도 더 또렷하게 보입니다.

정리하면 — 캐러셀에서 사용자가 슬라이드 단위를 명확히 인지하려면, 각 항목의 윤곽(경계)을 카드·여백·강조 등 으로 분명히 드러내야 합니다.

3. 점검 / 개선

무엇을 점검하나

항목 경계 — 각 슬라이드의 윤곽(시작·끝)이 시각적으로 명확한가.

현재 슬라이드 구분 — (옆이 걸쳐 보이면) 현재 슬라이드가 명확히 강조되는가.

배경 분리 — 슬라이드 콘텐츠가 배경·주변과 섞이지 않는가.

개선 방향

각 슬라이드를 카드(테두리·그림자·배경)·여백으로 경계 분명히.

peek 디자인은 현재 슬라이드 강조 + 옆 흐림으로 현재 항목 구분.

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

역할	책임
디자이너	슬라이드 항목 윤곽·경계 표현 정의
퍼블리셔/개발	카드·여백·강조 구현

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 각 슬라이드의 윤곽(시작·끝)이 시각적으로 명확한가요?

□ (옆이 걸쳐 보이면) 현재 슬라이드가 명확히 강조되나요?

□ 슬라이드 콘텐츠가 배경·주변과 섞이지 않나요?

❓ FAQ

Q1. 윤곽이 왜 중요한가요? 사용자가 ’하나의 슬라이드 단위’를 인지해야 캐러셀 구조(슬라이드로 넘어감)를 파악합니다. 경계가 흐리면 콘텐츠가 뒤섞여 보이죠. Q2. 옆 슬라이드를 살짝 보여주면 안 되나요? 보여줄 수 있지만, 현재 슬라이드를 강조하고 옆을 흐리게 해 현재 항목을 명확히 구분해야 합니다. Q3. 어떻게 경계를 만드나요? 카드(테두리·그림자·배경)·여백·구분선으로 슬라이드를 분리합니다.

6. 마무리

CP-212의 메시지:

슬라이드 하나가 어디까지인지 — 각 항목의 윤곽을 명확히 드러내라.

캐러셀에서 슬라이드 단위가 흐릿하면 사용자가 콘텐츠를 뒤섞여 인지하고 구조를 파악 못 합니다. 카드·여백·강조로 각 항목의 경계를 분명히 해, ’이것이 하나의 슬라이드’임을 또렷이 보여주죠. 다음 편은 컨트롤이 항목과 겹치지 않게 하는 규칙입니다.

다음 편 예고 ▶ 「333. (CP-213) 캐러셀 관련 컨트롤, 항목 탐색 식별자가 캐러셀 항목과 중첩되지 않도록 하고 있다.」

ViewCheck는 캐러셀 항목 콘텐츠의 윤곽이 명확히 드러나는지를 진단합니다.

📚 참고 출처

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

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

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