UX·UI - FrontEnd Dev. Story

프론트엔드/정보 용어

[IT 용어정리] 팝업창 VS 모달창, 차이점은 뭘까?

클로이겅쥬 2021. 1. 6. 16:04
반응형

 

팝업창 작업을 하다보니 비슷한 용어가 너무 많다 ㅠㅠ.. 팝업창 / 모달창 / 레이어팝업 / 윈도우팝업 등등...

 

 

웹은 어떤 상황에만 보여지는 공간이 존재하는데 이때 사용하는 것이 팝업창과 모달창이다.

근데 도대체 이 차이가 무엇인가!!!! 그래서 개념을 정리해보려고한다..ㅎ

 

 

 


 

 

 

팝업창 VS 모달창

 

1) 팝업창

팝업창이란 현재 열려있는 브라우저 페이지에 또 다른 브라우저 페이지를 띄우는 것이다.

즉, 창 + 창n 이란 개념이다. 브라우저에서 이 창을 열기 닫기를 제어할 수 있다.

(브라우저에서 팝업창을 강제로 막아놓을 경우 보이지 않는다)

 

 

 

2) 모달창

모달창은 기존의 브라우저 페이지 위에 새로운 윈도우 창이 아닌 레이어를 까는 것을 말한다.

모달창은 제거를 하지 않고도 페이지를 이동하면 자연히 사라진다.

기존의 페이지와 부모-자식 관계를 갖으며, 브라우저의 새 창 제어 옵션에는 전혀 영향을 받지 않는다.

 

 

 

 

 

 

 

 

 

 

 

팝업창과 모달창의 공통점

:  특정 역영의 위치에 원하는 사이즈로 별도의 레이어를 만들어서 사용자에게 어필하고자 하는 뜻이다.

프로모션을 진행, 서비스 공지, 주의사항, 안내문 등을 전달 또는 강조할 때 새 창을 이용한다.

 

 

 

 

팝업창과 모달창의 차이점

팝업창의 경우 웹 시작과 동시에 띄우는 경우가 많고, 모달창의 경우 중간 중간 사용자에게 보여주는 경우가 많다. 

 

: 사용 의도에 관점을 두고 본다면,

팝업창현재 의도하는 목적과 상관없이 뜨는 창이고

모달창다음 진행으로 넘어가기위한 필요에 의해 사용되는 창.

 

:  또 다른 차이는 팝업창은 사용자가 원할 경우 브라우저의 옵션을 통해 열지 않도록 강제할 수 있는 기능이 있다.

그렇기 때문에 반드시 노출해야하는 부분은 모달창을 사용하는 것이 좋을 것이다.

 

:  모달창은 부모창에 종속되는게 많아서 마우스 오른쪽 소스보기를 할수 가 없다.
그리고 모달창 닫기 전에는 부모창에 직접 이벤트를 행할 수 없다.
그에 비해 팝업창은 자유롭다

 

 

 

 

 

 

오늘은 보지않기 팝업 만드는 모듈

 

팝업(Popup)창 / 모달윈도우 / 레이어팝업/오늘은더이상보지않기 / 7일동안(일주일동안) 보지않기

홈페이지에 공지사항이나 이벤트들을 특정 기간동안 안내해줘야 하는 경우가 있다. 그럴때 레이어 팝업이나 팝업창으로 내용을 띄워주는데 이 팝업들을 특정 기간동안 띄우거나 '더 이상 보지

chlolisher.tistory.com

 

 

 

 

 

 


Recommand Posting For you Guys

 

 

* 깃허브? 깃?? 어떻게 쓰는건지 매번 모르겠어요..

* SVN이 뭐죠?

* 팝업창과 모달창이 도대체 어떻게 다른겨...

* 매시업..? 다 뿌시는건가..?

 

 

 

 

 

 

반응형