SweetAlert2로 폼 제출 전 최종 확인 모달 구현하기｜실무형 UX 개선 팁

글쓴이 /

폼 제출 시 바로 서버로 데이터를 전송하는 대신, SweetAlert2로 확인 모달을 띄워 사용자에게 한 번 더 검토할 기회를 주면 실수를 크게 줄일 수 있습니다. 이 글에서는 기본 확인 모달부터 입력 값 요약 표시, 최종 전송 처리까지 실무형 예제로 구현해보겠습니다.

SweetAlert2 확인 모달의 필요성

폼 UX에서 중요한 점은 사용자가 실수하지 않도록 돕는 것입니다.
예를 들어 회원가입, 예약, 결제처럼 중요한 데이터를 다루는 경우, 최종 확인 과정을 추가하면 불필요한 취소나 CS 발생을 줄일 수 있습니다.

👉 SweetAlert2 간단히 사용법 알아보기

💡 RAO TIP
사용자가 반드시 확인해야 하는 중요한 입력폼일수록 SweetAlert2 같은 확인 모달이 필수입니다.
특히 결제, 약관 동의, 개인정보 입력 등에서는 확실히 안내하세요.

기본 확인 모달 구현하기

먼저, SweetAlert2의 기본 확인 모달을 사용해 봅시다.

HTML 예시

<form id="myForm">
  <input type="text" name="username" placeholder="이름 입력" required>
  <input type="email" name="email" placeholder="이메일 입력" required>
  <button type="submit">제출하기</button>
</form>
HTML

JavaScript 예시

document.getElementById('myForm').addEventListener('submit', function(e) {
  e.preventDefault(); // 기본 폼 제출 막기

  Swal.fire({
    title: '제출하시겠습니까?',
    text: '입력한 정보를 다시 확인해주세요.',
    icon: 'warning',
    showCancelButton: true,
    confirmButtonText: '제출',
    cancelButtonText: '취소',
  }).then((result) => {
    if (result.isConfirmed) {
      this.submit(); // 확인 시 폼 전송
    }
  });
});
JavaScript

설명

  • e.preventDefault()로 폼의 기본 전송을 막고
  • SweetAlert2 모달에서 확인 버튼 클릭 시 실제 전송하도록 처리합니다.

코드 실행

입력 값 요약 모달 만들기

실무에서는 단순 확인보다는 사용자가 입력한 주요 정보를 보여주면 더 좋습니다.

예시 코드

document.getElementById('myForm').addEventListener('submit', function(e) {
  e.preventDefault();

  const formData = new FormData(this);
  const username = formData.get('username');
  const email = formData.get('email');

  Swal.fire({
    title: '제출 내용 확인',
    html: `
      <p><strong>이름:</strong> ${username}</p>
      <p><strong>이메일:</strong> ${email}</p>
    `,
    icon: 'info',
    showCancelButton: true,
    confirmButtonText: '확인 후 제출',
    cancelButtonText: '취소'
  }).then((result) => {
    if (result.isConfirmed) {
      this.submit();
    }
  });
});
JavaScript

💡 RAO TIP

  • 예약 정보, 결제 금액, 선택 옵션 등 핵심 데이터만 간결하게 요약해서 보여주세요.
  • 너무 많은 정보를 한 번에 보여주면 오히려 UX가 떨어집니다.

코드 실행

Ajax 전송과 함께 사용하기

폼 전송을 Ajax로 처리한다면 다음처럼 SweetAlert2와 연계할 수 있습니다.

JavaScript 예시

document.getElementById('myForm').addEventListener('submit', function(e) {
  e.preventDefault();

  const formData = new FormData(this);

  Swal.fire({
    title: '제출하시겠습니까?',
    icon: 'question',
    showCancelButton: true,
    confirmButtonText: '제출',
    cancelButtonText: '취소',
  }).then((result) => {
    if (result.isConfirmed) {
      fetch('/form_submit.php', {
        method: 'POST',
        body: formData
      })
      .then(response => response.json())
      .then(data => {
        Swal.fire('완료!', data.message, 'success');
      })
      .catch(() => {
        Swal.fire('오류!', '서버 요청 중 문제가 발생했습니다.', 'error');
      });
    }
  });
});
JavaScript

설명

  • SweetAlert2 확인 모달 → fetch() → 결과에 따라 성공/실패 알림 모달을 보여줍니다.
  • 실무에서는 이 패턴이 가장 많이 사용됩니다.

마무리

SweetAlert2를 활용하면 사용자가 폼을 제출하기 전에 내용을 한 번 더 검토할 수 있어 UX를 크게 향상시킬 수 있습니다.
또한 단순 확인뿐 아니라 Ajax 처리, 입력 값 요약, 경고 메시지 표시 등 다양한 패턴으로 확장 가능합니다.
다음 글에서는 파일 업로드 진행률 표시 기능을 SweetAlert2와 함께 구현해보겠습니다.

Summary in English

Learn how to implement a confirmation modal using SweetAlert2 before form submission. This guide covers basic confirmation dialogs, summarizing user input, and integrating Ajax for seamless, real-world UX improvements.

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

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

목차

→ 목차
위로 스크롤