SweetAlert2 테마 커스터마이징 방법｜스타일 내 마음대로 꾸미기

SweetAlert2는 기본 스타일도 충분히 예쁘지만, 브랜드나 디자인에 맞게 커스터마이징하면 더욱 돋보이는 알림 UI를 만들 수 있습니다. 이 글에서는 CSS 커스터마이징부터 커스텀 클래스 적용까지, SweetAlert2 테마를 자유롭게 바꾸는 실전 팁을 소개합니다.

왜 커스터마이징이 필요할까?

SweetAlert2 테마를 변경하는 이유는? 자체 디자인으로도 깔끔하고, 예쁜 디자인입니다. 하지만, 웹사이트의 브랜드 테마 색상이 기본 디자인과 같을 수 없고, 제작하는 웹사이트의 테마에 맞게 변경이 필요합니다. 이럴 때 어떤 부분과 어떻게 변경하면 되는지 자세히 알아보겠습니다.

제작되는 웹사이트의 통일성
기본 제공 디자인과의 차별화

기본 SweetAlert2 테마

Swal.fire({
  title: "기본테마",
  text: "기본 SweetAlert2 테마",
  icon: "success"
});

Swal.fire({
  title: "기본테마",
  text: "기본 SweetAlert2 테마",
  icon: "success"
});

JavaScript

코드 실행

커스터마이징 방법

Swal.fire({
  title: '커스터마이징',
  text: '각 요소별 class 적용하기',
  icon: 'success',
  customClass: {
    popup: 'my-popup',
    title: 'my-title',
    confirmButton: 'my-confirm-btn'
  }
});

Swal.fire({
  title: '커스터마이징',
  text: '각 요소별 class 적용하기',
  icon: 'success',
  customClass: {
    popup: 'my-popup',
    title: 'my-title',
    confirmButton: 'my-confirm-btn'
  }
});

JavaScript

.my-popup {
  background-color: #fdf6e3;
  border-radius: 16px;
}

.my-title {
  font-family: 'Pretendard', sans-serif;
  color: #333;
}

.my-confirm-btn {
  background-color: #ff8a00;
  color: white;
}

.my-popup {
  background-color: #fdf6e3;
  border-radius: 16px;
}

.my-title {
  font-family: 'Pretendard', sans-serif;
  color: #333;
}

.my-confirm-btn {
  background-color: #ff8a00;
  color: white;
}

CSS

코드 실행

예제 설명

JavaScript에서 각 요소별 class 로 지정
css에서 지정한 class에 스타일 적용
팝업 전체 스타일 변경
버튼, 텍스트에 CSS 적용

class 지정 가능한 항목

customClass: {
  container: '...',
  popup: '...',
  header: '...',
  title: '...',
  closeButton: '...',
  icon: '...',
  image: '...',
  htmlContainer: '...',
  input: '...',
  inputLabel: '...',
  validationMessage: '...',
  actions: '...',
  confirmButton: '...',
  denyButton: '...',
  cancelButton: '...',
  loader: '...',
  footer: '....',
  timerProgressBar: '....',
}

customClass: {
  container: '...',
  popup: '...',
  header: '...',
  title: '...',
  closeButton: '...',
  icon: '...',
  image: '...',
  htmlContainer: '...',
  input: '...',
  inputLabel: '...',
  validationMessage: '...',
  actions: '...',
  confirmButton: '...',
  denyButton: '...',
  cancelButton: '...',
  loader: '...',
  footer: '....',
  timerProgressBar: '....',
}

JavaScript

👉 SweetAlert2 관련 문서 보러가기

버튼 색상만 간단히 변경하기

Swal.fire({
  title: "Are you sure?",
  text: "You won't be able to revert this!",
  icon: "warning",
  showCancelButton: true,
  confirmButtonColor: "#3085d6",
  cancelButtonColor: "#d33",
  confirmButtonText: "Yes, delete it!"
}).then((result) => {
  if (result.isConfirmed) {
    Swal.fire({
      title: "Deleted!",
      text: "Your file has been deleted.",
      icon: "success"
    });
  }
});

Swal.fire({
  title: "Are you sure?",
  text: "You won't be able to revert this!",
  icon: "warning",
  showCancelButton: true,
  confirmButtonColor: "#3085d6",
  cancelButtonColor: "#d33",
  confirmButtonText: "Yes, delete it!"
}).then((result) => {
  if (result.isConfirmed) {
    Swal.fire({
      title: "Deleted!",
      text: "Your file has been deleted.",
      icon: "success"
    });
  }
});

JavaScript

confirmButtonColor : 확인, confirm에 대한 버튼 배경색 변경.
denyButtonColor : 취소, deny에 대한 버튼 배경색 변경.
cancelButtonColor : 창닫기 버튼에 대한 배경색 변경.

마무리

class를 통해서 SweetAlert2 테마 변경하는 방법에 대해서 코드와 코드 실행으로 알아봤습니다. 생각보다 그렇게 어려운 부분이 없는것 같습니다.
기본 디자인도 예쁜편이여서, 그대로 사용하셔도 되지만, 혹시 변경을 해야 한다면 이방법을 사용해 보시면 좋을거 같습니다.

👉 관련 포스팅 : SweetAlert2로 예쁜 Toast 알림 만들기｜간단한 JS 코드 예제 포함
👉 관련 포스팅 : SweetAlert2와 Fetch API 연동｜사용자 입력 후 서버 요청 처리 예제
👉 관련 포스팅 : SweetAlert2에서 입력값 받아오기｜사용자 입력 처리 방법과 예제
👉 관련 포스팅 : SweetAlert2 confirm 사용법｜확인/취소 처리와 콜백 활용 예제
👉 관련 포스팅 : SWAL 사용법! SweetAlert2 예쁜 팝업 정복하기

LG전자 27US550 68.4cm IPS 4K UHD 60Hz 피벗 틸트 스위블 엘리베이션

LG전자 FHD IPS 모니터, 80.4cm, LG_32MN500MW 화이트

한성컴퓨터 FHD IPS 144Hz 게이밍 모니터, 68.6cm, TFG27F14P2(일반)

아즈텍 모니터 240Hz 게이밍 AZT324G 80~81cm(32인치) 무결점, 무결점(AZT324G), 80.1cm

[깜짝세일] 뷰싱크 FHD 광시야각 리얼 100Hz 올화이트 모니터, VSO321F 일반, 80cm

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