제대로 알고 쓰자! - Dialog와 Pop-up

이미지 출처 : Pixabay

제대로 알고 쓰자!
웹 사이트에 존재하는 수많은 Web Component. 얼핏 보면 비슷하지만 엄밀히 다르다.
모두 우리의 필요에 의해 만들어진 것으로 각각의 섬세한 특징과 사용법을 가지는 특별한 존재들이다.
이를 분명하게 구분하여 사용한다면 더 깔끔하고 효율적으로 동작하는 웹 사이트가 될 수 있을 것이다.
헷갈리는 컴포넌트를 대상으로 분명한 목적과 차이점을 생각해보는 시리즈를 써보고자 한다.

 

두 번째 포스팅 주제는 화면 속의 화면, Dialog와 Pop-up 창에 대해 이야기 해 보자.

 

다음과 같은 구성으로 진행된다.

1. Dialog? Modal?
2. 새로운 창, Pop-up
3. Dialog vs Pop-up

---

1. Dialog? Modal?

현재 열려있는 페이지에 포함된 창으로 페이지 위에 깔린 '레이어'를 말한다.

다이얼로그는 기존 창에 종속된 상태로 작동하기 때문에 페이지를 이동할 경우 사라진다.

부모와 자식 관계로써 기존 창에 대해 중요한 정보 전달이나 사용자 입력을 필요로 할 때 사용된다.

사용자와의 명확한 상호작용을 수행한다는 것이 중요한 특징 중 하나이다.

(다르게 말하면, 사용자가 어떠한 행동을 하지 않는 한 다이얼로그는 그대로 유지된다.)

 

다이얼로그는 모달(Modal, Modality)이라고도 불리는데 다이얼로그가 조금 더 넓은 범위를 의미한다.

모달의 경우 레이어가 띄워질 때 기존 창과는 상호작용 할 수 없다는 특징이 있다.

다이얼로그는 모달과 비 모달(Non-modal) 두 가지 형태로 모두 사용될 수 있다.

	다이얼로그
구분	모달	비모달
목적	- 사용자의 작업을 멈추고 즉각적인 결정 유도 - 중요한 정보 확인, 결정 요청	- 유연한 선택 제공 - 동시에 여러 작업 가능
특징	- 닫히기 전까지 다른 UI 상호작용 불가 - 사용자 액션(확인/취소 버튼 등)을 통해 닫을 수 있으며 화면 외부 또는 ESC 키 설정 가능	- 띄워진 새로운 레이어와, 기존 창 모두 조작 가능 - 배경이 dim* 처리 되지 않음 - 스낵바, 토스트 등의 컴포넌트 방식
사용	삭제 확인 시스템 종료/데이터 손실에 대한 경고 메시지	도움말 창 검색 결과 창

* dim : 원래 페이지인 뒷배경이 어두워지며 액션 불가한 상태로 SCRIM이라고도 표현

---

2. 새로운 창, Pop-up

팝업은 현재 열려있는 브라우저 페이지 위에 또 다른 ‘브라우저 페이지’를 하나 더 띄우는 것이다.

서비스 트래픽을 증가시키고 메모리 잡아먹기도 해, 현재는 모달로 대체하여 잘 사용하지 않는 추세다.

브라우저 내 팝업 차단 기능을 생각해보면 쉽게 이해할 수 있다.

웹 브라우저 내 팝업 설정

 

팝업은 새로운 창을 띄우는 것으로 사용자에게  필수적인 상호작용을 요구하지 않는다.

대부분 사용자 경험을 개선하거나 옵션을 제공하기 위한 목적으로 사용되기 때문에

자동으로 나타나서 사용자가 다른 작업을 할 수 있도록 하거나, 광고, 알림 또는 옵션 선택 창으로 사용된다.

 

예를 들면 쿠폰이나 할인 정보가 포함된 광고 팝업, 또는 새로운 기능을 안내하는 팝업에 대해

사용자가 닫을 수도 있고 창을 클릭할 수도 있지만 반드시 상호작용을 할 필요는 없다.

---

3. Dialog vs Pop-up

UI/UX 관점에서 다이얼로그와 팝업 창에 대해 종합적으로 비교해보자.

	다이얼로그	팝업
상호작용	필수 또는 선택	선택
배경 처리	일반적으로 흐리게 처리 사용자 상호작용 후 원래 화면으로 복귀	화면의 다른 요소에 영향 없음
사용 예시	폼 데이터 제출 확인 경고 및 오류	뉴스레터 구독이나 새로운 기능 소개

 

다이얼로그는 사용자와의 필수적인 상호작용을 요구하며 화면의 나머지 부분과 상호작용할 수 없도록 제한한다.

팝업은 부가적인 정보 제공을 위해 사용되며 사용자가 상호작용을 선택할 수 있다.

 

두 컴포넌트는 구현 방식과 동작에 있어서도 중요한 차이가 있는데,

기획자로써 어떤 컴포넌트를 사용하는지 결정하는데 이러한 특징들도 고려되어야 한다고 생각해 조금 더 덧붙인다.

	다이얼로그	팝업
구현 방식	UI 컴포넌트	브라우저 창이나 탭
제어 방식	DOM 내에서 직접 접근 가능	별도의 창과 상호작용 시 통신 필요 window.postMessage
성능	적은 리소스 사용, 성능 부담 적음	추가 리소스 소모

 

팝업은 완전히 별도의 문서나 애플리케이션으로 처리되어 다른 웹 페이지나 애플리케이션과도 상호작용 할 수 있다.

대신 기존 페이지와도 독립적으로 동작하기 때문에 window.postMessage() 같은 별도의 통신 방법이 필요하다.

다이얼로그는 기존 페이지에 HTML 요소가 단순히 추가되는 것으로 리소스 소모가 적고 성능 부담이 적다는 장점이 있다.

기존 페이지와 동일한 자원(DOM, 스타일) 등을 공유하기 때문에 상태 관리나 이벤트 처리 같은 데이터 전달이나 스타일 지정에 있어서는 더 편리할 수 있다.