작업은 그대로 두고 참고 자료는 새 탭에

KRDS BP-022 — [공통] 관련 화면/리소스 링크는 새 탭에서 화면이 연결되도록 제공하고 있다.

0. 들어가며 — 참고 자료를 보다 작업이 사라지면

이번 588편은 관련 화면/리소스 링크를 새 탭에서 연결되도록 제공하라는 규칙입니다.

도움말·작업 중 — 참고 자료(관련 안내, 양식, 규정)로 가는 링크를 현재 탭에서 열면, 진행하던 작업을 떠나게 되죠. BP-022는 이런 링크를 새 탭으로 열라고 규정합니다. 도움 패널·맥락적 도움말의 새 창 규칙(CP-341·359)의 도움 패턴 일반화이죠. 이번 편을 풀어냅니다.

1. 원문 — 관련 링크 새 탭 연결

BP-022 (기본 패턴 > 도움 [공통]) “[공통] 관련 화면/리소스 링크는 새 탭에서 화면이 연결되도록 제공하고 있다.”

도움말·작업과 관련된 다른 화면·리소스로 가는 링크를, 새 탭에서 열리게 제공하라는 뜻입니다.

정리: 관련 화면/리소스 링크는 새 탭으로 열어라. 이게 BP-022입니다.

2. 왜 관련 링크를 새 탭으로 여나

사용자가 작업(폼 작성, 신청) 중에, 도움말이나 화면에서 관련 자료로 가는 링크를 만날 수 있습니다: 관련 안내 페이지, 신청 양식, 규정·법령, 참고 자료 등. 이 링크를 어디서 여느냐가 작업 보존을 좌우하죠. BP-022는 새 탭으로 열라고 합니다.

현재 탭에서 열 때의 문제:

작업 이탈 사용자가 신청서를 작성하던 중, 도움말의 ‘관련 규정 보기’ 링크를 눌렀는데 그게 현재 탭에서 열리면, 작성하던 페이지를 떠나게 됩니다. 입력하던 내용이 사라지거나(저장 안 됐으면), 돌아오려면 뒤로가기를 해야 하죠. 참고하려다 작업을 잃습니다.

맥락 단절 — 작업 화면이 — 참고 자료로 바뀌면, 무엇을 하던 중이었는지 맥락을 잃죠. 자료를 보고 다시 작업으로 돌아오는 흐름이 끊깁니다.

참고 어려움 — 작업과 참고 자료를 — 번갈아 보기 어렵습니다(현재 탭이면 한 번에 하나만).

그래서 BP-022는 — 관련 화면/리소스 링크를 새 탭으로 열라고 합니다:

새 탭 연결 관련 링크를 target="_blank"로 새 탭에서 엽니다. 작업하던 원래 탭은 그대로 유지되고, 참고 자료는 새 탭에 뜨죠. 사용자가 자료를 보고 원래 작업 탭으로 돌아와 이어가거나, 두 탭을 번갈아 봅니다. 작업이 보존되죠.

새 탭 안내 — 새 탭 열기는 — 예상 못한 맥락 변화라, 미리 알립니다. ‘새 탭에서 열림’ 아이콘(↗)이나 스크린 리더 텍스트로요(도움 패널 CP-341, 맥락적 도움말 CP-359 정신). rel="noopener noreferrer"로 보안도요.

모든 링크가 새 탭은 아님. 주의 모든 링크를 새 탭으로 여는 게 아닙니다. 일반적으로 같은 사이트 내 일반 탐색(메뉴 이동 등)은 같은 탭이 자연스럽죠(과도한 새 탭은 혼란). BP-022가 새 탭을 권하는 건 작업 중 참고하는 관련 자료 링크입니다. 작업을 보존하며 참고해야 하는 맥락이죠. 작업 흐름과 무관한 일반 탐색은 같은 탭이고요.

왜 작업 중 참고에 새 탭인가. 핵심은 ’사용자가 진행 중인 작업을 잃지 않게’입니다. 폼 작성·신청 같은 작업 중에 참고 자료를 보려고 그 작업을 떠나면 손실이 크죠. 새 탭으로 작업을 보존하며 참고하게 합니다. 도움 패널·맥락적 도움말·코치마크의 링크 새 창 규칙(CP-341·359·371)을 도움 전반의 관련 링크로 일반화한 게 BP-022입니다.

이 규칙은 도움 패턴의 ’작업 보존 링크’를 담당합니다 — 관련 자료 링크를 새 탭으로 열어(022), 사용자가 작업을 잃지 않고 자료를 참고하게 하죠. 새 탭 안내로 예상 가능성도 지킵니다.

정리하면 — 작업 중 관련 자료 링크를 현재 탭에서 열면 진행하던 작업이 유실되므로, 관련 화면/리소스 링크를 새 탭으로 열어 작업을 보존하되 새 탭 열림을 안내해야 합니다.

3. 점검 / 개선

무엇을 점검하나

새 탭 연결 — 작업 중 참고하는 관련 링크가 새 탭으로 열리는가.

새 탭 안내 — 새 탭 열림이 아이콘·텍스트로 안내되는가.

과도한 새 탭 배제 — 일반 탐색까지 새 탭으로 열지는 않는가.

개선 방향

작업 중 참고 관련 링크에 target="_blank" + rel="noopener noreferrer".

새 탭 열림 안내(↗·SR 텍스트). 일반 탐색은 같은 탭 유지.

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

역할	책임
퍼블리셔/개발	새 탭 링크·안내 구현
기획/UX	새 탭/같은 탭 구분 정책

기관 유형	BP-022 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 조건부 (작업 중 관련 링크 있는 경우)

작업 중 참고 자료 링크를 제공하는 사이트에 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 작업 중 참고하는 관련 링크가 새 탭으로 열리나요?

□ 새 탭 열림이 아이콘·텍스트로 안내되나요?

□ 일반 탐색까지 새 탭으로 열지는 않나요?

❓ FAQ

Q1. 왜 새 탭으로 여나요? 작업(신청·폼) 중 참고 자료 링크를 현재 탭에서 열면 작업을 떠나 입력이 유실됩니다. 새 탭으로 작업을 보존하죠. Q2. 모든 링크를 새 탭으로 여나요? 아닙니다. 작업 중 참고하는 관련 자료 링크만요. 일반 탐색(메뉴 이동)은 같은 탭이 자연스럽습니다. Q3. 도움 패널 CP-341과 같나요? 같은 새 창/탭 정신입니다. 도움 패널·맥락적 도움말의 링크 규칙을 도움 전반의 관련 링크로 일반화한 거죠.

6. 마무리

BP-022의 메시지:

작업은 그대로 두고 참고 자료는 새 탭에 — 관련 화면/리소스 링크는 새 탭으로 연결하라.

작업 중 관련 자료 링크를 현재 탭에서 열면 진행하던 작업이 유실됩니다. 새 탭으로 열어 작업을 보존하되 새 탭 열림을 안내하는 게 핵심이죠. 다음 편은 안내 영역입니다.

다음 편 예고 ▶ 「589. (BP-023) [안내 영역] 본문을 이해하고 이용하는 데 포괄적으로 이해가 필요한 정보를 전달하는 데 사용하고, 본문 상단에 배치하고 있다.」

ViewCheck는 관련 링크가 새 탭으로 연결되는지를 진단합니다.

📚 참고 출처

KRDS 기본 패턴 — 도움 가이드 — https://www.krds.go.kr/html/site/pattern/pattern_02.html

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

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