팝업창 디자인 종류와 효과를 높이는 필수 조건

팝업창 디자인은 강조하고 싶은 콘텐츠를 효과적으로 노출시키기 위한 목적으로 만들어집니다. 그래서 촘촘한 전략의 결과물이라고 할 수 있어요. 그래서 콘텐츠의 특성에 맞추어,  사용자에 맞추어 개인화하는 경우도 늘고 있어요. 팝업 디자인은 사용자에게 어떻게 표시되는지에 따라 다른 이름으로 불립니다. 팝업, 토스트 팝업, 시스템 팝업, 레이어 팝업, 모달 등이 있는데요. 처음 들어보는 분들이 많을 것 같아요! 

 

하지만 그보다 먼저, 효과를 높이기 위해 우린 어디에 초점을 맞춰야 할지 함께 확인해 보고 팝업창 디자인의 종류를 이야기해 보려고 해요.

 

분명한 메시지 전달(일관성)

팝업은 왜 사용자에게 팝업이 노출되었는지, 이 팝업을 통해 무엇을 말하고 싶은지 명확하게 드러나야 합니다. 명확하지 않고 일관성 없는 설명은 전달력이 떨어져 3초 안에 '오늘 하루 보지 않기'라는 결과로 나타납니다. 그리고 용어도 통일하는 것이 좋아요. 서비스 화면에서 사용하지 않는 용어가 팝업창에 등장한다면 사용자는 혼란을 느끼기 쉬워요.

조화로운 배치

팝업창 디자인은 전체 화면에서 일부를 가리는 형태로 노출돼요. 팝업만 별도로 이미지 작업을 하기 때문에 놓치기 쉽지만 팝업이 노출되는 화면, 팝업 노출 전과 후 화면 모두 조화롭게 디자인 되어야 해요. 단순히 이미지의 콘셉트만 비슷한 게 아니라 크기, 투명도, 버튼의 크기 등이 모두 조화로운 디자인에 영향을 줘요.

사용자 경험을 생각하는 디자인 

클릭률을 높이기 위해 닫기 버튼을 잘 보이지 않는 곳에 배치하고, '혜택 포기하기' 같은 과장된 문구로 고객에게 공포감을 조성하는 팝업창 디자인이 많습니다. 하지만 이런 형태의 팝업은 다크패턴(Dark patterns)이라고 불리며 고객의 서비스 사용 경험을 저해하는 요인이 됩니다. 브랜딩을 중요시한다면 다크패턴은 절대로 권장하지 않아요. 

 

---

팝업의 종류를 소개합니다!

 

레이어 팝업 (Layer)

레이어 팝업은 기존 화면 위에 레이어처럼 작은 화면이 겹쳐진 팝업창 디자인입니다. 가장 일반적인 팝업창 디자인이며, 우리가 팝업창을 떠올렸을 때 생각나는 바로 그 형태예요. 

토스트(Toast)

토스트 팝업은 기존 화면에서 메시지 전달을 위해 일정 시간 동안 잠깐 노출되었다 별도의 상호작용이 없어도 자동으로 사라지는 형태의 팝업입니다. 자동으로 사라지기 때문에 닫기 버튼을 별도로 넣지 않아요. 주로 모바일에서 활용하며, 간단한 공지나 알림 메시지를 전달할 때 많이 사용되는 형태로 노출 시간 및 화면을 정해야 하는 특성이 있습니다. 

 

 알럿(Alert)

 

알럿 팝업은 시스템 팝업으로 각 브라우저에서 사용자에게 주의사항이나 확인사항을 안내해주는 팝업창 디자인이에요.

 

알럿은 세가지 종류가 있습니다.

 

1) Alert

기본적 알럿 팝업은 주로 알림, 경고 메시지 창으로 쓰이고 ‘확인’ 버튼을 누를 때까지 작업내용을 잠시 중단시켜 줍니다.

 

2) Confirm

사용자에게 메시지 전달과 동시에 ‘확인’, ‘취소’의 선택 권한을 부여하고 사용자가 선택한 조건에 맞게 화면이 시작되는 형태입니다.

 

3) Prompt

사용자에게 메시지 전달과 동시에 그에 응하는 텍스트 답변을 받을 수 있는 입력창이 함께 있는 팝업 형태입니다.

 

이처럼 노출되는 형태나 디자인 구성은 저마다 다르지만 '어떠한 메시지를 사용자에게 전달한다'는 목적은 모두 같습니다. 

 

다양하고 특색있는 앱, 웹 서비스들이 많이 생겨남으로써 하나의 구성요소인 ‘팝업’의 중요 영역도 점차 커져가고 있습니다. 좋은 서비스라면 ‘팝업’처럼 사소한 영역도 고객에게 감동을 줄 수 있도록 좋은 팝업창 디자인이 필수일 것 같습니다.