화면 안에, 중요한 건 안 가리게

KRDS CP-357 — 팝오버 영역이 화면을 벗어나지 않도록 표현하고 있으며, 본문의 중요 콘텐츠를 가리지 않고 표현하고 있다.

0. 들어가며 — 도움말 말풍선이 화면 밖으로 나가면

이번 477편은 팝오버 영역이 화면을 벗어나지 않고, 본문의 중요 콘텐츠를 가리지 않게 표현하라는 규칙입니다.

맥락적 도움말은 — 아이콘을 누르면 그 근처에 팝오버(말풍선)로 뜹니다. 이 팝오버가 — 화면 가장자리에서 밖으로 잘리거나, 사용자가 봐야 할 중요한 내용을 가리면 안 되죠. CP-357은 팝오버의 위치를 규정합니다. 이번 편을 풀어 냅니다.

1. 원문 — 화면 안 + 중요 콘텐츠 미가림

CP-357 (컴포넌트 > 맥락적 도움말) “팝오버 영역이 화면을 벗어나지 않도록 표현하고 있으며, 본문의 중요 콘텐츠를 가리지 않고 표현하고 있다.”

팝오버(말풍선) 영역이 화면 밖으로 잘리지 않고, 본문의 중요한 콘텐츠를 가리지 않게 위치를 조정해 표현하라는 뜻입니다.

정리: 팝오버를 화면 안에, 중요 콘텐츠를 안 가리게 띄워라. 이게 CP-357입니다.

2. 왜 화면 안·중요 콘텐츠 미가림인가

맥락적 도움말은 — 아이콘을 누르면 그 근처에 팝오버(작은 말풍선)로 도움말이 뜹니다(CP-356). 이 팝오버가 — 어디에 어떻게 뜨느냐가 사용성을 좌우하죠. CP-357은 두 가지를 요구합니다: ①화면을 안 벗어남, ②중요 콘텐츠를 안 가림.

① 화면을 벗어나지 않음. 팝오버가 — 화면(뷰포트) 밖으로 잘리면 안 됩니다.

잘림의 문제 아이콘이 화면 가장자리(오른쪽 끝, 아래 끝)에 있으면 팝오버가 그 방향으로 뜨다가 화면 밖으로 잘릴 수 있죠. 잘린 팝오버는 내용 일부가 안 보여 도움말을 못 읽습니다.

위치 자동 조정 — 그래서 — 팝오버가 화면을 벗어날 것 같으면, 방향을 자동으로 바꿔 화면 안에 들어오게 합니다. 오른쪽이 부족하면 왼쪽으로, 아래가 부족하면 위로 뜨게요(collision detection/flipping). 항상 팝오버 전체가 화면 안에 보이게 합니다.

② 본문의 중요 콘텐츠를 가리지 않음. 팝오버가 — 사용자가 봐야 할 중요한 내용을 덮으면 안 됩니다.

가림의 문제 — 팝오버가 — 그 도움말이 설명하는 입력 필드 자체나, 작업에 필요한 다른 중요 요소(레이블, 버튼, 관련 정보)를 가리면, 사용자는 도움말을 보면서 정작 작업할 대상을 못 보죠. 도움말 보랴 가려진 것 확인하랴 번거롭습니다.

위치 배려 팝오버를 중요 콘텐츠를 피한 위치(예: 필드 위/아래 중 빈 쪽, 옆 여백)에 띄웁니다. 특히 그 도움말이 설명하는 대상(입력 필드)은 가리지 않게요. 도움말을 보며 동시에 대상을 볼 수 있어야 하죠.

두 요구의 조화. ①화면 안 + ②중요 콘텐츠 미가림을 동시에 만족하는 위치를 동적으로 계산합니다. 보통 팝오버 라이브러리(Popper.js 등)가 아이콘 위치, 화면 경계, 가용 공간을 보고 최적 위치(상/하/좌/우)를 자동으로 정하죠. 화살표로 팝오버가 어느 아이콘에서 나왔는지 연결도 표시합니다.

모바일 고려. 좁은 모바일 화면에선 팝오버가 화면을 벗어나거나 콘텐츠를 가리기 쉽죠. 모바일에선 팝오버를 화면 폭에 맞추거나, 하단 시트 형태로 띄우는 등 좁은 화면에 맞는 표현을 고려합니다.

팝오버 vs 모달(CP-358 연계). 맥락적 도움말은 — 가벼운 팝오버라, 본문을 막는 모달을 띄우지 않습니다(CP-358). 화면을 덮지 않고 그 자리에 작게 떠, 본문과 공존하죠. 그래서 — 중요 콘텐츠 미가림이 더욱 중요합니다(본문이 계속 보여야 하니).

이 규칙은 맥락적 도움말의 ’팝오버 위치 적정성’을 담당합니다 — 팝오버를 화면 안에, 중요 콘텐츠를 안 가리게 띄워 (357), 사용자가 도움말과 작업 대상을 함께 보게 하죠. 그 자리 인라인 도움의 핵심 배치 규칙입니다.

정리하면 — 팝오버가 화면을 벗어나면 도움말을 못 읽고 중요 콘텐츠를 가리면 작업 대상을 못 보므로, 위치를 동적으로 조정해 항상 화면 안에 들어오고 중요 콘텐츠(특히 설명 대상)를 가리지 않게 해야 합니다.

3. 점검 / 개선

무엇을 점검하나

화면 안 — 팝오버가 화면 가장자리에서 잘리지 않고 전체가 보이는가(방향 자동 조정).

중요 콘텐츠 미가림 — 팝오버가 설명 대상 필드·중요 요소를 가리지 않는가.

모바일 — 좁은 화면에서도 팝오버가 적절히 표현되는가.

개선 방향

팝오버 위치 자동 조정(화면 경계 감지·방향 전환)으로 항상 화면 안에.

중요 콘텐츠(특히 설명 대상)를 피한 위치. 모바일은 화면 폭 맞춤/하단 시트.

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

역할	책임
디자이너	팝오버 위치·방향 규칙 정의
퍼블리셔/개발	위치 자동 조정 구현

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

맥락적 도움말 팝오버를 쓰는 사이트에 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 팝오버가 화면 가장자리에서 잘리지 않고 전체가 보이나요(방향 자동 조정)?

□ 팝오버가 설명 대상 필드·중요 요소를 가리지 않나요?

□ 좁은 화면에서도 팝오버가 적절히 표현되나요?

❓ FAQ

Q1. 팝오버가 화면 밖으로 잘리면요? 방향을 자동으로 바꿔(오른쪽 부족→왼쪽, 아래 부족→위) 화면 안에 들어오게 합니다. Q2. 무엇을 가리면 안 되나요? 특히 그 도움말이 설명하는 입력 필드 자체와 작업에 필요한 중요 요소를 가리면 안 됩니다. 도움말과 대상을 함께 봐야 하죠. Q3. 모달로 띄우면 안 되나요? 맥락적 도움말은 가벼운 팝오버라 본문을 막는 모달을 띄우지 않습니다(CP-358). 본문과 공존하죠.

6. 마무리

CP-357의 메시지:

화면 안에, 중요한 건 안 가리게 — 팝오버를 화면 안에 띄우고 중요 콘텐츠를 피하라.

팝오버가 화면을 벗어나면 도움말을 못 읽고, 중요 콘텐츠를 가리면 작업 대상을 못 봅니다. 위치를 동적으로 조정해 화면 안에 두고 설명 대상을 안 가리는 게 핵심이죠. 다음 편은 도움말 중첩·모달 금지입니다.

다음 편 예고 ▶ 「478. (CP-358) 맥락적 도움말에서 또 다른 맥락적 도움말을 실행하거나 모달을 실행하지 않고 있다.」

ViewCheck는 팝오버가 화면 안에·중요 콘텐츠를 안 가리게 표현되는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 맥락적 도움말(Contextual help) 가이드 — https://www.krds.go.kr/html/site/component/component_35.html

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

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