UX를 해치지 않는 팝업의 3가지 조건

왜 우리 서비스 팝업은 사람들을 불편하게 할까?

팝업은 디지털 환경에서 화면을 통제하고, 사용자에게 액션을 강요하는 존재다. 중요한 정보를 효율적으로 전달하는 강력한 수단이지만 남발하거나 잘못 사용하면 사용자 경험을 저해할 수 있다. 지금부터 팝업의 올바른 사용법을 통해, 사용자와의 커뮤니케이션을 효과적으로 강화하는 방법을 알아보자.

목차

팝업은 언제 써야 할까?
팝업의 양대산맥, 원버튼 팝업과 투버튼 팝업
최대한 가볍게 팝업 디자인하기

팝업은 언제 써야 할까?

팝업은 사용자의 주의를 즉각적으로 끌 수 있는 도구다. 이를 남용하면 사용자의 불폄함은 물론 신뢰를 한꺼번에 잃을 수 있다. 따라서 팝업 시점이 어설프거나 나쁜 의도가 보인다면 이탈률을 증가시키고, 서비스에 부정적인 인상을 남기게 된다. 사용자가 반드시 알아야 할 정보가 있거나 중요한 선택의 순간이 아니라면 가급적 팝업은 사용하지 않는 편이 좋다. 아래는 대표적으로 팝업 사용을 권장하는 순간과 지양할 시점이다.

언제 써야 하는지?

중요한 공지사항이 있을 때

자칫 사용자가 금전적 손해를 입을 수 있을 때

사용자의 명시적 동의가 필요할 때 (예: 이용약관)

중요한 기능이나 업데이트 안내 시

언제 지양해야 하는지?

광고나 프로모션을 과도하게 노출할 때 (쿠폰은 필요시 노출)

사용자에게 너무 잦은 확인을 받으려 할 때

팝업 내용이 너무 공급자 중심의 정보일 때

첫 접속 시 형태가 다른 팝업과 토스트, 모달이 연쇄적으로 나올 때 (클릭포인트가 달라지면 사용자 경험이 쉽게 망가진다)

삭제와 직결될 수 있는 다크패턴

아래 그림 1은 최근에 사용한 한 앱의 팝업 예시이다. 정보를 입력하다 앱의 취지가 나랑 맞지 않는 생각이 들었다. 취소 버튼을 누르니 팝업이 떴다. 그런데 우측에 있어야 할 확인 버튼이 좌측에 있고 눈에도 잘 띄지 않았다.

그림 1 : 사용자 컨펌 후 다시 묻는 팝업

찜찜한 기분으로 확인을 누르니 다시 한번 입력 완료를 유도하는 팝업이 떴다. 또다시 버튼 위치 다크패턴이 등장했다. 나는 분명 서비스에 호감이 있었다. 그런데 이 두 번의 팝업으로 앱을 순식간에 삭제해 버렸다.

아마 많은 분들이 비슷한 경험이 있으리라 생각한다. 그만큼 팝업은 이탈이나 앱 삭제와 연관성이 큰 컴포넌트이기도 하다. 지금부터 한 발 더 들어가 팝업의 대표적인 두 가지 형식인 '원 버튼 확인 팝업'과 '투 버튼 선택 팝업'에 대해 알아보자.

팝업의 거대한 양대 산맥,

원버튼과 투버튼 팝업

팝업의 존재 이유는 사용자의 주의를 끌만큼 중요한 '확인'이나 '결정'을 받기 위해서이다. 아래 그림 2처럼 논리구조상 '확인'에는 원버튼, '결정'에는 투버튼이 자연스레 사용된다. 이 두 유형의 팝업은 사용되는 상황과 요구하는 사용자의 참여 수준이 크게 다르다. 하나씩 살펴보도록 하자.

그림 2 : 확인의 원버튼, 결정의 투버튼

원버튼 확인 팝업

원버튼 팝업의 목적은 사용자가 꼭 확인해야 할 정보를 스스로 컨펌하게 하는 것이다. 따라서 메시지는 간결하고 이해하기 쉬워야 한다. 버튼명 역시 '확인', '닫기', '완료'처럼 사용자가 수행할 행동이 명확해야 한다. 그런데 버튼명의 차이로 미묘한 뉘앙스 변화가 일어난다.

그림 3 : 확인과 닫기의 뉘앙스가 다르다

그림 3처럼 버튼이 하나일 경우 사용자는 클릭 시 자신의 결정을 레이블과 일치시킨다. '확인'의 경우 간접적 동의를 내포해 부정적인 정보가 희석된다. 반면 '닫기'의 경우 중립적이다. 서버 점검 공지와 같이 사용자에게 자칫 부정적일 수 있는 팝업은 '확인'처럼 긍정형으로 프레이밍 해주는 것이 좋다.

글 서두에 팝업은 주의를 즉각적으로 끌 수 있는 강력한 컴포넌트라 꼭 필요할 때만 최소로 사용하는 것이 좋다고 말했다. 따라서 원버튼 팝업의 경우 사용자가 꼭 컨펌이 필요할 때만 등장해야 한다. 너무 잦은 액션-확인 팝업은 사용자를 피곤하게 만든다.

대부분의 원버튼 팝업 버튼명은 '확인'이 '닫기'보다 잘 어울린다. '닫기'는 확인 보다 수동적이기 때문이다. '닫기'버튼을 누를만한 팝업은 애초에 만들지 않는 편이 사용성에 더 보탬이 될 것이다.

투버튼 선택 팝업

투버튼 선택 팝업은 중요한 결정같이 사용자가 주의를 기울여야 하는 상황에 적합하다. 대표적으로는 확인 버튼과 취소 버튼이 있다. 사용자는 모바일 환경에서 확인보다 무언가를 결정할 때 인지적 노력을 훨씬 많이 기울인다.

그림 4 : 선택을 위한 투버튼 선택 팝업

투버튼 선택 팝업에는 초반에 소개한 다크패턴이 많이 등장한다. 디지털 문법상 우측 버튼은 '확인'이나 경로의 '진행'을 뜻하고 좌측은 ‘취소‘나 뒤로 가기를 뜻한다. 디지털 세상의 오래된 암묵적 약속이다. 그런데 두 기능의 위치를 교묘히 바꾸면 사용자가 무의식에 실수를 저지르기 쉽다.

탈퇴나 서비스 입장에서 손해가 갈 수 있는 행동을 할 때 붙잡고 싶은 마음은 이해한다. 하지만 잠깐의 이탈 지연이 돌아선 사용자의 마음을 잡을 순 없으니 설계 시 다크패턴은 아예 고려하지 말자. 오히려 서비스에 좋은 마음을 가지고 쿨하게 이별하는 편이 나중에 돌아올 확률이 높을 것이다.

아래 그림 5의 변형된 투버튼 선택 팝업 역시 대표적인 다크패턴이다. 볼드한 버튼의 '앱으로 보기'에 비해 '괜찮아요, 모바일웹으로 볼게요'는 극도로 가독성 낮게 디자인된다. 이미 너무 많은 곳에서 남용되고 있어 다크패턴으로도 인식하지 않는 것 같아 어떨 때는 마음이 아프다.

 

그림 5 : 이제는 관행이 되어버린 웹으로 볼게요 다크패턴. 심지어 왼쪽은 언더라인도 없었다.

투버튼 팝업은 좁은 공간에 들어가는 내용과 요소가 많기 때문에 불필요한 부분을 제거하는 것이 무엇보다 중요하다. 이 부분은 다음 내용인 팝업을 최대한 가볍게 디자인하기로 넘어가서 이야기하자.

최대한 가볍게 팝업 디자인하기

팝업의 목적은 사용자가 내용을 빠르게 확인하거나 명확하게 선택하게 하는 것이다. 디자이너는 팝업의 좁은 공간 안에 들어갈 요소들의 우선순위를 정해 현명하게 줄여나가려는 의도를 가져야 한다. 팝업을 무겁게 만드는 대표적인 요소로는 '엑스' 아이콘과 제목과 중복되는 '본문'이다.

그림 6 : 자주 보이는 팝업을 무겁게 만드는 UI 요소들

그림 6처럼 '엑스' 아이콘은 컨펌 버튼이 있는 경우 사라져도 된다. 사용자에게 확인을 받아야 하는 순간에 끄는 결정을 줄 필요가 없기 때문이다. 둘 다 팝업이 꺼지는 동일 액션이지만 확인 버튼으로 끄는 것과 엑스 아이콘을 이용하는 것은 사용자 인식에 영향을 미친다.

더불어 버튼/텍스트와 시각적 위계가 다른 아이콘이 좁은 팝업에 추가될 때 단순히 텍스트가 길어지는 것과는 다른 혼란스러움이 생긴다. 그림 6의 라인 형태가 아이콘이 아니라 색이 있는 원형이나 네모 등은 좁은 공간의 밀도를 더 높인다. 사용자의 명확한 결정을 돕기 위해서라도 시각적 위계가 다른 요소는 하나라도 줄이는 편이 좋다.

우측처럼 제목과 본문에 '주문취소'가 중복되는 경우도 팝업을 무겁게 만든다. 이런 경우 본문을 없애고 제목에 주문을 취소하시겠습니까?라고 쓰는 편이 낫다. 제목에는 사용자가 취할 액션에 대한 내용이 직관적으로 담겨야 한다. 우측 컨펌 버튼은 이와 호응관계를 가져야 이해가 쉽다. 본문에는 컨펌 버튼 클릭 시 일어날 내용을 담으면 중복을 피하고 유용한 정보를 줄 수 있다.

그림 7 : 궁극의 난이도를 가진 좌측 팝업

이번 글을 쓰기 위해 다양한 팝업 사례를 찾다 그림 7의 좌측 디자인을 만났다. 기획자가 많이 고민한 흔적이 보이지만 팝업 디자인 시 지양할 점들이 많이 보여 아쉬운 마음이 들었다. 팝업은 시각적으로 지면에 떠있는 형태다. 거기에 다양한 인터랙션 요소가 더해지면 시각적으로 불안감이 생긴다. 팝업에는 가급적 단순한 클릭 외의 인터랙션은 사용하지 않는 것이 좋다.

좌측 팝업에는 결정을 위한 두 가지 버튼 타입, 다른 링크로 연결되는 '챗봇 상담하기', 취소사유를 고르는 '드롭다운', 화면을 끄는 '엑스' 아이콘이 존재한다. 단순변심과 챗봇 상담하기 영역은 명도 차이는 있지만 비슷한 라인 디자인이다. 결제취소 금액과 본문에는 강조를 위한 붉은색이 적용되었다.

먼저 사용자가 아닌 서비스 입장에서 알고 싶은 정보와 주고 싶은 정보들을 모두 제거했다. 다음은 복잡도를 높이는 강조 색상과 유사한 라인 컴포넌트를 제거했다. 사용자 입장에서 알아야 할 정보인 “삭제 시 입력한 정보가 모두 사라진다”는 정보와 버튼 두 개를 남기니 우측 형태가 되었다. 결제 취소 금액과 취소사유/챗봇 상담하기 버튼은 사용자 흐름에 맞게 팝업 전후에 배치하는 것이 좋을 듯하다.

나가며

팝업 설계 시 사용자의 거부감을 최소화하는 것이 중요하다. 사용자의 주의를 강제로 빼앗기 때문에 먼저 팝업을 띄울 만큼 중요한 정보인지 살피는 것이 우선이다. 과도한 프로모션이나 반복적인 물음은 애써 사용자와 쌓은 신뢰를 한순간에 무너뜨릴 수 있다. 궁극의 상호작용은 아무것도 묻지 않고 사용자가 원하는 바를 쉽고 빠르게 달성하는 것이다. 이상적이고 도달하기 힘든 말이지만, 사용자와의 신뢰 구축이라는 관점에서 팝업을 바라본다면 그래도 조금은 가까워질 수 있지 않을까?

3줄 요약

1) 팝업 사용 시기: 팝업은 중요한 정보 전달이나 사용자의 결정이 필요할 때 적절히 사용해야 하며, 사용자 경험을 방해하지 않도록 신중한 타이밍이 요구된다.

2) 원버튼과 투버튼 팝업의 적절한 활용: 원버튼 팝업은 확인을 요구할 때, 투버튼 팝업은 중요한 선택을 필요로 할 때 사용하여 사용자의 의사결정을 돕는다.

3) 팝업 디자인 최적화: 팝업은 간결하고 명확하게 디자인되어야 하며, 필요 없는 요소는 제거하여 사용자가 정보를 쉽게 이해하고 신속하게 반응할 수 있도록 해야 한다.

'UX를 해치지 않는 팝업의 3가지 조건'(끝)

---

<참고자료>

그렇게 쓰면 아무도 안 읽습니다 | 전주경 - 교보문고

지나친 모달 팝업은 사용자를 피로하게 만든다

모달윈도우(팝업)를 디자인할 때 생각할 9가지 원칙 | 요즘IT

Popups: 10 Problematic Trends and Alternatives

유아이볼 | 매일 하루에 한개씩 업데이트 되는 패턴과 친해져요!