SweetAlert는 웹 개발에서 많이 사용되는 경고창 라이브러리로 유명합니다. 이 라이브러리를 사용하면 작성한 코드에 간단하게 경고창을 추가할 수 있으며, 다양한 디자인 테마와 애니메이션 효과를 적용할 수 있습니다.

이번에는 SweetAlert와 함께 텍스트 애니메이션 효과도 적용해보겠습니다. 텍스트 애니메이션은 사용자의 시선을 집중시키고, 웹 페이지에 흥미를 끌어주는 효과를 줄 수 있습니다.

SweetAlert 설치

먼저 SweetAlert를 설치해야 합니다. 아래 명령을 사용하여 SweetAlert 패키지를 설치합니다.

npm install sweetalert2

설치가 완료되면 웹 프로젝트에 SweetAlert를 import하여 사용할 수 있습니다.

SweetAlert 경고창 표시하기

다음은 SweetAlert를 사용하여 간단한 경고창을 표시하는 예제입니다.

import Swal from 'sweetalert2';

Swal.fire({
  title: '경고!',
  text: '안전하지 않은 동작을 시도하고 있습니다.',
  icon: 'warning',
  confirmButtonText: '확인',
});

위 예제에서는 Swal.fire 함수를 호출하여 SweetAlert 경고창을 표시했습니다. title 속성은 경고창의 제목을, text 속성은 내용을 지정합니다. icon 속성을 사용하여 경고 아이콘을 설정할 수 있습니다.

텍스트 애니메이션 효과 추가하기

이제 SweetAlert에 텍스트 애니메이션 효과를 추가해보겠습니다. SweetAlert는 애니메이션 효과를 지원하는 다양한 클래스를 제공합니다.

import Swal from 'sweetalert2';

Swal.fire({
  title: '경고!',
  text: '안전하지 않은 동작을 시도하고 있습니다.',
  icon: 'warning',
  confirmButtonText: '확인',
  customClass: {
    title: 'animated jello',
    text: 'animated heartBeat',
    confirmButton: 'animated pulse'
  }
});

위 예제에서는 customClass 속성을 사용하여 텍스트 애니메이션을 적용했습니다. title 클래스에는 animated jello를, text 클래스에는 animated heartBeat를, confirmButton 클래스에는 animated pulse를 적용했습니다.

추가적으로, animate.css 라이브러리를 사용하여 다양한 애니메이션 효과를 적용할 수 있습니다. 필요한 애니메이션 효과의 클래스명을 customClass 속성에 설정하면 됩니다.

결론

SweetAlert를 사용하여 경고창을 표시하고, 텍스트 애니메이션 효과를 추가하는 방법을 알아보았습니다. SweetAlert와 텍스트 애니메이션을 적절하게 활용하면 더욱 동적이고 흥미로운 웹 페이지를 만들 수 있습니다.

참고자료:

• SweetAlert 공식 문서
• animate.css 공식 문서