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

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

0. 들어가며 — 툴팁이 화면 밖으로 나가면

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

툴팁은 — 요소 근처에 작은 말풍선으로 뜨는데, 화면 가장자리에서 잘리거나 중요한 내용을 가리면 안 되죠. CP-377은 툴팁의 위치를 규정합니다. 맥락적 도움말 CP-357·코치마크 CP-366과 평행한 규칙이죠. 이번 편을 풀어냅니다.

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

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

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

정리: 툴팁을 화면 안에, 중요 콘텐츠를 안 가리게 띄워라. 이게 CP-377입니다.

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

툴팁은 — 요소에 호버/포커스하면 그 근처에 작은 말풍선으로 뜹니다. 이 말풍선이 — 어디에 어떻게 뜨느냐가 사용성을 좌우하죠. CP-377은 두 가지를 요구합니다: ①화면을 안 벗어남, ②중요 콘텐츠를 안 가림. 이는 맥락적 도움말 CP-357, 코치마크 CP-366과 같은 정신입니다.

① 화면을 벗어나지 않음. 툴팁이 — 화면(뷰포트) 밖으로 잘리면 안 됩니다.

잘림의 문제 요소가 화면 가장자리(오른쪽 끝, 위/아래 끝)에 있으면 툴팁이 그 방향으로 뜨다가 화면 밖으로 잘릴 수 있죠. 잘린 툴팁은 내용 일부가 안 보여 무용지물입니다.

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

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

대상 미가림 — 툴팁이 설명하는 그 요소 자체나, 작업에 필요한 중요 요소를 가리면 — 사용자가 정작 봐야 할 걸 못 보죠. 툴팁을 빈 공간이나 덜 중요한 쪽에 띄웁니다.

잠깐 뜨는 특성 툴팁은 호버 중에만 잠깐 뜨고 사라지는 가벼운 요소라, 코치마크 스포트라이트처럼 화면을 덮지는 않죠. 하지만 그 잠깐 동안에도 중요 콘텐츠를 가리면 불편하니, 위치를 배려합니다.

위치 자동 조정. 요소 위치, 화면 경계, 가용 공간을 보고 — 툴팁이 화면 안에 들어오고 중요 콘텐츠를 피하는 최적 위치(상/하/좌/우)를 동적으로 계산합니다. 보통 — 요소 위(top)에 뜨다가, 위가 부족하면 아래로 뒤집는 식이죠. 화살표로 어느 요소의 툴팁인지 연결도 표시합니다.

모바일 고려(CP-381 연계). 툴팁은 — 원래 마우스 호버 기반이라, 터치 화면(모바일)에선 호버가 없어 다르게 다뤄야 하죠(CP-381). 화면 위치 규칙(377)은 — 마우스·키보드 환경의 툴팁 위치를 다루고, 모바일 터치는 CP-381에서요.

이 규칙은 툴팁의 ’위치 적정성’을 담당합니다 — 툴팁을 화면 안에, 중요 콘텐츠를 안 가리게 띄워(377), 사용자가 툴팁 내용과 작업 대상을 함께 보게 하죠. 맥락적 도움말·코치마크와 일관된 팝오버 위치 규칙입니다.

정리하면 — 툴팁이 화면을 벗어나면 내용을 못 읽고 중요 콘텐츠를 가리면 작업 대상을 못 보므로, 위치를 동적으로 조정해 항상 화면 안에 들어오고 중요 콘텐츠를 가리지 않게 해야 합니다.

3. 점검 / 개선

무엇을 점검하나

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

중요 콘텐츠 미가림 — 툴팁이 대상 요소·중요 요소를 가리지 않는가.

위치 연결 — 화살표 등으로 어느 요소의 툴팁인지 분명한가.

개선 방향

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

중요 콘텐츠를 피한 위치. 화살표로 대상 연결.

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

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

기관 유형	CP-377 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 조건부 (툴팁 사용 시)

툴팁을 쓰는 사이트에 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

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

□ 툴팁이 대상 요소·중요 요소를 가리지 않나요?

□ 화살표 등으로 어느 요소의 툴팁인지 분명한가요?

❓ FAQ

Q1. 툴팁이 화면 밖으로 잘리면요? 방향을 자동으로 바꿔(위 부족→아래, 오른쪽 부족→왼쪽) 화면 안에 들어오게 합니다. Q2. 맥락적 도움말 CP-357·코치마크 CP-366과 같나요? 같은 팝오버 위치 정신입니다. 화면 안·중요 콘텐츠 미가림 으로요. Q3. 모바일에서도 같은가요? 툴팁은 마우스 호버 기반이라 모바일 터치는 다르게 다룹니다(CP-381). 위치 규칙은 마우스·키보드 환경이죠.

6. 마무리

CP-377의 메시지:

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

툴팁이 화면을 벗어나면 내용을 못 읽고, 중요 콘텐츠를 가리면 작업 대상을 못 봅니다. 위치를 동적으로 조정해 화면 안에 두고 중요 콘텐츠를 안 가리는 게 핵심이죠. 다음 편은 툴팁의 용도와 글자 수입니다.

다음 편 예고 ▶ 「498. (CP-378) 툴팁은 부가적인 정보를 전달하는 데 사용하며, 150자 이내의 설명을 사용하고 있다.」

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

📚 참고 출처

KRDS 컴포넌트 — 툴팁(Tooltip) 가이드 — https://www.krds.go.kr/html/site/component/component_37.html

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

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