JavaScript로 알림창(Alert Box) 만드는 방법 – 초보자를 위한 완벽 가이드

알림창(Alert Box)이란 무엇인가요?

알림창(Alert Box)은 사용자가 클릭, 스크롤, 입력 등 특정 동작을 수행했을 때 화면에 나타나는 작은 팝업 창입니다. 주로 사용자에게 문제 상황을 경고하는 용도로 쓰이지만, 단순히 정보를 전달하는 목적으로도 활용됩니다.

가장 흔한 예시 중 하나는 폼 제출 상황입니다. 사용자가 제출 버튼을 눌렀는데 필수 입력 항목을 채우지 않았다면, 알림창이 나타나면서 문제가 무엇인지 설명해 줍니다.

JavaScript로 알림창(Alert Box) 만드는 방법 – 초보자를 위한 완벽 가이드

JavaScript로 알림창 만드는 방법

위 스크린샷과 똑같은 알림창을 직접 만들어 보겠습니다.

1단계: 트리거 역할을 할 버튼 추가하기

먼저, 알림창을 띄울 버튼 요소를 HTML에 추가합니다.

<button onclick="missingFieldWarningPopup()">Submit form</button>

2단계: JavaScript 함수 작성하기

이제 .js 파일에 아래 함수를 추가합니다.

function missingFieldWarningPopup() {
  alert("You forgot to fill out all the required input fields!")
}

코드 동작 원리: 버튼 요소에는 onclick 속성이 클릭 이벤트 트리거로 지정되어 있습니다. 사용자가 버튼을 클릭하면 클릭 이벤트가 missingFieldWarningPopup() 함수를 호출하고, 이 함수가 alert() 팝업 창을 띄워 안에 담긴 문자열(텍스트)을 화면에 표시합니다.

인라인 방식으로 함수 추가하기

별도의 .js 파일 없이 인라인(inline) 방식으로 함수를 작성하고 싶다면, HTML 문서의 <head> 요소 안에 아래 코드를 넣으면 됩니다.

<script type="text/javascript">
  function missingFieldWarningPopup() {
    alert("You forgot to fill out all the required input fields!")
  }
</script>

알림창 사용 시 알아두면 좋은 점

실행 흐름 차단: alert()가 호출되면 사용자가 확인 버튼을 누르기 전까지 페이지의 다른 JavaScript 코드 실행이 일시적으로 멈춥니다.
디자인 커스터마이징 불가: 기본 알림창은 브라우저가 제공하는 UI이기 때문에 색상, 폰트 등 스타일을 변경할 수 없습니다. 디자인이 중요하다면 HTML과 CSS로 직접 만든 커스텀 모달(modal)을 사용하는 것이 좋습니다.
사용자 경험 고려: 알림창을 남용하면 사용자가 불편함을 느낄 수 있으므로, 정말 필요한 경고나 중요한 정보 전달 시에만 사용하는 것이 바람직합니다.