다른 시스템으로 가요

KRDS SP-109 — 외부 서비스로 이동하거나 새 창을 실행하는 액션 버튼에 명확한 시각적 단서를 제공하고 있다.

0. 들어가며 — 신청을 눌렀는데 다른 시스템으로 가버리면

이번 783편은 외부 서비스로 이동하거나 새 창을 실행하는 액션 버튼에 명확한 시각적 단서를 제공하라는 규칙입니다.

신청 버튼을 눌렀는데 — 예고 없이 다른 신청 시스템(정부24 등)이나 새 창으로 가버리면 사용자는 당황하죠. SP-109는 외부· 새 창 단서를 규정합니다. BP-055의 신청 적용이죠. 이번 편을 풀어냅니다.

1. 원문 — 외부·새 창 시각 단서

SP-109 (서비스 패턴 > 신청 > 신청 대상 탐색) “외부 서비스로 이동하거나 새 창을 실행하는 액션 버튼에 명확한 시각적 단서를 제공하고 있다.”

외부 이동·새 창 액션 버튼에 명확한 시각 단서를 제공하라는 뜻입니다.

정리: 외부 이동·새 창 신청 버튼에 시각 단서를 제공하라. 이게 SP-109입니다.

2. 왜 외부·새 창 단서인가

신청 서비스는, 때로 외부 시스템으로 연결됩니다. 공공 신청은 여러 시스템이 얽혀 있어(정부24, 복지로, 개별 기관 시스템 등), 신청 버튼이 다른 시스템·새 창으로 가는 경우가 많죠. 이게 예고 없이 일어나면 당황 스럽습니다. SP-109는 시각 단서를 요구합니다.

BP-055의 신청 적용. SP-109는 BP-055(외부 이동·새 창 버튼 시각 단서)를, 신청 맥락에 적용한 거죠. 신청에서 특히 외부 시스템 연결이 많아, 별도로 명시한 규칙입니다.

단서가 없을 때의 문제:

예상치 못한 이동 신청 버튼을 눌렀더니, 갑자기 다른 시스템(정부24 등)이나 새 창이 뜨면, 사용자는 ‘내가 어디로 온 거지?’ 당황합니다. 디자인·맥락이 달라 혼란스럽죠.

신뢰 우려 예고 없는 외부 이동은, 피싱처럼 느껴져 의심을 줍니다.

새 창 혼란 새 창이 예고 없이 뜨면, ’뒤로 가기’가 안 돼 길을 잃죠(BP-055).

그래서 SP-109는 — 시각 단서를 요구합니다:

외부 이동 아이콘 외부 시스템으로 가는 버튼에, 외부 링크 아이콘(↗)을요. ’외부로 가는구나’를 알게요.

새 창 단서 새 창을 여는 버튼에, 새 창 아이콘·‘(새 창)’ 텍스트를요.

텍스트 안내 ‘○○ 시스템에서 신청’, ‘새 창에서 열림’ 같은 텍스트(sr-only 포함)를요. 시각·스크린 리더 양쪽으로요.

연결 시스템 안내 어느 시스템으로 가는지 알리면 좋죠(‘정부24에서 신청합니다’). 사용자가 예상하게요.

공공 신청의 시스템 연결 복잡성. 공공 신청은, 여러 시스템이 연결돼 복잡합니다. 한 사이트에서 시작해 다른 시스템에서 완료하는 경우가 많죠. 이 이동을 미리 알려야, 사용자가 혼란 없이 신청을 이어갑니다.

사용자 통제권·예측 가능성. 외부·새 창 단서는, 사용자에게 통제권과 예측 가능성을 줍니다(WCAG 3.2). ’이 버튼을 누르면 외부로 간다’를 알고 누르게요. 예고 없는 이동은 통제권을 빼앗죠.

이 규칙은 신청(SP)의 ’외부 연결 예측 가능성’을 담당합니다 — 외부 이동·새 창 신청 버튼에 시각 단서를 줘(109), 사용자가 무슨 일이 일어날지 알고 신청을 이어가게 하죠. SP-108(바로 신청)·BP-055와 함께 갑니다.

정리하면 — 신청 버튼이 예고 없이 외부 시스템·새 창으로 가면 사용자가 당황하고 통제권을 잃으므로, 외부 링크·새 창 아이콘 과 텍스트 단서(연결 시스템 안내 포함)를 명확히 제공해야 합니다.

3. 점검 / 개선

무엇을 점검하나

외부 단서 — 외부 시스템 이동 버튼에 외부 링크 아이콘·텍스트가 있는가.

새 창 단서 — 새 창 버튼에 새 창 아이콘·‘(새 창)’ 표시가 있는가.

시스템 안내 — 어느 시스템으로 가는지 안내되는가(‘정부24에서 신청’).

개선 방향

외부 이동(↗)·새 창 아이콘 + 텍스트 단서(sr-only 포함, BP-055).

연결 시스템 안내. 스크린 리더 전달. WCAG 3.2(예측 가능성).

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

역할	책임
디자이너	외부·새 창 단서 디자인
퍼블리셔/개발	단서·sr-only 구현

기관 유형	SP-109 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (외부 신청 시스템 연결 시)

외부 신청 시스템·새 창을 쓰는 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 외부 시스템 이동 버튼에 외부 링크 아이콘·텍스트가 있나요?

□ 새 창 버튼에 새 창 아이콘·‘(새 창)’ 표시가 있나요?

□ 어느 시스템으로 가는지 안내되나요(‘정부24에서 신청’)?

❓ FAQ

Q1. 신청에서 외부 이동이 왜 많나요? 공공 신청은 여러 시스템이 얽혀 있습니다(정부24·복지로·개별 기관 시스템). 한 사이트에서 시작해 다른 시스템에서 완료하는 경우가 많죠. 그 이동을 미리 알려야 합니다. Q2. BP-055와 같나요? BP-055(외부 이동·새 창 버튼 시각 단서)를 신청 맥락에 적용한 것입니다. 신청은 외부 시스템 연결이 특히 많아 별도로 명시했죠. Q3. 어떻게 단서를 주나요? 외부 링크 아이콘(↗)·새 창 아이콘 + 텍스트(‘정부24에서 신청’, ‘새 창에서 열림’)로요. 시각·스크린 리더 양쪽으로, 어느 시스템으로 가는지도 안내합니다.

6. 마무리

SP-109의 메시지:

다른 시스템으로 가요 — 외부 이동·새 창 신청 버튼에 명확한 시각적 단서를 제공하라.

신청 버튼이 예고 없이 외부 시스템·새 창으로 가면 당황하고 통제권을 잃습니다. 외부·새 창 아이콘과 텍스트 단서로 미리 알리는 게 핵심이죠. 다음 편은 신청 목록 컨트롤 접근가능한 이름입니다.

다음 편 예고 ▶ 「784. (SP-110) 신청 목록의 각 컨트롤 요소에 title 속성 또는 aria-describedby 속성을 활용하여 접근 가능한 이름이 변별될 수 있도록 하고 있다.」

ViewCheck는 외부 이동·새 창 신청 버튼에 시각적 단서가 제공되는지를 진단합니다.

📚 참고 출처

KRDS 서비스 패턴 — 신청 가이드 — https://www.krds.go.kr/html/site/service/service_04.html

WCAG 2.1 SC 3.2.5 Change on Request — https://www.w3.org/WAI/WCAG21/Understanding/change-on-request.html

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

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