작업은 그대로 두고

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

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

이번 461편은 패널에서 제공하는 웹 페이지 링크를 새 창으로 실행하라는 규칙입니다.

도움 패널의 링크를 — 현재 창에서 열면, 사용자가 작성 중이던 작업(폼 입력 등)을 떠나게 돼 입력이 유실될 수 있죠. 도움말은 작업을 도우려는 건데 작업을 망치면 본말전도입니다. CP-341은 패널 링크를 새 창으로 열라고 규정합니다. 이번 편을 풀어냅니다.

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

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

도움 패널 안의 외부/다른 페이지 링크를, 현재 창이 아닌 새 창(탭)으로 열리게 하라는 뜻입니다.

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

2. 왜 새 창 실행인가

도움 패널은 사용자가 작업 중(폼 작성, 절차 진행)에 참고하는 것입니다. 패널 안에는 더 자세한 안내 페이지, 관련 규정, 외부 자료 등으로 가는 링크가 있을 수 있죠. 이 링크를 어디서 여느냐가 작업 보존을 좌우합니다.

현재 창에서 열 때의 문제:

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

맥락 단절 — 작업 화면이 — 도움말 페이지로 바뀌면, 사용자는 자기가 무엇을 하던 중이었는지 맥락을 잃습니다. 도움말을 보고 다시 작업으로 돌아오는 흐름이 끊기죠.

도움 패널의 본질은 ‘작업을 도우려는’ 것입니다. 그런데 링크가 작업을 망치면 본말전도죠. 그래서 CP-341은 패널 링크를 새 창(탭) 으로 열라고 합니다:

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

새 창 사용 시 접근성 주의. 일반적으로 ’새 창 열기’는 예상 못한 맥락 변화라 신중히 써야 합니다(과도한 새 창은 혼란). 하지만 도움 패널 링크처럼 작업 보존이 중요한 맥락에선 새 창이 적절하죠. 다만 접근성을 위해:

새 창 안내 — 링크가 새 창으로 열린다는 걸 — 사용자에게 미리 알립니다. 시각적 아이콘(↗)이나, 스크린 리더용 텍스트(‘새 창에서 열림’)로요. 예상 못한 새 창은 혼란스러우니, 미리 알리는 게 접근성 원칙입니다.

rel 속성 — target="_blank"엔 — rel="noopener noreferrer"를 함께 줘 보안(새 창이 원래 창을 조작 못 하게)을 확보합니다.

필수 정보는 본문에(CP-340 연계). 패널 링크로 가는 페이지에 — 작업 필수 정보가 있으면, 그건 본문에도 제공 돼야 하죠(CP-340). 링크는 심화·부가 자료로, 필수는 본문에요. 즉 새 창 링크(341)는 보조 자료 접근이고, 필수 정보는 본문이 책임집니다.

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

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

3. 점검 / 개선

무엇을 점검하나

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

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

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

개선 방향

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

새 창 열림을 아이콘(↗)·스크린 리더 텍스트로 안내. 필수 정보는 본문에도(CP-340).

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

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

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

도움 패널에 외부 링크를 쓰는 사이트에 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

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

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

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

❓ FAQ

Q1. 왜 새 창으로 여나요? 현재 창에서 열면 작성 중이던 작업(폼)을 떠나 입력이 유실됩니다. 새 창으로 열어 작업을 보존하죠. Q2. 새 창은 접근성에 안 좋다던데요? 일반적으론 신중해야 하지만, 작업 보존이 중요한 패널 링크엔 적절합니다. 단, 새 창 열림을 미리 안내해야 하죠. Q3. 링크 페이지에 필수 정보가 있으면요? 필수 정보는 본문에도 제공해야 합니다(CP-340). 링크는 심화·부가 자료 이고, 필수는 본문이 책임지죠.

6. 마무리

CP-341의 메시지:

작업은 그대로 두고 — 패널의 웹 페이지 링크는 새 창으로 실행하라.

패널 링크를 현재 창에서 열면 작업 중인 내용이 유실됩니다. 새 창으로 열어 작업을 보존하되, 새 창 열림을 안내하고 보안 속성을 더하는 게 핵심이죠. 다음 편은 본문 변경 시점입니다.

다음 편 예고 ▶ 「462. (CP-342) 본문은 사용자가 특정 아이콘 버튼을 실행하는 경우에만 변경되도록 하고 있다.」

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

📚 참고 출처

KRDS 컴포넌트 — 도움 패널(Help panel) 가이드 — https://www.krds.go.kr/html/site/component/component_33.html

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

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