자바스크립트로 만드는 알림(Toast) 컴포넌트

 

 

📌 개요

 

Toast 알림은 사용자에게 빠르고 간단한 피드백을 제공하는 UI 요소입니다.

예를 들어 “저장되었습니다”처럼 화면 상단이나 하단에 짧게 나타나는 알림 말이죠.

 

이 글에서는 바닐라 자바스크립트(Vanilla JS)만으로

재사용 가능한 toast 컴포넌트를 만드는 법을 소개합니다.

 

• ✅ 순수 JS로 가볍게 구현
• ✅ 위치, 지속 시간, 애니메이션 설정 가능
• ✅ 스크린 리더 사용자도 고려한 접근성

 

💡 Toast UI란?

Toast는 화면 한쪽에 몇 초간 표시되는 일시적인 메시지입니다.

사용자가 별도의 조작 없이 피드백을 받을 수 있어 UX 향상에 효과적이죠.

 

📈 자주 쓰이는 상황 예시

• 폼 제출 후 “제출이 완료되었습니다”
• 복사 버튼 클릭 시 “클립보드에 복사됨”
• 저장, 삭제, 오류 안내 등

 

 

🛠️ HTML 구조

 

<div id="toast-container"></div>

 

toast-container는 토스트 메시지를 감싸는 컨테이너입니다.

자바스크립트에서 동적으로 메시지를 삽입해 사용할 예정이에요.

 

 

🎨 CSS 스타일

#toast-container {
  position: fixed;
  top: 1.5rem;
  right: 1.5rem;
  z-index: 9999;
}
.toast {
  background: #333;
  color: #fff;
  padding: 0.75rem 1.2rem;
  margin-top: 0.5rem;
  border-radius: 4px;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.toast.show {
  opacity: 1;
  transform: translateY(0);
}

 

⚙️ 자바스크립트 로직

function showToast(message, duration = 3000) {
  const container = document.getElementById('toast-container');
  const toast = document.createElement('div');
  toast.className = 'toast';
  toast.innerText = message;

  container.appendChild(toast);

  // 표시
  requestAnimationFrame(() => toast.classList.add('show'));

  // 사라지기
  setTimeout(() => {
    toast.classList.remove('show');
    toast.addEventListener('transitionend', () => toast.remove());
  }, duration);
}

 

✅ 접근성 고려 (a11y)

toast.setAttribute('role', 'alert');
toast.setAttribute('aria-live', 'assertive');

• role="alert": 스크린 리더가 즉시 읽어줍니다.
• aria-live="assertive": 긴급하게 전달할 필요가 있을 경우 사용합니다.

 

🧪 사용 예시

<button onclick="showToast('복사되었습니다!')">복사</button>

 

🚀 확장 포인트

• ✅ 토스트 위치 커스터마이징 (왼쪽, 가운데 등)
• ✅ 아이콘, 색상 변경
• ✅ 큐(queue) 처리: 여러 toast가 겹치지 않게
• ✅ 사운드 추가 등 다양한 인터랙션

 

🔎 관련 키워드 (SEO)

• 자바스크립트 toast 만들기
• 바닐라 JS 알림 UI
• toast 메시지 예제
• 자바스크립트 동적 컴포넌트
• 웹 접근성 알림 구현

 

 

🧩 마무리하며

JavaScript만으로도 트리 UI를 충분히 풍부하게 구현할 수 있습니다.

기본 기능에서 출발해 아이콘, 드래그 앤 드롭, 검색, 그리고 접근성까지 챙기면서

사용자 경험을 더 정교하게 다듬는 과정은 프런트엔드 개발의 진짜 재미를 느낄 수 있게 해 줍니다.

 

이제 여러분의 트리 UI는 단순한 파일 구조 표현을 넘어,

누구에게나 친절한 인터페이스로 확장될 준비가 되었어요.

 

여기에 애니메이션, API 연동, 커스터마이징 옵션 등 원하는 기능을 덧붙이면

나만의 멋진 컴포넌트가 완성되겠죠. 🔧

 

궁금한 점이나 더 다뤘으면 하는 UI 주제가 있다면 댓글로 알려주세요!

그럼 다음 포스트에서 또 만나요. 😊