브라우저의 고전 팝업 삼총사: alert(), confirm(), prompt()

웹 개발을 하다 보면 소위 팝업(pop-up) 창을 띄어서 무언가를 알려주거나, 확인을 받거나, 입력을 받아야할 때가 있는데요. 브라우저에서는 아주 오래 전부터 이러한 팝업 창을 띄울 수 있도록 alert(), confirm(), prompt()를 제공하였습니다.

이번 포스팅에서는 간단한 예제를 통해서 이 세가지 함수를 언제 어떻게 사용하는지 알아보겠습니다.

alert() 함수

사용자에게 정보를 전달하는 간단한 팝업 창이 필요하다면 alert() 함수를 사용할 수 있습니다. alert() 함수는 인자로 넘어온 문자열을 그대로 팝업 창에 표시를 해줍니다. 메시지 아래에는 확인 버튼을 클릭하면 팝업 창을 닫을 수 있죠.

const button = document.querySelector("button");
button.addEventListener("click", () => {
  alert("안녕하세요! 👋");
});

위 예제는 사용자가 버튼을 클릭하면 안녕하세요! 👋라는 메시지가 표시된 팝업 창을 뛰웁니다.

참고로 브라우저에 설정된 언어가 한국어일 경우에만 확인 버튼이 생기고, 언어가 영어로 설정이 되어 있다면 OK 버튼이 생길 것입니다. 버튼 텍스트는 브라우저에 설정된 언어에 따라 달라지게 되며, 이 것을 임의로 바꿀 수는 없습니다.

confirm() 함수

confirm() 함수를 사용하면 사용자에게 질문을 하고 YES 또는 NO로 답변을 받을 수 있는 팝업 창을 생성할 수 있습니다. confirm() 함수는 인자로 넘어온 문자열과 함께 확인과 취소 버튼을 팝업 창에 표시를 해줍니다.

아무 값도 반환하지 않는 alert() 함수에 달리, confirm() 함수는 사용자가 확인 버튼을 클릭하면 true를 반환하고, 취소 버튼을 클릭하면 false를 반환합니다. 따라서 if 분기문을 사용하여 사용자의 선택에 따라서 다른 로직을 실행해줄 수 있습니다.

const button = document.querySelector("button");
button.addEventListener("click", () => {
  const ok = confirm("확실하시죠? 🤔");
  if (ok) {
    button.textContent = "확인 ✅";
  } else {
    button.textContent = "취소 ❌";
  }
});

위 예제는 사용자가 버튼을 클릭하면 확실하시죠? 🤔라는 메시지가 표시된 팝업 창을 뛰웁니다. 사용자가 확인 버튼을 클릭하면 버튼 텍스트를 확인 ✅로 바꾸고, 취소 버튼을 클릭하면 버튼 텍스트를 취소 ❌로 바꿉니다.

자바스크립트로 이벤트 처리하는 방법에 대해서는 별도 포스팅에서 자세히 다루고 있으니 참고 바랍니다.

prompt() 함수

사용자로부터 어떤 값을 직접 입력받는 팝업 창을 뛰우고 싶다면 prompt() 함수를 사용하면 됩니다. 따라서 단순히 YES, NO로 대답을 받는 confirm() 함수에 비해서, 사용자에게 좀 더 열린 질문을 하고 좀 더 열린 답변을 받을 수 있습니다.

prompt() 함수는 두 개의 문자열을 인자를 받는데요. 첫 번째 인자는 입력란 위에 표시될 메시지, 두 번째 인자는 입력란에 기본적으로 채워질 초기값입니다. prompt() 함수는 사용자가 입력한 문자열을 반환되며, 사용자가 취소 버튼을 클릭할 경우 null을 반환됩니다.

const button = document.querySelector("button");
button.addEventListener("click", () => {
  const name = prompt("이름을 입력하세요:", "홍길동");
  if (name) {
    button.textContent = `반갑습니다, ${name}님! 😄`;
  } else {
    button.textContent = "이름을 입력하시지 않으셨습니다. 😢";
  }
});

위 예제는 이름을 입력하세요:라는 메시지와 함께 기본 값으로 홍길동이 표시된 팝업 창을 생성합니다. 사용자가 입력란에 문자열을 입력하과 확인 버튼을 누르면, 해당 이름이 포함된 문자열로 버튼 텍스트를 설정해줍니다. 사용자가 취소 버튼을 누르면, 버튼 텍스트를 이름을 입력하시지 않으셨습니다. 😢로 설정해줍니다.

제약 사항

alert(), confirm(), prompt()는 정말 사용하기 간편하지만 팝업 창의 모습이 브라우저마다 약간씩 다릅니다. 팝업창의 디자인이 전반적으로 투박한 편이죠. 게다가 CSS로 스타일을 하는 것도 불가능합니다. 그래서 세련되고 모던한 느낌의 웹사이트를 만들 때는 대부분 커스텀(custom) 팝업 UI를 구현하거나 잘 알려진 라이브러리를 사용하기 경우가 많습니다.

그럼에도 불구하고 미학적인 부분이 크게 중요하지 않은 사내 웹사이트나 관리자용 페이지를 구현할 때는 여전히 나쁘지 않은 선택지가 될 수 잇습니다. 요즘에도 인터넷 라우터의 관리자용 페이지에서 로그인을 할 때 처럼 아주 단순한 웹 애플리케이션에서 종종 볼 수 있는 것 같습니다.

특히 개발자들은 디버깅할 때 alert(), confirm(), prompt()를 유용하게 쓰시는 분들이 많습니다. 이 세 개의 함수는 공통적으로 사용자가 팝업 창의 버튼을 클릭할 때까지 기다리는 특성이 있기 때문에, 마치 디버거의 브레이크 포인트(break point)처럼 어떤 코드의 실행을 멈추기 위해서 사용할 수가 있습니다.

마치면서

지금까지 브라우저의 고전 팝업 삼총사인 alert(), confirm(), prompt() 함수에 대해서 살펴보았습니다.