처음엔 전체 개요부터

KRDS CP-336 — 도움 패널의 첫 화면은 기본 상태로 제공하고 있다.

0. 들어가며 — 패널이 열리면 무엇부터 보일까

이번 456편은 도움 패널의 첫 화면을 기본 상태로 제공하라는 규칙입니다.

CP-335에서 패널이 로딩 시 열린다고 했죠. 그럼 — 그 열린 패널에 무엇이 보여야 할까요? 특정 항목 도움말이 아닌 — 전체 개요·일반 안내 같은 ’기본 상태’여야 합니다. CP-336은 첫 화면을 기본 상태로 제공하라고 규정합니다. CP-335의 짝이죠. 이번 편을 풀어냅니다.

1. 원문 — 첫 화면 기본 상태

CP-336 (컴포넌트 > 도움 패널) “도움 패널의 첫 화면은 기본 상태로 제공하고 있다.”

도움 패널이 처음 열렸을 때, 특정 항목 도움말이 아닌 기본 상태(개요·일반 안내)를 보여주라는 뜻입니다.

정리: 도움 패널 첫 화면을 기본 상태로 제공하라. 이게 CP-336입니다.

2. 왜 첫 화면 기본 상태인가

도움 패널은 — 두 가지 상태를 가집니다:

기본 상태(default) — 특정 항목을 선택하지 않은, 일반적인 개요·안내. ‘이 화면은 ○○ 신청서이고, 각 항목에 대한 도움말은 옆 아이콘을 누르세요’ 같은 전체 안내죠.

항목별 상태(contextual) — 사용자가 특정 입력 항목의 도움 아이콘(CP-337)을 누르면 — 그 항목에 대한 구체적 도움말로 패널 본문이 바뀝니다(CP-342).

CP-336은 — 패널이 처음 열렸을 때(CP-335) 첫 화면을 기본 상태로 제공하라고 합니다.

첫 화면이 기본 상태여야 하는 이유:

맥락 없는 시작 화면이 막 로딩됐을 때(CP-335) 사용자는 아직 어떤 항목도 선택하지 않았습니다. 이때 패널이 특정 항목의 도움말을 보여주면, 사용자는 ‘왜 이게 보이지?’ 하고 맥락을 잃죠. 아직 아무것도 안 골랐으니, 특정 항목 도움말은 부적절합니다.

전체 개요 제공 — 기본 상태는 — 전체 작업에 대한 개요·일반 안내를 줍니다. 사용자가 작업을 시작하기 전에 ’이 작업이 무엇이고 도움말을 어떻게 쓰는지’를 알게요. 좋은 출발점이죠.

예측 가능성 — 패널이 항상 같은 기본 상태로 열리면 — 사용자가 예측 가능합니다. 매번 다른 항목 도움말이 떠 있으면 혼란스럽죠.

그래서 — 패널 첫 화면은 기본 상태(개요·일반 안내·도움말 사용법)로 시작하고, 사용자가 특정 항목 아이콘을 누르면 그때 항목별 도움말로 전환됩니다(CP-342의 ‘특정 아이콘 실행 시에만 변경’).

기본 상태의 내용. 기본 상태에 무엇을 담느냐는 — 맥락에 따라 다르지만, 보통:

전체 작업/화면에 대한 간단한 소개.

도움 패널 사용법(‘각 항목 옆 ? 아이콘을 누르면 상세 도움말이 여기 표시됩니다’).

자주 필요한 일반 안내나 주요 항목 요약.

CP-335·336·342의 흐름:

CP-335 — 로딩 시 패널 열림.

CP-336 — 열린 첫 화면은 기본 상태.

CP-342 — 특정 아이콘을 누르면 그 항목 도움말로 본문 변경.

이 셋이 — 패널의 초기 상태와 전환 흐름을 정의하죠. 처음엔 개요(기본), 누르면 상세(항목별)로요.

이 규칙은 도움 패널의 ’초기 상태 정의’를 담당합니다 — 첫 화면을 기본 상태로 해(336), 사용자가 맥락 없이 시작할 때 전체 개요·사용법을 주죠. 단계 표시기의 현재 단계 표현처럼, 컴포넌트의 초기 상태를 명확히 하는 정신입니다.

정리하면 — 패널이 처음 열렸을 때 특정 항목 도움말을 보이면 맥락 없이 혼란스러우므로, 첫 화면을 전체 개요·일반 안내의 기본 상태로 제공하고 항목별 도움말은 사용자가 아이콘을 눌렀을 때 전환해야 합니다.

3. 점검 / 개선

무엇을 점검하나

기본 상태 시작 — 패널 첫 화면이 기본 상태(개요·일반 안내)인가.

특정 항목 미표시 — 처음에 특정 항목 도움말이 뜨지 않는가.

사용법 안내 — 기본 상태에 도움말 사용법이 안내되는가.

개선 방향

패널 첫 화면을 개요·일반 안내·사용법의 기본 상태로.

항목별 도움말은 아이콘 클릭 시 전환(CP-342). 항상 같은 기본 상태로 열기.

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

역할	책임
콘텐츠/UX	기본 상태 내용·사용법 작성
퍼블리셔/개발	첫 화면 기본 상태 구현

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

도움 패널을 쓰는 사이트에 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 패널 첫 화면이 기본 상태(개요·일반 안내)인가요?

□ 처음에 특정 항목 도움말이 뜨지 않나요?

□ 기본 상태에 도움말 사용법이 안내되나요?

❓ FAQ

Q1. 기본 상태가 뭔가요? 특정 항목을 선택하기 전의 전체 개요·일반 안내·사용법입니다. 항목별 상세 도움말과 대비되죠. Q2. 왜 처음에 특정 항목 도움말을 보이면 안 되나요? 사용자가 아직 아무것도 안 골랐는데 특정 도움말이 뜨면 ‘왜 이게 보이지?’ 맥락을 잃습니다. Q3. 항목별 도움말은 언제 보이나요? 사용자가 특정 항목 옆 도움 아이콘을 누르면 그때 전환됩니다(CP-342).

6. 마무리

CP-336의 메시지:

처음엔 전체 개요부터 — 도움 패널 첫 화면을 기본 상태로 제공하라.

패널이 처음 열렸을 때 특정 항목 도움말을 보이면 맥락 없이 혼란스럽습니다. 첫 화면을 개요·일반 안내의 기본 상태로 하고, 항목별 도움말은 아이콘 클릭 시 전환하는 게 핵심이죠. 다음 편은 도움 아이콘 버튼 배치입니다.

다음 편 예고 ▶ 「457. (CP-337) 아이콘 버튼은 도움 정보를 제공하고자 하는 요소 주변에 배치하고 있다.」

ViewCheck는 도움 패널 첫 화면이 기본 상태로 제공되는지를 진단합니다.

📚 참고 출처

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

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

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