입문자를 위한 SweetAlert2｜기본부터 활용까지 예쁜 팝업 완벽 가이드

글쓴이 /

SweetAlert2는 기본 alert()보다 훨씬 예쁘고 직관적인 팝업을 제공하는 자바스크립트 라이브러리입니다. 이 글에서는 설치부터 기본 사용법, 전역 설정, 테마 커스터마이징, 위치 제어까지 핵심 기능을 총정리합니다. 입문자도 단계별로 따라 할 수 있도록 개별 가이드와 함께 구성했습니다.

SweetAlert2란 무엇인가?

  • 자바스크립트의 기본 alert()를 대체하는 모던 팝업 라이브러리
  • 모달, 알림창, 확인창, 사용자 입력창 등 다양한 UI 지원
  • 오픈소스이며 설치도 간단
  • 👉 SweetAlert2 공식 웹페이지 보러가기
  • SweetAlert2 CDN을 불러오기만 하면 설정 완료!
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
SQL

기본 사용법 살펴보기

👉 상세 가이드는 별도 글: 🚩예쁜 alert 모달창 사용법 SweetAlert2

Swal.fire(title:'Hello World!', text:'이것은 SweetAlert2 팝업입니다.', icon:'success');
SQL
  • title : 알림창 제목
  • text : 알림창 내용
  • icon : 아이콘(success, error, warning, info, question)

전역 설정으로 재사용하기

👉 상세 가이드는 별도 글: SweetAlert2 전역 설정으로 재사용 팝업 만들기｜Global Defaults 활용

const Toast = Swal.mixin({
  toast: true,
  position: 'top-end',
  showConfirmButton: false,
  timer: 3000
});

Toast.fire({
  icon: 'success',
  title: '저장되었습니다!'
});
SQL
  • Swal.mixin() 활용
  • 토스트 알림, 재사용 가능한 팝업 패턴 생성

테마와 디자인 커스터마이징

👉 상세 가이드는 별도 글: SweetAlert2 테마 커스터마이징 방법｜스타일 내 마음대로 꾸미기

.swal2-popup {
  border-radius: 1rem;
  font-family: 'Pretendard', sans-serif;
}
.swal2-confirm {
  background-color: #4CAF50 !important;
}
CSS
  • CSS 오버라이드로 색상, 버튼 스타일, 폰트 자유롭게 변경 가능

알림창 위치 바꾸기

👉 상세 가이드는 별도 글: SweetAlert2 알림창 위치 사용법｜원하는 위치에 알림창 띄우기

Swal.fire({
  position: 'bottom-end',
  icon: 'info',
  title: '저장 완료!',
  showConfirmButton: false,
  timer: 1500 // 1.5초
});
JavaScript
  • position: 'top', 'center', 'bottom-end' 등 자유롭게 지정 가능

SweetAlert2 활용 팁

  • 입문자는 CDN을 불러와서 기본 팝업창 사용 연습
  • 프로젝트에 적용 시에는 전역 설정과 커스터마이징 연습
  • UI 통일을 위해 CSS, 테마, 버튼 스타일 지정
  • UX 개선을 위한 애니메이션 효과 또는 위치 변경기

마무리

SweetAlert2는 단순한 알림창을 넘어, UX를 높이는 강력한 UI 도구입니다. 처음에는 기본 예제만 따라 해도 충분하지만, 프로젝트 규모가 커질수록 전역 설정과 커스터마이징이 중요해집니다.
이 글에서 소개한 개별 가이드들을 통해 기본 → 응용 → 고급으로 차근차근 배워가길 추천합니다.

👉 다음 글: 고급 기능 & 인터랙션 활용법 보러가기

위로 스크롤