작업은 그대로 두고

KRDS CP-359 — 도움말 내부 링크는 새 창으로 실행하고 있다.

0. 들어가며 — 도움말 링크를 눌렀더니 작업이 사라지면

이번 479편은 도움말 내부 링크를 새 창으로 실행하라는 규칙입니다.

맥락적 도움말 팝오버 안의 링크를 — 현재 창에서 열면, 작성 중이던 작업을 떠나 입력이 유실될 수 있죠. CP-359는 도움말 링크를 새 창으로 열라고 규정합니다. 도움 패널 CP-341·따라하기 CP-351과 평행한 규칙이죠. 이번 편을 풀어 냅니다.

1. 원문 — 도움말 내부 링크 새 창 실행

CP-359 (컴포넌트 > 맥락적 도움말) “도움말 내부 링크는 새 창으로 실행하고 있다.”

맥락적 도움말 안의 링크를, 현재 창이 아닌 새 창(탭)으로 열리게 하라는 뜻입니다.

정리: 도움말 내부 링크는 새 창으로 열어라. 이게 CP-359입니다.

2. 왜 새 창 실행인가

맥락적 도움말은 사용자가 작업 중(폼 작성 등)에 그 자리에서 참고하는 가벼운 도움입니다. 도움말 팝오버 안에는 더 자세한 안내 페이지, 관련 규정으로 가는 링크가 있을 수 있죠(단, 또 다른 도움말·모달은 아님, CP-358). 이 링크를 어디서 여느냐가 작업 보존을 좌우합니다.

현재 창에서 열 때의 문제:

작업 유실 — 사용자가 폼을 작성하던 중 — 도움말 링크를 눌렀는데 현재 창에서 열리면, 작성하던 페이지를 떠나게 됩니다. 입력하던 내용이 사라지거나(저장 안 됐으면), 돌아오려면 뒤로가기를 해야 하죠. 도움을 얻으려다 작업을 잃습니다.

맥락 단절 — 작업 화면이 — 도움말 페이지로 바뀌면, 사용자가 무엇을 하던 중이었는지 맥락을 잃죠. 맥락적 도움말의 ’맥락’이 끊깁니다.

맥락적 도움말의 본질은 ‘그 자리에서 가볍게 돕는’ 것입니다. 그런데 링크가 작업을 떠나게 하면 그 자리도, 작업도 잃죠. 그래서 CP-359는 도움말 링크를 새 창(탭) 으로 열라고 합니다:

새 창 실행 — 도움말 안의 링크를 — target="_blank"로 새 탭/창에서 엽니다. 작업하던 원래 창은 그대로 유지되고, 자료는 새 창에 뜨죠. 사용자는 자료를 보고 원래 작업 창으로 돌아와 이어서 작업합니다. 작업이 보존 되죠.

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

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

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

중첩 금지와의 관계(CP-358). 도움말 링크는 새 창의 별도 페이지로 가는 것이지, 또 다른 맥락적 도움말이나 모달을 띄우는 게 아닙니다(CP-358). 즉 많은 정보가 필요하면, 도움말 안에 중첩하지 말고(358) 새 창 링크로 별도 페이지에 보내죠(359). 둘이 함께 맥락적 도움말을 가볍게 유지하면서 심화 정보는 새 창으로 제공합니다.

가벼운 도움말 유지. 맥락적 도움말 자체는 — 간결하게(가벼운 팝오버) 두고, 더 깊은 내용은 새 창 링크로요. 도움말 안에 모든 걸 욱여넣지 않습니다.

이 규칙은 맥락적 도움말의 ’작업 보존’을 담당합니다 — 도움말 링크를 새 창으로 열어(359), 사용자가 작업을 잃지 않고 심화 자료를 참고하게 하죠. 도움 패널·따라하기 패널의 새 창 규칙과 일관된, 패널류 공통 원칙입니다.

정리하면 — 도움말 링크를 현재 창에서 열면 작업 중인 내용이 유실되므로, 새 창으로 실행해 작업을 보존하되 새 창 열림을 안내해야 합니다.

3. 점검 / 개선

무엇을 점검하나

새 창 실행 — 도움말 내부 링크가 새 창(target=“_blank”)으로 열리는가.

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

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

개선 방향

도움말 링크에 target="_blank" + rel="noopener noreferrer".

새 창 열림 안내(↗·SR 텍스트). 심화 정보는 중첩(CP-358) 대신 새 창 링크로.

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

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

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

맥락적 도움말에 링크를 쓰는 사이트에 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 도움말 내부 링크가 새 창으로 열리나요?

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

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

❓ FAQ

Q1. 왜 새 창으로 여나요? 현재 창에서 열면 작성 중이던 작업을 떠나 입력이 유실됩니다. 새 창으로 열어 작업을 보존하죠. Q2. 도움 패널·따라하기 패널과 같나요? 같은 새 창 정신입니다(CP-341·351). 패널류 공통 원칙이죠. Q3. CP-358(중첩 금지)과 어떻게 연계되나요? 많은 정보는 도움말 안에 중첩하지 말고(358) 새 창 링크로 별도 페이지에 보냅니다(359). 함께 가벼움을 유지하죠.

6. 마무리

CP-359의 메시지:

작업은 그대로 두고 — 도움말 내부 링크는 새 창으로 실행하라.

도움말 링크를 현재 창에서 열면 작업 중인 내용이 유실됩니다. 새 창으로 열어 작업을 보존하되 새 창 열림을 안내하는 게 핵심이죠. 다음 편은 맥락적 도움말과 도움 패널 병용 금지입니다.

다음 편 예고 ▶ 「480. (CP-360) 맥락적 도움말과 도움 패널을 함께 사용하지 않고 있다.」

ViewCheck는 도움말 내부 링크가 새 창으로 실행되는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 맥락적 도움말(Contextual help) 가이드 — https://www.krds.go.kr/html/site/component/component_35.html

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

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