헷갈렸던 UI 용어 익히기_모달과 팝업

알고 있는 것 같으면서도, 잘못 알고 있는 사항들에 대해서 어떻게 하면 외울 수 있을까 고민했다. (이전에 카카오 시니어 디자이너분께서 하신 말씀 중에, 모르면 그냥 무조건 외워라는 말씀을 하셨었는데, 이 말이 참 일리가 있다.) 그래서 학습 일지를 이왕 쓰는 김에, UI 용어들을 여기에 정리하면서 다시 한 번 알맞게 기억하려고 한다!🔥 오늘은 평소에 헷갈렸었던 모달과 팝업의 차이를 정리해보고자 한다. 평소에 모달과 팝업이 헷갈렸었는데, 이번 계기로 확실하게 정리해야겠다는 생각이 들었다🤯

 

 

1. 모달 (Modal)

기존에 사용하던 화면 위에 오버레이 되는 창을 말한다.

 

2. 팝업 (Popup)

팝 하고 튀어나오는 웹페이지 표시 방법을 말한다. 새로운 웹 브라우저 창을 하나 더 추가 시키는 방식으로 주 용도는 광고, 알림, 새로운 정보 갱신 등이 있다. 최근에는 새 창을 띄우지 않는 모달 창을 주로 사용한다.

 

아래의 글을 읽어보면 팝업과 모달의 차이에 대해 더 정확하고 깊이 있게 알 수 있다.

https://brunch.co.kr/@tigrisdesign/3

모달과 팝업, 정확히 알아야 하는 이유

 

 

 

하단의 이미지는 닐슨 노먼 그룹에서 제공하는 모달의 종류를 표현한 그래프이다. 크게 모달과 논 모달로 나뉘어지는데, 모달은 유저가 기존 페이지를 작동시킬 수 없다. 모달 창에 뜬 행동을 완료해야 기존 페이지를 작동시킬 수 있다. 반면, 논 모달은 유저가 기존 페이지를 작동시킬 수 있다. 예를 들면 Gmail 에서 메일쓰기를 클릭 시 오른쪽 하단으로 메일 쓰기 화면이 생긴다. 레이어가 새로 띄워졌지만 기존 페이지 (메일 리스트) 화면도 동시에 작동이 가능하다. 백그라운드는 어둡게 딤 처리 된 화면인 경우도 있고, 그렇지 않은 경우도 있다. 두 가지 경우 모두 모달과 논 모달 사용이 가능하다.

 

 

아래는 모달과 논 모달을 사용하는 UI를 표현한 그래프이다. (구글 머터리얼 디자인에서 제공.) 오버레이 타입인 모달과 논 모달로 구분이 되고, 그 안에서 모달 혹은 논 모달이 가능한 형태들을 구분할 수 있다.

 

그래도 학습 일지를 한번씩 쓰면서 몰랐던 개념을 조금이라도 알고보니, 앞으로 디자인 과정에 있어 더 자신 있게 작업할 수 있을 것 같다! 역시 아는 것이 힘이다. 내가 좋아하는 새로운 것들을 배울 수 있음에 감사하기💛