토스트(Toast) 학습

토스트(Toast)는 토스트기에서 빵이 툭 튀어나오는 것처럼, 화면의 특정 위치에 잠시 나타났다가 자동으로 사라지는 작은 알림 창을 말합니다. 사용자의 흐름을 완전히 끊는 알럿(Alert)이나 모달(Modal)과 달리, "방해하지 않고 정보를 전달하는 것"이 토스트 UI의 핵심입니다.

이미지

토스트 알림 예시 이미지

설명

1. 토스트 UI의 핵심 UX 원칙

  • 비차단성 (Non-blocking): 화면의 일부분만 차지하며 배경을 어둡게 만들지 않습니다. 토스트가 떠 있어도 스크롤/클릭 등 기존 작업을 계속할 수 있어야 합니다.
  • 휘발성 (Ephemeral): 사용자가 직접 닫지 않아도 3~5초 내외로 자연스럽게 사라져야 합니다. 너무 빠르면 읽지 못하고, 너무 느리면 방해가 됩니다.
  • 낮은 중요도 (Low Priority): "삭제 확인" 같은 중요한 판단은 알럿/모달이 적합합니다. 토스트는 "저장 완료", "복사 완료", "새 메시지 도착" 같은 가벼운 결과 안내에 맞습니다.

2. UI 디자인 포인트

  • 위치: 모바일은 하단 중앙, 데스크탑은 우측 상단 또는 하단 중앙 배치가 일반적입니다.
  • 시각 스타일: 배경 대비가 있는 색상/그림자로 콘텐츠 위에서도 눈에 잘 띄게 설계합니다.
  • 애니메이션: 단순 노출보다 Slide-up/Fade-in 효과를 주면 훨씬 자연스럽고 고급스럽습니다.

4. 모달 vs 알럿 vs 토스트 비교

모달 강제성 높음(배경 차단), 버튼으로 닫힘, 상세 보기/회원가입 폼
알럿 강제성 매우 높음(흐름 중단), 확인 버튼으로 닫힘, 삭제 확인/심각한 오류
토스트 강제성 낮음(배경 유지), 자동 사라짐, 복사 완료/설정 변경 안내

교수님의 팁

"사용자가 무언가 행동을 했을 때 '아, 내 요청이 잘 처리됐구나'라는 안심을 주는 용도로 토스트를 활용하세요. 특히 모바일 환경에서는 알럿보다 토스트가 더 세련되고 사용자 경험이 좋습니다."

코드

HTML

<button id="showToast">저장하기</button>

<div id="toastContainer">
  <div class="toast-message">성공적으로 저장되었습니다!</div>
</div>

CSS

/* 토스트 전체 위치 설정 */
#toastContainer {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
}

/* 토스트 상자 스타일 */
.toast-message {
  display: none;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 12px 25px;
  border-radius: 30px;
  font-size: 14px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  animation: fadeInUp 0.5s;
}

/* 아래에서 위로 올라오는 애니메이션 */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

jQuery

$(document).ready(function() {
  $('#showToast').on('click', function() {
    $('.toast-message').fadeIn(400);

    setTimeout(function() {
      $('.toast-message').fadeOut(400);
    }, 3000);
  });
});

실행

성공적으로 저장되었습니다!