팝업(Popup)과 모달(Modal)

팝업과 모달은 강조하고 싶은 내용을 사용자에게 어필하기위해 사용됩니다.

하지만 팝업과 모달에는 큰 차이가 있습니다.

저와 같이 확인해보시면 될 것 같습니다.

 

1. 팝업

- 현재창이 아닌 새로운 창을 활용하여 콘텐츠 내용을 보여줍니다.

- 주로 광고나 새로운 정보를 표시할 때 많이 사용되며 쇼핑몰이나 국가 공공기관에 접속했을경우 수 없이 보셨을거라 생각됩니다.

- 팝업창을 많이 띄우게 되면 트래픽이 증가하게되고, 사용자로부터 반감을 살 수 있습니다.

 

2. 모달

- 팝업과 마찬가지로 정보를 보여주거나 할 때 사용되는데, 팝업과 차이점은 새로운 창을 띄우지 않고 *뷰포트(Viewport)안에 콘텐츠를 중앙에 위치시켜 모달창 안에서만 사용자의 입력을 받도록 합니다.

- 일반적으로 모달이 동작됐을때 주변을 어둡게 만들어 활용하는 모달로 이목이 집중되게 사용합니다.

 

 

*뷰포트(Viewport)란

뷰포트(viewport)는 현재 화면에 보여지고 있는 다각형(보통 직사각형)의 영역입니다. 웹 브라우저에서는, 현재 창에서 문서를 볼 수 있는 부분(전체화면이라면 화면 전체)을 말합니다. 뷰포트 바깥의 콘텐츠는 스크롤 하기 전엔 보이지 않습니다.

**출처 https://developer.mozilla.org/ko/docs/Glossary/Viewport **

 

팝업은 오늘 그만띄우기 같은 체크박스가 있지만, 모달의 경우에는 구현을 해야합니다.

체크박스로 해서 만드셔도 되고 모달을 끔과 동시에 쿠키를 생성하여 하루동안 생성되지 않게 할수도 있습니다.

 

아래코드는 JQuery를 활용하여 간단히 예시로 보여드렸습니다.

<script>
    $j(document).ready(function () {
        var inst = $j('[data-remodal-id=modal]').remodal();

        if( $j.cookie('showOnlyOne') ){
            //hide the div, it is still within the day
            inst.close();
        } else {
            //create the cookie, delete after a day.
            $j.cookie('showOnlyOne', 'showOnlyOne', { expires: 1 });

            inst.open();
        }
    });
</script>