brunch

매거진 실전 UI UX

라이킷 194 댓글 6

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 서점직원 Nov 07. 2021

실전 UI/UX - 약관동의를 설계할때 고려해야할 것들

약관동의에 숨겨진 다양한 UI/UX적 장치들

위드코로나가 시작되기 일주일전.

YTN 뉴스를 통해 흘러나오는 위드코로나 소식을 보고 서점군은 왠지 모를 불안감을 느낍니다.

"설마... 방역정책 풀렸다고 바로 오프라인 행사를 하진 않겠지?"

고객님 : 우리 곧 오프라인 행사할꺼니까 백신접종 안내 동의 페이지 만들어주세요.

서점군 : ㅠㅠㅠ

오늘은 약관동의 페이지를 만들 때 고려해야 할 자잘한 UI/UX 기술에 대해 알아보려고 합니다.

체크버튼은 왼쪽? 오른쪽?

여러분이 자주 사용하는 서비스 (웹/앱)의 회원가입 약관동의 페이지를 떠올려봅시다.

약관동의를 체크하는 체크버튼은 주로 왼쪽에 있을까요? 오른쪽에 있을까요?

약관동의 페이지를 설계할 때 꼭 알아야 할 UX의 법칙이 있습니다.

바로 구덴베르크 다이어그램과 스티븐 후버의 모바일 디바이스 파지 방법론입니다.

1) 구덴베르크 다이어그램

구덴베르크 다이어그램은 화면을 4 분할하여 사용자의 시선은 좌측 상단부터 시작하여 중력의 영향을 받아 조금씩 아래로 내려가 대각선 방향으로 이동해 우측 하단에서 끝난다고 하는 사용자의 시선 흐름을 이용한 콘텐츠 배치 법칙입니다. (자세한 내용은 실전 UI/UX - 포털 메일 서비스는 어떻게 다를까? 참조)

2) 스티븐 후버의 모바일 디바이스 파지 방법론

디자이너였던 스티븐 후버는 2013년, 1333명의 사람들을 관찰하여 그중 화면을 터치한 780명이 스마트폰을 어떻게 터치하였는지 통계자료를 발표합니다. 이 발표는 지금까지 모바일 디바이스 UX의 바이블로 일컬어지는 스티븐 후버의 모바일 디바이스 파지 방법론입니다. (원문 링크)

후버의 조사 결과에 따르면

사진출처 : https://uxplanet.org/mobile-design-best-practices-2d16d37ecfe

사용자의 49%가 한손으로 스마트폰을 들고 엄지로 터치

사용자의 36%가 한손으로 스마트폰을 거치하고 반대편쪽 엄지로 화면을 터지

사용자의 15%가 양손으로 스마트폰을 거치하고 양쪽 엄지로 화면을 터치

구덴베르크 다이어그램과 엄지이론은 왼쪽 영역을 사용자가 가장 먼저 주시하고 터치하기 쉬운 이른바 핫스팟 영역으로 인식합니다. 그리고 많은 서비스들이 이 이론을 기초로 제작되었습니다. 약관동의 페이지도 마찬가지죠.

주요 서비스 회원가입 약관 동의 페이지 비교

실제로 많은 서비스들의 약관동의 페이지들이 왼쪽 상단 혹은 왼쪽 하단에 약관동의 체크버튼을 배치합니다. 구덴베르크 법칙과 엄지영역을 충실히 따른 결과물이죠.

그런데 말입니다. 약관동의 체크버튼, 실제로 터치할때는 불편하지 않으셨나요?

구덴베르크 다이어그램은 인쇄물이 발달한 시기에 시작된 이론으로 Desktop에 적용하기는 적합한 이론일지 몰라도 모바일 디바이스에는 적용하기 한계가 있는 이론입니다.

우리에게 널리 알려진 엄지영역 이론에는 큰 맹점이 있습니다. 엄지영역이론은 발표된지 8년이나 지난 낡은 이론이고 8년동안 우리의 스마트폰 디바이스는 화면 사이즈가 2배 가까이 커졌다는 점이죠.

아이폰을 기준으로 비교해볼까요.

2011년 : 아이폰4s (3.5인치 / 58.6mm)

2012년 : 아이폰5 (4인치 / 58.6mm)

2014년 : 아이폰6 (4.7인치 / 67mm)

2018년 : 아이폰XS (5.8인치/ 70.9mm)

2019년 : 아이폰11 (6.1인치 / 75.7mm)

엄지영역 이론이 처음 발표된 시기의 스마트폰 가로 크기와 현재 사용 중인 스마트폰을 비교하면 가로 크기가 2cm 정도 증가했다는 걸 알 수 있습니다. 수치상으로 2cm지만 엄지 기준으로 보면 엄청난 변화죠.

사진출처 : https://www.scotthurff.com/

디자이너인 스콧 허프는 디바이스 크기에 따른 엄지영역 변화에 대한 연구를 발표합니다. 이 연구에서는 디바이스 크기가 커짐에 따라 엄지영역의 중심이 왼쪽에서 중앙으로 옮겨가고 있다는 걸 알 수 있습니다.

여러분이 약관동의 버튼을 터치하면서 불편함을 느꼈던 이유. 화면 사이즈가 커졌는데도 디자이너들은 구시대적인 엄지영역 이론에 사로잡혀, 관습적으로 왼쪽영역에 체크버튼을 뒀기 때문입니다.

왼쪽영역이 터치하기 불편하다면 체크버튼을 오른쪽에 둬보는 건 어떨까?

실제로 이러한 시도를 한 서비스가 있습니다. 바로 커피빈이죠.

커피빈과 스타벅스의 회원가입 약관 체크영역 비교

커피빈은 다른 서비스와 다르게 오른쪽 영역에 체크버튼을 두고 사용자의 터치를 유도합니다. 왼쪽이 불편하다고 해서 오른쪽으로 두는것이 마냥 정답은 아닙니다. 왼쪽에 두냐 오른쪽에 두냐 각각 장단점이 있죠.

왼쪽에 뒀을때 장점

많은 서비스들이 왼쪽에 체크버튼을 두고 있어 사용자는 학습효과로 왼쪽에 체크버튼이 있을 거라고 인지하고 있다. 인지 측면에서는 왼쪽에 체크버튼을 두는것이 더 효과적

오른쪽에 뒀을때 장점

왼쪽에 비해 화면크기가 커져도 체크영역을 터치하기 수월하다.
시선 흐름대로 약관을 인지하고 체크할 수 있다

왼쪽과 오른쪽은 각 서비스의 약관 개수, 텍스트 길이 등 다양한 조건에 따라 달라질 수 있습니다. 잘 고민해보고 각 서비스의 특성과 레이아웃을 고려해 어느 위치에 두는것이 효과적일지 판단하면 됩니다.

안내문구와 체크영역

그동안 무심코 지나쳤던 안내문구.

안내문구도 어떻게 활용하느냐에 따라 체크영역의 접근성을 높일 수 있다는 사실.

다들 알고 계셨나요?

안내문구의 길이가 체크영역 사용성에 어떠한 영향을 미치는지 간단한 비교를 통해 알아보도록 하겠습니다.

최신 스마트폰의 화면 사이즈 5.8~6.2인치 기준으로 한손으로 스마트폰을 파지한채 엄지로 자연스럽게 터치가 가능한 이른바 엄지 영역은 위 이미지상 주황색으로 표시된 부분입니다. 저 영역을 벗어난 부분을 엄지로 터치하려고 하면 부자연스러운 동작이 되죠 (집에 있는 스마트폰을 들고 직접 실험해보세요!)

첫번째나 두번째 화면처럼 안내 문구가 없거나 짧다면 약관 체크영역이 상단에 위치하게 되어 터치를 위해 불필요한 동작을 유발하게 됩니다. 세번째 스타벅스의 경우는 좀 다르죠. 체크영역을 엄지영역에 위치시키기위해 의도적으로 콘텐츠 영역을 넓게 잡아 편의성을 높였습니다. 엄지영역의 기본 개념을 이해하고 그것을 UX에 잘 녹여낸 구성입니다. 알고보면 별거 아닌 디테일이지만 이런 디테일이 쌓이고 일관성을 가지게 되면 좋은 UI/UX를 갖춘 서비스가 될 수 있답니다.

필수값과 선택값의 표현

아무 생각없이 동의 버튼을 클릭했다가 광고에 호되게 당해본적. 다들 한번쯤 있으시죠?

약관 동의 시 꼭 구분해야 하는 필수값과 선택값

우리가 사용하는 다양한 서비스들은 과연 필수값과 선택값을 어떻게 표현하고 있을까요?

필수값과 선택값의 UI를 알아보기 전에 먼저 필수값과 선택값의 개념을 이해해야 합니다.

이 개념을 알아야 필수값과 선택값 UI 구성 방식을 이해할 수 있기 때문이죠.

회원가입이나 서비스 이용을 위해 고객으로부터 무조건 동의를 받아야 하는 필수 정보는

1. 서비스 이용약관
2. 개인정보 수집 및 이용동의

2가지 항목뿐입니다.

이 이외의 정보는 모두 다 선택항목입니다.

예를 들면

1. 제3자 정보 제공 동의
2. 마케팅 활용 동의
3. 광고성 정보 수신동의
4. 필수 항목 수집 및 이용동의
5. 그 외 개인정보 처리 위탁 및 수집 동의

이런 항목들은 모두 선택항목이 됩니다. 그동안 우리가 보았던 수많은 선택항목이 사실은 업체의 편의나 수익을 목적으로 강요되는 정보였을뿐 서비스 이용에는 별로 필요가 없는 정보였던거죠.

이 개념을 이해하고 나서 다시 스타벅스의 약관동의 페이지를 살펴볼까요.

스타벅스는 이용약관 페이지에서 선택동의 항목을 최소화했습니다.

보기도 깔끔하고 사용자가 직관적으로 정보를 인식하고 취사선택할 수 있는 구성이죠.

스타벅스가 이용자에게 제공받을 정보가 없어서 광고성 정보 수신동의만 선택항목으로 넣은걸까요?

아뇨. 스타벅스는 정확히 알고 있었던 겁니다. 쓸데없이 많은 정보를 요구하면 UI가 지저분해지고 사용자에게 피로감을 준다는 것 (선택항목을 일일이 해제하거나 필수항목만 체크해야 하니까), 로그인 기반 서비스인 스타벅스 입장에서 복잡하고 지저분한 약관동의 페이지는 회원가입의 복잡도를 높이고 서비스 이용의 진입장벽이 될 수 있다는 것. 고객 충성도가 높고 앱에서 확실한 개런티를 제공하는 스타벅스마저도 그 사실을 잘 알고 있었기 때문에 선택항목을 최소화했던 겁니다.

서비스를 제공하는 업체의 입장에서 보자면 서비스 운영편의, 수익성 확보를 위해 고객에게 선택항목을 많이 동의받는것이 좋으나 선택항목이 회원가입을 불편하게 하거나 유저들이 거부감을 느낄 정도가 되면 곤란합니다. 디자인이나 UI/UX로 쉽게 풀 수 있지 않냐고요? 아뇨. UI/UX는 만능이 아닙니다. 복잡한걸 쉽게 할 수는 없죠. 다만 복잡한걸 단순하게 보이게 하는 눈속임은 가능합니다.

우선 필수값과 선택값의 위치는 크게 두가지 형태로 구분됩니다.

본문 앞에 두느냐 본문 뒤에 두느냐.

본문 앞에 두는것과 뒤에 두는것과 어떤 차이가 있는 걸까요?

우리가 책을 읽을 때를 떠올려 보죠.

대부분의 책은 왼쪽에서 시작합니다. 책 뿐만 아니라 대부분의 텍스트 매체들이 왼쪽에서 시작해 오른쪽으로 끝나죠. 즉 우리의 눈과 뇌는 경험적으로 텍스트를 보면 자동적으로 왼쪽에 시선이 가는데 익숙해져 있다는 이야기입니다. 필수값을 앞에 두면 사용자가 해당 항목이 필수값인지 선택값인지 빠르게 인지할 수 있게 됩니다. 반대로 뒤에 두면 인지 속도가 그만큼 느려지게 되겠죠.

자 다시 스타벅스의 약관 페이지를 볼까요.

스타벅스는 필수값, 선택값 표시를 뒤로 두고 필수값과 선택값의 시각적 구분이 어렵도록 본문과 동일한 검정 폰트를 사용했습니다. 다른 서비스들이 필수값이나 선택값에 컬러를 줘 본문과 구분이 되게끔 한것과 비교해보면 특이한 구조죠. 모던한 디자인을 위한 선택일까요? 사용자의 눈속임을 위한 얄팍한 상술일까요?

커피빈과 스타벅스의 약관동의 페이지를 비교해볼까요?