처음부터 보이게

KRDS CP-335 — 화면이 로딩되었을 때 도움 패널은 열린 상태로 제공하고 있다.

0. 들어가며 — 도움말이 숨어 있으면

이번 455편부터 도움 패널(Help panel) 그룹입니다. 14개 규칙으로 가장 큰 컴포넌트 그룹이죠. 첫 규칙은 화면 로딩 시 도움 패널을 열린 상태로 제공하라는 규칙입니다.

도움 패널은 — 본문 옆(주로 오른쪽)에서 입력 항목·절차에 대한 도움 정보를 제공하는 영역입니다(복잡한 신청서의 작성 안내 등). 이 패널이 — 처음부터 열려 있어야, 사용자가 ’도움말이 여기 있구나’를 알고 활용하죠. CP-335는 로딩 시 열린 상태를 규정합니다. 이번 편을 풀어냅니다.

1. 원문 — 로딩 시 열린 상태

CP-335 (컴포넌트 > 도움 패널) “화면이 로딩되었을 때 도움 패널은 열린 상태로 제공하고 있다.”

화면이 처음 로딩되었을 때 도움 패널이 닫혀 있지 않고 열린 상태로 보이게 제공하라는 뜻입니다.

정리: 화면 로딩 시 도움 패널을 열린 상태로 보여라. 이게 CP-335입니다.

2. 왜 로딩 시 열린 상태인가

도움 패널(Help panel)은 — 복잡한 작업(긴 신청서, 다단계 절차, 전문 용어가 많은 폼)에서 사용자에게 도움 정보를 제공하는 영역입니다. 보통 본문 옆에 자리해, 각 입력 항목·단계에 대한 설명·안내·예시를 보여주죠. 이 패널이 — 처음부터 열려 있느냐가 활용도를 좌우합니다.

패널이 처음에 닫혀 있을 때:

존재 인지 실패 도움 패널이 로딩 시 닫혀 있고 작은 버튼으로만 있으면, 사용자는 ’도움말이 있다’는 걸 모르거나 무시하기 쉽습니다. 막상 막혀서 도움이 필요할 때도 그게 거기 있는지 모르죠.

도움 접근 지연 닫힌 패널을 열려면 사용자가 버튼을 찾아 눌러야 합니다. 작업 중 막혔을 때 이 추가 단계가 부담이죠. 처음부터 열려 있으면 바로 참고합니다.

그래서 CP-335는 — 화면 로딩 시 도움 패널을 열린 상태로 제공하라고 합니다:

기본 열림 화면이 로딩되면 도움 패널이 펼쳐져 보입니다. 사용자가 본문을 작업하면서 옆의 도움 정보를 바로 참고하죠. ’도움말이 여기 있다’를 처음부터 알게요.

첫 진입 안내 — 특히 — 복잡한 작업의 첫 화면에서 패널이 열려 있으면, 사용자가 ’이 작업엔 도움말이 있구나, 막히면 여기 보면 되겠다’를 인지합니다.

닫기/접기는 허용. 열린 상태로 시작하되 — 사용자가 패널이 불필요하면 닫거나 접을 수 있어야 하죠(공간 확보). 즉 — ’기본 열림 + 사용자가 닫기 가능’입니다. 강제로 항상 열어두는 게 아니라, 처음엔 열어 인지시키고 이후엔 사용자 선택에 맡깁니다.

모바일 예외(CP-343 연계). 화면이 좁은 모바일에선 패널이 본문 옆에 펼쳐질 공간이 부족하죠. 이땐 열기 버튼으로 축약합니다(CP-343). 즉 CP-335의 ’로딩 시 열림’은 충분한 화면 폭(데스크톱)이 전제입니다. 좁은 화면은 CP-343의 축약 규칙을 따르죠.

열린 상태의 기본 화면(CP-336 연계). 패널이 열렸을 때 — 그 첫 화면은 ‘기본 상태’(특정 항목 선택 전의 개요· 일반 안내)로 제공합니다(CP-336). 즉 로딩 시 열림(335) + 기본 상태 표시(336)가 함께 가죠.

이 규칙은 도움 패널의 ’가시성·접근성’을 담당합니다 — 로딩 시 열어둬(335) 사용자가 도움말의 존재를 인지하고 바로 활용하게 하죠. 도움이 필요한 복잡한 작업에서, 도움을 숨기지 않고 처음부터 보이는 게 핵심입니다.

정리하면 — 도움 패널이 처음에 닫혀 있으면 사용자가 그 존재를 모르거나 접근이 지연되므로, 충분한 화면 폭에서 화면 로딩 시 패널을 열린 상태로 제공하되 사용자가 닫을 수 있게 해야 합니다.

3. 점검 / 개선

무엇을 점검하나

로딩 시 열림 — 화면 로딩 시 도움 패널이 열린 상태로 보이는가(데스크톱).

닫기 가능 — 사용자가 패널을 닫거나 접을 수 있는가.

모바일 축약 — 좁은 화면은 열기 버튼으로 축약되는가(CP-343).

개선 방향

충분한 화면 폭에서 로딩 시 패널 기본 열림. 사용자가 닫기 가능.

좁은 화면은 열기 버튼 축약(CP-343). 열린 첫 화면은 기본 상태(CP-336).

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

역할	책임
기획/UX	도움 패널 기본 상태 정책
퍼블리셔/개발	로딩 시 열림·닫기 구현

기관 유형	CP-335 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 조건부 (도움 패널 사용 시)

복잡한 신청서·절차에 도움 패널을 쓰는 사이트에 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 화면 로딩 시 도움 패널이 열린 상태로 보이나요(데스크톱)?

□ 사용자가 패널을 닫거나 접을 수 있나요?

□ 좁은 화면은 열기 버튼으로 축약되나요(CP-343)?

❓ FAQ

Q1. 도움 패널이 뭔가요? 복잡한 작업(긴 신청서·절차)에서 본문 옆에 입력 항목·절차 도움 정보를 제공하는 영역 입니다. Q2. 항상 열어둬야 하나요? 로딩 시 열되, 사용자가 불필요하면 닫을 수 있어야 합니다. ‘기본 열림 + 닫기 가능’ 이죠. Q3. 모바일도 열어두나요? 좁은 화면은 공간이 부족해 열기 버튼으로 축약합니다(CP-343). 이 규칙은 충분한 폭이 전제죠.

6. 마무리

CP-335의 메시지:

처음부터 보이게 — 화면 로딩 시 도움 패널을 열린 상태로 제공하라.

도움 패널이 처음에 닫혀 있으면 사용자가 그 존재를 모르거나 접근이 지연됩니다. 로딩 시 열어둬 도움말 존재를 인지시키되 닫기는 허용하는 게 핵심이죠. 다음 편은 도움 패널 첫 화면의 기본 상태입니다.

다음 편 예고 ▶ 「456. (CP-336) 도움 패널의 첫 화면은 기본 상태로 제공하고 있다.」

ViewCheck는 도움 패널이 로딩 시 열린 상태로 제공되는지를 진단합니다.

📚 참고 출처

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

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

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