저장됐다는 알림을 놓쳤을 때: 상태 문장과 결과 위치 남기기

알림이 사라지면 무엇을 적용했는지 다시 알 수 없습니다

설정을 바꾸자 “완료”라는 알림이 잠깐 나타났습니다. 알림을 놓친 뒤에는 무엇이 적용됐는지 다시 찾기 어렵습니다. 상태를 알려주는 짧은 문장과 현재 결과를 지속해서 확인하는 위치는 역할이 다릅니다. 한 토스트에 둘을 모두 맡기지 않는 편이 좋습니다.

예제는 가로형·세로형 선택을 이 화면에 적용합니다. 서버 저장 기능이 없으며, “적용했다”는 것은 현재 예제의 선택 표시가 바뀌었다는 뜻입니다. 상태 알림을 지운 뒤에도 적용된 값은 결과 구간에 남습니다.

실행·알림·현재 값을 나누어 둡니다

버튼 색이 바뀌었다고 결과가 충분히 전달되는 것은 아닙니다. 현재 값을 텍스트로 제공하고, 실패한 경우에는 이전 값이 유지되는지 알려야 합니다. 실제 저장 화면이라면 서버가 확인한 결과와 연결하고 장식 효과가 끝났다는 이유만으로 성공을 표시하지 않습니다.

상태 영역을 먼저 두고 문장을 갱신합니다

<p id="apply-status" role="status"></p>
<section aria-labelledby="current-title">
  <h2 id="current-title">현재 적용된 값</h2>
  <p id="current-value">아직 적용하지 않음</p>
</section>

W3C의 role=status 기법은 변경된 상태 정보를 보조기술에 알리는 방식을 설명합니다. status 역할에는 polite 라이브 영역의 의미가 있습니다. 예제는 빈 상태 영역을 미리 두고 실행 뒤 문장을 바꿉니다. 실제 알림 출력은 사용하는 브라우저와 보조기술에서 확인해야 합니다.

같은 결과 문장에 status와 alert, 별도의 토스트 라이브 영역을 겹쳐 놓으면 여러 번 알릴 수 있습니다. 현재 값이 있는 구간까지 전부 라이브 영역으로 만들기보다 어떤 짧은 변화를 전달할지 정합니다. 긴 본문 전체를 다시 읽게 하는 것이 목적은 아닙니다.

완료를 알리려고 매번 초점을 빼앗지 않습니다

가벼운 선택 변경 뒤마다 초점을 성공 제목으로 옮기면 다음 옵션을 고르던 흐름이 끊길 수 있습니다. 이 예제는 실행 버튼에 초점을 남기고 상태 문장과 현재 값을 갱신합니다. 반대로 새 페이지로 넘어가는 완료나 오류 수정처럼 문맥이 바뀌는 경우는 따로 설계해야 합니다.

currentValue.textContent = selectedLabel;
status.textContent = `${selectedLabel}을 적용했습니다`;
// 초점은 사용자가 실행한 컨트롤에 남깁니다.

동작 줄이기 환경에서도 결과를 알아야 하므로 알림을 애니메이션 종료에만 묶지 않습니다. 장식 움직임과 상태 분리가 관련됩니다. 입력 오류가 있다면 오류 요약과 입력란처럼 고칠 위치를 알려주는 다른 경로가 필요합니다.

알림을 지운 상태에서 결과를 다시 읽습니다

예제에서 가로형을 적용하고 “알림 문장만 지우기”를 실행해 보세요. 상태 문장은 없어져도 현재 적용된 값은 남아야 합니다. 이어서 세로형으로 바꾸면 이전 값과 새 알림이 함께 맞아야 합니다. 잠깐 보인 문장 한 개만 검사하면 지속 결과의 불일치를 놓칠 수 있습니다.

실제 저장이라면 새로고침 뒤의 값과 재진입도 확인해야 합니다. 이 DOM 예제의 동작을 서버 저장이나 사용자 수신 확인으로 확대하지 않습니다. 독자가 다시 찾아볼 결과 위치와 변경을 알리는 짧은 메시지를 함께 설계하는 것이 이 글의 핵심입니다.

예제를 직접 열어 보기

이 글의 화면 예제와 소스 받기 ZIP. 압축을 푼 뒤 index.html을 브라우저에서 열 수 있습니다. 예제의 입력과 표시 범위는 각 화면의 안내를 기준으로 확인하세요.

참고한 원문

• W3C: Status Messages
• W3C: role=status