Spinner
동그라미가 빙글빙글 돌면서
'잠깐만 기다려 주세요'를 알려요
LOOP결제하는 중이에요.
창을 닫지 말고 잠시만 기다려 주세요
이럴 때 써요
- 결제 버튼을 누르고 기다릴 때
- 앱을 처음 열었을 때
- 대시보드 숫자를 새로 불러오는 동안
#스피너#Spinner#기다림표시#불러오는중
Skeleton screen
내용이 들어올 자리에
회색 틀이 먼저 반짝이며 기다려요
LOOP🎧
무선 이어폰 프로
오늘 출발 · 무료배송
₩89,000
⌚
스마트워치 SE
내일 도착 · 무료배송
₩239,000
이럴 때 써요
- 쇼핑앱에서 상품 목록이 뜨기 직전
- 유튜브 첫 화면의 회색 네모들
- 대시보드 표와 그래프를 불러오는 동안
#스켈레톤#SkeletonScreen#기다림표시#상품목록
Progress bar
막대가 왼쪽부터 차오르며
얼마나 남았는지 보여줘요
이럴 때 써요
- 파일을 올리거나 받을 때
- 앱 업데이트를 설치할 때
- 설문에서 몇 번째 질문인지 알려줄 때
#프로그레스바#ProgressBar#진행률#파일업로드
Progress ring
동그라미 테두리가 차오르며
목표까지 얼마나 왔는지 보여줘요
이럴 때 써요
- 만보기 앱의 오늘 걸음 수
- 운동 앱의 목표 달성률
- 대시보드의 이달 목표 달성률
#원형진행률#ProgressRing#달성률#대시보드
Success checkmark
동그라미 안에 체크가 쓱 그려지며
'다 됐어요'를 확실히 알려요
LOOP결제가 완료됐어요
주문번호 20261027-0142
이럴 때 써요
- 결제나 송금이 끝났을 때
- 회원가입을 마쳤을 때
- 신청서를 제출하고 나오는 완료 화면
#완료체크#SuccessCheckmark#완료표시#결제완료
Toast
짧은 알림이 잠깐 떴다가
저절로 스르르 사라져요
LOOP‹ 상품 상세
🎧
무선 이어폰 프로
₩89,000
장바구니 담기
✓ 장바구니에 담았어요
이럴 때 써요
- '장바구니에 담았어요' 알림
- '링크를 복사했어요' 알림
- 대시보드에서 '저장했어요' 알려줄 때
#토스트#Toast#짧은알림#자동사라짐
Snackbar with undo
화면 아래 알림 줄에
'실행 취소' 버튼이 같이 붙어 와요
LOOP메모
📝 장보기 목록🗑
📝 회의 메모🗑
📝 여행 계획🗑
메모를 삭제했어요실행 취소
이럴 때 써요
- 메일이나 메모를 지웠을 때
- 장바구니에서 상품을 뺐을 때
- 사진을 보관함으로 옮겼을 때
#실행취소스낵바#Snackbar#되돌리기#삭제알림
Optimistic UI
누르자마자 바로 바뀌고
저장은 뒤에서 조용히 해요
이럴 때 써요
- 쇼핑앱에서 찜 버튼 누를 때
- 인스타그램 좋아요가 바로 빨개질 때
- 할 일 목록에 체크할 때
#낙관적업데이트#OptimisticUI#즉시반영#빠른반응
Inline alert
내용 사이에 색깔 띠를 깔아
안내·주의·실패를 알려요
LOOP내 주문
10/24 무선 이어폰 · 배송완료
10/19 캠핑 의자 · 배송완료
이럴 때 써요
- '연휴엔 배송이 늦어져요' 공지
- 결제가 실패했을 때 안내
- 대시보드 맨 위 '어제 데이터 집계 중' 안내
#안내배너#InlineAlert#공지띠#주의안내
Empty state
보여줄 게 없을 때 텅 빈 화면 대신
그림과 다음 할 일을 알려줘요
LOOP장바구니
장바구니가 비어 있어요
마음에 드는 상품을 담아보세요
쇼핑하러 가기
이럴 때 써요
- 장바구니가 비어 있을 때
- 검색 결과가 하나도 없을 때
- 알림함에 새 소식이 없을 때
#빈화면안내#EmptyState#안내문구#장바구니
Error page (404)
없는 주소로 들어오면
'찾을 수 없어요'와 돌아갈 길을 알려요
LOOP404
페이지를 찾을 수 없어요
주소가 바뀌었거나 사라졌어요
홈으로 가기
이럴 때 써요
- 지난 이벤트 링크를 눌렀을 때
- 주소를 잘못 쳤을 때
- 홈페이지에서 지운 페이지로 들어왔을 때
#오류페이지#404Page#오류안내#홈페이지
Badge
아이콘 모서리 빨간 동그라미에
안 읽은 개수를 숫자로 보여줘요
이럴 때 써요
- 카톡 앱 아이콘의 안 읽은 메시지 수
- 장바구니 아이콘 위 담긴 개수
- 메일함에 붙은 '99+'
#배지#Badge#알림숫자#안읽음
Notification dot
숫자 없이 빨간 점 하나로
'새 소식 있어요'만 살짝 알려요
이럴 때 써요
- 앱 아래 메뉴의 '알림' 칸
- 설정 메뉴에 새 기능이 생겼을 때
- 대시보드 메뉴에 새 보고서가 올라왔을 때
#알림점#NotificationDot#새소식#메뉴표시
Status chip
지금 어떤 상태인지
색깔 이름표 하나로 보여줘요
이럴 때 써요
- 쇼핑몰 주문 내역의 '배송중'
- 택배 조회의 '배송완료'
- 대시보드에서 캠페인 '진행중·종료' 표시
#상태칩#StatusChip#상태표시#주문내역
Trend indicator
숫자 옆 ▲▼와 %로
올랐는지 내렸는지 한눈에 보여줘요
이럴 때 써요
- 주식 앱의 '▲ 2.3%'
- 대시보드 숫자 카드의 '어제보다 +12%'
- 월간 보고서의 매출 증감
#증감표시#TrendIndicator#전일대비#대시보드
Sparkline
숫자 옆에 작은 꺾은선 하나로
요즘 흐름을 한눈에 보여줘요
이럴 때 써요
- 주식 앱 종목 목록 옆 작은 그래프
- 대시보드 숫자 카드의 최근 2주 흐름
- 보고서 표 안에 추세를 넣을 때
#스파크라인#Sparkline#추세선#대시보드
Live indicator
빨간 점이 숨쉬듯 깜빡이며
지금 이 순간 숫자라는 걸 알려요
LOOP실시간 접속자LIVE
1,271명
방금 전 업데이트 · 1초마다 새로 받아와요
이럴 때 써요
- 라이브 방송 화면의 '● LIVE'
- 공연 예매 대기 화면의 실시간 접속자 수
- 광고 대시보드의 실시간 집행 현황
#실시간표시#LiveIndicator#실시간#모니터링
Threshold alert
정해둔 기준을 넘는 순간
카드가 빨갛게 바뀌며 알려요
LOOP오늘 광고비 소진율정상
62%₩310만 / 일 예산 ₩500만
기준 100%
이럴 때 써요
- 광고비가 하루 예산을 넘었을 때
- 휴대폰 데이터를 90% 넘게 썼을 때
- 대시보드에서 매출이 목표 밑으로 떨어졌을 때
#임계값경고#ThresholdAlert#기준초과#모니터링