모달창 VS 팝업창, 차이가 뭔데?

"팝업창 말고 모달창으로 만들어줘~"

"이번 모달창은 iframe으로 만들어~"

 

입사 초기에 모달=팝업 이라고 생각했던 무지한 나에게 이런 요구사항들은 당황스러웠다.

html 공부할 때 그저 모달창은 div로 묶어 만든다...는 식으로 들었기 때문에, 정확하게 팝업과의 차이를 모르겠더라.

 

그래서 그 개념을 정리할 필요성을 느꼈다.

 

**팝업창

우선 팝업창이란 현재 열려있는 브라우저 페이지에 또다른 브라우저 페이지를 띄우는 것을 말한다. 창 + 창n 인 것이다. 브라우저에서 이 창을 열기 닫기를 제어할 수 있다. (브라우저에서 팝업창을 강제로 막아놓을 경우 보이지 않는다)

자바스크립트로 팝업창을 띄울 때,

window.onload = function(){

  window.open("popup.html", "", "width=300, height=300");

} // 브라우저가 로드됐을 때 popup.html을 너비 300 높이 300의 창으로 띄운다.

 

**모달창

모달창은 기존의 브라우저 페이지 위에 새로운 윈도우 창이 아닌, 레이어를 까는 것을 말한다. 모달창은 제거를 하지 않고도 페이지를 이동하면 자연히 사라진다. 기존의 페이지와 부모-자식 관계를 갖는다. 브라우저의 새 창 제어 옵션에는 전혀 영향을 받지 않는다.

 

 

1. 모달창과 팝업창 목적은 같다.

창을 띄운다는 것은 특정 내용을 사용자에게 어필하고 싶다는 뜻이다. 프로모션을 진행하거나, 서비스에 대한 공지, 주의사항, 안내문 등을 전달해야할 때. 또는 강조해야할 때 새 창을 이용한다.

 

2. 요즘엔 팝업창을 잘 쓰지 않는다.

예전에는 한 페이지가 로드되면 팝업창이 4~5개씩 뜨기도 했다. 하지만 이는 사용자 입장에서 일일이 X를 누르며 지워야하는 불편함이 있다. 불필요한 팝업창의 등장은 강조해야하는 콘텐츠의 노출을 되려 떨어뜨리는 악효과를 낳는다. 

+ 지나치게 많은 수의 팝업창 역시 지양해야 한다.

또 브라우저 옵션에서 팝업창을 차단한 사용자는 팝업창을 볼 수 없다..

(그럼에도 여전히 많은 페이지들은 팝업창을 띄운다. 사용자의 시선을 끌기에 팝업창이 유용하기 때문)

 

3. 팝업창은 재활용+이동이 자유롭다.

팝업창의 경우 기존의 웹페이지와 분리된 상태에서 코딩을 하기 때문에 비교적 작업 과정이 수월하다. 또 일단 팝업창을 만들어두면 언제든 재활용이 가능하며, 페이지별 이동이 자유롭다. 

그래서 이런 팝업창의 이점을 모달창에 적용한 것이 iframe을 이용한 새창띄우기다. 

 

4. 팝업+모달 = iframe 모달

iframe을 통해 모달창 생성을 하면, 모달의 형태로 브라우저 위에 새 레이어가 깔린다. 근데 이 레이어에는 기존 페이지와 별도의 html으로 구현된다. 그래서 개인적인 생각으로는 팝업+모달의 기능을 다 하고 있다고 봄.

별도의 html.. 분리됐다고 보기는 어려운데 이는 기존에 열려있던 페이지의 자식요소로 존재하기 때문. 서로 부모와 자식요소로 호출이 가능하다.

 

자바스크립트 호출 방식도 팝업창과 동일하다.

window.onload = function(){

  window.open("popup.html", "", "width=300, height=300");

} // 브라우저가 로드됐을 때 popup.html을 너비 300 높이 300의 창으로 띄운다.