여기서 나간다고 알려라

KRDS CP-259 — 외부 서비스로 이동하는 링크를 분명하게 구분하고 일관된 방식으로 표현하고 있다.

0. 들어가며 — 갑자기 다른 사이트로 가면

이번 379편은 외부 서비스로 이동하는 링크를 분명하게 구분하고 일관된 방식으로 표현하라는 규칙입니다.

사이트 안 링크를 눌렀는데 갑자기 — 다른 기관 사이트, 외부 서비스로 이동하거나 새 창이 뜨면, 사용자는 당황 하죠. ‘여기가 어디지? 사이트를 벗어났나?’ 특히 새 창이 뜨면 뒤로 가기가 안 돼 혼란스럽습니다. CP-259는 외부로 나가는 링크임을 미리 알리라고 규정합니다. 긴급 공지 링크의 새 창 안내(CP-160) 정신이죠. 이번 편을 풀어냅니다.

1. 규칙 원문 — 외부 링크 분명 구분·일관 표현

CP-259 (컴포넌트 > 링크) “외부 서비스로 이동하는 링크를 분명하게 구분하고 일관된 방식으로 표현하고 있다.”

외부 사이트·서비스로 이동하는 링크를, 현재 사이트 내부 링크와 구별되게 표시하고 일관된 방식으로 표현해 사용 자가 미리 인지하게 하라는 뜻입니다.

정리: 외부로 가는 링크를 분명히 구분하고 일관되게 표현하라. 이게 CP-259입니다.

2. 왜 외부 링크를 구분하나

링크는 — 같은 사이트 안의 페이지로 가는 내부 링크와, 다른 사이트·서비스로 가는 외부 링크로 나뉩니다. 이 둘은 사용자 경험이 크게 다르죠. 내부 링크는 익숙한 사이트 안 이동이지만, 외부 링크는 — 다른 디자인·다른 운영 주체의 사이트로 나가는 것이라, 사용자가 미리 알아야 당황하지 않습니다.

외부 링크를 구분 안 할 때:

맥락 상실 — 사용자가 내부 페이지로 가는 줄 알고 눌렀는데, 갑자기 다른 기관 사이트(전혀 다른 디자인)로 이동하면 — ‘여기가 어디지? 잘못 왔나?’ 하고 당황하죠. 사이트를 벗어난 줄 모르기도 합니다.

새 창 혼란 — 외부 링크가 새 창/탭으로 열리는 경우(흔함), 사용자가 ’뒤로 가기’를 눌러도 원래 사이트로 안 돌아가죠(새 창엔 히스토리 없음). 새 창이 뜬 줄 모르면 혼란스럽습니다.

신뢰·보안 — 공공 사이트에서 외부로 나가는 링크는 — 사용자가 ’이건 외부 사이트로 가는 거구나’를 알아야 신뢰·보안 판단을 하죠. 모르고 외부로 가면 피싱 등에 취약할 수도 있습니다.

그래서 CP-259는 — 외부 링크를 분명하게 구분하고 일관되게 표현하라고 합니다:

외부 링크 아이콘 — 외부로 가는 링크에 아이콘(↗, 외부 링크 표시 등)을 붙여, 시각적으로 ’외부로 나간다’를 알림. 가장 흔합니다.

텍스트 표시 — “(외부 사이트)”, “(새 창)” 같은 표시를 레이블에 추가.

새 창 안내 — 새 창으로 열리면 그 사실을 표시(아이콘·텍스트). 새 창은 사용자에게 미리 알려야 하죠(WCAG SC 3.2.5 관련 — 예측 가능한 변화).

일관성 — 사이트 전체에서 외부 링크를 같은 방식으로 표시. 어떤 외부 링크는 아이콘, 어떤 건 표시 없으면 사용자가 헷갈리죠. 일관된 패턴이면 ’이 아이콘 = 외부’를 학습합니다.

접근성 보조기술 전달. 외부 링크 표시는 시각뿐 아니라 스크린 리더에도 전달돼야 합니다. 외부 링크 아이콘이 장식이면 aria-hidden으로 숨기되, ‘외부 사이트로 이동’·‘새 창 열림’ 정보를 aria-label이나 시각적으로 숨긴 텍스트(sr-only)로 스크린 리더에 전달하죠. 그래야 비시각 사용자도 ’이 링크는 외부로 간다’를 알고 대비합니다. 긴급 공지 링크(CP-160)에서 본 새 창 안내와 같은 정신이죠.

새 창에 대한 절제. 한편 — 외부 링크를 무조건 새 창으로 여는 것이 항상 좋은 건 아닙니다. 새 창은 사용자 통제를 빼앗고 뒤로 가기를 막죠. 그래서 — 새 창은 꼭 필요할 때(현재 작업을 유지하며 참고할 때 등) 쓰고, 쓸 때는 미리 알리는 게 원칙입니다. 새 창 여부와 무관하게, ’외부로 간다’는 구분은 해야 하죠.

이 규칙은 링크의 ’예측 가능성’을 담당합니다 — 링크 레이블이 목적지를 예측하게 하듯(CP-257), 외부 링크는 ’외부로 간다’는 맥락 변화를 미리 알리죠. 사용자가 놀라지 않고 의식적으로 외부로 이동하게 합니다.

정리하면 — 외부 서비스로 가는 링크는 사용자 경험이 크게 다르므로, 아이콘·텍스트로 ’외부로 나간다’를 분명히 구분하고 일관되게 표현하며, 새 창이면 미리 알리고 스크린 리더에도 전달해야 합니다.

3. 점검 / 개선

무엇을 점검하나

외부 구분 — 외부 링크가 아이콘·텍스트로 내부 링크와 구별되는가.

일관성 — 사이트 전체에서 외부 링크 표시 방식이 일관된가.

새 창·접근성 — 새 창이면 미리 알리고, 외부·새 창 정보가 스크린 리더에 전달되는가.

개선 방향

외부 링크에 아이콘(↗)·“(외부 사이트)” 등 일관된 표시.

새 창은 미리 알림. aria-label/sr-only로 외부·새 창 정보 전달.

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

역할	책임
디자이너	외부 링크 표시 방식 정의
퍼블리셔/개발	외부 표시·새 창 안내·접근성 구현

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

외부 사이트로 가는 링크를 쓰는 모든 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 외부 링크가 아이콘·텍스트로 내부 링크와 구별되나요?

□ 사이트 전체에서 외부 링크 표시 방식이 일관된가요?

□ 새 창이면 미리 알리고, 외부·새 창 정보가 스크린 리더에 전달되나요?

❓ FAQ

Q1. 외부 링크를 왜 구분하나요? 외부는 다른 사이트로 나가는 것이라 사용자가 미리 알아야 당황하지 않고 신뢰·보안 판단을 합니다. Q2. 새 창으로 열면 다 되나요? 새 창은 통제를 빼앗고 뒤로 가기를 막습니다. 꼭 필요할 때만 쓰고 미리 알려야 하죠. Q3. 스크린 리더에도 알리나요? aria-label·sr-only로 ‘외부 사이트·새 창’ 정보를 전달합니다.

6. 마무리

CP-259의 메시지:

여기서 나간다고 알려라 — 외부 링크를 분명히 구분하고 일관되게 표현하라.

외부 서비스로 가는 링크는 사용자 경험이 크게 다릅니다. 아이콘·텍스트로 ’외부로 나간다’를 분명히 구분하고 일관되게 표현하며, 새 창이면 미리 알리고 스크린 리더에도 전달해 사용자가 놀라지 않게 하죠. 다음 편은 링크가 관련성 높은 목적지로 바로 이동하는 규칙입니다.

다음 편 예고 ▶ 「380. (CP-260) 링크는 레이블의 설명과 가장 관련성이 높은 목적지로 바로 이동할 수 있도록 구현하고 있다.」

ViewCheck는 외부 링크가 분명히 구분되고 일관되게 표현되는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 링크(Link) 가이드 — https://www.krds.go.kr/html/site/component/component_24.html

WCAG 2.1 SC 3.2.5 Change on Request — https://www.w3.org/WAI/WCAG21/Understanding/change-on-request.html

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

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