온보딩을 끊지 않게

KRDS CP-371 — 지시 사항 내부 링크는 새 창으로 실행하고 있다.

0. 들어가며 — 링크를 눌렀더니 온보딩이 사라지면

이번 491편은 코치마크 지시 사항 내부 링크를 새 창으로 실행하라는 규칙입니다.

코치마크 안내(지시 사항)에 링크가 있을 때 — 현재 창에서 열면, 진행 중이던 온보딩 흐름이 끊기죠. CP-371은 지시 링크를 새 창으로 열라고 규정합니다. 도움 패널 CP-341·맥락적 도움말 CP-359와 평행한 규칙이죠. 이번 편을 풀어 냅니다.

1. 원문 — 지시 내부 링크 새 창 실행

CP-371 (컴포넌트 > 코치마크) “지시 사항 내부 링크는 새 창으로 실행하고 있다.”

코치마크 지시 사항(안내) 안의 링크를, 현재 창이 아닌 새 창(탭)으로 열리게 하라는 뜻입니다.

정리: 코치마크 지시 사항의 링크는 새 창으로 열어라. 이게 CP-371입니다.

2. 왜 새 창 실행인가

코치마크는 새 기능을 단계별로 안내하는 온보딩 흐름입니다. 지시 사항(안내 본문)에는 더 자세한 안내 페이지나 관련 자료로 가는 링크가 있을 수 있죠(CP-368에서 본 ‘3줄 넘는 내용은 링크로’). 이 링크를 어디서 여느냐가 온보딩 흐름 보존을 좌우합니다.

현재 창에서 열 때의 문제:

온보딩 흐름 단절 — 사용자가 코치마크 온보딩(단계 진행)을 보던 중 — 지시 사항 링크를 눌렀는데 현재 창 에서 열리면, 진행하던 페이지(온보딩이 떠 있는)를 떠나게 됩니다. 코치마크 흐름이 끊기고, 어디까지 봤는지 잃죠. 돌아오려면 뒤로가기를 해야 하고, 온보딩이 처음부터 다시 시작될 수도 있습니다.

맥락 단절 — 온보딩 화면이 — 링크 페이지로 바뀌면, 사용자가 무엇을 안내받던 중이었는지 맥락을 잃습니다.

코치마크의 본질은 ’현재 화면의 기능을 단계별로 안내’하는 것입니다. 그런데 링크가 현재 화면을 떠나게 하면 온보딩이 무너지죠. 그래서 CP-371은 지시 사항 링크를 새 창(탭) 으로 열라고 합니다:

새 창 실행 — 지시 사항 안의 링크를 — target="_blank"로 새 탭/창에서 엽니다. 온보딩이 진행되던 원래 창은 그대로 유지되고, 자료는 새 창에 뜨죠. 사용자는 자료를 보고 원래 온보딩 창으로 돌아와 이어서 진행합니다. 흐름이 보존되죠.

새 창 안내(접근성). 도움 패널 CP-341·맥락적 도움말 CP-359처럼 — 새 창 열기는 예상 못한 맥락 변화라, 미리 알립니다:

새 창 안내 — 새 창으로 열린다는 걸 — 시각적 아이콘(↗)이나 스크린 리더용 텍스트(‘새 창에서 열림’)로 알리죠.

rel 속성 — target="_blank"엔 — rel="noopener noreferrer"를 함께 줘 보안을 확보합니다.

간결성과의 관계(CP-368). 코치마크 지시는 3줄 이내로 간결해야 하죠(CP-368). 그래서 자세한 내용은 지시 사항에 다 담지 말고, 새 창 링크로 별도 페이지에 보냅니다. 즉 간결한 지시(368) + 심화는 새 창 링크(371)로, 온보딩을 가볍게 유지하면서 자료 접근을 보장하죠.

이 규칙은 코치마크의 ’온보딩 흐름 보존’을 담당합니다 — 지시 링크를 새 창으로 열어(371), 온보딩이 링크로 끊기지 않게 하죠. 도움 패널·맥락적 도움말의 새 창 규칙과 일관된, 패널/온보딩류 공통 원칙입니다.

정리하면 — 코치마크 지시 사항 링크를 현재 창에서 열면 진행 중이던 온보딩 흐름이 끊기므로, 새 창으로 실행해 흐름을 보존하되 새 창 열림을 안내해야 합니다.

3. 점검 / 개선

무엇을 점검하나

새 창 실행 — 지시 사항 링크가 새 창(target=“_blank”)으로 열리는가.

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

보안 속성 — rel="noopener noreferrer"가 적용됐는가.

개선 방향

지시 사항 링크에 target="_blank" + rel="noopener noreferrer".

새 창 열림 안내(↗·SR 텍스트). 자세한 내용은 간결 지시(CP-368) + 새 창 링크로.

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

역할	책임
퍼블리셔/개발	새 창 링크·rel·안내 구현
콘텐츠/UX	새 창 안내 문구

기관 유형	CP-371 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 조건부 (지시 사항에 링크가 있는 경우)

코치마크 지시에 링크를 쓰는 사이트에 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 지시 사항 링크가 새 창으로 열리나요?

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

□ rel="noopener noreferrer"가 적용됐나요?

❓ FAQ

Q1. 왜 새 창으로 여나요? 현재 창에서 열면 진행 중이던 온보딩 흐름이 끊깁니다. 새 창으로 열어 흐름을 보존하죠. Q2. 도움 패널·맥락적 도움말과 같나요? 같은 새 창 정신입니다(CP-341·359). 패널/온보딩류 공통 원칙이죠. Q3. CP-368(간결)과 어떻게 연계되나요? 자세한 내용은 지시 사항(3줄 이내)에 다 담지 말고 새 창 링크로 보냅니다. 간결한 온보딩 + 심화 자료 접근을 함께요.

6. 마무리

CP-371의 메시지:

온보딩을 끊지 않게 — 지시 사항 내부 링크는 새 창으로 실행하라.

지시 링크를 현재 창에서 열면 진행 중이던 온보딩 흐름이 끊깁니다. 새 창으로 열어 흐름을 보존하되 새 창 열림을 안내하는 게 핵심이죠. 다음 편은 코치마크 액션 버튼 일관성입니다.

다음 편 예고 ▶ 「492. (CP-372) 모든 단계에서 액션 버튼을 일관성 있는 순서로 배치하고, 적절한 강조 수준과 동일한 레이블을 사용하고 있다.」

ViewCheck는 코치마크 지시 링크가 새 창으로 실행되는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 코치마크(Coach mark) 가이드 — https://www.krds.go.kr/html/site/component/component_36.html

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

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