따라하기를 끊지 않게

KRDS CP-351 — 패널에서 제공하는 웹페이지 링크는 새 창으로 실행하고 있다.

0. 들어가며 — 링크를 눌렀더니 따라하기가 사라지면

이번 471편은 따라하기 패널의 웹페이지 링크를 새 창으로 실행하라는 규칙입니다.

따라하기 패널의 링크를 — 현재 창에서 열면, 진행 중이던 따라하기 흐름이 끊기죠. CP-349에서 본 ’프로세스 유지’가 링크 하나로 깨질 수 있습니다. CP-351은 패널 링크를 새 창으로 열라고 규정합니다. 도움 패널 CP-341과 평행하되, 따라하기 흐름 보존이 더 중요한 맥락이죠. 이번 편을 풀어냅니다.

1. 원문 — 패널 링크 새 창 실행

CP-351 (컴포넌트 > 따라하기 패널) “패널에서 제공하는 웹페이지 링크는 새 창으로 실행하고 있다.”

따라하기 패널 안의 웹페이지 링크를, 현재 창이 아닌 새 창(탭)으로 열리게 하라는 뜻입니다.

정리: 따라하기 패널의 웹페이지 링크는 새 창으로 열어라. 이게 CP-351입니다.

2. 왜 새 창 실행인가

따라하기 패널은 사용자가 단계별로 작업을 따라 하는 능동적 가이드입니다(CP-349). 진행 중 패널 안에 참고 자료· 관련 페이지로 가는 링크가 있을 수 있죠. 이 링크를 어디서 여느냐가 따라하기 흐름 보존을 좌우합니다.

현재 창에서 열 때의 문제:

따라하기 흐름 단절 — 사용자가 따라하기를 진행하던 중 — 패널 링크를 눌렀는데 그게 현재 창에서 열리면, 진행하던 페이지(따라하기 + 작업 본문)를 떠나게 됩니다. 따라하기 프로세스가 끊기고(CP-349의 유지 정신 위배), 돌아오려면 뒤로가기를 해야 하죠. 어디까지 따라 했는지 흐름을 잃습니다.

작업 유실 — 따라 하며 입력하던 내용이 — 페이지 이탈로 사라질 수 있죠.

맥락 단절 — 따라하기 화면이 — 링크 페이지로 바뀌면, 사용자가 무엇을 따라 하던 중이었는지 맥락을 잃습니다.

따라하기의 본질은 사용자를 단계별로 이끄는 것입니다. 그런데 링크가 그 흐름을 끊으면 따라하기가 무너지죠. 그래서 CP-351은 패널 링크를 새 창(탭) 으로 열라고 합니다:

새 창 실행 패널의 웹페이지 링크를 target="_blank"로 새 탭/창에서 엽니다. 그러면 따라하기를 진행 하던 원래 창은 그대로 유지되고, 참고 자료는 새 창에 뜨죠. 사용자는 자료를 보고 원래 따라하기 창으로 돌아와 이어서 진행합니다. 흐름이 보존되죠.

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

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

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

필수 정보는 패널 본문에. 도움 패널 원칙(CP-340)처럼 — 따라하기에 꼭 필요한 정보는 링크 너머가 아니라 따라하기 안내 자체에 담아야 하죠. 링크는 부가·심화 자료로요. 따라하기 흐름은 링크 없이도 완결돼야 합니다.

이 규칙은 따라하기 패널의 ’흐름 보존’을 담당합니다 — 패널 링크를 새 창으로 열어(351), 따라하기 프로세스(CP-349)가 링크로 끊기지 않게 하죠. 도움 패널 CP-341과 같은 정신이되, 따라하기는 능동적 흐름이라 보존이 더 중요합니다.

정리하면 — 따라하기 패널 링크를 현재 창에서 열면 진행 중이던 따라하기 흐름이 끊기므로, 새 창으로 실행해 흐름을 보존하되 새 창 열림을 안내해야 합니다.

3. 점검 / 개선

무엇을 점검하나

새 창 실행 — 패널의 웹페이지 링크가 새 창(target=“_blank”)으로 열리는가.

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

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

개선 방향

패널 링크에 target="_blank" + rel="noopener noreferrer".

새 창 열림 안내(↗·SR 텍스트). 필수 정보는 따라하기 안내 자체에.

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

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

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

따라하기 패널에 외부 링크를 쓰는 사이트에 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 패널의 웹페이지 링크가 새 창으로 열리나요?

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

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

❓ FAQ

Q1. 왜 새 창으로 여나요? 현재 창에서 열면 진행 중이던 따라하기 흐름이 끊깁니다(CP-349 위배). 새 창으로 열어 흐름을 보존하죠. Q2. 도움 패널 CP-341과 같나요? 같은 정신(새 창으로 작업 보존)입니다. 따라하기는 능동적 흐름이라 보존이 더 중요하죠. Q3. 새 창 열림을 꼭 알려야 하나요? 네. 예상 못한 새 창은 혼란스럽습니다. 아이콘·스크린 리더 텍스트로 미리 안내하죠.

6. 마무리

CP-351의 메시지:

따라하기를 끊지 않게 — 패널의 웹페이지 링크는 새 창으로 실행하라.

패널 링크를 현재 창에서 열면 진행 중이던 따라하기 흐름이 끊깁니다. 새 창으로 열어 흐름을 보존하되 새 창 열림을 안내하는 게 핵심이죠. 다음 편은 모바일 패널 축약입니다.

다음 편 예고 ▶ 「472. (CP-352) [모바일] 화면 너비가 충분하지 않을 때 따라하기 패널은 패널 열기 버튼으로 축약하여 제공하고 있다.」

ViewCheck는 따라하기 패널 링크가 새 창으로 실행되는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 따라하기 패널(Tutorial panel) 가이드 — https://www.krds.go.kr/html/site/component/component_34.html

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

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