Javascript alert 창 꾸미기 및 커스터마이징: SweetAlert2 하나로 해결

대부분의 프로젝트는 Javascript에서 기본적으로 제공해 주는 alert, confirm, prompt를 그대로 사용하지 않고, 커스터마이징 해서 사용하거나 라이브러리를 이용해서 어느 정도는 꾸며서 사용합니다. Javascript alert 창 꾸미기 라이브러리 중에는 SweetAlert2가 가장 널리 사용되고 있습니다. 사용법이나 설치 방법은 공식 사이트에 워낙 쉽게 잘 나와 있기 때문에 공식 사이트만 봐도 충분합니다.

저는 공식 사이트에는 없는 몇 가지 내용과 제 의견을 가지고 글을 한 번 써보겠습니다.

SweetAlert는 지원 중단 상태

SweetAlert2의 이전 버전인 SweetAlert도 널리 사용되던 라이브러리였습니다. 하지만 현재 SweetAlert는 사실상 지원 중단 상태입니다. 아래 링크는 SweetAlert의 Github 링크인데 굉장히 오랜 기간 동안 업데이트가 안 되고 있는 걸 볼 수 있습니다.

https://github.com/t4t5/sweetalert

그래도 사용하는데 큰 문제는 없습니다. 지금 제가 있는 프로젝트도 SweetAlert2가 아닌 SweetAlert를 잘 사용하고 있습니다. 공식 사이트도 아직 잘 동작하고 있고, 사용법도 아주 쉽고, 깔끔하게 잘 나와 있네요. 디자인도 SweetAlert2에 비해 엄청 구리거나 그러지는 않습니다.

https://sweetalert.js.org

새로 만드는 프로젝트라면 당연히 SweetAlert2를 써야 하겠지만 기존 프로젝트가 SweetAlert를 사용하고 있다고 해서 무리하게 바꿀 필요는 없을 것 같습니다.

SweetAlert vs SweetAlert2

두 버전의 가장 큰 차이점은 SweetAlert는 Jquery가 필수로 요구된다는 것이고, SweetAlert2는 그렇지 않다는 것입니다.

그 외에 SweetAlert2가 성능 및 커스터마이징 옵션이 많이 개선되었고, Typescript도 지원하고, 용량도 더 작아졌다고 하네요.

그리고 SweetAlert2는 React, Vue, Angular 모두 잘 지원하지만 SweetAlert는 편법을 써야만 React 등에서 사용할 수 있는 문제가 있습니다.

사용 문법은 조금 다르기 때문에 SweetAlert에서 SweetAlert2로 변경하려면 관련 소스 코드를 모두 수정해야 합니다.

SweetAlert vs SweetAlert2는 당연히 최신 버전인 SweetAlert2의 승리입니다.

SweetAlert2 설치 방법 및 기본 사용법

공식 사이트에 워낙 쉽고, 깔끔하게 나와있기 때문에 여기에서는 링크만 달아 놓겠습니다. 예제 한 번씩 눌러보고, 필요한 소스 복사해서 붙여 넣기만 하면 끝입니다.

https://sweetalert2.github.io

공통 함수 제작해서 사용하는 것은 필수

// SweetAlert (제목, 내용, 아이콘)
swal ( "Oops" ,  "Something went wrong!" ,  "error" );

// SweetAlert2
Swal.fire({
  title: "The Internet?",
  text: "That thing is still around?",
  icon: "question"
});

// SweetAlert (제목, 내용, 아이콘)
swal ( "Oops" ,  "Something went wrong!" ,  "error" );

// SweetAlert2
Swal.fire({
  title: "The Internet?",
  text: "That thing is still around?",
  icon: "question"
});

위 소스 코드를 보면 SweetAlert와 SweetAlert의 문법이 많이 다릅니다. 파라미터 종류는 어차피 똑같습니다.

/*
 * 프로젝트 전반에서 사용할 공통 alert 함수 (utils.js 등에 작성)
 * 이렇게 함수로 감싸두면, 나중에 다른 라이브러리로 교체하거나
 * 기본 디자인(버튼 색상 등)을 한 번에 변경하기 매우 용이합니다.
*/
function showAlert(title, text, icon = 'success') {
  // SweetAlert2 라이브러리가 있는지 확인
  if (typeof Swal !== 'undefined') {
    Swal.fire({
      title: title,
      text: text,
      icon: icon,
      confirmButtonText: '확인' // 버튼 텍스트 등 공통 옵션 설정 가능
    });
  } else {
    // 라이브러리가 없을 경우 기본 alert 사용
    alert(`${title}\n${text}`);
  }
}

// 실제 사용 예시
// showAlert('성공!', '데이터가 성공적으로 저장되었습니다.', 'success');
// showAlert('오류', '서버 통신에 실패했습니다.', 'error');

/*
 * 프로젝트 전반에서 사용할 공통 alert 함수 (utils.js 등에 작성)
 * 이렇게 함수로 감싸두면, 나중에 다른 라이브러리로 교체하거나
 * 기본 디자인(버튼 색상 등)을 한 번에 변경하기 매우 용이합니다.
*/
function showAlert(title, text, icon = 'success') {
  // SweetAlert2 라이브러리가 있는지 확인
  if (typeof Swal !== 'undefined') {
    Swal.fire({
      title: title,
      text: text,
      icon: icon,
      confirmButtonText: '확인' // 버튼 텍스트 등 공통 옵션 설정 가능
    });
  } else {
    // 라이브러리가 없을 경우 기본 alert 사용
    alert(`${title}\n${text}`);
  }
}

// 실제 사용 예시
// showAlert('성공!', '데이터가 성공적으로 저장되었습니다.', 'success');
// showAlert('오류', '서버 통신에 실패했습니다.', 'error');

위의 소스 코드와 같은 느낌으로 공통 함수를 만들어서 써야지 SweetAlert2 문법 그대로 사용하면 나중에 SweetAlert3가 나오거나 SweetAlert2보다 훨씬 좋은 라이브러리 나왔을 때 쉽게 못 갈아탑니다.

제가 지금 있는 프로젝트는 수백 개가 넘는 파일에 수천 번이 넘는 SweetAlert 명령어가 퍼져 있어서 SweetAlert2로 마이그레이션 하는 것은 불가능에 가까운 상태입니다. 귀찮아도 공통 함수 꼭 만들어서 써야 합니다.

Swal이라고도 불리는 SweetAlert2

라이브러리를 사용하려면 항상 처음에 Swal을 입력해야 하기 때문에 많은 개발자들이 Swal(스왈)이라고도 많이 부릅니다.

마치며: Javascript alert 창 꾸미기 SweetAlert2 하나면 충분

SweetAlert2는 비슷한 종류의 라이브러리 중 가장 많이 사용되는 라이브러리이고, 디자인이나 성능도 괜찮고, 기능도 많고, 커스터마이징도 가능하기 때문에 복잡하게 다른 라이브러리하고, 비교해 보지 않고, 그냥 써도 될 것 같다는 게 저의 의견입니다.

제일 중요한 것은 기본 alert, confirm, prompt를 그대로 쓰면 너무 신경 안 쓴 것처럼 보이기 때문에 SweetAlert2를 사용하는 것은 굉장히 좋은 선택이고, 사용법도 엄청 쉽다는 것입니다. 그리고 SweetAlert2를 사용할 거라면 꼭 공통 함수로 한 번 감싸서 사용해야 한다는 것입니다.

사용법이나 기능이 간단하고, 공식 사이트가 워낙 쉽게 잘되어 있기 때문에 저는 이만 글을 마쳐도 될 것 같습니다. 다들 SweetAlert2 이용해서 다들 예쁜 알림 창 손쉽게 만들어봐요.