피드백 원칙

사용자의 모든 행동에는 반응이 따라야 합니다.
반응이 없으면 사용자는 자신의 행동이 전달되었는지 확신하지 못합니다.
피드백 원칙은 어떤 반응을, 언제, 어떤 방식으로 전달할지 정의하는 기준입니다.

피드백 원칙의 개념

피드백은
사용자의 행동과 시스템의 상태를 연결하는 응답입니다.

모든 행동은 결과를 눈에 보이게 만들어야 합니다.
반응은 행동 직후 즉시 전달되어야 합니다.
반응의 무게는 상황의 중요도에 맞춰야 합니다.

피드백은 선택 사항이 아니라 행동의 완결 요소입니다.

피드백 방식의 선택

피드백은 상황에 따라 전달 방식을 구분합니다.
같은 반응이라도 방식이 어긋나면 방해가 됩니다.

인라인(Inline) — 특정 요소에 대한 반응. 해당 위치에서 표현합니다. (입력 오류, 유효성 결과)
토스트(Toast) — 흐름을 끊지 않는 짧은 알림. 잠시 뒤 사라집니다. (저장 완료, 복사됨)
모달(Modal) — 사용자의 확인이나 결정이 필요한 반응. 흐름을 멈춥니다. (삭제 확인, 중요한 경고)

기준은 단순합니다.
흐름을 멈춰야 하는가에 따라 방식을 고릅니다.

토스트는 toast_message 컴포넌트로 만들고, 노출 여부는 data-state로 제어합니다. 닫기 버튼은 대부분 모달 닫기와 스타일이 달라 내부 요소 i_close로 둡니다.

<div class="toast_message" data-state="show" role="status">
  <p class="i_text">저장되었습니다.</p>
  <button class="i_close" type="button" aria-label="닫기"></button>
</div>

인라인 오류는 입력 요소 옆 i_error로 표현하고, 오류 상태는 클래스가 아니라 data-state="error"로 나타냅니다.

<div class="form_group" data-state="error">
  <label for="user_email">이메일</label>
  <input type="email" id="user_email" class="input_text" aria-describedby="user_email_error">
  <p class="i_error" id="user_email_error">올바른 이메일 형식이 아닙니다.</p>
</div>

모달은 흐름을 멈추는 반응이며, 구조는 팝업/모달 패턴을 따릅니다.

파괴적 행동의 확인

되돌릴 수 없는 행동은 즉시 실행하지 않습니다.

삭제, 초기화, 전송처럼 복구가 어려운 행동은 확인을 요구합니다.
확인 문구는 행동의 결과를 분명히 밝힙니다.
실행 버튼과 취소 버튼의 역할을 명확히 구분합니다.

확인 단계는 사용자를 번거롭게 하는 절차가 아니라
실수를 되돌릴 수 있게 하는 안전장치입니다.
확인창 자체의 구조는 팝업/모달 패턴을 따릅니다.

즉각성과 상태 연결

피드백은 행동과 같은 순간에 일어나야 합니다.

처리에 시간이 걸리면 로딩 상태로 진행 중임을 알립니다.
결과가 나오면 성공 또는 실패를 분명히 표현합니다.
상태 변화는 상태 기반 UI의 data-state로 표현합니다.

반응이 지연되면
사용자는 같은 행동을 반복하거나 실패로 오해합니다.

피드백 원칙의 목적

피드백 원칙은
사용자가 자신의 행동이 어떻게 처리되었는지
항상 확인할 수 있도록 만들기 위한 기준입니다.

반응이 분명할수록
사용자는 다음 행동을 확신을 가지고 이어갑니다.