별도 외국어 사이트면 새 창으로

KRDS CP-424 — 외국어 서비스로 이동하는 경우 링크를 새 창으로 실행하고, 새 창 열림 아이콘을 제공하고 있다.

0. 들어가며 — 언어를 바꾸면 다른 사이트로

이번 544편은 외국어 서비스로 이동하는 경우 링크를 새 창으로 실행하고, 새 창 열림 아이콘을 제공하라는 규칙입니다.

언어 변경이 — 같은 사이트의 다른 언어 버전이 아니라 별도의 외국어 서비스/사이트로 이동하는 경우, 새 창으로 열어 원래 화면을 보존하고 새 창 열림을 아이콘으로 알려야 하죠. CP-424는 이를 규정합니다. 이번 편을 풀어냅니다.

1. 원문 — 외국어 서비스 새 창 + 새 창 아이콘

CP-424 (컴포넌트 > 언어 변경) “외국어 서비스로 이동하는 경우 링크를 새 창으로 실행하고, 새 창 열림 아이콘을 제공하고 있다.”

언어 변경이 별도의 외국어 서비스로 이동하는 경우, 그 링크를 새 창으로 열고 새 창으로 열린다는 아이콘을 함께 제공 하라는 뜻입니다.

정리: 별도 외국어 서비스로 가는 링크는 새 창 + 새 창 아이콘으로. 이게 CP-424입니다.

2. 왜 외국어 서비스를 새 창으로 여나

언어 변경의 구현에는 — 두 가지가 있습니다:

같은 사이트 언어 전환 같은 사이트가 여러 언어 버전을 갖고, 언어 변경 시 같은 페이지의 다른 언어 버전 으로 바뀌는 경우(예: 같은 URL의 ?lang=en). 이건 같은 사이트 내 이동이라, 보통 같은 창에서 전환됩니다.

별도 외국어 서비스 이동 외국어 서비스가 별도의 사이트/시스템으로 운영되는 경우. 예: 한국어 메인 사이트와 영어 사이트가 다른 도메인·시스템이거나, 외국어는 별도 포털로 연결되는 경우죠. 언어 변경 시 그 별도 외국어 사이트로 이동합니다.

CP-424는 — 후자(별도 외국어 서비스 이동) 의 경우를 다룹니다. 이때는 — 새 창으로 열라고 하죠.

별도 외국어 서비스를 같은 창에서 열 때의 문제:

원래 화면 이탈 사용자가 한국어 사이트에서 작업/탐색하던 중 언어를 바꿨는데, 그게 별도 외국어 사이트 로 같은 창에서 이동하면, 원래 한국어 화면(작업 맥락)을 떠나게 됩니다. 외국어 사이트를 보고 원래 한국어 사이트로 돌아오려면 뒤로가기를 해야 하죠.

별개 서비스 인지 어려움 — 같은 창에서 바뀌면 — 사용자가 ’이게 같은 사이트의 다른 언어’인지 ’완전히 다른 사이트’인지 헷갈립니다.

그래서 CP-424는 — 별도 외국어 서비스로 가는 링크를 새 창으로 열라고 합니다:

새 창 실행 별도 외국어 서비스 링크를 target="_blank"로 새 탭/창에서 엽니다. 원래 한국어 사이트 창은 그대로 유지되고, 외국어 사이트는 새 창에 뜨죠. 사용자가 둘을 오가거나, 외국어 사이트만 쓰다가 원래 창으로 돌아옵니다.

새 창 열림 아이콘 그 링크에 ‘새 창으로 열림’ 아이콘(↗ 같은)을 함께 표시합니다. 사용자가 누르기 전에 ’이건 새 창으로 열린다’를 미리 알게요. 예상 못한 새 창은 혼란스러우니, 미리 알리는 게 접근성 원칙입니다(도움 패널 CP-341, 맥락적 도움말 CP-359 정신).

스크린 리더 안내 — 아이콘에 더해 — 스크린 리더용 텍스트(‘새 창에서 열림’)로도 알립니다. rel="noopener noreferrer"로 보안도요.

같은 사이트 전환은 같은 창. 반대로 — 같은 사이트의 언어 버전 전환은(별도 사이트 아님) 같은 창에서 자연스럽게 합니다. CP-424는 — ’별도 외국어 서비스로 이동하는 경우’에 한정되죠. 같은 사이트 내 언어 전환까지 새 창으로 열면 오히려 불편합니다.

왜 구별하나. 핵심은 — ’같은 사이트인가, 별도 사이트인가’입니다. 같은 사이트면 같은 창(자연스러운 전환), 별도 사이트면 새 창(원래 사이트 보존 + 별개임 표시). 사용자가 — 어디로 가는지 예측하고 원래 작업을 잃지 않게요.

이 규칙은 언어 변경의 ’이동 명확성·보존’을 담당합니다 — 별도 외국어 서비스는 새 창 + 아이콘으로(424), 원래 사이트 를 보존하고 별개 사이트임을 알리죠. 도움 패널·맥락적 도움말의 새 창 규칙과 일관됩니다.

정리하면 — 언어 변경이 별도 외국어 서비스로 이동하면 같은 창에선 원래 사이트를 떠나게 되므로, 새 창으로 열어 원래 사이트를 보존하고 새 창 열림 아이콘으로 미리 알려야 합니다(같은 사이트 전환은 같은 창).

3. 점검 / 개선

무엇을 점검하나

새 창 실행 — 별도 외국어 서비스 링크가 새 창(target=“_blank”)으로 열리는가.

새 창 아이콘 — 새 창 열림 아이콘(↗)이 표시되는가.

같은 사이트 구별 — 같은 사이트 언어 전환은 같은 창인가(별도만 새 창).

개선 방향

별도 외국어 서비스 링크에 target="_blank" + rel="noopener noreferrer".

새 창 열림 아이콘·스크린 리더 텍스트. 같은 사이트 전환은 같은 창 유지.

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

역할	책임
퍼블리셔/개발	새 창 링크·아이콘 구현
기획/UX	같은 사이트/별도 서비스 구분

기관 유형	CP-424 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 조건부 (별도 외국어 서비스 운영 시)

별도 외국어 사이트로 연결하는 다국어 서비스에 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 별도 외국어 서비스 링크가 새 창으로 열리나요?

□ 새 창 열림 아이콘(↗)이 표시되나요?

□ 같은 사이트 언어 전환은 같은 창인가요(별도만 새 창)?

❓ FAQ

Q1. 모든 언어 변경을 새 창으로 여나요? 아닙니다. 별도 외국어 사이트로 이동하는 경우만요. 같은 사이트 언어 전환은 같은 창에서 자연스럽게 합니다. Q2. 왜 새 창인가요? 별도 사이트로 같은 창에서 가면 원래 한국어 사이트(작업 맥락)를 떠납니다. 새 창으로 열어 원래 사이트를 보존하죠. Q3. 새 창 아이콘이 왜 필요한가요? 예상 못한 새 창은 혼란스럽습니다. ↗ 아이콘·스크린 리더 텍스트로 미리 알리죠.

6. 마무리

CP-424의 메시지:

별도 외국어 사이트면 새 창으로 — 외국어 서비스 링크를 새 창 + 새 창 아이콘으로.

별도 외국어 서비스로 같은 창에서 가면 원래 사이트를 떠납니다. 새 창으로 열어 원래 사이트를 보존하고 새 창 아이콘 으로 미리 알리는 게 핵심이죠(같은 사이트 전환은 같은 창). 다음 편은 모바일 언어 변경 배치입니다.

다음 편 예고 ▶ 「545. (CP-425) [모바일] 화면 너비가 충분하지 않은 경우, 언어 변경 컴포넌트를 햄버거 메뉴 내부나 푸터에 배치한다.」

ViewCheck는 외국어 서비스 링크가 새 창·아이콘으로 제공되는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 언어 변경(Language switcher) 가이드 — https://www.krds.go.kr/html/site/component/component_42.html

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

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