최근 모던 웹 개발에서는 alert() 창을 잘 쓰지 않는 추세입니다. 디자인을 해치고, 사용자 경험(UX)을 끊어먹기 때문이죠. 대신 예쁜 디자인의 '토스트 메시지(Toast)'나 '모달(Modal)'을 주로 사용합니다.

하지만 크롬 확장프로그램, 특히 자동화 도구를 개발할 때는 여전히 alert()가 강력한 무기가 될 때가 있습니다. 오늘은 Grok 동영상 생성 코드를 예시로, 왜 때로는 세련된 토스트 대신 투박한 경고창을 써야 하는지 알아보겠습니다.

[크롬 확장프로그램 개발] alert() 함수의 재발견: 왜 구식 방법을 다시 쓸까?

alert() vs showToast(): 무엇이 다른가?

 showToast() : 비동기 알림

  • 특징: 화면 하단에 잠시 나타났다 사라지는 메시지.

  • 장점: 작업 흐름을 방해하지 않고 매끄럽다.

  • 단점: 사용자가 못 보고 지나칠 수 있다. 오류가 나도 다음 코드가 실행될 위험이 있다.

 alert() :동기 알림

  • 특징: 사용자가 '확인'을 누를 때까지 브라우저의 모든 동작을 멈춤.

  • 장점: 사용자가 무조건 보게 됨. 코드 실행을 강제로 일시 정지시킴.

  • 단점: 디자인 커스터마이징 불가, 다소 강압적인 느낌.

실제 코드 사례: Grok 자동화 기능

우리가 개발 중인 기능은 이미지를 그록(Grok) AI에게 보내 동영상을 만드는 기능입니다. 여기서 이미지 변환에 실패했을 때를 가정해 봅시다.

❌ 기존 방식 (Toast 사용)

JavaScript
if (!res.success) {
    this.showToast('이미지 변환 실패', 'error');
    // 사용자가 메시지를 못 보고 멍하니 기다릴 수 있음
}

토스트 메시지는 3초 뒤에 사라집니다. 만약 사용자가 다른 곳을 보고 있었다면, 왜 동영상이 안 만들어지는지 영문도 모른 채 기다리게 됩니다.

✅ 변경된 방식 (Alert 사용)

JavaScript
if (!res.success) {
    alert('❌ 이미지 변환에 실패했습니다.');
    return; // 확실한 중단
}

alert()를 쓰면 팝업창이 화면 중앙에 뜨고 사용자가 '확인'을 누르기 전까지는 아무것도 할 수 없습니다. 즉, "에러가 났으니 확인하고 조치해라!"라고 강력하게 신호를 주는 것입니다.

확장 프로그램 개발 시 alert() 활용 팁

  1. 치명적인 오류에만 사용하세요:
    단순한 안내 문구("저장되었습니다")는 토스트가 좋지만, 프로세스를 더 이상 진행할 수 없는 오류("API 키 없음", "이미지 로드 실패")는 alert가 효과적입니다.

  2. 과 함께 사용하세요:

    JavaScript
    if (error) {
    alert('에러 발생!');
    return; // 여기서 코드 실행을 멈춰야 함
}

    경고창만 띄우고 코드가 계속 실행되면 더 큰 오류를 낳습니다.

  3. Background.js에서는 사용 금지! (주의)
    매니페스트 V3(Manifest V3)의 서비스 워커(background.js)에서는 alert()를 사용할 수 없습니다. 백그라운드에서 오류가 났을 때는 팝업으로 메시지를 보내거나 console.error를 사용해야 합니다. alert()는 오직 popup.js나 content script와 같이 화면이 있는 곳에서만 작동합니다.

결론

"보기 좋은 떡이 먹기도 좋다"는 말이 있지만, 개발에서 가장 중요한 건 "정확한 동작"과 "명확한 피드백"입니다.

사용자가 오류를 인지하지 못해 발생하는 혼란을 막고 싶다면, 가끔은 구식처럼 보이는 alert() 함수가 가장 세련된 해결책이 될 수 있습니다. 특히 복잡한 자동화 로직 중간에 에러가 발생했을 때는 더욱 그렇습니다.

오늘의 교훈: 디자인보다 중요한 건 확실한 전달력이다!