커스텀 팝업(얼럿)을 만들어 띄우는 기능을 간단하게 구현해보았다. 그냥 브라우저에서 기본적으로 제공하는 alert와 confirm을 사용하면 좋으련만, 팝업/모달 창과의 디자인적 통일성과 심미성 때문인지 별도로 디자인된 커스텀 alert/confirm을 사용할 것이 요청되는 곳이 많다. 구현한 코드를 응용하여 보다 복잡한 모달창을 만들 수도 있다.

얼럿, 모달, 팝업: 어떻게 다른가

해당 내용이 정리된 stackexchange 글
참고한 다른 글

명확히 기능과 특성을 구분해 지칭하기보다는 혼용해 쓰이는 경우가 많다. 나도 부모 창 위에 떠다니는 것은 다 퉁쳐서 팝업으로 부르는 경향이 있다.. 이 글에서도 팝업이라는 용어를 그러한 방식으로 사용하고 있다

• Alert

  • 간단한 메시지를 노출하며 이에 대한 사용자의 즉각적인 대응을 요청함. 사용자가 할 수 있는 대응은 확인이나 취소 버튼을 클릭하는 것으로 한정되어 있다
  • 대응하여 얼럿 창을 해제하기 전까지는 부모 창과 상호작용하는 것을 금지한다
  • 확인버튼만 있는 것은 alert, 취소나 그와 유사한 버튼 또한 제공하는 것은 confirm으로 불린다. confirm을 alert의 하위 개념으로 취급하는 곳도 있고, 별개의 개념으로 설명하는 곳도 있었다. 본 예시에 등장하는 것은 엄밀히 말하면 confirm이다

• Modal/Dialog

  • 단순 메시지보다 더 많은 정보를 노출한다
  • 떠 있는 동안에는 부모 창과 상호작용하는 것을 막지만 직접적으로 대응하지 않고도 창 밖의 영역을 클릭해 해제할 수 있다.

• Popup

  • 즉각적인 대응을 요구하지 않으며, 해제하지 않고도 부모 창과 상호작용할 수 있다
  • Alert와 Modal와 같이 부모 창 위에 나타나는 요소들을 Popup으로 통칭하기도 한다
  • 대표적인 예시로는 인터넷 쇼핑몰에 접속하면 자동으로 뜨는 광고 및 공지들이 있다

구현

1. 띄울 팝업을 HTML로 만들고 팝업 내부 조작과 관련된 코드를 작성한 후 hidden 상태로 숨겨둔다

• 사이트 내에서 공통적으로 사용하는 alert 및 confirm은 퍼블리셔가 footer 등지에 만들어 숨겨둘 것이다
• 띄울 팝업과 그에 동반되는 코드의 분량이 많을 경우, 혹은 다른 페이지에서도 별도의 파일로 분리하는 것도 좋다.

  	<!-- JSP의 예 -->
      <jsp:include page="/WEB-INF/jsp/popup/popupExample.jsp />

• 실제 프로젝트에서는 퍼블리셔가 이보다는 더 보기 좋게 디자인을 적용하고, z값과 위치를 설정하고, 팝업이 떠 있는 동안 팝업과 무관한 조작을 하지 못하도록 dim 처리한 레이어를 까는 등의 작업을 해놓을 것이다

2. 사용자가 특정 버튼을 클릭하는 등의 행동을 할 시 팝업이 열리도록 적절히 조치한다

• 여기서는 $("#btn-showPopup").on("click", () => { $("#confirmPopup").show(); })등의 코드를 작성해 직접적으로 숨겨진 팝업을 show했지만 현업에서는 보다 편하게 팝업을 노출 및 숨김 처리하고 안에 들어갈 콘텐츠를 설정할 수 있도록 퍼블리셔 등의 프론트 관계자들이 전용 함수를 작성해줄 수도 있다. 꼭 확인해보자.

코드

• javascript

  import $ from "https://esm.sh/jquery";
  
  $("#btn-showPopup").on("click", () => {
    $("#confirmPopup").show();
  })
  
  $("#btn-close").on("click", () => {
    $("#confirmPopup").hide();
  })
  
  $("#btn-confirm").on("click", () => {
    // "확인" 클릭 시 실행할 코드
    document.body.style.backgroundColor = "gray";
    $("#confirmPopup").hide();
  })

• HTML

  <button type="button" id="btn-showPopup">show alert</button>
  
  <div id="confirmPopup" class="popup-wrap" aria-modal="true" hidden>
    <div class="popup-inner">
      <div class="popup-header">
        <h2 class="popup-title">저는 얼럿이예요!</h2>
      </div>
      <div class="popup-body">
        <p>그렇습니다. 저는 얼럿입니다. <br>배경 색을 회색으로 변경하시겠습니까?</p>
      </div>
      <div class="popup-footer">
        <div class="btn-area">
          <button type="button" id="btn-close">취소</button>
          <button type="button" id="btn-confirm">확인</button>
        </div>
      </div>
    </div>
  </div>

• CSS

  #confirmPopup {
    border: 1px solid;
    height: 200px;
    width: 300px;
    text-align: center;
    padding-top:20px;
    background-color: white;
  }