화면 크기에 맞춰 도움말도

KRDS BP-020 — [공통] 사용자 요청에 의한 도움말 콘텐츠는 반응형 방식으로 제공하고 있다.

0. 들어가며 — 모바일에서 도움말이 화면을 벗어나면

이번 586편은 사용자 요청에 의한 도움말 콘텐츠를 반응형 방식으로 제공하라는 규칙입니다.

사용자가 도움 아이콘을 눌러 여는 도움말이 — 화면 크기에 맞춰 적절히 표시돼야, 모바일에서도 잘리거나 넘치지 않죠. BP-020은 도움말의 반응형 제공을 규정합니다. 도움 패널·맥락적 도움말의 반응형(CP-343·352·357) 정신이죠. 이번 편을 풀어냅니다.

1. 원문 — 도움말 반응형 제공

BP-020 (기본 패턴 > 도움 [공통]) “[공통] 사용자 요청에 의한 도움말 콘텐츠는 반응형 방식으로 제공하고 있다.”

사용자가 요청해서 여는 도움말 콘텐츠를, 화면 크기·환경에 맞춰 반응형으로 제공하라는 뜻입니다.

정리: 사용자가 여는 도움말을 반응형으로 제공하라. 이게 BP-020입니다.

2. 왜 반응형 도움말인가

도움말 중에는 — 사용자가 요청해서 여는 것들이 있습니다: 도움 아이콘(?)을 눌러 뜨는 맥락적 도움말(CP-355~365)· 툴팁, ‘도움말’ 버튼을 눌러 펼치는 도움 패널(CP-335~348) 등. 이 도움말 콘텐츠가 — 화면 크기·환경에 맞춰 반응형 으로 표시돼야, 모든 기기에서 잘 보이죠. BP-020은 이를 요구합니다.

도움말이 반응형이 아닐 때의 문제:

모바일에서 잘림·넘침 도움말 팝오버·패널이 PC 기준 고정 크기·위치면, 좁은 모바일 화면에서 화면을 벗어나 잘리거나, 본문을 다 가리거나, 작게 짜부라집니다. 모바일 사용자가 도움말을 제대로 못 보죠.

고정 레이아웃 문제 — 도움 패널을 — PC처럼 본문 옆에 펼치면, 모바일엔 공간이 없어 본문이 가려지죠(도움 패널 모바일 축약 CP-343의 문제).

그래서 BP-020은 — 도움말을 반응형 방식으로 제공하라고 합니다:

화면 크기 적응 — 도움말 콘텐츠를 — 화면 크기에 맞춰 표시합니다:

데스크톱(넓은 화면) — 도움 패널은 본문 옆에 펼침(CP-335), 팝오버는 요소 옆에(CP-357).

모바일(좁은 화면) — 도움 패널은 열기 버튼으로 축약하거나 하단 시트·전체 화면으로(CP-343·352), 팝오버는 화면 폭에 맞춤. 화면을 벗어나지 않게요.

화면 안 유지 — 도움말이 — 어떤 화면 크기에서도 화면 안에 들어오고(CP-357·377), 잘리지 않게 합니다.

본문 가림 최소 — 모바일에서도 — 본문(작업 영역)을 최대한 덜 가리게, 적절한 표현(시트 등)으로요.

이미 다룬 컴포넌트 규칙들의 종합. 도움 패널 모바일 축약(CP-343), 따라하기 모바일 축약(CP-352), 맥락적 도움말 팝오버 위치(CP-357), 툴팁 팝오버 위치(CP-377)·모바일 터치(CP-381) — 이 컴포넌트별 반응형 규칙들이, BP-020에선 도움말 전반의 반응형 원칙으로 종합됩니다. 어떤 도움 컴포넌트든 — 화면에 맞춰 반응형으로요.

‘사용자 요청에 의한’. 원문이 ’사용자 요청에 의한’이라 한정한 것은 — 사용자가 능동적으로 여는 도움말(클릭으로 뜨는 것)을 말합니다. 이런 도움말이 — 어느 화면에서 열리든 잘 보여야 하죠. 항상 보이는 인라인 안내(BP-026)와는 또 다른, 요청 시 뜨는 도움말의 반응형입니다.

모바일 사용자 중심. 공공 서비스의 모바일 사용자 비중이 큽니다. 도움말이 모바일에서 안 보이면, 정작 도움이 필요한 모바일 사용자가 못 쓰죠. 반응형 도움말이 모바일 포용의 기본입니다.

이 규칙은 도움 패턴의 ’도움말 반응형’을 담당합니다 — 사용자가 여는 도움말을 화면에 맞춰 반응형으로(020), 모든 기기에서 도움말을 제대로 보게 하죠. 컴포넌트별 반응형 규칙의 종합 원칙입니다.

정리하면 — 도움말이 PC 기준 고정 크기·위치면 모바일에서 잘리거나 본문을 가리므로, 사용자가 여는 도움말을 화면 크기에 맞춰 반응형으로(데스크톱 펼침, 모바일 축약·시트) 제공해야 합니다.

3. 점검 / 개선

무엇을 점검하나

화면 크기 적응 — 도움말이 데스크톱·모바일 각 화면에 맞춰 표시되는가.

화면 안 유지 — 도움말이 어떤 화면에서도 잘리지 않고 화면 안에 들어오는가.

본문 가림 최소 — 모바일에서 본문을 과하게 가리지 않는가.

개선 방향

도움 패널·팝오버를 반응형으로(데스크톱 펼침, 모바일 축약·하단 시트·화면 폭 맞춤).

화면 안 유지(CP-357·377). 모바일 본문 가림 최소. 모바일 검증.

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

역할	책임
디자이너	반응형 도움말 표현 설계
퍼블리셔/개발	반응형 도움말 구현

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

모바일을 지원하며 도움말을 제공하는 사이트에 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 도움말이 데스크톱·모바일 각 화면에 맞춰 표시되나요?

□ 도움말이 어떤 화면에서도 잘리지 않고 화면 안에 들어오나요?

□ 모바일에서 본문을 과하게 가리지 않나요?

❓ FAQ

Q1. 반응형 도움말이 뭔가요? 화면 크기에 맞춰 도움말 표현이 바뀌는 것입니다. 데스크톱은 펼침, 모바일은 축약· 하단 시트로요. Q2. 컴포넌트별 반응형 규칙(CP-343 등)과 같나요? 그것들을 도움말 전반의 반응형 원칙으로 종합한 게 BP-020 입니다. 어떤 도움 컴포넌트든 반응형으로요. Q3. 왜 모바일이 중요한가요? 공공 서비스 모바일 사용자 비중이 큽니다. 도움말이 모바일에서 안 보이면 정작 필요한 사용자가 못 쓰죠.

6. 마무리

BP-020의 메시지:

화면 크기에 맞춰 도움말도 — 사용자가 여는 도움말을 반응형으로 제공하라.

도움말이 PC 기준 고정이면 모바일에서 잘리거나 본문을 가립니다. 화면 크기에 맞춰 반응형으로 제공해 모든 기기에서 도움말을 제대로 보게 하는 게 핵심이죠. 다음 편은 용어·이름 일관성입니다.

다음 편 예고 ▶ 「587. (BP-021) [공통] 동일한 페이지 제목, 버튼 이름을 지칭하기 위한 텍스트는 모든 서비스에서 동일하게 사용하고 있다.」

ViewCheck는 도움말이 반응형으로 제공되는지를 진단합니다.

📚 참고 출처

KRDS 기본 패턴 — 도움 가이드 — https://www.krds.go.kr/html/site/pattern/pattern_02.html

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

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