피드백

피드백 컴포넌트는 시스템이 무엇을 처리하고 있는지, 어떤 결과가 발생했는지, 사용자가 다음에 무엇을 해야 하는지 전달합니다. 중요도와 지속 시간, 사용자의 확인 또는 행동 필요 여부에 따라 유형을 선택합니다.

컴포넌트 목록

컴포넌트	사용 목적	사용 시점과 주의사항
Alert	현재 문맥 안에서 유지되어야 하는 중요 메시지 전달	오류 원인, 주의사항처럼 사용자가 읽거나 해결해야 하는 내용을 표시합니다. 제목과 해결 방법을 구체적으로 작성합니다.
Snackbar	작업 결과를 짧게 알리는 일시적 메시지	저장 완료처럼 별도 확인이 필요 없는 결과에 사용합니다. 중요한 오류나 필수 동작을 자동으로 사라지게 하지 않습니다.
Modal	현재 흐름을 중단하고 집중해야 하는 작업 제공	삭제 확인이나 필수 입력처럼 먼저 처리해야 하는 내용에 사용합니다. 남용하지 않고 열기 전후의 포커스를 관리합니다.
Drawer	현재 화면을 참고하는 보조 작업 영역 제공	상세 정보나 편집처럼 배경 맥락을 유지해야 할 때 사용합니다. 주요 페이지를 Drawer 안에 과도하게 중첩하지 않습니다.
Popover	기준 요소 주변에 추가 정보나 간단한 동작 제공	짧은 설정이나 메뉴처럼 트리거와 내용의 관계가 중요할 때 사용합니다. 화면 밖 배치와 외부 클릭 닫기를 처리합니다.
Tooltip	컨트롤의 짧은 보조 설명 제공	아이콘이나 축약 표현을 보충할 때 사용합니다. 핵심 정보와 조작 가능한 콘텐츠는 Tooltip에 넣지 않습니다.
Progress	완료 비율이나 단계가 알려진 작업 진행 표시	업로드처럼 진행률을 계산할 수 있을 때 사용합니다. 값, 단위와 완료 결과를 함께 알립니다.
Spin	완료 시점을 예측하기 어려운 짧은 대기 표시	작은 영역의 짧은 처리에 사용합니다. 장시간 전체 화면을 설명 없이 막지 않습니다.
Skeleton	콘텐츠 구조를 유지하며 초기 로딩 상태 표시	예상 레이아웃을 알고 있고 콘텐츠가 곧 표시될 때 사용합니다. 실제 구조와 지나치게 다른 모양을 피합니다.
Empty	표시할 데이터가 없는 이유와 다음 행동 안내	최초 데이터 없음과 검색 결과 없음을 구분합니다. 생성, 필터 초기화 등 가능한 다음 행동을 제공합니다.

선택 기준

반드시 먼저 결정해야 하는 작업은 Modal, 기존 화면을 참고하는 보조 작업은 Drawer, 기준 요소에 종속된 짧은 내용은 Popover를 사용합니다. Tooltip은 설명 전용이며 클릭이나 입력을 포함하지 않습니다. 지속해야 할 메시지는 Alert, 잠시 알려도 되는 완료 결과는 Snackbar가 적합합니다.

로딩과 메시지 작성

• 진행률을 알 수 있으면 Progress, 짧은 불확정 처리는 Spin, 초기 콘텐츠 구조를 유지하려면 Skeleton을 사용합니다.
• 메시지는 발생한 일, 영향, 사용자가 할 수 있는 다음 행동 순서로 작성합니다.
• 오류 코드만 노출하지 않고 재시도, 입력 수정, 문의 등 복구 경로를 제공합니다.
• 실시간으로 추가된 중요한 메시지는 적절한 live region을 사용하되 반복 안내로 사용을 방해하지 않습니다.