2018. 3. 15. 07:50ㆍUI 가벼운 이야기
최근에 우연한 기회로 신한카드 Fan 앱카드를 가입하게 되었다. 가입 중에 약관 동의 페이지를 접했는데 입력해야 할 항목이 많아서 깜짝 놀랐다. (약관 동의 UI 화면은 하단 이미지를 참고하길 바란다.) 해당 페이지에서 느꼈던 UI 상의 불편함은 다음과 같다.
1. 입력의 불편함
일단 기본적으로 해당 약관 동의 UI는 체크박스가 너무 많다. 물론 '전체 동의’ 버튼을 누르면 모든 약관에 동의가 되기는 한다. 하지만 선택 약관을 해제하기 위해서는 일일이 선택해서 동의 해제를 해야 한다.
그리고 해당 약관은 대 카테고리 약관과 소 약관이 있는 구조로 되어있는데, 대 카테고리 약관에 동의하면 화면에 보이지 않던 소 약관들까지 한 번에 펼쳐지는 구조로 되어있다. 펼쳐지기 전 보이는 화면이 복잡해서 그러려니 했지만 약관이 펼쳐지는 순간 갑자기 복잡한 화면이 등장하는 바람에 혼란스러웠다.
(타사 사례로) 좌측 이미지는 카카오 뱅크의 약관 동의 UI이다. 카카오 뱅크 약관 동의 UI는 전체 동의 버튼을 하나만 두고, 기타 약관의 경우 동의 표시만 주고 있다. 또한 전체 동의 버튼 선택 시 선택 동의가 추가로 보이는 구조로 되어있다.
2. 레이블의 문제
해당 약관 동의 UI는 어떤 기준인지는 모르겠지만 [선택] 카테고리 하위에 [필수] 약관 동의와 [선택] 약관 동의가 섞여 있는 구조로 되어있다. 그래서 해당 약관이 선택 가능한 약관인지, 필수로 해야 하는 약관인지 혼란을 준다.
자잘한 이슈이지만 [선택], [필수] 약관 표시 전 약관 명과 띄어쓰기가 통일되어있지 않아 보이는 것도 신경 쓰인다.
약관을 동의하고 나서 추천인을 등록하는 UI가 있는데, 분명 [선택] 항목이라고 되어있으나 선택하지 않으면 다음 단계로 진행되지 않는 것도 문제이다.
좌측 이미지는 자사 신한카드 약관 동의 UI이다. 신한카드 약관 동의 UI는 필수 약관과 선택 약관을 분리하였다. 필수 약관에 전체 동의 체크박스를 두어 필수 약관 우선 전체 동의하고 그 이후에 선택 약관을 고를 수 있게끔 한다. 또한 필수 약관과 선택 약관의 구분이 비교적 명확하게 되어있다.
3. 항목 구별의 문제
해당 약관 동의 UI는 [필수] 약관과 [선택] 약관이 시각적으로 명확하게 구별이 되지 않는다. 그래서 필수 약관인지 선택 약관인지 주의 깊게 살펴보아야 하는 문제가 있다.
또한, 대 카테고리 약관과 소 약관의 구별이 잘 되지 않아 시각적으로 더 복잡해 보이기도 한다.
[접기] / [펼치기] 버튼과 약관 상세정보 [더보기] 버튼 스타일이 동일하게 되어있어 내용을 주의 깊게 살펴보고 버튼을 눌러야 한다.
(타사 사례로) 좌측 이미지는 K뱅크 약관 동의 UI이다. 필수 약관과 선택 약관의 구별이 시각적으로 명확하게 구별되어 있으며, 필수/선택 항목을 약관 명보다 우선해서 보여줘 빠르게 인지를 할 수 있다.
정리하며
다음과 같이 신한카드 Fan 앱카드 약관 동의 UI의 문제점을 살펴보았다. 신한카드의 경우 잘 하고자 하는 ‘의지’는 있지만 뭔가 다른 문제로 인해 사용성에 문제가 생긴 경우라고 볼 수 있다.
UI 기획을 하다 보면 서비스마다 약관 동의 화면을 기획하게 된다. 약관 동의 화면은 정책적인 이슈로 인해 화면 기획을 보수적으로 설계해야 하는 어려움도 있고, 상대적으로 중요한 페이지에 밀려 기획의 고민이 소외될 수밖에 없는 영역이다. 하지만 약관 동의 화면을 제대로 설계하지 않을 경우 사용자는 이 서비스에 대한 인상이 나빠질 수밖에 없다. 약관 동의 화면은 앱 사용에 있어 최전선에 있는 화면이고 좋든 싫든 간에 마주할 수밖에 없는 화면이다. 해당 UI의 제약점을 알고 조금 더 사용자 친화적으로 설계했으면 하는 바람이다.
마지막으로 매력적인 약관 동의 UI를 찾아보았다. 좌측은 Toss 약관 동의 UI이고, 우측은 카카오페이 약관 동의 UI이다. 물론 실제로 서비스에 적용하기에는 제약점이나 한계가 있을 것이다. 내가 어떤 약관에 동의하는지 안내하고 [동의] 버튼을 누름으로써 갖가지 약관에 즉시 동의할 수 있게 하는 UI가 현재로서는 그나마 이상향에 가까운 UI라고 생각한다.
*이 글은 브런치에서도 볼 수 있습니다 - @uxdragon