SweetAlert2 이미지 & HTML 콘텐츠 삽입 완벽 가이드

글쓴이 /

“알림창이 이렇게 멋질 수 있다고?”
SweetAlert2는 단순한 경고창을 넘어, 이미지 미리보기·폼·동영상 임베드까지 가능하게 해줍니다.
지금 바로 실전 예제를 따라 해보세요. 5분이면 팝업 UI가 달라집니다.

SweetAlert2에 이미지와 HTML을 삽입하면 디자인과 기능을 자유롭게 커스터마이징할 수 있어 다양한 상황에 폭넓게 활용할 수 있습니다. SweetAlert2의 간단한 사용법은 아래 포스팅에서 확인해보세요.
👉 사용법 포스팅 보러 가기
👉 SweetAlert2 공식 웹페이지 보러 가기

SweetAlert2로 이미지(썸네일, 미리보기)와 HTML 콘텐츠(폼, 카드, 동영상)를 팝업에 넣는 방법을 정리했습니다. 기본 이미지 삽입, 동적 로드, 카드형 HTML, 폼 검증, 동영상 임베드까지 실전 예제와 함께 보안·접근성 팁도 제공합니다.

SweetAlert2 이미지 삽입 예제 코드

Swal.fire({
  title: '짬뽕왕',
  text: '짬뽕 사진입니다.',
  imageUrl: 'https://exploretechlife.com/wp-content/uploads/2025/07/daegu_jjamppongwang_review.png',
  imageAlt: '짬뽕 사진',
  imageWidth: 800
});
JavaScript

💡 Tip: 이미지 팝업은 사용자가 클릭하고 싶게 만드는 대표 기능입니다. 버튼에 “미리보기” 같이 행동 유도형 텍스트를 사용하세요.

SweetAlert2 카드형 HTML 삽입 예제

Swal.fire({
  title: '상품 정보',
  html: `
    <h3>진한 짬뽕</h3>
    <img src="https://exploretechlife.com/wp-content/uploads/2025/07/daegu_jjamppongwang_review.png" style="width:100%;border-radius:8px"/>
    <p><b>가격:</b> 9,000원</p>
  `,
  confirmButtonText: '장바구니 담기'
});
JavaScript

💡 Tip: CTA(Call to Action)는 명확하게!
예: “확인” 대신 “장바구니 담기” → 클릭률 상승.

SweetAlert2 HTML 폼 & 데이터 전송 예제

const { value: formValues } = await Swal.fire({
  title: '의견 보내기',
  html:
    '<input id="name" class="swal2-input" placeholder="이름">' +
    '<textarea id="msg" class="swal2-textarea" placeholder="의견"></textarea>',
  preConfirm: () => ({
    name: document.getElementById('name').value,
    msg: document.getElementById('msg').value
  })
});
JavaScript

SweetAlert2 동영상 임베트 예제

Swal.fire({
  title: '동영상 보기',
  html: `<div style="position:relative;padding-bottom:56.25%;">
           <iframe src="https://www.youtube.com/embed/dLWgVWcB-o4?si=eL3_IEXT6TFI_QMG"
             style="position:absolute;top:0;left:0;width:100%;height:100%" allowfullscreen></iframe>
         </div>`,
  width: 800,
  showCloseButton: true,
  showConfirmButton: false
});
JavaScript

실무 최적화 포인트

  • 이미지에는 항상 imageAlt 제공 → 접근성(검색엔진최적화) 향상.
  • 사용자 입력을 html에 넣을 땐 반드시 XSS 방지 처리.
  • 팝업 폭(width)을 모바일 화면에 맞춰 반응형으로 조정.
  • 반복 사용되는 팝업은 함수로 모듈화.

마무리

SweetAlert2는 이미지와 HTML 콘텐츠를 넣어 알림창 이상의 UX를 제공합니다. 실전 예제와 RAO 팁을 적용하면, 단순한 팝업도 클릭을 부르는 인터랙션 요소로 바뀝니다. 예쁜 알림창에 원하는 이미지와 HTML 코드를 삽입해서 나만의 알림창을 만들어 보세요.

위로 스크롤