최근 모던 웹 개발에서는 alert() 창을 잘 쓰지 않는 추세입니다. 디자인을 해치고, 사용자 경험(UX)을 끊어먹기 때문이죠. 대신 예쁜 디자인의 '토스트 메시지(Toast)'나 '모달(Modal)'을 주로 사용합니다.
하지만 크롬 확장프로그램, 특히 자동화 도구를 개발할 때는 여전히 alert()가 강력한 무기가 될 때가 있습니다. 오늘은 Grok 동영상 생성 코드를 예시로, 왜 때로는 세련된 토스트 대신 투박한 경고창을 써야 하는지 알아보겠습니다.
alert() vs showToast(): 무엇이 다른가?
showToast() : 비동기 알림
- 특징: 화면 하단에 잠시 나타났다 사라지는 메시지.
- 장점: 작업 흐름을 방해하지 않고 매끄럽다.
- 단점: 사용자가 못 보고 지나칠 수 있다. 오류가 나도 다음 코드가 실행될 위험이 있다.
alert() : 동기 알림
- 특징: 사용자가 '확인'을 누를 때까지 브라우저의 모든 동작을 멈춤.
- 장점: 사용자가 무조건 보게 됨. 코드 실행을 강제로 일시 정지시킴.
- 단점: 디자인 커스터마이징 불가, 다소 강압적인 느낌.
실제 코드 사례: Grok 자동화 기능
우리가 개발 중인 기능은 이미지를 그록(Grok) AI에게 보내 동영상을 만드는 기능입니다. 여기서 이미지 변환에 실패했을 때를 가정해 봅시다.
❌ 기존 방식 (Toast 사용)
if (!res.success) {
this.showToast('이미지 변환 실패', 'error');
// 사용자가 메시지를 못 보고 멍하니 기다릴 수 있음
}토스트 메시지는 3초 뒤에 사라집니다. 만약 사용자가 다른 곳을 보고 있었다면, 왜 동영상이 안 만들어지는지 영문도 모른 채 기다리게 됩니다.
✅ 변경된 방식 (Alert 사용)
if (!res.success) {
alert('❌ 이미지 변환에 실패했습니다.');
return; // 확실한 중단
}alert()를 쓰면 팝업창이 화면 중앙에 뜨고 사용자가 '확인'을 누르기 전까지는 아무것도 할 수 없습니다. 즉, "에러가 났으니 확인하고 조치해라!"라고 강력하게 신호를 주는 것입니다.
확장 프로그램 개발 시 alert() 활용 팁
- 치명적인 오류에만 사용하세요:
단순한 안내 문구("저장되었습니다")는 토스트가 좋지만, 프로세스를 더 이상 진행할 수 없는 오류("API 키 없음", "이미지 로드 실패")는alert가 효과적입니다. - return과 함께 사용하세요:
if (error) { alert('에러 발생!'); return; // 여기서 코드 실행을 멈춰야 함 }경고창만 띄우고 코드가 계속 실행되면 더 큰 오류를 낳습니다.
- Background.js에서는 사용 금지! (주의)
매니페스트 V3의 서비스 워커(background.js)에서는alert()를 사용할 수 없습니다.alert()는 오직 popup.js나 content script와 같이 화면이 있는 곳에서만 작동합니다.
결론
"보기 좋은 떡이 먹기도 좋다"는 말이 있지만, 개발에서 가장 중요한 건 "정확한 동작"과 "명확한 피드백"입니다.
사용자가 오류를 인지하지 못해 발생하는 혼란을 막고 싶다면, 가끔은 구식처럼 보이는 alert() 함수가 가장 세련된 해결책이 될 수 있습니다.
오늘의 교훈: 디자인보다 중요한 건 확실한 전달력이다!
 함수의 재발견: 왜 구식 방법을 다시 쓸까?){kind=link}