여긴 나가는 문입니다

KRDS BP-055 — 외부 서비스로 이동하거나 새 창을 실행하는 액션 버튼에 명확한 시각적 단서를 제공하고 있다.

0. 들어가며 — 갑자기 새 창이 뜨거나 다른 사이트로 가면

이번 621편은 외부 서비스로 이동하거나 새 창을 실행하는 액션 버튼에 명확한 시각적 단서를 제공하라는 규칙입니다.

링크를 눌렀는데 — 예고 없이 새 창이 뜨거나, 다른 사이트로 가버리면, 사용자는 당황하죠. 특히 — 스크린 리더·고령 사용자는 더요. BP-055는 외부 이동·새 창에 미리 시각적 단서를 주라고 규정합니다. 이번 편을 풀어냅니다.

1. 원문 — 외부·새 창 시각 단서

BP-055 (기본 패턴 > 상세 정보 확인) “외부 서비스로 이동하거나 새 창을 실행하는 액션 버튼에 명확한 시각적 단서를 제공하고 있다.”

외부 이동·새 창을 여는 버튼·링크에 그 사실을 알리는 시각적 단서를 제공하라는 뜻입니다.

정리: 외부 이동·새 창 버튼에 시각적 단서를 제공하라. 이게 BP-055입니다.

2. 왜 외부·새 창 단서인가

사용자는 링크·버튼을 누를 때, 무슨 일이 일어날지 예상하고 누릅니다. 보통은 같은 창에서 다음 페이지로 가죠. 그런데 어떤 버튼은 외부 사이트로 이동하거나 새 창을 엽니다. 이게 예고 없이 일어나면 혼란스럽죠. BP-055는 미리 단서를 주라고 합니다.

단서가 없을 때의 문제:

예상치 못한 이동 클릭했더니 갑자기 다른 기관·외부 사이트로 가버리면, 사용자는 ‘내가 보던 사이트를 떠난 건가?’ 당황합니다. 외부 사이트는 디자인·신뢰성이 다를 수 있어 혼란·불안을 주죠.

새 창 혼란 새 창(탭)이 예고 없이 열리면, 사용자는 이전 페이지로 ’뒤로 가기’가 안 돼 당황합니다(새 창 엔 히스토리가 없으니까요). 특히 고령자·스크린 리더 사용자는 새 창이 열린 줄도 모르고 길을 잃죠.

접근성 문제 스크린 리더 사용자는 시각적 새 창 전환을 못 봅니다. 새 창임을 안내받지 못하면 혼란스럽죠.

그래서 BP-055는 — 명확한 시각적 단서를 주라고 합니다:

외부 이동 아이콘 외부 사이트로 가는 링크·버튼에 외부 링크 아이콘(↗, 화살표가 사각형 밖으로 나가는 모양)을 붙입니다. 사용자가 누르기 전에 ’외부로 가는구나’를 알게요.

새 창 아이콘·표시 — 새 창을 여는 버튼에 — 새 창 아이콘(겹친 사각형)이나 ‘(새 창)’ 텍스트를 붙입니다. ’새 창 으로 열림’을 미리 알리죠.

텍스트 단서 아이콘과 함께 ‘외부 사이트’, ‘새 창에서 열림’ 같은 텍스트(또는 sr-only 텍스트)를 줍니다. 스크린 리더 사용자도 ’○○ 링크, 새 창에서 열림’으로 듣게요. 시각 단서(아이콘) + 의미 단서(텍스트)가 함께죠.

target="_blank" 시 안내 새 창(target="_blank")을 쓸 땐 반드시 이 단서를 함께 줍니다. 새 창은 꼭 필요할 때만 쓰고, 쓸 땐 알리는 게 원칙이죠.

WCAG 연계. 사용자의 ‘예측 가능성’(WCAG 3.2 일관성·예측 가능)과 관련됩니다. 맥락 변화(새 창·외부 이동)는 사용자가 예상할 수 있어야 하죠. 링크 목적(WCAG 2.4.4)도 명확해야 하고요.

왜 새 창을 주의하나. 새 창은 사용자의 통제권을 빼앗습니다(‘뒤로 가기’ 무력화). 그래서 가급적 같은 창을 권장하되, 꼭 새 창이 필요하면(예: 작성 중 폼 유지) 단서를 주죠. 사용자가 통제권을 잃지 않게요.

이 규칙은 상세 정보 확인의 ’이동 예측 가능성’을 담당합니다 — 외부 이동·새 창에 시각 단서를 줘(055), 사용자가 무슨 일이 일어날지 미리 알고 통제권을 유지하게 하죠.

정리하면 — 외부 이동·새 창이 예고 없이 일어나면 사용자가 당황하고 통제권을 잃으므로, 해당 버튼·링크에 외부 링크·새 창 아이콘과 텍스트 단서를 명확히 제공해야 합니다.

3. 점검 / 개선

무엇을 점검하나

외부 단서 — 외부 사이트 이동 링크에 외부 링크 아이콘·텍스트가 있는가.

새 창 단서 — 새 창을 여는 버튼에 새 창 아이콘·‘(새 창)’ 표시가 있는가.

접근성 — 스크린 리더가 ’새 창에서 열림’을 안내받는가(텍스트/sr-only).

개선 방향

외부 이동(↗)·새 창(겹친 사각형) 아이콘 + 텍스트 단서.

새 창은 꼭 필요할 때만. target="_blank" 시 단서 필수(WCAG 3.2).

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

역할	책임
디자이너	외부·새 창 아이콘 디자인
퍼블리셔/개발	단서·sr-only 텍스트 구현

기관 유형	BP-055 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (외부 링크·새 창 사용 시)

외부 링크·새 창을 쓰는 모든 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 외부 사이트 이동 링크에 외부 링크 아이콘·텍스트가 있나요?

□ 새 창을 여는 버튼에 새 창 아이콘·‘(새 창)’ 표시가 있나요?

□ 스크린 리더가 ’새 창에서 열림’을 안내받나요?

❓ FAQ

Q1. 새 창을 쓰면 안 되나요? 가급적 같은 창을 권장합니다. 새 창은 ‘뒤로 가기’를 무력화해 통제권을 빼앗죠. 꼭 필요하면(폼 작성 중 등) 쓰되 단서를 줍니다. Q2. 아이콘만 있으면 되나요? 아이콘(시각) + 텍스트/sr-only(의미)가 함께여야 합니다. 스크린 리더 사용자는 아이콘만 으론 새 창임을 모르니, ’새 창에서 열림’ 텍스트가 필요하죠. Q3. 외부 링크 아이콘은 어떤 모양인가요? 보통 화살표가 사각형 밖으로 나가는 모양(↗)입니다. 새 창은 겹친 사각형 이고요. 일관되게 쓰면 사용자가 학습하죠.

6. 마무리

BP-055의 메시지:

여긴 나가는 문입니다 — 외부 이동·새 창 버튼에 명확한 시각적 단서를 제공하라.

외부 이동·새 창이 예고 없이 일어나면 사용자가 당황하고 통제권을 잃습니다. 외부·새 창 아이콘과 텍스트 단서를 줘 미리 알리는 게 핵심이죠. 다음 편은 콘텐츠 내 탐색 고정입니다.

다음 편 예고 ▶ 「622. (BP-056) 화면 너비가 충분한 경우 콘텐츠 내 탐색을 표시하고 본문 우측의 일관된 위치에 고정하여 제공하고 있다.」

ViewCheck는 외부 이동·새 창 버튼에 시각적 단서가 제공되는지를 진단합니다.

📚 참고 출처

KRDS 기본 패턴 — 상세 정보 확인 가이드 — https://www.krds.go.kr/html/site/pattern/pattern_06.html

WCAG 2.1 SC 3.2.1 On Focus / 3.2.5 Change on Request — https://www.w3.org/WAI/WCAG21/Understanding/

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

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