본 글은 다크패턴 시리즈 중 두 번째로, 다크패턴의 종류와 사례에 대해 다룬다.
Harry Brignull에 따르면, 다크패턴은 총 16가지 유형으로 나타난다.
*아래는 Deceptive Patterns에서 소개하는 다크패턴 유형을 번역하여 정리하였으며, 예시는 직접 작성하였음.
1. 비교 방해 (Comparison prevention)
사용자가 제품을 비교하기 어렵게 만든다. 특히 기능과 가격이 복잡하게 결합되어 있거나 필수 정보를 찾기 어렵게 한다.
Source: Genie Music
해당 화면은 국내 음악 서비스인 Genie Music의 이용권 상세정보를 제공하는 웹사이트 화면이다.
이용권 페이지는 사용자가 이용권을 비교하고 탐색 후 구매하려는 목적이 큰데, 그것을 효과적인 시각화로 나타내지 못했다. 매우 많은 정보를 리스트 형식으로 보여주어, 어떤 가격 옵션이 사용자에게 가장 좋을지 비교하기 어렵다.
2. 감정적 수치심 (Confirmshaming)
사용자를 감정적으로 조종하여 원래 하지 않았을 행동을 하도록 만든다.
Source: Coupang
해당 화면은 국내 이커머스인 Coupang의 멤버십 가입 유도 앱 화면이다.
팝업 하단의 '혜택 포기하기'라는 문구를 통해 사용자가 혜택을 받지 않으면 매우 불편할 것이라는 것을 직접적으로 나타내고 있다. 이리한 불안 심리를 이용해 자사의 멤버십 가입을 유도하고 있다.
3. 광고 속임수 (Disguised ads)
사용자가 인터페이스 요소나 원래 콘텐츠를 클릭한다고 착각하게 만들지만, 실제로는 그것을 위장한 광고이다.
Source: pi7PDF TOOL
해당 화면은 다양한 파일의 병합을 도와주는 pi7PDF TOOL 웹사이트에서 파일 통합 완료 후 나타나는 화면이다.
상단 광고의 검은색 버튼처럼 보이는 'Download'가 사용자가 원했던 하단 파란색 버튼의 'Download'보다 더 강조되고 보기 쉬워서, 사용자가 상단의 광고를 클릭하게 하려는 속임수로 볼 수 있는 다크패턴이다.
4. 거짓 희소성 (Fake scarcity)
제한된 공급이나 인기에 대한 거짓 정보를 제시하여 사용자에게 행동을 강요한다.
Source: 푸드올로지
해당 화면은 건강 이커머스 푸드올로지의 웹사이트에서 상품 상세페이지를 보여주는 화면이다.
'구매 가능 수량 11개'라는 문구를 사용하여 사용자가 신속하게 구매해야 한다고 느끼지만, 실상을 보면 다르다. 일주일 후 동일한 페이지를 방문하였을 때, 남은 구매 수량은 처음 봤던 수량보다 더 많아졌다. 이를 통해 거짓으로 정보를 제공하여 사용자에게 구매를 이끌려고 하는 패턴을 볼 수 있다.
5. 거짓된 증거 제시 (Fake social proof)
거짓 리뷰, 증언, 또는 활동 메시지를 보여줌으로써 제품이 실제보다 더 인기 있거나 신뢰할 만하다고 믿게 만든다.
Source: 푸드올로지
해당 화면은 푸드올로지 웹사이트의 상품 상세페이지 화면이다.
'오늘 420명이 주문 했어요'라는 문구를 통해 해당 제품이 매우 인기 있다는 인식을 가지게 만든다. 하지만 이 방식은 사용자의 군중심리를 이용하여 더 빨리 구매결정을 내리도록 유도하는 사례이다.
6. 거짓 긴급성 (Fake urgency)
거짓된 시간제한을 제시하여 사용자에게 행동을 강요한다.
Source: 제로베이스
해당 화면은 부트캠프를 전문으로 하는 제로베이스의 웹사이트에서 제공하는 상세페이지 화면이다.
마감까지 시간이 많이 남지 않았다는 촉박함을 이용하여 구매를 유도하고 있다. 하지만 며칠 뒤, 해당 프로모션은 동일하게 진행되었고, 이런 거짓 시간제한을 통해 구매를 유도하는 다크패턴이라 볼 수 있다.
7. 강제 행동요구 (Forced action)
사용자가 원하는 것을 하려면 원치 않는 다른 일을 해야 하도록 강요한다.
Source: Material.io
해당 화면은 구글 Material Design의 모바일 첫 화면이다.
Reply와 Notes 기능을 필수로 선택하게 하고 있어 사용자가 원치 않아도 해당 접근에 동의해야 하며, 동의하지 않으면 해당 기능을 사용할 수 없다. 즉, 사용자에게 강제로 행동을 요구하여 불편을 제공한다.
8. 해지의 어려움 (Hard to cancel)
가입이나 구독은 쉽지만 해지하려고 할 때 매우 어렵게 만든다.
Source: Naver
해당 화면은 국내 포털사이트인 Naver의 멤버십 해지 앱 화면이다.
멤버십 해지를 위해서 무려 5번의 단계를 거쳐야 하며, '혜택유지 하기'를 CTA버튼으로 사용하고, 시각적으로 강조시키고 있어 해지를 하기 위한 사용자의 목적 달성을 저해하고 있다.
9. 숨겨진 비용 (Hidden Costs)
낮은 광고 가격으로 유인한 후, 결제 단계에서 예상치 못한 수수료와 요금을 발견하게 한다.
Source: Skyscanner
해당 화면은 항공 예매 사이트인 Skyscanner의 가격 확인 웹페이지 화면이다.
첫 번째 화면에서 마이리얼트립의 항공권 가격이 '507,100원'으로 표시되었으나, 결제 페이지로 이동하니 최종 결제 금액이 '531,500원'으로 변경되었다. 이는 특정 카드 사용자에게만 적용되는 할인 혜택이었던 것이다. 하지만 해당 혜택이 특정 카드에만 적용된다는 안내가 명확히 표시되지 않았고, 이로 인해 사용자는 처음에 낮은 가격으로 구매할 수 있을 것이라고 생각했지만 결제 단계에서는 더 높은 금액을 지불해야 하는 상황에 직면하게 되었다. 이러한 과정은 사용자에게 혼란을 주고, 불만족스러운 경험을 초래한다.
10. 숨겨진 구독 (Hidden subscription)
명확한 공개나 명시적 동의 없이 사용자를 반복 구독이나 결제 계획에 모르게 등록시킨다.
Source: 네이버 '변검'님 블로그 내 '웨이브 한달무료 지금 당장 보는 방법. 기존 회원도 가능. 해지주의사항까지'
해당 화면은 OTT 서비스를 제공하는 Wavve의 결제페이지 앱화면이다.
'첫 달은 100원만 결제되며, 이후부터는 정상 요금으로 결제됩니다.'라는 중요한 정보가 매우 흐린 색상으로 표시되어 있어 사용자가 쉽게 인지하지 못할 가능성이 크다. 또한, 사용자가 직접 동의할 수 있는 체크박스나 명확한 안내 옵션도 제공되지 않아, 첫 달 이후 자동으로 정상 요금이 결제된다는 사실을 놓칠 위험이 크다.
11. 계속 귀찮게 하기 (Nagging)
사용자가 무언가를 하려고 할 때, 그들의 최선의 이익이 아닐 수 있는 다른 일을 하도록 지속적으로 요청하며 방해한다.
Source: Coupang
해당 화면은 Coupang에서 웰컴백 쿠폰을 받은 후 상품을 탐색하는 앱 화면이다.
하단의 토스트형태의 쿠폰 적용 메시지는 스크롤을 올릴 때는 사라지고, 스크롤을 내릴 때마다 갑자기 다시 나타나는 형식이었다. 토스트는 몇 초 동안 보였다 사라지는 게 기본이지만 그 형식을 취하지 않았고, 결국 상품 탐색을 방해하는 매우 불편한 경험을 제공하였다.
12. 방해 (Obstruction)
사용자가 작업을 완료하거나 정보에 접근하기 어렵게 만드는 장벽이나 장애물을 만든다.
Source: Mobbin
해당 화면은 앱과 웹사이트 스크린샷 아카이빙 사이트인 Mobbin의 회원가입 완료 후 나타나는 첫 웹페이지 화면이다.
모달화면에 닫기버튼이 없고, 배경의 회색 화면을 클릭해도 화면이 사라지지 않으며, 두 가지 질문에 대한 답변을 필수로 선택해야만 다음 단계를 진행할 수 있다. 이러한 설정은 회원가입을 완료했음에도, 불필요한 답변 요구로 인해 사용자의 작업에 방해를 준다.
13. 사전 선택 (Preselection)
사용자의 의사 결정에 영향을 미치기 위해 미리 선택된 기본 옵션을 제시한다.
Source: FASTFIVE
해당 화면은 공유오피스 서비스인 FASTFIVE의 상담 신청 웹페이지 화면이다.
하단의 '마케팅 활용 동의'가 기본값으로 미리 설정되어 있어, 사용자가 주의를 기울이지 않는다면 원치 않는 선택을 할 수 있다.
14. 은밀한 제시 (Sneaking)
관련 정보를 숨기거나 나중에 제시함으로써 사용자를 거짓된 전제로 거래에 끌어들인다.
Source: Bluehost
해당 화면은 웹호스팅 서비스인 Bluehost의 가격 옵션 선택 후 나타나는 장바구니 화면이다.
첫 화면에서 월 $5.45로 표시된 옵션을 선택했으나, 결제 페이지에서는 월 $5.45가 아닌 $65.40이 일시불로만 결제가 가능해 첫 번째 혼란을 겪었다. 이후 월별 결제로 변경했지만, 예상했던 $5.45가 아닌 $64.87이라는 금액이 나와 두 번째 혼란을 겪었다. 마지막으로 CodeGuard 옵션을 삭제했음에도 불구하고 월 요금은 여전히 $27.99로 책정되어, 결국 처음 제시된 금액인 월 $5.45가 아닌 월 $27.99로 결제를 진행해야 했다.
처음에는 저렴한 금액 정보를 제공하여 구매를 유도하였지만, 결과적으로 사용자에게 더 높은 비용을 지불하게 함으로써 해당 브랜드에 대한 신뢰를 낮추는 경험을 제공하였다.
15. 속임수 문구 (Trick wording)
혼란스럽거나 오해의 소지가 있는 언어를 사용하여 사용자가 특정 행동을 하게 만든다.
Source: canceldelete 웹사이트 내 'Cancel Hulu Subscription on Android, iPhone, Windows'
해당 화면은 미국의 온라인 스트리밍 구독 서비스인 Hulu의 구독 해지 웹페이지 화면이다.
첫 화면에서 해당 서비스 구독해지를 위해 'CANCEL'버튼을 눌렀는데 두 번째 화면에서는 일시중지 기능인 'PAUSE SUBSCRIPTION'이라는 버튼이 상단에 나오게 된다. Pause라는 문구를 넣음으로써 사용자가 원했던 과업인 구독해지가 아닌 pause를 하도록 유도하고, 이는 cancel과 유사한 의미로 이해할 가능성이 높아 사용자의 해지를 방해하려는 문구라고 볼 수 있다.
16. 시각적 방해 (Visual interference)
사용자가 페이지에서 정보가 명확하고 예측 가능한 방식으로 제시될 것으로 기대하지만, 실제로는 숨겨져 있거나 모호하게 만든다.
Source: Taylor Wessing
해당 화면은 국제 로펌 Taylor Wessing의 웹사이트 첫 방문 화면이다.
이 화면에서는 두 가지의 시각적 문제점이 있다.
첫 번째로, 회색과 네이비색의 쓰임에 혼동을 주고 있다.
일반적으로 회색은 '비활성화' 된 상태를 나타내어, 사용자는 회색 토글버튼을 보고 해당옵션이 비활성화되어 있다고 느낄 수 있다. 그에 반해 네이비색은, 활성화되었다는 상태로 인지하게 된다(첫 번째 화면). 하지만 해당 사이트에서는 실제로 네이비색도 비활성화 상태를 나타내고 있어 이는 사용자에게 큰 혼란을 가져다준다.
두 번째로, 초록색 활성화 표시의 혼동이다.
초록색은 일반적으로 '활성화' 상태를 나타내는 것으로 적절하지만, 처음부터 네이비와 회색 중 하나가 활성화된 색상이라고 착각하게 만들었다. 결국 사용자가 토글버튼을 직접 눌러보기 전까지는 네이비 색상이 활성화 상태라고 인지하게 되는 것이다. 따라서 편의성과 사용성 측면에서 매우 불편한 시각화 형태라고 할 수 있다.
다크패턴의 종류는 매우 다양하고, 실생활에 이미 무분별하게 사용되는 경우가 많다.
특히 스타트업과 같은 초기 단계의 기업에서 이러한 다크패턴 사용이 두드러지며, 이미 규모가 큰 기업에서도 전략적으로 사용하기도 한다.
이는 단기적으로 분명히 도움이 될 수 있다. 왜냐하면 그들의 성장 지표인 '매출', '전환율', '클릭률' 등에 집중하고, 데이터 수집이라는 목표를 달성하기 위해 사용자의 경험보다는 즉각적인 결과에 더욱 주목하게 되기 때문이다.
이러한 관점에서 볼 때, 다크패턴 사용은 정말로 나쁜 걸까?
나쁘다. 분명히 다크패턴은 사용자를 속이는 디자인이기 때문에, 윤리적으로 문제가 있다.
그렇다면 다크패턴 없이도 수익성을 유지하면서 사용자에게 긍정적인 경험을 제공할 방법은 없을까?
정답은 '투명하고 정직한 UX디자인'을 하는 것이다.
사용자에게 명확하고 투명한 선택지를 제공하면서도, 그들이 자발적으로 서비스를 선택하도록 유도하는 것이 핵심이다. 예를 들어 사용자가 쉽게 이해할 수 있는 인터페이스와 명확한 정보제공을 통해 신뢰를 쌓으면 결국 사용자는 더 오래 머물고, 더 자주 돌아오게 된다.
그렇다면 다음글에서는 다크패턴을 없애기 위한 UX디자인의 원칙과, 해당 원칙을 성공적으로 수행하여 긍정적인 성과를 얻은 사례에 대해 소개하겠다.