한 단계는 한눈에

KRDS CP-350 — 가능한 한 사용자가 패널 영역을 스크롤 하지 않고 정보를 훑어볼 수 있도록 필요한 내용을 간결한 문장으로 제공하고 있다.

0. 들어가며 — 따라할 단계가 너무 길면

이번 470편은 사용자가 패널 영역을 스크롤하지 않고 정보를 훑어볼 수 있도록 필요한 내용을 간결한 문장으로 제공 하라는 규칙입니다.

따라하기는 — 사용자가 안내를 읽고 바로 따라 하는 것입니다. 한 단계 설명이 길어 스크롤해야 하면, 읽다가 흐름이 끊기고 따라 하기 어렵죠. CP-350은 따라하기 내용을 스크롤 없이 훑을 간결한 문장으로 제공하라고 규정합니다. 도움 패널 CP-339와 평행하되, ‘따라 하는’ 맥락이 더해진 규칙이죠. 이번 편을 풀어냅니다.

1. 원문 — 스크롤 없이 훑는 간결한 문장

CP-350 (컴포넌트 > 따라하기 패널) “가능한 한 사용자가 패널 영역을 스크롤 하지 않고 정보를 훑어볼 수 있도록 필요한 내용을 간결한 문장으로 제공하고 있다.”

따라하기 패널의 내용을, 가능하면 스크롤 없이 한눈에 훑어볼 수 있는 간결한 문장으로 제공하라는 뜻입니다.

정리: 따라하기 내용을 스크롤 없이 훑을 간결한 문장으로 제공하라. 이게 CP-350입니다.

2. 왜 간결한 문장인가

따라하기 패널은 — 사용자가 각 단계 안내를 읽고 그대로 따라 하는 가이드입니다. 그래서 — 한 단계의 안내가 간결해, 스크롤 없이 한눈에 보고 바로 실행할 수 있어야 하죠. CP-350은 도움 패널 CP-339(간결한 문장)와 같은 정신을 따라하기에 적용합니다.

안내가 길 때의 문제:

읽기-실행 흐름 단절 — 따라하기는 — ’읽고 → 따라 하고 → 다음’의 반복입니다. 한 단계 설명이 길어 스크롤해야 하면, 사용자가 읽다가 흐름이 끊기고, 무엇을 따라 해야 할지 핵심을 못 잡죠. 따라 하기 어려워집니다.

핵심 매몰 — 긴 설명 속에 — 정작 ’지금 무엇을 하라’는 핵심 행동이 묻혀, 사용자가 못 찾습니다.

부담·이탈 — 각 단계가 길면 — 사용자가 따라하기 자체를 부담스러워하고 중단하죠(CP-349의 중단 버튼).

그래서 CP-350은 — 따라하기 내용을 스크롤 없이 훑을 간결한 문장으로 제공하라고 합니다:

간결한 문장 — 각 단계 안내를 핵심만 짧은 문장으로. ‘지금 ○○ 버튼을 누르세요’ 같은 — 명확한 행동 지시를 간결하게요. 불필요한 수식·배경 설명을 줄입니다.

필요한 내용만 — 원문이 ’필요한 내용을 간결한 문장으로’라 한 것처럼 — 그 단계에 꼭 필요한 정보만 담습 니다. 부가 설명은 덜어내고요.

훑어보기 구조 — 짧은 문장·핵심 강조로 — 사용자가 훑으며 바로 행동을 파악하게요. 스크롤을 최소화합니다.

’가능한 한’의 의미. 도움 패널 CP-339처럼 — ’가능한 한’은 불가피한 경우(복잡한 단계)는 스크롤이 있을 수 있되, 가능하면 한 단계가 한 화면에 들어오게 하라는 뜻이죠. 한 단계 안내가 패널 한 화면에 보이면 — 읽고 바로 따라 하기 좋습니다.

단계 분할. 한 단계 내용이 본질적으로 많으면 — 여러 작은 단계로 나누는 것도 방법입니다. 한 단계에 많은 걸 욱여넣어 길어지느니, 짧은 단계 여럿으로 나눠 각각 간결하게요. 따라하기는 단계 진행(CP-349)이라 단계 분할이 자연스럽죠.

이 규칙은 따라하기 패널의 ‘단계 가독성’을 담당합니다 — 각 단계를 간결하게 해(350), 사용자가 스크롤 없이 읽고 바로 따라 하게 하죠. 도움 패널 간결성(CP-339)을 따라하기의 ’읽고 실행’ 흐름에 맞춘 것입니다.

정리하면 — 따라하기 한 단계 안내가 길면 읽기-실행 흐름이 끊기고 핵심을 놓치므로, 필요한 내용만 간결한 문장으로 담아 가능한 한 스크롤 없이 훑고 바로 따라 하게 해야 합니다.

3. 점검 / 개선

무엇을 점검하나

간결성 — 각 단계 안내가 핵심 행동만 담은 간결한 문장인가.

필요한 내용만 — 그 단계에 꼭 필요한 정보만 있는가(부가 설명 절제).

스크롤 최소 — 가능하면 한 단계가 스크롤 없이 보이는가(길면 단계 분할).

개선 방향

각 단계를 핵심 행동 지시 위주 간결한 문장으로. 불필요한 수식 제거.

내용 많은 단계는 작은 단계로 분할. 훑어보기 구조.

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

역할	책임
콘텐츠/UX	간결한 단계 안내 작성·단계 분할
퍼블리셔/개발	훑어보기 구조 구현

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

따라하기 가이드를 쓰는 사이트에 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 각 단계 안내가 핵심 행동만 담은 간결한 문장인가요?

□ 그 단계에 꼭 필요한 정보만 있나요(부가 설명 절제)?

□ 가능하면 한 단계가 스크롤 없이 보이나요(길면 단계 분할)?

❓ FAQ

Q1. 자세히 설명하는 게 친절하지 않나요? 따라 하는 중엔 긴 글이 흐름을 끊습니다. 핵심 행동을 간결히 주는 게 더 따라 하기 좋죠. Q2. 한 단계 내용이 많으면요? 여러 작은 단계로 나눕니다. 한 단계에 욱여넣어 길어지느니 짧은 단계 여럿이 낫죠. Q3. 도움 패널 CP-339와 같나요? 정신은 같습니다(간결·스크롤 최소). 따라하기는 ’읽고 바로 실행’이라 더 중요 하죠.

6. 마무리

CP-350의 메시지:

한 단계는 한눈에 — 따라하기 내용을 간결한 문장으로 스크롤 없이 훑게 하라.

따라하기 한 단계가 길면 읽기-실행 흐름이 끊기고 핵심을 놓칩니다. 필요한 내용만 간결한 문장으로 담아 스크롤을 최소화하고, 많으면 단계를 나누는 게 핵심이죠. 다음 편은 패널 링크의 새 창 실행입니다.

다음 편 예고 ▶ 「471. (CP-351) 패널에서 제공하는 웹페이지 링크는 새 창으로 실행하고 있다.」

ViewCheck는 따라하기 내용이 간결한 문장으로 제공되는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 따라하기 패널(Tutorial panel) 가이드 — https://www.krds.go.kr/html/site/component/component_34.html

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

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