토스트 팝업 레이어 !!

많이 들어 보셨을 겁니다 

알림 레이어로 우측 하단에 토스트 기계에서 빵이 슬그머니 빠져 나오듯이 올라오는 알림 레이어

 

다른 말로는 아래와 같이도 부른다고 하네요

"스낵바(Snackbar),  메시지 토스트, 토스트 알림,  알림 레이어"

 

예전 2005년 즈음 그 이전부터 세이클럽에서 사용하던 토스트 팝업 레이어를 너무 좋게 보아서

아주 어렵게 내용을 구사해서 가지고 있던  소스가 있습니다 

20여년 전에 직접 만들었고 마음이 많이가는  소스중 하나죠

 

 

 

 

요즈음 로그인 관련 작업을 하는데 그 곳에 쓸려고 꺼내서 사용하다가

아무래도 재미있게 사용할려면 조금 손을 보는게 좋아서 

한 일주일 정도 손을 본거 같습니다 

 

찾아보면 이미 토스트 팝업에 관해 아주 잘된 소스나 프레임웤이 몇개 나와 있는 것을 알수 있습니다

"바퀴를 다시 발명하지 말라"는 프로그래머 격언이 있지만

그리 어려운 것도 아니고

내가 만들었으니 내용을 잘 알고 있어 아주 쉽게 확장을 할수 있을것 같아서 개인적으로 만들었습니다

 

되도록 에니메이션에서는 css의 트랜지션을 사용하도록 했기에 보다 유연합니다

지금은 버그와 최종 추가할 수 있는 작업을 준비중인데 이상없으면 

이것은  소스로 만들어 공유하겠습니다

 

토스트 팝업에 관해서 챗지피티를 찾아보니 아래와 같다네요

 

 

 

 

 

 

 

 

 

1. 시작: 2000년대 초 (Windows / Desktop UI 시대)

• "Toast Notification" 이라는 용어는
  원래 Microsoft Windows에서 시작되었습니다.

• 예를 들어 Windows XP (2001) 이후 버전에서
  화면 오른쪽 하단에 잠깐 뜨는
  “새 이메일이 도착했습니다” 같은 작은 알림창이 바로 그것이에요.

📌 이름의 유래

“토스트(toast)”는 토스터기에서 빵이 ‘툭’ 튀어나오는 순간처럼
알림이 잠깐 나타났다 사라지는 모습을 비유한 것입니다.
→ 그래서 “Toast Notification” 이라 불리게 되었죠.

---

💻 2. 웹에서의 도입: 2010년대 초반

• 웹 개발자들이 데스크톱 UI 패턴을 웹에 차용하면서
  토스트 팝업이 웹 UI에서도 자주 사용되기 시작했습니다.

• 이 시기 대표적인 프레임워크들:

  • jQuery UI, Bootstrap, Material Design

  • 예: Bootstrap Toasts, Material Snackbar

• 대부분 “오른쪽 하단” 또는 “상단 중앙”에
  메시지가 2~3초 동안 떠 있다가 사라지는 형태로 사용되었습니다.

---

📱 3. 모바일 앱 시대: Android & iOS (2010년대 중반)

• Android는 “Toast”라는 공식 UI 컴포넌트를 도입했습니다.

  Toast.makeText(context, "저장되었습니다", Toast.LENGTH_SHORT).show();

  → 안드로이드 개발자에게는 “Toast”가 기본 알림 수단이 되었죠.

• iOS는 공식 컴포넌트로는 없었지만,
  UIAlertController 대신 커스텀 토스트를 많이 구현했습니다.
  → “SnackBar” 혹은 “HUD”라는 이름으로도 사용되었습니다.

---

🌐 4. 현대 웹 & SPA 시대 (React, Vue, Angular 이후)

• 2016년 이후 SPA(단일 페이지 앱)가 늘어나면서
  전체 페이지 새로고침 없이 즉각적인 피드백을 줄 필요가 커졌습니다.

• 그래서 토스트 팝업이 다시 필수 UI로 자리잡았습니다.

대표적인 라이브러리들:

• React: react-toastify, notistack

• Vue: vue-toastification

• Angular: ngx-toastr

• Tailwind: @headlessui/toast류의 컴포넌트

💡 UI 트렌드 특징

• 화면 중앙 or 우측 상단에 작게 등장

• Fade / Slide / Scale 애니메이션

• Success / Error / Warning / Info 등 상태 색상 구분

• 사용자 조작 없이 자동 닫힘 (autoClose)

• 여러 개가 스택처럼 쌓임 (toast stack)