팝업(Popup)과 모달(Modal)의 차이
UI 디자이너가 알면 좋은 개발 지식
IT회사의 인하우스 디자이너로 10년 넘게 일을 하면서 얻은 것은 웹의 변화에 따라 넓어진 웹에 대한 지식이다. 아이폰이 불러온 모바일 혁명을 통해 다양한 디바이스에 반응하는 디자인을 해야 했을 때, 프레임워크 사용으로 재사용 컴포넌트를 활용해 디자인을 해야 할 때 등 나의 디자인 여정에는 늘 긴밀하게 협업하는 개발자들이 있었다. 그 덕에 개발언어에 대한 두려움이 덜하고 대화 흐름을 어느 정도 쫓아갈 수는 있지만, 네이티브가 아니기에 정말 헷갈리는 개념들이 다수 존재한다. 그중 하나가 팝업과 모달인데, 현재 작업하고 있는 서비스의 UI 디자인을 하면서 다시 들여다본 개념이기에 이김에 정리해두려 한다.
개인적인 경험에 의해 그리고 내가 기억하기 위해 하는 기록이라 오류가 있을 수 있으니 이 점은 부드럽게 댓글로 알려주시길. :-)
팝업(Popup)과 모달(Modal)의 차이
팝업과 모달은 웹 애플리케이션 또는 웹사이트에서 사용되는 인터페이스 요소로, 사용자에게 정보를 보여주거나 상호작용을 유도하는 데 사용된다. 하지만 두 요소는 목적과 동작 방식에서 차이가 있다.
팝업(Popup)
팝업은 현재 창 외에 다른 새 창을 띄우는 것으로, 주로 광고나 알림 메시지 등을 표시하는 데 사용한다. 팝업은 사용자의 주의를 끌고, 상대적으로 짧은 정보를 전달하거나 추가 작업을 유도하는 데 그 목적이 있다. 그러나 팝업을 과도하게 사용하면 사용자 경험에 악영향을 끼치므로 적절히 사용해야 한다. (브라우저 팝업 차단 기능이 켜져 있으면 팝업이 뜨지 않는다.)
팝업(popup) 이미지 출처 : https://www.browserstack.com/docs/automate/selenium/handle-permission-pop-ups모달(Modal)
모달은 팝업과 비슷하게 사용자에게 정보를 보여주거나 추가 작업을 유도하는 데 사용하지만, 모달은 일시적으로 *뷰포트(viewport) 안에 콘텐츠를 중앙에 위치시켜 모달창 안에서만 사용자의 입력을 받도록 한다. 모달창이 나타난 상태에서는 배경이 흐리게 처리되어 모달 외부의 요소에 대한 상호작용이 일시적으로 막히는 특징이 있다. 모달은 주로 정보를 입력받는 양식, 추가적인 정보를 제공하는 데 사용하며, 사용자의 주의를 집중시키는 힘이 팝업보다 강하다. 또한 모달이 기존 페이지의 일부이기 때문에 브라우저에서 팝업 차단 기능이 적용되지 않는다는 장점이 있다.
모달(modal) 이미지 출처 : https://www.jqueryscript.net/lightbox/bootstrap-4-modal-ios.html정리하자면,
팝업은 현재 창을 벗어난 새 창으로 나타나지만, 모달은 현재 창인 *뷰포트(viewport) 안에 나타난다. 팝업은 주로 짧은 정보를 표시하고, 모달은 주로 입력 양식이나 추가 정보를 제공하는 데 사용한다. 팝업은 브라우저의 팝업 차단 기능에 영향을 받고, 모달은 해당 기능에 영향을 받지 않는다.
*뷰포트(viewport)
컴퓨터 그래픽스에서, 뷰포트(viewport)는 현재 화면에 보이고 있는 다각형(보통 직사각형)의 영역입니다. 웹 브라우저에서는 현재 창에서 문서를 볼 수 있는 부분(전체화면이라면 화면 전체)을 말합니다. 뷰포트 바깥의 콘텐츠는 스크롤하기 전엔 보이지 않습니다.
뷰포트 중에서도 지금 볼 수 있는 부분을 시각적 뷰포트 (en-US)라고 부릅니다. 스마트폰에서 사용자가 화면을 확대했을 때와 같은 특정 상황에서 레이아웃 뷰포트 (en-US)의 크기는 변하지 않지만 시각적 뷰포트는 더 작아집니다.
출처 : MDN Web Docs 용어 사전 : 웹 용어 정의 > 뷰포트
[참고]
개발자 지인에게 물어보니 알려준 내용(Chat GPT를 사용했다고 한다.)
다음은 팝업과 모달이 어떻게 쓰이는지, 다양한 모달의 종류에 대해서 정리할 예정이다. 원래는 하나의 포스트에 다 정리하려고 했는데, 너무 길어지기도 하고 구분해서 정리해 두는 것이 내가 보기에도 편할 것 같아서 짧게 잘라서 쓰기로 한다.
