고르자마자 넘어가지 않게

KRDS CP-301 — 셀렉트에 값을 변경하였을 때 폼이 제출되지 않게 구현하고 있다.

0. 들어가며 — 고르기만 했는데 화면이 넘어가면

이번 421편은 셀렉트 값을 변경했을 때 폼이 자동 제출되지 않게 구현하라는 규칙입니다.

셀렉트에서 옵션을 고르는 순간(onchange) — 자동으로 폼이 제출되거나 페이지가 이동하면, 사용자는 당황하죠. ‘아직 다른 항목도 입력해야 하는데?’, ‘잘못 골랐는데 되돌릴 새도 없이 넘어갔다.’ 특히 키보드·스크린 리더 사용 자에겐 치명적입니다. CP-301은 값 변경만으로 폼이 제출되지 않게 하라고 규정합니다. WCAG 3.2.2(입력 시) 정신 이죠. 이번 편을 풀어냅니다.

1. 원문 — 값 변경 시 폼 미제출

CP-301 (컴포넌트 > 셀렉트) “셀렉트에 값을 변경하였을 때 폼이 제출되지 않게 구현하고 있다.”

셀렉트의 옵션을 선택(값 변경)하는 것만으로 폼이 자동 제출되거나 페이지가 전환되지 않게, 명시적 제출(버튼 클릭 등)을 거치게 구현하라는 뜻입니다.

정리: 셀렉트 값을 바꾸기만 해도 폼이 제출되게 하지 마라. 이게 CP-301입니다.

2. 왜 자동 제출을 막아야 하나

일부 사이트는 — 셀렉트의 onchange 이벤트에 폼 제출이나 페이지 이동을 걸어, 옵션을 고르는 즉시 동작이 일어나게 만듭니다(예: 정렬 기준 셀렉트를 바꾸면 바로 목록 새로고침, 지역 셀렉트를 고르면 바로 페이지 이동). 편해 보이지만 — 여러 심각한 문제를 낳죠.

자동 제출의 문제:

예상치 못한 맥락 변화 사용자는 옵션을 ‘고르는’ 행동만 했는데 갑자기 폼이 제출되거나 페이지가 바뀌면, 통제권을 잃은 느낌을 받죠. 이는 WCAG 3.2.2 입력 시(On Input) 위반입니다 컨트롤의 설정을 바꾸는 것만으로 예상 못한 맥락 변화(페이지 이동·제출)가 일어나면 안 된다는 기준이죠.

다른 입력 유실 — 폼에 여러 항목이 있는데 — 셀렉트 하나 고르자마자 제출되면, 아직 입력 못 한 다른 항목들이 유실되거나 검증 오류가 나죠.

실수 되돌림 불가 — 사용자가 셀렉트를 잘못 골랐어도 — 고르는 즉시 제출·이동돼, 되돌릴 새가 없습니다.

키보드·스크린 리더 사용자에게 치명적 — 키보드 사용자는 셀렉트를 탐색할 때 방향키로 옵션을 훑습니다. 만약 옵션이 바뀔 때마다(중간 옵션을 지나갈 때마다) 자동 제출되면 — 원하는 옵션에 닿기도 전에 엉뚱한 중간 옵션으로 제출돼 버리죠. 스크린 리더 사용자도 옵션을 듣는 중에 제출돼 혼란스럽습니다. 이건 자동 제출의 가장 심각한 접근성 문제입니다.

그래서 CP-301은 — 값 변경만으로 제출/이동이 일어나지 않게 하라고 합니다:

명시적 제출 — 사용자가 셀렉트로 값을 고른 뒤, 별도의 ‘적용’/‘검색’/‘확인’ 버튼을 눌러야 폼이 제출되게 합니다. 값 선택과 제출을 분리하죠. 사용자가 모든 입력을 마치고 의식적으로 제출합니다.

onchange 자동 제출 제거 — 셀렉트의 onchange에 건 자동 submit/navigation을 제거합니다.

예외 정말 자동 갱신이 필요하면? 정렬·필터처럼 즉시 반영이 UX상 자연스러운 경우도 있습니다. 이때도 ①페이지 이동이 아니라 같은 페이지의 부분 갱신(비동기)이어야 하고, ②키보드 사용자가 방향키로 옵션을 훑는 도중이 아니라 선택을 확정한 뒤(셀렉트를 닫은 뒤)에 동작해야 하며, ③예상 못한 큰 맥락 변화는 피해야 합니다. 그래도 명시적 ‘적용’ 버튼이 가장 안전하고 접근성에 부합하죠. KRDS는 값 변경만으로의 폼 제출을 막으라고 명시합니다.

이 규칙은 셀렉트의 ’예측 가능한 동작’을 담당합니다 — 옵션을 고르는 것과 폼을 제출하는 것을 분리해, 사용자가 통제권을 갖고(특히 키보드·스크린 리더 사용자), 실수를 되돌리며, 다른 입력을 유실하지 않게 하죠.

정리하면 — 셀렉트 값 변경만으로 폼이 자동 제출·이동되면 예상 못한 맥락 변화·입력 유실·키보드 사용자 오작동을 낳으므로, 명시적 제출 버튼을 거치게 하여 값 선택과 제출을 분리해야 합니다.

3. 점검 / 개선

무엇을 점검하나

자동 제출 없음 — 셀렉트 값 변경만으로 폼 제출·페이지 이동이 일어나지 않는가.

명시적 제출 — 별도 ‘적용’/‘검색’ 버튼으로 제출하는가.

키보드 안전 — 방향키로 옵션 훑는 도중 제출되지 않는가.

개선 방향

셀렉트 onchange의 자동 submit/navigation 제거. 명시적 제출 버튼 추가.

부득이 즉시 반영은 페이지 이동 아닌 비동기 부분 갱신 + 선택 확정 후 동작.

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

역할	책임
퍼블리셔/개발	onchange 자동 제출 제거·명시 제출 구현
기획/UX	값 선택·제출 분리 흐름 설계
QA/접근성	키보드 옵션 탐색 중 미제출 검증

기관 유형	CP-301 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (셀렉트 사용 시)

셀렉트를 쓰는 모든 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 셀렉트 값 변경만으로 폼 제출·페이지 이동이 일어나지 않나요?

□ 별도 ‘적용’/‘검색’ 버튼으로 제출하나요?

□ 방향키로 옵션 훑는 도중 제출되지 않나요?

❓ FAQ

Q1. 왜 키보드 사용자에게 치명적인가요? 키보드 사용자는 방향키로 옵션을 훑는데, 옵션 바뀔 때마다 자동 제출되면 원하는 옵션 전에 엉뚱하게 제출돼 버립니다. Q2. 정렬·필터는 즉시 반영이 편하지 않나요? 그 경우도 페이지 이동 아닌 비동기 부분 갱신 + 선택 확정 후 동작 이어야 합니다. 가장 안전한 건 ‘적용’ 버튼이죠. Q3. 어떤 WCAG 기준인가요? 3.2.2 입력 시(On Input)입니다 — 설정 변경만으로 예상 못한 맥락 변화(제출·이동)가 일어나면 안 됩니다.

6. 마무리

CP-301의 메시지:

고르자마자 넘어가지 않게 — 셀렉트 값 변경만으로 폼이 제출되게 하지 마라.

값 변경 즉시 자동 제출·이동되면 예상 못한 맥락 변화, 입력 유실, 특히 키보드 사용자의 오작동을 낳습니다. 명시적 ‘적용’ 버튼으로 값 선택과 제출을 분리하는 게 핵심이죠. 다음 편은 셀렉트 아이콘 명도 대비입니다.

다음 편 예고 ▶ 「422. (CP-302) 셀렉트 아이콘과 인접 배경 간 명도 대비를 3:1 이상으로 표현하고 있다.」

ViewCheck는 셀렉트 값 변경 시 폼이 자동 제출되지 않는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 셀렉트(Select) 가이드 — https://www.krds.go.kr/html/site/component/component_28.html

WCAG 2.1 SC 3.2.2 On Input — https://www.w3.org/WAI/WCAG21/Understanding/on-input.html

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

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