학습 목표
- 도움말은 실수를 줄이고 오류 안내는 회복을 돕습니다.
- 실패 후에도 입력과 진행 상태를 예측할 수 있어야 합니다.
- 실습의 완료 조건과 실패 시 회복 방법을 직접 확인합니다.
사전 지식
누르기 쉬운 버튼과 명확한 행동 설계에서 기본 용어를 먼저 확인하세요. 예시는 기존 운영 서비스를 자동으로 바꾸는 설정이 아니라 별도 연습 화면·프로젝트에 적용하는 출발점입니다.
개념 이해
가입과 등록 화면에서 중요한 것은 입력칸 수보다 실수했을 때 회복하는 방법입니다. 입력 기준을 미리 알리고 실패해도 작성한 내용을 잃지 않게 만드세요.
라벨과 설명을 항상 보이게
placeholder는 입력하면 사라집니다. 이메일·이름 같은 라벨은 입력 밖에 유지하고 필수 여부와 글자 수 기준을 미리 표시합니다. 비밀번호 관리자와 자동 완성을 방해하지 말고 input의 type·autocomplete를 목적에 맞게 지정합니다.
검증 시점과 오류 문구
첫 글자부터 오류를 몰아붙이지 않습니다. 입력 후 초점 이동이나 제출 시 검증하고 이미 보인 오류는 수정과 함께 해소합니다. 오류는 잘못된 값과 고치는 방법을 설명합니다. 클라이언트 검사는 편의 기능이고 서버에서도 반드시 검증합니다.
입력과 오류의 연결
오류가 난 입력에 aria-invalid를 지정하고 aria-describedby로 설명을 연결합니다. 제출 실패 시 첫 오류로 초점을 옮기거나 오류 요약을 제공합니다. 이메일 중복 여부 같은 메시지가 계정 존재를 과하게 노출하지 않는지도 서비스 위협 모델에 맞춰 검토합니다.
로딩·빈 상태·실패를 구별하기
아직 결과가 없는 상태와 서버 장애는 다릅니다. 첫 등록을 안내하는 문구, 조건에 맞는 결과가 없다는 문구, 불러오지 못했다는 문구를 나눕니다. 필터가 원인이면 초기화 버튼을, 네트워크 실패면 재시도를 제공합니다. 제출 중 화면을 닫았을 때 상태도 정리합니다.
실제 사용 사례
회원가입 실패 후 이메일은 남겨 사용자가 고치게 하고 비밀번호는 장기 저장하지 않습니다. 오류 안내를 본 다음 키보드만으로 해당 입력을 수정하고 다시 제출할 수 있어야 합니다.
단계별 실습
- 필드별 라벨·필수 여부·형식·서버 제약을 표로 적으세요.
- 도움말과 오류에 고유 ID를 주고 입력에 연결하세요.
- 잘못된 값·서버 거절·타임아웃·중복 클릭을 구분하세요.
- 실패 시 보존할 값과 지워야 할 비밀 값을 정하세요.
- 키보드와 스크린리더로 오류 위치와 재시도를 확인하세요.
코드와 프롬프트
아래 예시는 브라우저의 HTML/CSS 연습 화면에 적용하는 예시입니다. 이벤트·서버 검증·운영 설정 전체를 대신하지 않습니다. 기존 코드와 설치 버전을 먼저 확인하세요.
<label for="email">이메일 (필수)</label>
<input id="email" name="email" type="email" autocomplete="email"
required aria-describedby="email-help">
<p id="email-help">인증 메일을 받을 주소를 입력해 주세요.</p>
<!-- 오류 시 aria-invalid="true"와 오류 설명을 함께 적용합니다. -->대괄호를 실제 상황으로 바꿔 요청하세요. 비밀 값과 개인정보 원문은 넣지 마세요.
[폼]에 영구 라벨·도움말·필수 표시·필드 오류·제출 상태를 추가해줘. 입력 값은 적절히 유지하고 비밀 값은 장기 저장하지 말아줘. 빈 결과와 서버 장애를 구별하고 서버 검증과 접근성을 함께 확인해줘.자주 발생하는 문제와 해결
| 문제 | 해결과 확인 |
|---|---|
| 빨간 테두리만 있어 이유를 모른다 | 필드 옆에 해결 방법을 문장으로 표시하고 보조 기술에도 연결합니다. |
| 서버 실패가 결과 없음으로 나온다 | 조회 실패 상태를 별도로 두고 재시도를 제공합니다. |
핵심 요약
- 도움말은 실수를 줄이고 오류 안내는 회복을 돕습니다.
- 실패 후에도 입력과 진행 상태를 예측할 수 있어야 합니다.
완료 확인
참고자료
확인 기준일: 2026-10-20. 기능·제품 요금·법령은 변경될 수 있으므로 적용 시 공식 문서와 현재 시행일·설치 버전을 다시 확인하세요.