얼럿부터 모달까지, 피드백 UI 컴포넌트 이해하기 - 웹디자인 강좌 1-8

사용자가 버튼을 눌렀는데 아무런 반응이 없다면 제대로 처리된 것인지, 오류가 발생한 것인지 알 수 없습니다.

이처럼 피드백이 없는 UI는 사용자를 불안하게 만들고 서비스에 대한 신뢰를 떨어뜨립니다.

이번 영상에서는 사용자의 행동 결과와 현재 상태를 알려주는 피드백 컴포넌트와, 화면 사용을 보조하는 인터랙션 컴포넌트를 알아봅니다.

먼저 삭제나 페이지 이탈처럼 사용자의 확인과 결정이 필요한 상황에 사용하는 얼럿을 살펴봅니다. 이어 저장 완료나 오류처럼 가벼운 상태를 전달하는 토스트, 새로운 알림과 상태 변화를 보여주는 배지의 역할과 사용 기준을 정리합니다.

처리 시간이 필요한 작업에서 사용하는 로딩 스피너와 스켈레톤 UI, 작업 진행 상황을 알려주는 프로그레스 바의 차이도 함께 알아봅니다.

또한 짧은 설명을 제공하는 툴팁, 툴팁보다 많은 정보와 행동을 담을 수 있는 팝오버, 사용자의 집중이 필요한 작업을 화면 위에 표시하는 모달까지 살펴봅니다.

피드백 컴포넌트는 무조건 많이 보여주는 것이 중요한 게 아닙니다. 필요한 순간에 적절한 방식으로 상태를 전달하고, 사용자의 흐름을 불필요하게 끊지 않도록 설계해야 합니다.

다음 영상에서는 카드, 리스트 등 콘텐츠를 보여주는 데 사용하는 컴포넌트를 알아보겠습니다.

#웹디자인 #webdesign #디자인베이스 #피드백 #UX디자인 #UI기획 #인터렉션 #ui

🕐 타임스탬프
00:00 UI에서 피드백이 중요한 이유
00:14 얼럿과 토스트 메시지
02:31 배지로 상태 표시하기
03:19 로딩과 프로그레스 바
04:30 툴팁과 팝오버의 차이
05:34 모달의 역할과 사용 방법
06:36 피드백 UI 핵심 정리


🚀 멤버십 가입 : https://www.youtube.com/channel/UCvYnDMeL-PFZhfIz6oc_U-Q/join
🚀 예제 다운로드는 멤버십 회원 전용 커뮤니티에 올린 링크에서 받으실 수 있습니다.

🔥 디자인베이스 웹사이트 : https://designbase.co.kr/
🔥 인스타그램 : https://www.instagram.com/designbasekorea/
🔥 이메일 문의 : [email protected]
🔥 카카오 오픈채팅방 : https://open.kakao.com/o/gmwngljb (참여코드 : dgoing12)