단계마다 들쭉날쭉하지 않게

KRDS CP-367 — 하나의 과업에 대한 모든 코치마크 팝오버는 동일한 너비로 표현하고 있다.

0. 들어가며 — 단계마다 크기가 바뀌면

이번 487편은 하나의 과업에 대한 모든 코치마크 팝오버를 동일한 너비로 표현하라는 규칙입니다.

코치마크는 — 여러 단계로 이어집니다(1단계 → 2단계 → …). 각 단계 팝오버의 너비가 — 제각각이면, 단계가 넘어갈 때마다 크기가 들쭉날쭉해 산만하고 불안정해 보이죠. CP-367은 한 과업의 코치마크 너비를 통일하라고 규정합니다. 이번 편을 풀어냅니다.

1. 원문 — 동일한 너비

CP-367 (컴포넌트 > 코치마크) “하나의 과업에 대한 모든 코치마크 팝오버는 동일한 너비로 표현하고 있다.”

한 과업(온보딩 흐름)에 속한 여러 단계의 코치마크 팝오버를, 모두 같은 너비로 통일해 표현하라는 뜻입니다.

정리: 한 과업의 코치마크 팝오버 너비를 동일하게 하라. 이게 CP-367입니다.

2. 왜 동일한 너비인가

코치마크는 — 하나의 과업(온보딩 흐름)을 여러 단계로 안내합니다(CP-369). 단계 1에서 ‘검색 버튼’을 안내하고, 단계 2에서 ’메뉴’를, 단계 3에서 ’설정’을 안내하는 식으로요. 사용자는 — ’다음’ 버튼으로 단계를 넘기며 팝오버를 연달아 봅니다. 이 팝오버들의 너비가 일관돼야 하죠.

너비가 제각각일 때의 문제:

시각적 불안정 — 단계가 넘어갈 때마다 — 팝오버 너비가 확 바뀌면(좁았다 넓었다), 화면이 들쭉날쭉 흔들리는 느낌을 줍니다. 산만하고 불안정하죠. 사용자의 시선이 매번 새 크기에 적응해야 합니다.

내용 길이에 휘둘림 — 너비를 — 각 단계 내용 길이에 맞추면(짧은 안내는 좁게, 긴 안내는 넓게), 단계마다 크기가 변합니다. 내용이 너비를 좌우하면 일관성이 깨지죠.

위치 예측 불가 — 너비가 바뀌면 — 팝오버의 위치·범위도 매번 달라져, 사용자가 ‘다음 안내가 어디 나올지’ 예측하기 어렵습니다.

그래서 CP-367은 — 한 과업의 모든 코치마크 팝오버를 동일한 너비로 통일하라고 합니다:

고정 너비 — 한 온보딩 흐름의 코치마크 팝오버를 — 모두 같은 너비로 정합니다. 단계가 넘어가도 너비가 일정해, 시각적으로 안정적이죠.

내용은 너비에 맞춤 각 단계 내용을 고정 너비 안에 들어가게 작성합니다. 너비를 내용에 맞추는 게 아니라, 내용을 너비에 맞추죠. 그래서 제목 1줄·지시 3줄 이내(CP-368) 같은 글자 수 제한이 함께 갑니다. 간결한 내용 이라 고정 너비에 잘 맞죠.

일관성의 효과. 팝오버 너비가 일정하면 — 사용자는 단계를 넘기며 안정감을 느끼고, ‘안내가 이 정도 크기로 나온다’ 를 예측합니다. 매번 크기가 바뀌는 산만함 없이, 내용에 집중하죠. 토글 레이아웃 일관(CP-315), 캐러셀 일관 위치 (CP-215)와 같은 일관성 정신입니다.

‘하나의 과업’. 원문이 ’하나의 과업에 대한’이라 한정한 것은 — 같은 온보딩 흐름(한 과업) 안의 코치마크들만 동일 너비면 된다는 뜻이죠. 다른 과업(다른 화면의 다른 온보딩)은 — 그 과업 안에서 일관되면 됩니다. 한 흐름 안에서 통일이 핵심입니다.

이 규칙은 코치마크의 ’시각적 일관성’을 담당합니다 — 한 과업의 팝오버 너비를 통일해(367), 단계 전환 시 안정감을 주고 사용자가 내용에 집중하게 하죠. 글자 수 제한(CP-368)과 함께 코치마크를 일관·간결하게 유지합니다.

정리하면 — 코치마크 팝오버 너비가 단계마다 바뀌면 시각적으로 불안정하고 산만하므로, 한 과업의 모든 코치마크 팝오버를 동일한 너비로 통일하고 내용을 그 너비에 맞춰야 합니다.

3. 점검 / 개선

무엇을 점검하나

동일 너비 — 한 과업의 모든 코치마크 팝오버가 같은 너비인가.

내용 맞춤 — 각 단계 내용이 고정 너비에 맞게 작성됐는가(너비가 내용에 휘둘리지 않음).

단계 전환 안정 — 단계를 넘겨도 너비가 일정해 안정적인가.

개선 방향

한 온보딩 흐름의 코치마크 팝오버를 고정 너비로 통일.

내용을 그 너비에 맞춰 간결하게(CP-368). 단계 간 너비 변동 제거.

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

역할	책임
디자이너	코치마크 고정 너비 정의
퍼블리셔/개발	동일 너비 구현

기관 유형	CP-367 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 조건부 (코치마크 사용 시)

코치마크를 쓰는 사이트에 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 한 과업의 모든 코치마크 팝오버가 같은 너비인가요?

□ 각 단계 내용이 고정 너비에 맞게 작성됐나요?

□ 단계를 넘겨도 너비가 일정해 안정적인가요?

❓ FAQ

Q1. 내용 길이에 맞춰 너비를 바꾸면 안 되나요? 단계마다 크기가 바뀌어 산만하고 불안정합니다. 너비를 고정하고 내용을 거기 맞추죠. Q2. 내용이 너비보다 길면요? 제목 1줄·지시 3줄 이내(CP-368)로 간결하게 작성해 고정 너비에 맞춥니다. 너무 길면 단계를 나누고요. Q3. 사이트 전체 코치마크가 같은 너비여야 하나요? 한 과업(온보딩 흐름) 안에서 동일하면 됩니다. 다른 과업은 그 안에서 일관되면 되죠.

6. 마무리

CP-367의 메시지:

단계마다 들쭉날쭉하지 않게 — 한 과업의 코치마크 팝오버를 동일한 너비로.

팝오버 너비가 단계마다 바뀌면 시각적으로 불안정하고 산만합니다. 한 과업의 코치마크를 고정 너비로 통일하고 내용을 거기 맞추는 게 핵심이죠. 다음 편은 코치마크 글자 수 제한입니다.

다음 편 예고 ▶ 「488. (CP-368) 코치마크의 제목은 1줄, 지시 사항은 3줄 이내로 제공하고 있다.」

ViewCheck는 한 과업의 코치마크 팝오버 너비가 동일한지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 코치마크(Coach mark) 가이드 — https://www.krds.go.kr/html/site/component/component_36.html

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

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