기획 UI 기초 : 팝업, 얼럿 차이와 그 종류 #모바일 팝업, PC 팝업, 윈도우 레이어 모달 토스트 팝업 설명

기획을 하다 보면 팝업, 얼럿이라는 기능에 대해 많이 사용하게 되는데 이 얼럿도 사실 다 같은 얼럿이 아니라는 것을 뒤늦게 알았다. 복기할 겸 나중에 필요할 때 꺼내볼 겸 또 나와 같은 초보 기획자를 위해 다양한 얼럿에 대해 함께 공부해 보려고 한다.

팝업 종류

모바일, 웹, 앱을 사용하는 중 갑자기 나오는 안내의 형태로 많이 볼텐데 하나의 팝업으로 보통 통칭되기도 한다.

하지만 기획자가 개발자에게 전달할 때는 정확한 팝업의 종류로 전달하는게 좋은데, 물론 화면 기획서 내 UI를 보면 어떤 팝업을 의미하는지는 금방 알 수 있긴 하다.

 

● 윈도우 팝업

● 레이어 팝업

● 얼럿

● 모달 팝업

● 토스트 팝업

● 스낵바 팝업

 

윈도우 팝업

새 창 팝업으로, 웹을 사용하다 보면 가장 쉽게 볼 수 있다. 요즘은 많은 브라우저에서 새 창 팝업을 자동으로 해제해 두기 때문에, 안 보이는 경우도 많다. 크롬의 경우 오른쪽 위에서 새 창 팝업 설정을 해제 및 설정할 수 있다. 새 창 팝업 설정이 해제로 되어있는 경우, 팝업 나와야 하는 화면에서 팝업 닫힘 표시가 브라우저 주소창 오른쪽 위에 표시된다.

 

새 창으로 열리는 윈도우 팝업은 팝업마다 URL을 가지고 있다.

 

레이어 팝업

윈도우 팝업과 비슷한 형태인 듯 하지만, 가장 큰 차이점은 윈도우 팝업은 팝업이 띄어져 있는 상태에서 백그라운드를 차지하고 있는 화면이 컨트롤되지 않는다는 점이고 레이어 팝업은 가능하다는 점이다.

 

레이어 팝업이 나와도 뒤에 있는 화면의 스크롤을 컨트롤할 수 있고, 버튼을 누르면 바로 이동되기 때문에 어쩌면 새 창으로 열리는 윈도우 팝업보다는 덜 번거롭다고 할 수 있다. 하지만 이마저도 사실 사용자 입장에서는 불필요한 내용이라면 귀찮게 느껴지는 건 같다.

 

 

얼럿

사실 얼럿의 경우 크게 세 가지로 나뉘는데, 사진을 찾을 수 없어 하나만 소개했다. 얼럿은 우리가 흔히 사용하는 얼럿과 익숙하지 않은 컨펌 얼럿, 프롬프트 세 가지로 나뉜다.

● 얼럿 : 안내가 나오며 [확인], [취소] 등 선택지 없이 [확인] 하나만 나온다.

● 컨펌 : [확인],[취소],[기타 등등] 보통 2개에서 3개의 선택지를 제시한다.

● 프롬프트 : 메시지 창 안에서 선택이 아닌 Text 입력창이 있는 경우로, 요즘은 잘 사용되지 않는다. 

 

모달 팝업

모바일에서 가장 흔하게 사용되는 팝업으로 바로 모달 팝업이다. 적재적소에 사용되면 꼭 필요한 기능이지만, 불필요하게 남발하는 경우 정말 화가 나는 기능이기도 하다. 그래서 더 신중하게 기획해야 하는 모달 팝업.

 

왼쪽의 경우 광고나 서비스의 부가 기능을 소개하는 데 있어 모달 팝업을 사용하고 있다. 모달 팝업은 레이어 팝업과 비슷한 UI로 보이긴 하지만, 백그라운드인 뒷 화면이 선택되지 않는다. 단, 요즘은 백그라운드 선택 시 모달 팝업이 사라지게 기획해두기도 한다.

 

꼭 필요한 모달 팝업의 경우로는 오른쪽 사진과 같이 구매 시 선택해야 하는 사항이나, 서비스 프로세스상 생략하면 안 되는 과정에서 많이 사용된다. 이러한 경우는 꼭 선택해야 다음 단계로 넘어갈 수 있기 때문에 x 나 다른 액션을 하기 전에는 사라지지 않는 모달 팝업이 적합하다.

 

토스트 팝업/스낵바 팝업

마지막으로 살펴볼 팝업은 토스트 팝업과 스낵바 팝업이다. 토스트 팝업은 귀엽게 잠깐 떴다가 사라지는 팝업으로 [확인], [이동]과 같이 액션 선택사항이 없이 방금 사용자가 행동한 내용을 알려주는 팝업이다. 우리가 쉽게 볼 수 있는 예로는 "장바구니에 담았다.", "취소 처리가 완료됐습니다." 등이 있다.

 

토스트 팝업과 비슷한 스낵바 팝업은 토스트 팝업과 다르게 짧은 코멘트 내용과 함께 사용자 액션을 유도하는 선택지가 함께 나온다. 오른쪽 사진과 같이 "스크랩했습니다. [스크랩북 보기] [폴더로 이동]"과 같은 예가 대표적이다.

 

앞서 얘기했듯이  최근에는 크롬 등 브라우저에서 팝업 차단을 기본으로 설정하고 있어, 새 창으로 열리는 형식의 팝업은 많이 줄어든 상태이다. 현재는 이러한 윈도우 팝업보다는 레이어 팝업을 많이 사용하고 있다. 또 PC보다 모바일을 더 많이 사용하기 때문에 모달, 토스트 팝업이 주로 사용된다.

 

번거롭고 불필요한 팝업, 얼럿은 사용자에게 불편감을 줄 수 있기 때문에 기획을 하며 팝업 혹은 얼럿을 만들 때, 특히나 주의해서 어떤 팝업 혹은 얼럿으로 기능하게 할지 고민하는 것도 필요할 것 같다.