02. 팝업과 모달, 페이지 이동의 구분
Prologue
입사 후 처음으로 공부한 건, 바로 '팝업','모달,'페이지 이동' 등 사용자가 프로세스를 수행하기 위해 실행시키는 중간 인터페이스들의 차이점이었다. 입사 후 처음으로 자사 사이트 리뉴얼 프로젝트를 맡게된 후, 개발자님이 수시로 이건 브라우저 팝업인지, 모달인지, 토스트팝업 지속시간은 얼마나 둘 것인지, 팝업 뒤 레이어는 어떻게 처리할건지 수십개의 질문을 하시는데 제대로 된 대답을 하나도 할 수 없었기 때문이다. 자괴감을 세게 느낀 뒤에 이에 대한 전문적인 공부가 필요하다는 생각이 간절하게 들었다. 그나마 팝업이나 페이지 이동은 단어가 익숙하지만 모달은 난생 처음 들었는데..처음엔 무슨 은어인 줄 알았다. 알고보니 그동안 내가 모달도 모두 팝업으로 부르고 있던 것이었다.
팝업 / 모달/ 페이지 이동
팝업: 특정 웹사이트가 어떠한 내용을 표시하기 위해 갑자기 생성되는 새 창
모달: 기존의 브라우저 페이지 위에 새로운 윈도우 창이 아닌, 레이어를 까는 것
페이지 이동: 새로운 레이어나 창이 아닌, 한 페이지 내에서 다른 페이지로 이동하는 것
셋의 정의는 이러하다.
텍스트로만 읽었을 때, 페이지 이동은 차이점을 확실히 알겠는데 팝업과 모달의 차이가 모호하다.
좌측부터 차례로 팝업, 토스트팝업, 모달페이지, 모달리스1. 팝업
팝업의 종류는 띄우는 방식에 따라 브라우저 윈도우 팝업과 시스템팝업(알럿), 레이어팝업 등 으로 나뉜다.
브라우저 윈도우 팝업은 말 그대로 기존 브라우저와 별개로 작은 브라우저창을 띄우는 방식을 말하고, 시스템 팝업은 컴퓨터 환경이나 브라우저에 따라 기본적으로 설정된 디자인을 사용하는 자바스크립트 팝업, 레이어 팝업은 모달과 비슷한 개념으로 기존 브라우저창에 레이어 형태로 겹쳐진 팝업(별개의 브라우저 창으로 존재하지 않는 팝업)을 뜻한다.
01. 브라우저 윈도우 팝업
: 기존 브라우저와 별개로 작은 브라우저창을 띄우는 팝업창
Wix.com 의 SNS 로그인 팝업창
NFT 거래소 opensea의 메타마스크 지갑 사용 팝업창브라우저 윈도우 팝업은 기존 브라우저 창 앞으로 새로운 브라우저창이 작은 형태로 나타나는 팝업창이다.
주로 SNS로그인이나 파일 업로드, 공지 등을 띄울 때 사용된다. 과거에는 광고팝업으로 많이 사용되었기 때문인지, 진행 중이던 프로세스를 막아세우는 느낌이 들어서 사용자 입장에서 거부감이 높다. 새로운 창을 실행하는 만큼 트래픽을 필요 이상으로 증가시키고, 웹에선 다른 인터넷 창이나 시스템 창에 가려져 알게 모르게 메모리를 잡아먹는 경우도 빈번하다. 모바일의 경우 새로 실행된 브라우저 창을 닫는 일이 번거롭다. 사용성을 해친다는 여러가지 이유로 대부분의 웹브라우저에서 팝업 차단 기능을 지원하고 있기 때문에 현재는 잘 사용되지 않는다.
따라서 최근엔 이와 같은 팝업창이 대부분 레이어 팝업(모달)으로 교체되었다. 브라우저 팝업창의 잔해는 첨부사진처럼 SNS 로그인 팝업창으로 주로 볼 수 있다.
> 간단히
- 명칭: 브라우저 윈도우 팝업 Browser Window Pop-Up
- 형식: 기존 브라우저 창 앞으로 새롭게 작은 브라우저 창이 띄워지는 형태
- 용도: PG사(이니시스 등)를 통한 결제, SNS 로그인 팝업창 등 외부 API를 사용하는 경우 중 일부 등
02. 시스템 팝업 (알럿)
: 컴퓨터 환경이나 브라우저에 따라 기본적으로 설정된 디자인을 사용하는 팝업
아이패드 시스템 팝업
크롬 브라우저 시스템 팝업시스템 팝업창은 용도에 따라 알럿(Alert), 또는 컨펌창(Confirm)이라고도 불리며 말 그대로 기기 또는 브라우저의 시스템에서 규격이 정해진, 별도의 디자인이 필요하지 않은 팝업창이다. 인터넷이나 기기를 이용해본 사람이라면 한 번 쯤은 봤을 것이다. (별도의 디자인이 필요없기 때문에 바쁠 때 고마운 팝업이기도 하다...)
주로 사용자의 행위에 대한 일방적인 경고나 확인이 필요할 때 사용된다.
구체적인 용도를 구분하자면, 알럿은 일방적인 메세지를 전달하는 데에 사용되는 창으로 '확인' 버튼 하나만 제공한다. 반면 컨펌창은 '취소' 와 '확인' 버튼 두 가지 이상을 제공한다(상단 첨부사진, 버튼명인 마이크로카피는 서비스에 따라 변경될 수 있다).
예를 들어 블로그에 글을 작성 중이던 사용자가 페이지 이탈을 시도했을 때 '정말 나가겠습니까? 작성 중이던 글은 저장되지 않습니다.' 라고 다시 한 번 사용자에게 확인을 요구하며 '돌아가기' 또는 '계속' 중 하나의 행동을 선택하게 한다면 컨펌창에 해당된다. 반면 진행 중이던 결제나 로그인이 취소되면서 '결제가/로그인이 취소되었습니다.' 라고 안내할 때 '확인' 버튼 하나만 제공된다면 알럿창에 해당된다. 요즘엔 어플리케이션 실행 시 사용자의 사진 접근 권한, 위치 사용 권한을 필수로 받아야 하기 때문에, 새로운 앱을 최초 실행했을 때에도 시스템 팝업창을 흔히 볼 수 있다.
다시 말해 사용자와 상호작용하지 않을 때, 서비스 측에서 일반적인 알림을 주려고 할 때 주로 사용된다. 과거엔 Prompt(프롬프트)라고 시스템 팝업창 내에 인풋박스를 두어 사용자에게 입력값을 받는 팝업형식도 존재했으나 요즘엔 잘 쓰이지 않는다.
> 간단히
명칭: 시스템 팝업창/알럿/컨펌창 System Pop-Up/Alert/Confirm
형식: 기기/브라우저의 시스템에서 제공하는 팝업창
용도: 서비스의 일방적인 알림이나 사용자의 행위에 대한 경고, 확인이 필요한 경우
03. 레이어 팝업
: 기존 창 위에 레이어 형태로 겹쳐진 팝업
레이어 팝업은 모달과 비슷한 개념으로 기존 브라우저창에 레이어 형태로 겹쳐진 팝업(별개의 브라우저 창으로 존재하지 않는 팝업)을 뜻한다.
레이어 팝업이 사용되는 용도는 비교적 다양하다. 프로모션 팝업, 글 작성, 상품추천, 추가 설명, 공지사항 등 구체적인 용도는 다양하지만 공통적으로 일시적이거나 부수적인 정보나 행위를 담아야 할 때 두루두루 사용된다. 팝업이 시행되는 동안 팝업 뒤 레이어로 실행 중이던 브라우저 창, 즉 부모 창과 상호작용이 가능하다는 게 특징이다.
요즘에는 모달과 큰 구분을 짓지 않는다. 레이어팝업과 모달은 개발코드도 동일하기 때문에, 부모 창이 동작 가능한 레이어 팝업은 '모달리스' 라는 용어로 불리기도 한다.
> 간단히
명칭: 레이어 팝업 Layer Pop-Up / 모달리스 Modalless
형식: 기존 브라우저 창에 레이어 형태로 겹쳐진 팝업
용도: 기존 브라우저창과 별개 또는 부가적으로, 일시적이거나 부수적인 정보/행위를 요구할 때
2. 모달
: 새로 뜬 자식창을 닫기 전까지 부모창과의 상호작용이나 종료가 불가한 방식.
드디어 정말 중요한 '모달'이다.
인스타그램 링크 모달창모달은 부모창 위로 새로운 자식창이 레이어 형태로 띄워지는 형식이다. 새로 뜬 창을 닫기 전까지 부모창을 종료할 수 없다.(강제로 부모창을 종료한다면, 모달과 함께 종료된다. 모달만 홀로 존재할 수는 없다는 뜻이다.) 레이어팝업과 뭐가 다른 지 묻는다면...사실 거의 없다고 봐도 무방하다. 회사에 따라 이와 같은 형식을 모두 '모달'로 통일해서 사용하는 경우도 많다.
모달은 부모창이 동작하는지의 여부에 따라 모달과 모달리스로 구분된다.
모달을 실행한 채로 부모창의 스크롤이 가능하지 않다면 모달, 가능하다면 모달리스로 불린다. 간단하다.
모달은 아마 웹 모바일을 막론하고 가장 다양하게 활용되는 방식일 것이다.
이벤트 공지, 로그인/회원가입, 게시글 작성, 알림, 옵션 선택 등 용도는 다양하다. 공통점은 서비스 사용 중 독립적인 프로세스가 필요할 때 사용된다는 것이다. 예를 들면 카카오톡 어플에서 프로필 또는 채팅방을 길게 누르면 미리보기와 메뉴가 기존 화면 위에 뜨는 경우, 지도 어플에서 길찾기를 한 경로가 기존 페이지 위로 뜨는 경우, 쇼핑몰에 들어갔을 때 이벤트 광고가 레이어로 뜨는 경우 등 이다.
Apple UI 가이드에서는 이런 모달의 사용을 지양하고 있다. 기존에 진행하고 있던 프로세스를 막아세우는 경향이 강하기 때문에 사용자 경험에 좋지 못한 인상을 남기기 때문이다. 중요하게 주의를 끌거나, 결정 또는 승인을 요구하는 중요한 정보에 사용하거나, 중요한 데이터를 저장하거나 응용프로그램을 계속 사용하기 위해서 작업의 완료 또는 저장을 요구할 때에만 모달창을 사용할 것을 권하고 있다. 일반적인 사용자들은 비선형방식, 즉 정해진 프로세스를 시작~완료까지 일괄적으로 수행하는 것을 선호하지 않기 때문이다.
예를 들면 웹사이트에서 로그인을 했는데 '성공했습니다' 메세지를 모달로 띄워 불필요한 시간을 소비하게 한다던가, 서비스 이용 중에 갑자기 광고가 뜬다던가 한다는 경우가 좋지 못한 사용의 예이다. 어플을 사용하다가 어플에 대한 별점을 요구하거나 스토어에 리뷰를 달아달라는 창이 갑자기 튀어나온 경험을 한 적이 있는가? 아마도 순간 그 창이 반갑지는 않았을 것이다.
> 간단히
명칭: 모달 Modal / 모달리스 Modaless
형식: 기존 브라우저 창에 레이어 형태로 겹쳐진 창 (레이어 팝업과 동일)
용도: 기존에 지속되던 프로세스와 구분되는 독립적인 프로세스를 요구하거나, 중요하게 주의를 끌어야 할 때
3. 페이지 이동
: 새로운 레이어나 브라우저 창이 아닌, 기존 페이지에서 새로운 URL로 이동하는 것.
페이지 이동은 비교적 친숙한 방식이다. 웹사이트 이용 중 주소창에 새로고침 표시가 뜨면서 페이지 전체가 바뀌는 화면 전환 방식이다.
(사용자가 페이지를 자의적으로 이동시키지 않았을 경우에) 페이지 자체를 이동시키는 방식은 팝업이나 모달에 비해 상대적으로 강제성이 높다. 그렇기 때문에 숙지해야 할 내용이 많고 중요도가 높을 페이지를 노출시켜야 하는 경우에 사용된다. 강제적인 이동방식이기 때문에 반드시 고지해야 할 의무성을 갖는 경우에 주로 사용된다. 예시로는 계약서 작성이나, 이미지 구매 사이트에서 라이센스에 관한 법적 고지가 담겨있는 페이지를 노출시켜야 하는 경우 등이 있다.
> 간단히
명칭: 페이지 이동
형식: 기존 브라우저 창을 유지한 채 새로운 url로 이동하는 형식
용도: 중요도가 높거나 숙지해야하는 정보가 많이 담긴 페이지를 요구할 때.
