웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리

HOME > webdevetc

웹에서 모달창과 팝업창의 장단점 알아보기

Last Modified : 2018-01-01 / Created : 2016-03-24
45,228
View Count
웹에는 숨겨진 영역이나 별도 공간을 필요한 상황에만 보여주는 다양한 인터페이스 요소가 존재한다. 가장 넓리 쓰이는 것들 중 하나가 팝업창모달창이다. 이 둘 사이의 차이점과 특징에 대하여 알아보고 어떤 장단점이 있는지도 알아보고자 한다.




# 팝업창 그리고 모달창의 공통점과 다른점

먼저 이 둘의 공통점과 차이점이 무엇인지 간략하게 알아보면 아래와 같다.

! 팝업창과 모달창의 공통점

이 둘의 공통점은 특정 영역의 위치에 원하는 사이즈의 별도 레이어를 만들어 방문자에게 원하는 시점에 보여준다는 점이다. 또한 현재 보여지는 웹사이트의 콘텐츠를 가릴 수는 있으나 없애거나 볼 수 없게 만드는 것이 아니라 사용자인 클라이언트가 원할 때 볼 수 있다.


! 팝업창과 모달창의 다른점

팝업창의 경우 웹 시작과 동시에 띄우는 경우가 많다. 하지만 모달창의 경우 중간 중간 사용자에게 보여주는 경우가 많은데 이는 현재 의도하는 목적과 상관없는 경우 주로 팝업창을... 관련있거나 다음 진행을 위해 필요한 내용은 모달창을 사용한다는 차이점이 있다.

또 다른 차이는 팝업창은 사용자가 원할 경우 브라우저의 옵션을 통해 열지 않도록 강제할 수 있는 기능이 있다. 그렇기 때문에 반드시 노출해야하는 부분은 모달창을 사용하는 것이 좋을 것이다.


스크린샷) nytimes.com의 새창이 아닌 레이어 형태의 모달창 모습

모달창은 현재의 페이지 안에 존재하는 하나의 레이어 형태를 띄기 때문에 다른 요소들과 잘 어울려 디자인이 가능하다. 하지만 팝업은 별도 브라우저 창을 이용하며 현재 브라우저창과 상관없이 콘트롤이 가능하다.



# 둘 중 더 효과적인 방법은?

둘 중 무엇이 더 좋으냐는 질문의 SUV차량과 일반 승용차를 비교하는 것과 같다. 즉, 사용자의 쓰임에 따라서 더 적합 것을 판단해 사용하는 것이 중요하다 하겠다.

최근에는 팝업보다는 모달을 활용하는 사람들이 점점 더 많은 것이 사실이다. 특히 팝업창을 띄우는 경우 방문자가 스크립트를 막거나 팝업창을 띄우는 것을 블럭할 경우 이를 보여줄 수 없는 이유도 있다. 또한 전체적인 디자인이 가능한 모달의 경우 웹페이와 톤앤매너를 통일할 수 있으므로 더 효과적일 수 있다는 판단 때문이라 생각된다.

Previous

email html 이미지 또는 요소의 간격, 여백, 흰줄 제거하는 방법

Previous

객체지향언어에서 인스턴스(instance)란 무엇인가