Daily UI 026 / Subscribe 구독

26번째 과제: Subscribe 구독 UI

 

모달(Modal)과 팝업(Popup)

모달은 사용자의 주목을 특정 내용이나 작업에 집중시키기 위해 사용된다. 모달 창은 주로 백그라운드 콘텐츠 위에 중앙에 떠서 나타나며, 사용자가 모달 외부를 클릭하거나 특정 작업을 완료하기 전까지는 모달 이외의 다른 UI 요소와 상호작용할 수 없다.
- 백그라운드 콘텐츠를 어둡게 처리하여 사용자의 주의를 모달 내용에 집중시킨다.
- 폼 제출, 상세 정보 확인, 경고 메시지 표시 등 중요한 정보 전달이나 사용자 결정을 요구할 때 사용된다.
- 사용자가 모달의 명시적인 닫기 옵션(예: 닫기 버튼, 취소 버튼)을 선택하기 전까지 모달을 닫을 수 없다.

팝업은 사용자에게 알림, 광고, 또는 추가 정보를 제공하기 위해 사용된다. 팝업은 웹페이지의 일부분을 차지하며, 일반적으로 사용자가 특정 동작을 취한 결과로 나타난다. 팝업은 사용자가 콘텐츠를 계속 탐색하면서도 팝업 외부와 상호작용할 수 있다.
- 일반적으로 페이지 하단이나 구석에 작은 창 형태로 나타나며, 메인 콘텐츠를 방해하지 않는다.
- 뉴스레터 구독 유도, 특별 할인 정보 제공, 사용자 경험 향상을 위한 짧은 설문조사 등에 사용된다.
- 사용자가 팝업 외부를 클릭하면 쉽게 닫힐 수 있으며, 팝업이 페이지의 다른 요소와 상호작용을 방해하지 않도록 설계된다.

 

- Popular Science에는 최소 2 종류의 구독 유도 모달이 있다는 것을 알게 되었다. 내비게이션 바의 뉴스레터 구독 창을 클릭했을 때와 안 했을 때 뜨는 모달이 달랐다. 구독 창을 클릭한 경우, 구독에 대해 관심이 있는 편이므로 아예 적극적으로 이메일 주소 입력 칸까지 있는 모달이 떴다. 아닌 경우에는 좀 더 간접적이고 비유적인 언어로 구독을 유도했다. (처음부터 이메일 주소 입력하라고 하면 부담스럽다.)

- 요즘IT의 경우 회원가입을 유도하는 내용인데 '회원가입'이라는 직접적인 단어를 사용하지 않은 것이 흥미로웠다.

 

- 나는 좀더 적극적인 뉴스레터 구독을 권유하기 위하여 팝업이 아니라 모달을 사용하였다.

- Popular Science처럼 사용자 경험을 분류하여 각기 맞는 내용으로 2개의 모달을 구성하였다.