SweetAlert2 다중 버튼 구현과 옵션 커스터마이징｜기본·고급 코드 포함

글쓴이 /

SweetAlert2는 단순한 확인·취소 버튼 외에도 다양한 사용자 선택지를 제공할 수 있는 강력한 팝업 라이브러리입니다. 기본 기능만으로도 최대 3개의 버튼을 만들 수 있지만, HTML 커스터마이징을 이용하면 그 이상의 버튼도 구현 가능합니다. 이번 글에서는 SweetAlert2의 다중 버튼 구현 방법과 옵션 커스터마이징 팁을 기본 예제부터 고급 실전 예제까지 단계별로 소개합니다.

SweetAlert2 다중 버튼이 필요한 이유

  • 예시 상황 : 관리자 승인 요청, 여러 작업 옵션 제공, 게임/앱 UI에서 다양한 선택
  • 장점 : 한 번의 팝업으로 다수의 선택 가능

기본 2~3 버튼 구현 예제

Swal.fire({
    title: '기본 다중 버튼 예제',
    text: '원하는 작업을 선택하세요.',
    showDenyButton: true,
    showCancelButton: true,
    confirmButtonText: '저장',
    denyButtonText: '미리보기',
    cancelButtonText: '취소',
    confirmButtonColor: '#3085d6',
    denyButtonColor: '#f8bb86',
    cancelButtonColor: '#d33'
}).then((result) => {
    if (result.isConfirmed) {
        Swal.fire('저장 완료!', '', 'success');
    } else if (result.isDenied) {
        Swal.fire('미리보기 모드', '', 'info');
    }
});
JavaScript
  • 포인트 : 기본 API로 구현 가능한 최대 버튼 개수 = 3개

예제 실행

고급 — 버튼 4개 이상 구현하기 (HTML 커스터마이징)

Swal.fire({
    title: '4개 이상 버튼 예제',
    html: `
        <button id="btnSave" class="swal2-confirm swal2-styled">저장</button>
        <button id="btnPreview" class="swal2-deny swal2-styled" style="background-color:#f8bb86">미리보기</button>
        <button id="btnDownload" class="swal2-styled" style="background-color:#00aaff">다운로드</button>
        <button id="btnCancel" class="swal2-cancel swal2-styled">취소</button>
    `,
    showConfirmButton: false,
    showCancelButton: false,
    didOpen: () => {
        const popup = Swal.getPopup();
        popup.querySelector('#btnSave').addEventListener('click', () => Swal.fire('저장 완료!', '', 'success'));
        popup.querySelector('#btnPreview').addEventListener('click', () => Swal.fire('미리보기 모드', '', 'info'));
        popup.querySelector('#btnDownload').addEventListener('click', () => Swal.fire('다운로드 시작', '', 'success'));
        popup.querySelector('#btnCancel').addEventListener('click', () => Swal.close());
    }
});
JavaScript

설명

  • html 옵션에 직접 버튼 HTML 삽입
  • didOpen 훅에서 각 버튼 클릭 이벤트 연결
  • showConfirmButton: false로 기본 버튼 비활성화

예제 실행

SweetAlert2 옵션 커스터마이징 팁

버튼 색상/스타일 변경

confirmButtonColor: '#3085d6',
denyButtonColor: '#f8bb86',
cancelButtonColor: '#d33'
JavaScript

아이콘 및 위치 변경

icon: 'warning',
iconColor: '#ffcc00',
reverseButtons: true
JavaScript

CSS로 세밀하게 제어

.swal2-popup button {
  font-size: 14px;
  padding: 8px 16px;
}
CSS

FAQ

Q. SweetAlert2 기본 API로 4개 이상의 버튼을 만들 수 있나요?
A. 기본 API는 최대 3개까지 지원하며, 그 이상은 HTML 커스터마이징 방식이 필요합니다.

Q. 각 버튼을 다른 페이지로 이동하게 할 수 있나요?
A. 가능합니다. window.location.href를 각 버튼 클릭 이벤트에 지정하면 됩니다.

Q. 다중 버튼 팝업에서도 AJAX 요청을 처리할 수 있나요?
A. 가능합니다. fetch() 또는 axios를 이벤트 핸들러 내부에 작성하면 됩니다.

마무리

SweetAlert2의 다중 버튼 기능은 기본 API로 3개까지 구현 가능하며, HTML 커스터마이징을 통해 제한 없이 확장할 수 있습니다. 버튼별 색상, 텍스트, 이벤트를 자유롭게 설정하면 한 번의 팝업으로 다양한 사용자 선택을 제공할 수 있습니다. 이번 예제를 프로젝트에 맞게 변형해 UX를 한 단계 끌어올려 보세요.

관련 포스팅들

웹개발 시 추천 모니터들

LG전자 FHD PC 모니터, 68.6cm, 27MS500
LG전자 SDQHD 듀얼업 모니터, 70.1cm, 28MQ780
LG 27US550 (68.4cm)27인치 UHD 4K 모니터 27UP550N 후속 모델 HDR 피벗 높이조절 화이트, 68.4cm
UPERFECT 23.8'' 100Hz 포터블 모니터 휴대용 게임용 DEX 업무용 초대형 화면 USB type-c Ustation, FHD, 60.45cm

“이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.”

위로 스크롤