좁으면 버튼으로 접어서

KRDS CP-343 — [모바일] 화면 너비가 충분하지 않을 때 도움 패널 열기 버튼으로 축약하여 제공하고 있다.

0. 들어가며 — 좁은 화면에서 패널이 본문을 가리면

이번 463편은 [모바일] 화면 너비가 충분하지 않을 때 도움 패널을 열기 버튼으로 축약하여 제공하라는 규칙입니다.

도움 패널은 — 데스크톱에선 본문 옆에 열린 채로 제공되죠(CP-335). 하지만 — 좁은 모바일 화면에서 패널을 그대로 펼치면, 본문이 가려지거나 짓눌립니다. CP-343은 좁은 화면에선 패널을 ’열기 버튼’으로 축약하라고 규정합니다. CP-335(로딩 시 열림)의 모바일 예외 규칙이죠. 이번 편을 풀어냅니다.

1. 원문 — 좁은 화면 시 열기 버튼 축약

CP-343 (컴포넌트 > 도움 패널) “[모바일] 화면 너비가 충분하지 않을 때 도움 패널 열기 버튼으로 축약하여 제공하고 있다.”

화면 너비가 부족한 모바일 환경에서는, 도움 패널을 펼친 상태 대신 열기 버튼으로 축약해 제공하라는 뜻입니다.

정리: 좁은 화면에선 도움 패널을 열기 버튼으로 축약하라. 이게 CP-343입니다.

2. 왜 모바일 축약인가

도움 패널은 — 데스크톱에선 본문 옆(주로 오른쪽)에 펼쳐진 채로 제공됩니다(CP-335). 본문과 패널이 나란히 있을 충분한 화면 폭이 있으니까요. 하지만 — 모바일처럼 화면이 좁으면 사정이 다릅니다.

좁은 화면에서 패널을 그대로 펼칠 때의 문제:

본문 가림·짓눌림 좁은 화면에 본문과 패널을 나란히 두면, 둘 다 너무 좁아져 본문도 패널도 제대로 안 보입니다. 또는 패널이 본문 위에 겹쳐 본문을 가리죠. 정작 작업할 본문이 안 보이면 작업을 못 합니다.

공간 부족 — 모바일은 — 세로로 긴 좁은 화면이라, 본문 옆에 패널을 펼칠 가로 공간이 없죠.

그래서 CP-343은 — 좁은 화면에선 패널을 열기 버튼으로 축약하라고 합니다:

열기 버튼으로 축약 패널을 펼친 상태 대신 작은 ‘도움말’ 버튼(아이콘 또는 텍스트 버튼)으로 축약합니다. 평소엔 본문이 화면을 다 쓰고, 사용자가 도움이 필요해 그 버튼을 누르면 그때 패널이 펼쳐지죠(오버레이·하단 시트·전체 화면 등으로).

본문 우선 — 좁은 화면에선 — 본문(작업 영역)이 우선입니다. 패널은 필요할 때만 불러오게요. 데스크톱(열림 기본)과 모바일(축약)의 반응형 차이죠.

펼침 방식 — 모바일에서 패널을 펼칠 땐 — 보통 화면 하단에서 올라오는 시트(bottom sheet), 전체 화면 오버 레이, 또는 본문 위 모달 형태로요. 본문을 일시적으로 덮되, 닫으면 본문으로 돌아옵니다.

반응형 전환 기준. ’화면 너비가 충분하지 않을 때’는 — 보통 특정 브레이크포인트(예: 태블릿/모바일 경계) 이하 에서 축약으로 전환합니다. 본문과 패널이 나란히 들어갈 폭이 안 되면 축약이죠. 데스크톱은 펼침(CP-335), 좁아지면 축약(CP-343)으로 자연스럽게 전환합니다.

축약돼도 접근 보장. 축약은 — 도움말을 없애는 게 아니라 접는 것입니다. 열기 버튼이 명확히 보여, 사용자가 필요할 때 도움말을 펼칠 수 있어야 하죠. 그리고 — 필수 정보는 패널이 아닌 본문에 있으니(CP-340), 패널이 축약돼도 작업엔 지장 없습니다. 패널은 보조니까요.

터치 영역(CP-347 연계). 모바일 열기 버튼은 — 터치하기 쉽게 충분한 크기(44×44px 이상, CP-347)여야 하죠. 손가락으로 정확히 누르게요.

이 규칙은 도움 패널의 ’반응형 적응’을 담당합니다 — 좁은 화면에선 패널을 열기 버튼으로 축약해(343), 본문을 우선 보이고 도움말은 필요 시 펼치게 하죠. 데스크톱 열림(335)과 모바일 축약(343)의 반응형 짝입니다.

정리하면 — 좁은 화면에서 패널을 그대로 펼치면 본문이 가려지므로, 화면 너비가 부족할 때는 패널을 열기 버튼으로 축약해 본문을 우선하고 도움말은 필요 시 펼치게 해야 합니다.

3. 점검 / 개선

무엇을 점검하나

좁은 화면 축약 — 모바일 등 좁은 화면에서 패널이 열기 버튼으로 축약되는가.

본문 우선 — 축약 시 본문이 가려지지 않고 화면을 우선 쓰는가.

접근 보장 — 열기 버튼이 명확하고 충분히 큰가(CP-347).

개선 방향

브레이크포인트 이하에서 패널을 열기 버튼으로 축약. 펼침은 하단 시트·오버레이로.

열기 버튼 44×44px 이상(CP-347). 데스크톱은 펼침 유지(CP-335).

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

역할	책임
디자이너	반응형 패널 축약·펼침 방식 설계
퍼블리셔/개발	브레이크포인트 축약 구현

기관 유형	CP-343 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (모바일 + 도움 패널 사용 시)

모바일을 지원하며 도움 패널을 쓰는 사이트에 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 모바일 등 좁은 화면에서 패널이 열기 버튼으로 축약되나요?

□ 축약 시 본문이 가려지지 않고 화면을 우선 쓰나요?

□ 열기 버튼이 명확하고 충분히 큰가요(44×44px+)?

❓ FAQ

Q1. 모바일에서도 패널을 펼쳐두면 안 되나요? 좁은 화면에선 본문과 패널이 다 좁아지거나 본문이 가려집니다. 열기 버튼으로 축약해 본문을 우선하죠. Q2. CP-335(로딩 시 열림)와 충돌하지 않나요? CP-335는 충분한 폭(데스크톱) 전제입니다. 좁은 화면은 CP-343의 축약을 따르죠. 반응형 짝입니다. Q3. 축약하면 도움말을 못 보나요? 접는 것일 뿐 없애는 게 아닙니다. 열기 버튼으로 필요 시 펼치고, 필수 정보는 본문에 있어(CP-340) 지장 없죠.

6. 마무리

CP-343의 메시지:

좁으면 버튼으로 접어서 — 모바일에선 도움 패널을 열기 버튼으로 축약하라.

좁은 화면에서 패널을 그대로 펼치면 본문이 가려집니다. 화면 폭이 부족할 때는 패널을 열기 버튼으로 축약해 본문을 우선하고 도움말은 필요 시 펼치는 게 핵심이죠. 다음 편은 아이콘 명도 대비입니다.

다음 편 예고 ▶ 「464. (CP-344) 아이콘과 인접 배경 간 명도 대비를 3:1 이상으로 제공하고 있다.」

ViewCheck는 좁은 화면에서 도움 패널이 열기 버튼으로 축약되는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 도움 패널(Help panel) 가이드 — https://www.krds.go.kr/html/site/component/component_33.html

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

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