[개발지식] 팝업/layer popup/모달

Hyo Kyun Lee·2022년 11월 4일
1

개발지식

목록 보기
37/69

1. 팝업

팝업창은 특정 웹사이트 혹은 브라우저에서 또 다른(새로운) 브라우저 페이지, 웹사이트를 띄우는 것이며 광고 및 알람 목적의 창이다.

새로운 브라우저 페이지, 웹사이트를 띄우는 것이므로 기존 브라우저 페이지와는 아무런 관련이 없고, 다만 브라우저에서 해당 창의 제어를 할 수 있다.

팝업창은 새로운 브라우저 페이지를 띄우는, 즉 요청하는 것이기 때문에 트래픽을 증가시키거나 메모리를 불필요하게 사용하는 원인이 될 수 있다. 이러한 이유로 상황에 맞춰 나오는 모달창을 많이 사용한다.

2. layer popup

페이지 위에 하나의 layer을 쌓아서 보여주는 창이다.

팝업창 하단에 보여지는 배경이 어둡게 보여지고, 띄운 창을 강조한다는 점에서 모달과 비슷하지만 모달에서의 행동이 부모 창(배경)에 영향을 준다(부모-자식 관계)라는 점에서 차이점이 있다.

layer popup 내의 행동은 부모 창에 영향을 주지 않는다(다만 창닫기 등의 행위는 이루어질 수 있음)

3. 모달

부모 윈도우(배경 창)으로 돌아가기 전, 사전 상호작용을 필요로 하여 보여지는 창이다.

쿠키허용, 모바일에서의 파일접근권한 동의, 파일 열기, 저장 등의 창을 생각하면 쉽고, 창과 부모창 간의 상호작용이 이루어진다는 점에서 layer popup과 차이점이 있다.

4. 참고자료

팝업과 모달의 차이 - https://chlolisher.tistory.com/101
팝업의 종류(팝업/alert/layer popup/modal...) - https://jeeeeehnmin.tistory.com/entry/%ED%8C%9D%EC%97%85%EC%9D%98-%EC%A2%85%EB%A5%98-%ED%8C%9D%EC%97%85-%EC%95%8C%EB%9F%BF-%EB%A0%88%EC%9D%B4%EC%96%B4-%ED%8C%9D%EC%97%85-%EB%AA%A8%EB%8B%AC-%ED%86%A0%EC%8A%A4%ED%8A%B8-%ED%8C%9D%EC%97%85

0개의 댓글