JavaScript에서 사용할 수 있는 팝업 상자(대화 상자)의 종류와 활용법

JavaScript는 별도의 라이브러리나 플러그인 없이 브라우저 자체 기능만으로 사용자와 소통할 수 있는 3가지 팝업 상자를 제공합니다. 바로 Alert(경고), Confirm(확인), Prompt(입력)입니다.

1. Alert — 단순 알림용 경고 상자

window.alert() 메서드는 지정된 내용과 함께 확인(OK) 버튼 하나만 있는 경고 대화 상자를 화면에 표시합니다.

예를 들어 아래 스크립트를 실행하면 "This is an alert"라는 내용과 확인 버튼이 포함된 경고 상자가 나타납니다.

<script>
    alert("This is an alert");
</script>

Alert 상자는 사용자로부터 별도의 응답을 요구하지 않고, 단순히 메시지 전달과 확인만 필요한 경우에 사용하는 것이 좋습니다. 예를 들어 저장 완료 안내나 유효성 검사 실패 알림 등이 적합한 용도입니다.

window.confirm() 메서드는 선택적인 메시지와 함께 확인(OK)과 취소(Cancel) 두 개의 버튼을 가진 모달 대화 상자를 표시합니다.

아래 스크립트를 실행하면 "Please confirm this action"이라는 내용과 함께 확인·취소 버튼이 나타나며, 사용자의 선택에 따라 불리언(Boolean) 값이 반환됩니다.

<script>
    let bool = confirm("Please confirm this action");
    console.log(bool);
</script>

사용자가 확인 버튼을 클릭하면 true가, 취소 버튼을 클릭하면 false가 콘솔에 출력됩니다. 이 특성 덕분에 삭제 작업 전 재확인 요청처럼 분기 처리가 필요한 로직에 자주 활용됩니다.

참고로 이러한 대화 상자는 모달(Modal) 창입니다. 즉, 상자를 닫기 전까지는 페이지의 다른 인터페이스 요소에 접근할 수 없으므로, 남발하면 사용자 경험을 해칠 수 있다는 점을 유의해야 합니다.

window.prompt() 메서드는 메시지를 보여주고 사용자에게 텍스트 입력을 요청하는 대화 상자를 표시합니다.

아래 스크립트를 실행하면 "Please enter your name"이라는 내용과 함께 확인·취소 버튼이 나타나며, 사용자가 입력한 문자열(String)이 반환됩니다.

<script>
    let name = prompt("Please enter your name");
    console.log(name);
</script>

Prompt 상자에 이름을 입력하고 확인을 누르면, 입력한 값이 콘솔에 그대로 출력됩니다. 만약 취소 버튼을 누르면 null이 반환되므로, 실무에서는 반환값이 null인지 반드시 검사하는 것이 좋습니다.

세 가지 팝업 상자는 구현이 간단하지만 디자인 커스터마이징이 불가능하다는 한계가 있습니다. 따라서 간단한 데모나 학습 목적으로는 유용하지만, 실제 서비스에서는 UI 일관성을 위해 직접 제작한 모달 컴포넌트를 사용하는 것이 권장됩니다.