[실무편] 회원가입을 쉽게 만드는 UI/UX 디자인은?
디자인 독학하기 04
UI/UX 디자인 경험을 공유합니다 :)
[Contents]
01 [실무 적용기] 회원가입을 쉽게 만드는 UI/UX 디자인
02 엄지 영역 디자인하기
03 좋은 UX 디자이너
04 참고자료
작은 앱 프로젝트
많은 기능과 서비스를 갖추고 있는 슈퍼 앱들 사이에서 단순함을 가장 큰 목표로 하는 '작은 앱'이 사람들에게 어떠한 의미로 다가갈지 연구하는 '작은 앱 프로젝트'를 진행하고 있습니다.
디자이너가 될 수 있을까? 불안했다. 하지만 어느 순간부터 불안과 두려움이 많이 줄어들었다. 회원가입을 쉽게 만드는 UI/UX 디자인을 공부하면서부터였다. 어디에든 스며있는 UX를 발견하는 재미가 쏠쏠했다.
회원가입을 쉽게 만드는 UI/UX 디자인을 공부하며 아래와 같이 딱 3개의 화면으로 끝나는 회원가입&로그인 과정을 디자인했다. 처음 디자인한 UI/UX였다. 토스와 핀터레스트 앱을 치밀하게 분석해서 얻은 인사이트와, 회원가입과 관련된 UX 원칙을 모아 종합한 결과물이었다.
처음 디자인한 결과물을 오랜만에 보니 흥미로웠다.2019년 2월 위 UI/UX 디자인 스터디를 진행하면서 나는 사용자가 회원가입을 하면서 할 수 있는 고민과 망설임을 극단적으로 줄이려고 노력했다. 그러면서 아래와 같이 생각했다.
실무에서는 이처럼 극단적으로 디자인할 수는 없다. 다만 UX를 최대한 끌어올린 디자인은 어떤 브랜드에서든 '시작점'이 될 수 있을 거라고 생각한다. 뺄 요소가 없으니, 브랜드가 지향하는 방향에 맞춰 하나씩 추가하기만 하면 되지 않을까? 내가 미처 생각하지 못하고, 부족했던 부분을 동료들과 의견을 나누며 채울 수도 있을 것이다.
2019년 7월, 이 회원가입 디자인을 실무에 적용할 기회가 왔다. 우리 앱의 MY 탭을 완전히 개편하면서 회원가입&로그인 과정도 함께 개선하기로 한 것이다.
01 [실무 적용기] 회원가입을 쉽게 만드는 UI/UX 디자인
어떤 서비스를 운영하든 사용자를 회원가입시키는 일은 중요하다. 비즈니스적으로 긍정적인 효과를 줄 수 있기 때문이다. 예를 들어 인스타그램은 로그인한 사용자 A가 주로 어떤 피드에 관심이 있는지 데이터를 수집해 A의 취향을 분석한 뒤, 비슷한 취향이 있는 사람들이 많이 누른 광고를 A에게 보여준다. 이를 통해 사용자가 광고를 누를 확률을 높인다. 인스타그램은 이런 데이터 분석을 통한 타겟팅 광고로 돈을 번다. 인스타그램이 사용자를 반드시 회원가입시켜 데이터를 모아야 하는 이유다.
인스타그램은 로그인을 하지 않으면 서비스를 이용할 수 없다.회원가입할 때 얻은 사용자 데이터는 마케팅에 활용할 수도 있다. 이메일 주소를 받는다면 이메일로 광고를 보낼 수 있으며, 전화번호를 받는다면 문자나 카카오 알림톡을 보낼 수도 있다. 로그인한 계정에 할인 쿠폰을 제공해 구매를 유도할 수도 있다. 이를 통해 기업은 매출을 올린다. 스타트업이라면 '생존을 위해' 사용자를 회원가입시켜 데이터를 얻어야 한다.
따라서 UI/UX 디자이너가 회원가입 과정을 쉽게 디자인하는 건 중요하다. 이번에 회원가입 디자인을 개편하면서 둔 목표는 아래와 같다. 예전에 공부하면서 세웠던 '사용자가 손쉽게 회원가입 할 수 있는 UI'라는 목표가 발전해 실무와 가까워졌다.
사용자가 '이탈하지 않고' 쉽게 회원가입할 수 있는 '섬세한' UI/UX 디자인
0_ 꼭 필요한 정보만 받는다.
회원가입&로그인 UI/UX를 디자인하기에 앞서 '사용자에게 꼭 받아야 하는 정보'가 무엇인지 따져봐야 한다. 서비스마다 이메일, 전화번호, 이름, 나이, 성별, 직업 등 사용자에게 필요로 하는 정보가 다르다. 입력해야 하는 정보가 많아질수록 사용성이 낮아져 회원가입할 가능성이 줄어든다. 따라서 꼭 필요한 정보만 정리한 뒤, 회원가입의 IA(Information Architecture, 정보 구조)를 짜기 시작해야 한다.
현재 우리 서비스에서 꼭 필요한 정보는 이메일과 성별이다. 기본적인 IA는 지난 2월에 한 디자인을 따라가기로 했으며, 성별을 받는 과정만 추가하기로 했다. 무엇보다 사용자와 섬세하게 소통하는 것에 특히 신경쓰기로 했다. 사용자가 마주하는 화면은 적지만, 그 안에서 사용자가 겪을 수 있는 '모든' 불편함을 없애 회원가입에서 이탈하지 않도록 디자인하는 것이다.
사용자가 입력한 이메일 주소를 서버로 보내 회원인지 아닌지 판단한다. 회원이 아니라면 회원가입을 할 수 있는 화면을 보여주고, 회원이라면 로그인 화면을 보여준다.1_ 간편 로그인을 제공한다.
"어휴, 또 오타야."
스마트폰을 쓰다 보면 오타는 늘 겪는 문제다. 이는 스마트폰 화면이 작기 때문에 사용자가 어쩔 수 없이 겪어야 하는 '나쁜 경험'이다. 오타를 수정하려면 오타가 난 부분으로 세밀하게 커서를 옮기거나, 백스페이스로 오타가 난 부분까지 지우고 다시 입력해야 하는 등 사용자의 노력이 필요하다.
따라서 사용자가 가상 키보드를 쓰지 않을 수 있는 방법이 있다면, 키보드를 쓰지 않도록 디자인하는 게 사용자에게 좋은 사용자 경험을 줄 수 있다. 회원가입&로그인에서는 소셜 계정을 활용한 '간편 로그인'을 제공하면 사용자는 가상 키보드를 쓰지 않아도 된다. 아래는 오늘의 집, 마이리얼트립, 29cm, 리멤버 앱의 회원가입 시작 화면이다. 카카오톡, 네이버, 페이스북, 구글 계정을 활용한 간편 로그인을 제공하고 있다.
앱마다 다양한 디자인으로 간편 로그인을 제공하고 있다. 간편 로그인의 개수부터 버튼의 위치, 크기 다 다르다.생년월일을 입력하는 화면에서 키보드가 아닌 '날짜 피커(Date Picker)'를 제공하는 이유도 마찬가지다. 키보드로 생년월일을 직접 입력하는 것보다 날짜 피커에서 고르도록 하는 게 사용성을 높인다. 또 다른 방법은 '숫자 키보드'를 제공하는 것이다. 숫자 키보드는 0~9까지의 숫자로 구성돼 있는 키보드로, 일반 키보드보다 버튼 하나하나가 커서 오타가 날 확률이 많이 줄어든다.
UX 디자이너는 날짜 피커와 숫자 키보드 중 무엇을 사용자에게 제공할지 '선택'해야 한다. 여기서 선택 기준은 디자이너의 감이 아닌 '데이터'다. 사용자를 A, B 두 그룹으로 나눠 날짜 피커로 된 디자인과 숫자 키보드로 된 디자인 중 어떤 그룹이 생년월일에서 더 많이 이탈하는지 데이터로 확인해 이탈율이 낮은 디자인을 선택해야 하는 것이다. 많은 앱에서 생년월일을 입력할 때 날짜 피커를 쓰는 것으로 보아, 날짜 피커가 숫자 키보드보다 사용성이 높고 이탈할 확률이 낮은 것으로 보인다. 이는 기회가 생겼을 때 직접 테스트해 데이터를 확인해보고 싶다.
UX 디자인은 선택과 검증의 연속이다.우리 앱에는 간편 로그인을 2개만 쓰기로 했다. 간편 로그인 선택지를 너무 많이 주면 오히려 사용자에게 혼란을 주고 사용성을 낮추기 때문이다. 내가 가장 중요하게 생각하는 UX 원칙 중 하나인 '선택지를 줄여라'를 적용한 판단이다. 소셜은 카카오톡과 페이스북을 쓰기로 했다.
2018년 6월 27일자 플래텀 기사에 따르면 국내 안드로이드 모바일 메신저 월간 순사용자는 카카오톡이 3528만 명, 페이스북 메신저가 640만 명으로 아주 큰 비율을 카카오톡과 페이스북이 차지하고 있다. 그래서 카카오톡과 페이스북을 활용한 간편 로그인을 제공하면 타겟 사용자를 넘어서는 대부분의 사용자가 간편 로그인으로 쉽게 회원가입을 할 수 있을 거라고 봤다.
2_ '간편 로그인'이라는 행동을 유도한다.
내가 새로 디자인한 회원가입&로그인의 첫 화면은 간편 로그인 버튼에만 면 전체에 색을 넣어 가장 눈에 띄도록 했고, 쉽게 누를 수 있는 엄지 영역에 간편 로그인 버튼을 놓았다. 이 디자인을 마주한 사용자에게 간편 로그인으로 쉽고 빠르게 회원가입을 하라고 행동을 유도하고 있다.
모든 곳에 '이유가 있는 디자인'을 하려고 노력하고 있다.1) 사용자가 누르지 않았으면 하는 버튼은 엄지 영역에서 먼 곳에
카카오톡과 페이스북을 통한 간편 로그인 버튼을 엄지 영역에 두어 사용자가 쉽게 누를 수 있게 만든 것과는 반대로, X 버튼은 사용자가 누르기 불편한 위쪽에 뒀다. 회원가입에서 이탈하는 것을 막기 위한 위치 선정이다.
2) 회원가입을 하면 얻을 수 있는 이점을 알려준다.
화면 위쪽에 있는 '모바일 옷장을 만들어 볼까요?'라는 문구는 사용자에게 회원가입을 하면 얻을 수 있는 이점을 설명하고 있다.
시간이 지난 뒤 이 문구를 다시 보니, 사용자를 배려하지 않은 문구라는 생각이 든다. 우리 앱의 충성 사용자는 '옷장'이라는 서비스를 주로 이용하는 사용자라고 하지만, 이 화면은 주로 우리 앱을 처음 쓰는 사람이 본다. 우리 앱을 처음 마주한 사용자에게 '모바일 옷장'이라고 하면 무엇인지 알까? 좋은 사용자 중심 글쓰기(UX Writing)를 하기 위해 더 고민해 봐야겠다.
이 문구에는 아래 영상처럼 말하는 듯한 느낌을 주는 모션이 들어가 있다. 이 화면이 켜지면 '모바일 옷장을'이 먼저 나타나고, 뒤이어 '만들어 볼까요?'가 나타난다. 그냥 문구가 적혀있을 때보다 사용자의 시선을 끌 수 있어서, 회원가입의 이점을 더 잘 전달할 수 있을 거라 판단했다. 위쪽 문구를 본 뒤, 눈에 띄는 아래쪽 엄지 영역의 간편 로그인 버튼으로 시선이 이어져 자연스럽게 간편 로그인 버튼을 누르는 행동을 유도할 수 있다.
위 모션을 디자이너의 의도대로 구현하기 위해서는 개발자에게 가이드를 수치로 전달해야 한다. 예를 들어 '모바일 옷장을'은 수직 방향의 움직임을 표현하는 y 좌표가 122에서 132로 움직이고, 투명도는 0%에서 100%로 변한다고 알려줘야 한다. 더 구체적으로는 움직이는 속도는 어떻게 변하는지, 움직이는 시간은 몇 초인지, 언제 모션을 취할 것인지 전달해야 한다.
아래는 내가 iOS 개발자에게 전달한 가이드다. 수치 중 빨간색으로 표시한 부분이 있는데, 이는 '모바일 옷장을'과 '만들어 볼까요?'의 수치가 다른 부분이다. 여기서 주목할 건 투명도(α)가 변하는 시간(duration)이 각각 0.8과 0.6으로 0.2만큼 차이가 있다는 점인데, 0.2초의 차이로도 다른 느낌을 주기 때문이다. 이는 예술의 영역이라고 생각하는데, 이런 차이를 신경쓰는 게 개발의 '효율성' 측면에서 옳은 것인지는 생각해 볼 문제다.
모션을 디자이너의 의도대로 구현하기 위해서 개발자에게 구체적인 가이드를 전달해야 한다.3) 문구의 톤앤매너는 일관되게
텍스트 필드의 '먼저 로그인이 필요해요 :)'라는 문구는 '다정하게'라는 톤앤매너에 맞게 작성했다. 이 부분도 사용자 중심 글쓰기 관점에서 좋은 문구인지 고민이 필요하다.
4) 플레이스 홀더는 명료하게
텍스트 필드에 적혀있는 '플레이스 홀더'에는 사용자가 해야 하는 일을 안내한다.
5) 텍스트 필드 밑줄 모션
간편 로그인을 원하지 않는 사용자는 텍스트 필드를 눌러 이메일을 입력하고 회원가입 또는 로그인 과정을 진행할 수 있다. 여기에는 아래와 같은 모션을 넣어 텍스트 필드가 활성화 됐다는 걸 알려준다.
난 이런 모션을 구현할 때 프로토타이핑 툴 '프로토파이'를 적극적으로 활용하고 있다. 프로토파이는 코딩 없이 실제 제품 수준까지 프로토타이핑을 할 수 있는 툴로, 간단한 모션을 구현해 팀원들과 소통할 때도 자주 쓰고 있다. 팀원들에게 말로 설명하기보다 보여주는 게 이해가 빠르고 쉽기 때문이다. 이 모션 역시 아래와 같이 가이드를 만들어 개발자에게 전달했다.
텍스트 필드 모션 가이드.6) 텍스트 필드______서버 통신으로 사용성 올리기
내 디자인이 일반적인 회원가입과 다른 점이 있다면 바로 텍스트 필드다. 보통 회원가입이나 로그인 화면에는 이메일과 비밀번호를 적는 텍스트 필드가 함께 있는데, 내 디자인에는 이메일을 적는 텍스트 필드만 있다. 내가 사용자에게 유도한 행동은 '간편 로그인'을 통한 쉬운 회원가입이기 때문에, 이 텍스트 필드를 되도록 쓰지 않았으면 했다. 그래서 눈에 띄지 않도록 이 텍스트 필드 밑줄과 텍스트 필드 입력 후에 누르는 '계속하기' 버튼은 우리 앱에서 비활성화를 뜻하는 옅은 회색(#DBDBDB)으로 돼 있다. 또한 계속하기 버튼은 선으로 만들어, 면으로 된 간편 로그인 버튼이 강조되도록 했다.
사용자가 간편 로그인을 원하지 않아서 이 텍스트 필드를 터치하면 키보드가 나오고 텍스트 필드가 검정색(#0F0F0F)으로 활성화된다. 키보드가 나오면 화면에는 이메일을 입력하는 텍스트 필드만 보이게 되고 이메일에만 집중할 수 있는 화면이 된다.
사용자가 텍스트 필드에 적는 이메일이 조건에 맞으면 텍스트 필드 아래에 있는 '계속하기' 버튼이 활성화된다. 입력한 텍스트에 @와 .이 포함돼 있고 .은 @보다 문자열 뒤쪽에 있으며 @ 앞, @와 . 사이, . 뒤에 텍스트가 있다는 조건이다. 즉 'lily@email.com'처럼 이메일의 형태로 적어야 계속하기 버튼이 활성화돼 누를 수 있다. 조건이 성립해야만 버튼을 누를 수 있기 때문에, 잘못된 이메일을 입력한 사용자에게 팝업이나 토스트를 보여주는 것보다 사용성을 높인다.
조건에 맞게 이메일을 입력한 사용자가 '계속하기' 버튼을 누르면 앱은 서버와 통신한다. 이 이메일이 기존 회원의 이메일인지 아닌지 판단하기 위해서다. 기존 회원의 이메일이라면 로그인 화면으로 이동하고, 등록되지 않은 이메일이라면 회원가입 화면으로 이동한다.
이렇게 하면 사용자가 '이메일로 회원가입하기', '이메일로 로그인' 같은 선택지를 직접 선택하지 않아도 된다. 그 판단을 앱이 해준다. 사용자가 보는 선택지를 줄여, 사용자의 노력을 줄이고 사용성을 높일 수 있다.
웹 기반 앱이라 이런 화면으로 구성돼 있는 것으로 보인다.한 가지 유의할 건 서버 통신 중에는 '로딩 중'이라는 걸 꼭 사용자에게 알려줘야 한다는 점이다. 앱이 사용자의 행동에 반응한다는 걸 반드시 보여줘야 한다. 앱이 빠르다는 인상을 주려면 도달 화면으로 먼저 이동 후 서버 통신을 하며 로딩을 보여줄 수도 있다. 이때 기본적인 로딩을 보여줄 수도 있지만, 스켈레톤 UI(Skeleton UI)를 로딩 화면으로 활용할 수도 있다.
서버 통신 중에는 로딩 애니메이션이나 스켈레톤 UI 애니메이션 등을 사용자에게 보여줘 앱이 '작동'하고 있다는 느낌을 줘야 한다.7) 사용자가 꼭 눌렀으면 하는 버튼은 엄지 영역에
내 회원가입 디자인의 핵심은 '간편 로그인'이기 때문에 간편 로그인 버튼은 가장 눈에 띄어야 하며, 누르기 쉬운 엄지 영역에 있어야 한다.
8) '서비스 이용 약관'과 '개인정보 보호정책' 알리기
사용자가 회원가입을 할 때 서비스 이용 약관과 개인정보 보호정책을 알려야 한다. 방송통신위원회에서 배포한 '스마트폰 앱 개인정보보호 가이드라인'에 따르면 [필수 동의 항목인 서비스 이용약관 동의, 개인정보 수집 및 이용 동의 내용은 쉽게 확인할 수 있어야 하며, 원클릭으로 동의할 수 있다]고 한다.
여기서 주목할 건 '원클릭으로 동의할 수 있다'는 점이다. '개인정보 마케팅 활용 동의'나 '개인정보 제3자 제공 동의', '위치정보 이용약관 동의'처럼 선택 동의 항목이 아니라면 굳이 사용자가 체크박스에 체크를 하지 않아도 된다는 뜻이다. 따라서 선택 동의 항목이 없다면 아래처럼 사용자가 체크하는 과정 없이 버튼을 누르는 것만으로 동의시키는 게 사용성을 높인다. 체크하는 번거로운 과정을 없앤 것이다.
'원클릭'으로 동의가 가능한 항목은 사용자가 체크 박스를 누르는 과정을 없애고, 다음 화면으로 넘어가는 버튼을 누르는 것만으로 동의를 하게 해서 사용성을 높일 수 있다.+) 다양한 디바이스에 대응하는 디자인
내가 디자인한 회원가입&로그인 화면에는 가변 영역(디바이스의 높이에 따라 달라지는 영역)이 두 군데 있다. '모바일 옷장을 만들어 볼까요?' 문구와 '텍스트 필드' 사이, '텍스트 필드'와 '간편 로그인' 사이다. 텍스트 필드는 두 가변 영역의 중앙에 위치한다.(덧. 아래 이미지를 보시면 각 영역이 어디인지 쉽게 확인하실 수 있습니다.)
이렇게 가변 영역을 두면 디바이스가 달라지더라도 각 화면 크기에 대응할 수 있을뿐만 아니라, 시각적으로 일관성이 생긴다. 또한 사용자가 이메일로 회원가입을 하기 위해 텍스트 필드를 이용할 때 화면 아래에서 나온 키보드 바로 위에 '계속하기' 버튼이 위치하게 돼, 사용자는 이메일을 입력한 뒤 엄지가 닿는 부분에 있는 계속하기 버튼을 쉽게 누를 수 있어 사용성이 좋아진다.
가변 영역을 잘 정하면 디바이스가 달라져도 각 화면 크기에 대응할 수 있을뿐만 아니라, 시각적인 일관성이 생긴다. 사용성도 올릴 수 있다.
3_ 섬세한 디자인으로 사용자가 불편하지 않게 만든다
내가 사용자에게 유도한 건 간편 로그인을 통한 쉬운 회원가입이지만, 이메일을 입력해 회원가입을 하는 사용자도 이탈하지 않도록 하기 위해 디테일에 신경 쓰며 섬세하게 디자인했다. 아래 오른쪽 화면은 회원가입을 하려는 사용자가 텍스트 필드 영역에 이메일을 입력했을 때 이동하게 되는 화면이다.
사용자가 이메일을 입력한 뒤 '계속하기' 버튼을 누르면 서버에서 가입된 이메일인지 아닌지 판단한다. 가입된 이메일이 아니라면 회원가입 화면으로 이동한다.1) 앱의 어느 위치에 있는지 명확히 알려주기
화면 위쪽 내비게이션 바 중앙에 있는 레이블은 사용자가 앱의 어느 위치에 있는지 알려준다.(덧. 화면 위쪽에 '뒤로 가기(<)' 버튼이나 레이블이 있는 '바(bar)'를 iOS에서는 '내비게이션 바(Navigation Bar)'라고 하고, 안드로이드에서는 '상단 앱 바(The Top App Bar)'라고 합니다.)
2) 사용자가 해야 할 일
이 화면에서 사용자가 해야 할 일은 '비밀번호 입력'이다. 사용자가 집중할 일을 명확하게 알려주기 위해 의도적으로 글씨 크기를 크게 했다. 사용자가 할 일은 비밀번호 입력뿐이기 때문에 사용자가 이 화면에 도달했을 때 바로 비밀번호를 입력할 수 있도록, 첫 번째 텍스트 필드에 커서를 갖다 놓고 밑줄 모션을 보여주는 동시에 키보드는 자동으로 호출돼 있도록 하면 사용성이 높아진다. 이런 섬세한 부분은 개발자에게 정확히 가이드를 줘야 놓치지 않고 구현할 수 있다.
3) 비밀번호 보안 규칙은 필요한 만큼만!
회원가입에서 사용자가 이탈하는 주요 원인은 '비밀번호'다. 회원가입을 하다보면 특수 문자를 꼭 넣어야 한다든지, 연속된 문자열은 쓸 수 없다든지 하는 보안 규칙을 만나게 된다. 보안 규칙은 서비스의 성격에 따라 강도를 조절해야 한다. 예를 들어 은행 앱 같은 금융 서비스는 돈이 오고가기 때문에 강한 규칙을 꼭 적용해야 한다. 개인정보를 해킹해 사용자에게 명예훼손 등의 피해를 입힐 수 있는 SNS 같은 서비스도 적당히 강한 규칙이 필요하다.
우리 앱은 강한 규칙이 필요한 서비스는 아니다. 강한 규칙으로 사용자에게 스트레스를 주고 회원가입에서 이탈하게 하기보다 '6자리 이상'이라는 약한 규칙을 플레이스 홀더에 적어 회원가입을 쉽게 할 수 있도록 했다. 여기서 중요한 건 강한 규칙이든 약한 규칙이든 사용자에게 입력하고 있는 비밀번호가 규칙에 맞는지 실시간으로 '피드백'을 줘야 한다는 것이다. 사용자가 열심히 비밀번호를 입력해 완료 버튼을 눌렀는데, 그제서야 '비밀번호가 약합니다!'라고 팝업을 띄워 다시 비밀번호를 입력하게 한다면 사용자가 회원가입에서 이탈할 확률이 높아진다.
나는 사용자가 첫 번째 텍스트 필드에 비밀번호를 1글자 이상 적는 순간부터 경고의 메타포를 담은 빨간색 글씨로 '아직 6자리가 아니에요'라는 피드백을 줬다. 이 프로젝트를 마치고 한 달 정도가 지난 지금은 이 피드백이 사용자를 압박하는 느낌을 주지 않을까 걱정되기도 한다. 하지만 비밀번호를 6자리 이상 입력해 조건을 만족했을 때, 사용자에게 긍정이나 성공의 메타포인 초록색 글씨로 '알맞은 비밀번호입니다 :)'라는 피드백을 자연스럽게 주려면 필요하다는 쪽으로 생각이 기운다. 꾸준히 고민해 봐야 할 문제다.
비밀번호를 입력할 때, 실시간으로 피드백을 줬다. 조건을 만족하지 않았을 때는 경고의 메타포인 '빨간색'으로, 조건을 만족했을 때는 긍정의 메타포인 '초록색'으로 피드백을 줬다.4) 비밀번호 확인이 필요한가?
지난 2월 나는 회원가입 과정에서 비밀번호를 1번만 적도록 디자인했었다. 대신 '1번만 입력하니 정확히 입력해주세요!'라는 안내 문구와 가려진 비밀번호를 보면서 쓸 수 있는 '비밀번호 보기' 기능을 제공했다. '비밀번호 확인'이라는 과정을 없애 사용자가 스마트폰의 작은 키보드로 똑같은 비밀번호를 2번 입력해야 하는 불편함을 없애 사용성을 높인 것이다. 보통 앱을 실행하면 자동 로그인을 하기 때문에 사용자가 로그아웃하지 않는 이상 다시 비밀번호를 입력할 일이 거의 없어서 해볼 수 있었던 디자인이었다.
이번에 우리 팀에게 회원가입 개편 시안을 공유할 때 비밀번호 확인을 없앤 디자인과 비밀번호 확인을 넣은 디자인 2개의 '선택지'를 제안했다. 최종적으로 비밀번호 확인을 넣는 것으로 결정됐는데, 사용성을 올리기 위해 비밀번호 확인을 없애는 것도 좋지만 비밀번호 확인이라는 안전 장치가 있는 게 사용자에게 더 좋을 거라는 판단이었다.
난 비밀번호 확인의 사용성을 향상시키기 위해 두 비밀번호 입력창에 적은 비밀번호가 다르면 '두 비밀번호가 달라요! 확인해 보시겠어요?'라는 실시간 피드백을 제공하기로 했다. 두 비밀번호가 같으면 '계속하기 버튼'이 활성화된다.
두 비밀번호가 다를 경우 다르다는 피드백을 주고, 같으면 '계속하기' 버튼을 활성화시켰다.5) 회원가입 과정이 얼마나 진행됐는지 알려주기
화면을 자세히 살펴보면 계속하기 버튼 위에 '다음이 마지막 단계입니다!'라는 안내 문구가 있다. 회원가입 과정이 얼마나 남았는지 사용자에게 알려줘 회원가입을 완료할 확률을 높였다.
6) 모든 조건을 만족한 경우 '계속하기' 버튼 활성화
두 비밀번호가 같은 경우에만 계속하기 버튼이 활성화된다. 활성화된 계속하기 버튼을 누르면 사용자는 아래처럼 성별을 선택하는 화면을 거쳐 회원가입을 완료할 수 있다.
원래 디자인 시안에는 아래 성별 선택 화면 아래쪽에 있는 '회원가입 완료' 버튼이 없었다. 여성과 남성 중 하나의 버튼을 누르면 바로 회원가입이 완료되도록 했던 것인데, 선택한 성별에 대해 확인할 수 있도록 최종 버튼이 있으면 좋겠다는 동료들의 피드백을 듣고 '회원가입 완료' 버튼을 엄지 영역에 추가했다.
성별을 선택하면 '회원가입 완료' 버튼이 활성화된다.여기까지는 이메일로 회원가입하는 과정이었다. 첫 화면에서 사용자가 입력한 이메일이 이미 가입한 이메일이라면 아래 오른쪽 화면으로 이동해 사용자는 '로그인'을 진행할 수 있다.
사용자가 이메일을 입력한 뒤 '계속하기' 버튼을 누르면 서버에서 가입된 이메일인지 아닌지 판단해, 가입된 이메일이라면 로그인 화면으로 이동한다.1) 앱의 어느 위치에 있는지 명확히 알려주기
'로그인' 화면이라는 걸 알려준다.
2) 사용자가 해야 할 일
회원가입 화면과 마찬가지로 사용자가 집중할 일이 '비밀번호 입력'이라는 걸 명확하게 알려주기 위해 의도적으로 글씨 크기를 크게 했다. 추가된 건 '반갑습니다 고객님!'이라는 로그인 환영 문구다.
3) 플레이스 홀더
플레이스 홀더에서 한 번 더 사용자에게 비밀번호를 입력해야 한다는 걸 상기시킨다. 모든 텍스트 필드에는 앞에서 소개한 모션이 들어간다.
4) 비밀번호 보기 기능 제공
비밀번호 보기 기능을 제공해 비밀번호를 확인하면서 입력할 수 있도록 했다. 이는 키보드가 작아 오타가 나기 쉬운 모바일 환경에서 사용성을 높인다.
5) 비밀번호를 찾는 기능 제공
사용자가 로그인을 할 때 사용성을 낮추는 주요 요인은 '비밀번호'다. 사용자는 너무 많은 서비스에 가입하고 있고, 비밀번호를 일일이 기억하기는 어렵다. 따라서 사용자가 비밀번호를 잊었을 때 쉽게 찾을 수 있거나, 재설정할 수 있는 기능을 제공하면 좋다.
나는 '비밀번호를 잊으셨나요?'라는 버튼을 누르면 팝업을 띄워 이메일로 비밀번호를 재설정할 수 있는 링크를 보내준다는 안내를 하고, 사용자가 링크를 받고 싶다고 한다면 이메일로 전송됐다는 피드백을 토스트 메시지로 주는 것으로 이 과정을 디자인했다. 이때 사용자는 이미 이메일을 첫 화면에서 입력했고 서버에서 회원이라는 걸 확인한 상태이기 때문에, 비밀번호 재설정 링크를 받을 이메일을 따로 입력할 필요가 없다.
비밀번호를 잊은 사용자가 쉽게 비밀번호를 찾을 수 있도록 디자인했다. 만약 사용자의 이메일이 간편 로그인으로 가입했던 이메일인데, 모르고 있었다면 첫 화면에서 이메일을 입력하고 '계속하기' 버튼을 눌렀을 때 아래와 같이 안내 팝업을 보여준다.
사용자가 간편 로그인으로 회원가입했다는 걸 잊고 이메일로 로그인하려 할 수도 있다. 이를 상기시켜준다.6) 적절할 때 버튼 활성화
로그인 버튼은 사용자가 비밀번호를 입력하기 시작하면 활성화시킨다. 로그인 버튼을 눌렀을 때 비밀번호가 틀렸다면 아래와 같이 피드백을 줘, 비밀번호를 다시 입력하도록 했다. 팝업보다는 토스트 메시지나 아래와 같이 보여주는 게 팝업의 '확인' 버튼을 누르는 과정을 줄이기 때문에 사용성이 높다. 단, 사용자가 메시지를 잘 인지할 수 있도록 적절한 모션을 써야 한다.
입력한 비밀번호가 틀렸을 때 주는 피드백.섬세한 디자인: 마이크로 인터랙션 디자인
최근 댄 새퍼의 '마이크로 인터랙션: 디테일에 강한 인터랙션 디자인'이라는 책을 조금씩 읽고 있다. 그러면서 내가 이번 디자인에서 특히 신경썼던 '섬세한 디자인'이 '마이크로 인터랙션(Micro Interactions)'이라는 용어로 불린다는 걸 알았다. 예를 들면 사용자가 회원가입 과정에서 비밀번호를 입력할 때 보안 규칙에 맞는 비밀번호라는 피드백을 실시간으로 준다거나, 실수를 막기 위해 버튼의 활성 상태를 경우에 따라 나누는 것 등이 마이크로 인터랙션이다.
UX 디자이너로서 아주 작은 부분까지 세심하게 신경 쓰는 건 아주 중요하다고 생각한다. 마이크로 인터랙션은 사용자가 의식하지는 못하지만 제품(서비스)을 큰 노력을 들이지 않고 '쉽게' 쓸 수 있도록 만든다. 곳곳에서 마이크로 인터랙션을 구현하는 건 디자이너와 개발자 모두가 신경써야 할 일이 많아지지만, 그만큼 사용자 경험(UX)은 좋아진다.
02 엄지 영역 디자인하기
한두 달 전쯤 '엄지 하나로 모든 기능을 쓸 수 있는 UI/UX 디자인'을 해보면 어떨까 하는 생각이 들었다. 많은 사용자가 타이핑을 하지 않는 이상 엄지 하나로 스마트폰을 쓰는 경우가 많아 보였다. 그래서 이번에 회원가입&로그인과 함께 설계한 'MY' 탭 메인 화면은 사용자가 엄지 하나로 모든 기능을 쓸 수 있도록 엄지 영역을 디자인하는 걸 목표로 삼았다. 아래는 기존 디자인(왼쪽)과 내가 새롭게 개편한 디자인(오른쪽)이다.
기존 MY 디자인(왼쪽), 내가 새롭게 한 MY 디자인(오른쪽)왼쪽 기존 MY 디자인은 아래쪽 탭 바(Tap Bar)를 제외하고는 사용자가 누를 수 있는 항목이 모두 엄지 영역을 벗어나 있다. 그나마 엄지 영역과 가까운 '오픈소스 라이센스'라는 목록은 앱에 꼭 들어가야 하지만, 일반 사용자가 볼 일이 없는 항목이다.
나는 사용자에게 필요한 항목인 공지사항, 1:1 문의하기, 설정, 성별 선택을 모두 아래쪽 엄지 영역으로 옮겼다. 이들을 모두 옮기고 나니 위쪽 부분에 넣을 요소가 없어서 빈 공간이 됐는데, 마침 나중에 우리 서비스에 들어갈 채팅 기능을 위해 사진과 닉네임이 필요한 상황이었다. 이를 활용해 프로필 사진과 닉네임으로 나머지 빈 공간을 디자인하고 '로그인해 보면 어떠세요?'라는 안내를 넣어 회원가입을 유도했다. 요소가 밀집된 부분이 아닌 여백이 있는 곳에 로그인 유도 장치가 있어서 훨씬 눈에 잘 띄었다. '로그인하기' 버튼은 엄지 영역 위쪽 언저리에 걸쳐 있도록 디자인했다.
로그아웃과 탈퇴는 어렵게
사용자가 회원가입을 하고 로그인을 하면 로그아웃 기능과 탈퇴 기능이 필요하다. 대부분의 서비스에서 사용자가 로그아웃하거나 탈퇴하는 건 좋지 않기 때문에 사용자가 찾기 어렵게 해야 할 필요가 있다. 그렇다고 너무 꼭꼭 숨겨놓으면 사용성을 낮출 뿐만 아니라 반감을 살 수도 있으니 주의해야 한다.
로그아웃은 사용자가 찾기 어렵게 만드는 게 비즈니스적으로 좋다.여기서 눈여겨보면 좋을 건 로그아웃을 할 때 띄운 팝업이다. 사용자가 다시 로그인할 때 쉽게 할 수 있도록 하기 위해, 어떤 아이디로 다시 로그인하면 되는지 정보를 주는 것이다. 세심한 배려가 사용성을 올릴 수 있다.
사용자가 다시 로그인할 때를 위한 세심한 배려. 쉽게 잊을 가능성이 높지만, 그냥 무미건조하게 로그아웃시키는 것보다 좋지 않을까?회원 탈퇴 같이 사용자가 서비스를 떠나길 원한다면 탈퇴 시 무엇을 잃게 되는지 팝업으로 알려줘야 한다. 그래야 사용자가 탈퇴를 한 번 더 고민하게 되고, 떠나지 않을 확률을 높일 수 있다.
탈퇴 시 잃는 게 무엇인지 사용자에게 알려줘야 한다.03 좋은 UX 디자이너
한 달 전쯤 우리 팀은 비즈니스 모델(Business Model)을 고쳐잡고 새로운 서비스 베타 버전을 준비하기 시작했다. '모바일 웹' 기반의 서비스여서, 기존에 서비스하던 앱과는 구조적으로 다른 점들이 있었다. 가장 큰 문제는 구글의 크롬, 애플의 사파리, 갤럭시의 삼성인터넷 등 다양한 웹 브라우저 환경에 대응해야 한다는 점이었다.
앱에서는 아래처럼 '키보드 위 일정한 위치'에 버튼을 놓을 수 있었다. 키보드 위에 버튼이 있어야 사용자가 타이핑 뒤 엄지를 살짝 위로 올려 바로 버튼을 누를 수 있어서 사용성이 올라간다. 그래서 난 키보드와 버튼이 함께 있는 화면에서는 이런 식으로 디자인하는 걸 '당연하게' 생각해 왔다.
키보드 위 일정한 위치에 버튼을 두는 디자인은 앱으로 개발하면 어렵지 않게 구현할 수 있다.그런데 웹에서는 구현하기가 어려웠다. 대부분의 웹 브라우저에서는 구현됐지만, 애플 사파리에서는 구현이 되지 않았다. 나는 앱에서 구현이 됐으니, 당연히 웹에서도 가능할 거라 생각하고 개발자에게 꼭 구현해 달라고 요청했다. 버튼을 다른 곳으로 옮겨서 사용성을 낮추고 싶은 마음이 없었다.
하지만 사파리에서는 구현이 힘들어 보였다. 트릭을 써서 비슷하게 구현할 수는 있었지만, 버튼이 키보드 뒤에 있다든지, 위치가 애매하다든지, 키보드가 내려가면 버튼이 이상한 곳에 놓인다든지 하는 문제들이 생겼다. 그냥 포기하고 넘어가야 하는 건지 고민이 깊어졌다.
그런데 우연찮게 답을 찾았다. 이번 글을 쓰며 페이스북 앱의 회원가입 과정이 어떤지 살펴보던 중에 페이스북의 버튼 위치를 보고 깨달음을 얻은 것이다. 페이스북은 키보드 위쪽 일정한 위치에 버튼을 두지 않았다.
페이스북은 키보드와 버튼이 동시에 있는 화면에서 키보드 위 일정한 위치가 아닌 곳에 버튼을 뒀다.곰곰이 생각해보며 페이스북의 회원가입 과정을 계속 반복해봤다. 그러다가 깨달았다. 두 손으로 타이핑을 치고 있을 때에는 엄지가 기존 엄지 영역보다 더 위쪽으로 올라갈 수 있었다. 그래서 키보드 위에 바로 버튼이 있지 않더라도 버튼을 누르는 게 크게 불편하지 않았다. 사용성을 해치지 않았다. 내 고정관념이 깨졌다.
나는 아래처럼 텍스트 필드 아래 '고정된' 위치로 버튼을 옮겼다. 그러자 어떤 웹 브라우저든지 모두 같은 화면으로 보이게 됐고, 브라우저별로 달랐던 사용 경험도 일관성이 생겼다.
버튼을 텍스트 필드 아래쪽 40px 떨어진 곳으로 옮겨 고정시켰다. 버튼이 키보드에 따라 동적으로 움직이지 않으니 모든 웹 브라우저에서 일관되게 적용됐다.이 과정을 겪으면서 디자인적인 해결책이 전혀 없어 보이더라도 새로운 시각에서 해결책을 찾아 제시할 수 있는 디자이너가 '좋은 UX 디자이너'가 아닐까 하는 생각이 들었다. 새로운 관점에서 문제를 바라보고 원칙을 넘어서는 방법으로 문제를 해결할 수 있는 디자이너. 그런 UX 디자이너가 되기 위해 노력해야겠다는 생각이 든다.
마치며
디자이너가 디자인한 '경험의 틀' 안에서 사용자가 행동하도록 만드는 UX 디자인. 참 매력있다. 요즘에는 좋은 UX를 위한 모션과 애니메이션에 관심이 많다. 모션과 애니메이션은 사용자가 앱 같은 디지털 제품을 쓰고 있다는 '느낌'을 주는 데 꼭 필요하기 때문이다.
그동안 인터랙션 디자인을 모션이나 애니메이션이라고 단순하게 생각하고 있었다. 완전히 틀린 말은 아니다. 디지털 제품에서 사용자와의 소통(인터랙션, Interaction)을 위해 애니메이션과 모션은 정말 중요하기 때문이다.
그런데 최근 한 스타트업의 CEO와 대화를 나누면서 새로운 인사이트를 얻었다. 인터랙션이란 게 꼭 모션이나 애니메이션이 아니라는 걸 깨달은 것이다. 그분은 디자이너가 버튼의 위치가 바뀐 디자인을 사용자에게 건넸을 때, 사용자가 버튼을 누르는 비율이 어떻게 바뀌는지 데이터로 보는 것 또한 인터랙션이라고 볼 수 있다고 설명했다.
난 큰 깨달음을 얻었다. 디자이너가 사용자에게 어떤 디자인을 건네고, 디자이너는 사용자의 반응을 데이터로 살피고, 더 좋은 디자인을 사용자에게 건네고 하는 과정도 인터랙션 디자인이라는 걸 알게 된 것이다. 인터랙션 디자인은 말 그대로 사용자와 소통하는 디자인이라는 걸, 어떻게 보면 당연한 걸 모르고 있었다.
이번 회원가입&로그인 과정을 디자인하면서 특별히 신경썼던 섬세한 디자인도 (마이크로) 인터랙션 디자인이다. 사용자가 무언가를 입력하면 디자이너가 미리 디자인한 피드백을 주고, 사용자는 그 피드백을 통해 앱을 편하게 쓴다. 이 또한 사용자와 디자이너 사이의 소통이다.
이 깨달음 덕분에 UX 디자인을 새로운 관점에서 볼 수 있게 됐다. 새로운 재미도 느꼈다. 꾸준히 UX 디자인에 대한 인사이트를 넓혀가는 디자이너가 되고 싶다.
(덧)
과학기자 시절 저는 '그로텐디크의 노트'라는 한 수학자의 노트를 취재하기 위해 프랑스 남부 몽펠리에라는 곳에 간 적이 있습니다. 그로텐디크의 노트는 '알렉산더 그로텐디크'라는 수학자가 남긴 노트입니다. 그로텐디크는 직관력과 지성이 20세기 최고의 물리학자인 아인슈타인에 비견될 정도의 인물입니다. 수학이 대중에게 친숙하지 않아 잘 알려져 있지 않지요.
오랫동안 비공개였던 그로텐디크의 노트는 2017년 5월 10일 온라인에 공개됐습니다. 이 노트 속에는 이미 알려져 있던 내용도 있었지만 완전히 새로운 내용도 많았습니다. 취재원이었던 장 말구아르 그로텐디크 노트 프로젝트 리더는 "그로텐디크의 노트를 이해하면 새로운 수학 분야가 생길 수도 있으며, 수학계에 막대한 영향을 끼칠 것"이라며, "이 노트의 내용은 하나의 명제를 증명하는 게 아니라 수학 전반에 걸쳐 기초적인 개념을 다루고 있다"고 덧붙였지요.
여기서 제가 주목한 부분은 그로텐디크는 하나 하나의 문제에 집중한 수학자가 아니라는 겁니다. 그로텐디크가 관심 있었던 건 수학 전반에 걸친 기초였지요. 특정 문제를 해결하는 게 아닌 후대 수학자가 연구할 수 있는 풍부한 토대를 만드는 일에 관심이 있었습니다. 실제로 그로텐디크가 노트에 남긴 그만의 생각하는 방식은 후대 수학자들에게 큰 영감을 주고 있습니다. 아인슈타인이 상대성 이론으로 후대 물리학자들에게 새로운 연구의 기반을 마련해주고, 불과 2년 전 '중력파'라는 선물을 과학계에 가져다준 일과 마찬가지입니다.
저는 UX 디자인이라는 분야를 저만의 사고방식으로 새롭게 써내려가고 싶습니다. 그 내용은 이론이 아닌 실무에서 직접 경험한 내용을 바탕으로 할 생각입니다. 점점 더 발전하고 있는 UX 디자인 분야에서 많은 사람이 영감을 받을 수 있도록 풍부한 토대를 쌓아보고 싶습니다. 그 결과가 무엇일지 아직 구체적으로 떠오르지는 않지만, 30대에 이룰 만한 큰 그림이라는 생각이 듭니다.
실제 그로텐디크의 노트의 모습. 사진 출처: 김경환P.S. 그로텐디크에게는 한국인 제자가 있었습니다. 그 제자에게 김치 만드는 법을 배우기도 했지요. 김치가 건강에 좋다고 생각해 직접 담가서 매일 먹기도 했답니다. 논문에 가까운 김치 에세이를 쓰기도 했습니다.
(덧)
모바일에서 글을 보시는 분의 사용성을 올리기 위해 이미지 안에 들어가는 글씨를 크게 했습니다. 글의 사용성이 올라갔기를 바라며, 긴 글 끝까지 읽어주신 분들께 감사의 말씀을 전합니다.
작은 앱 프로젝트
많은 기능과 서비스를 갖추고 있는 슈퍼 앱들 사이에서 단순함을 가장 큰 목표로 하는 '작은 앱'이 사람들에게 어떠한 의미로 다가갈지 연구하는 '작은 앱 프로젝트'를 진행하고 있습니다.
[프로토타이핑]회원가입을 쉽게 만드는 UI/UX 디자인
이번 프로젝트를 진행하며 팀원들에게 마이크로 인터랙션을 공유하기 위해 실제 제품과 같은 수준의 프로토타입을 프로토파이로 제작했습니다. 도움이 되실 수 있는 분도 계실 것 같아 프로토파이 파일을 공유합니다. 감사합니다. (덧. 한 군데 버그가 있습니다.)
04 참고자료
1. [참고서적]
마이크로 인터랙션, 디테일에 강한 인터랙션 디자인
댄 새퍼
2. [방송통신위원회] 스마트폰 앱 개인정보보호 가이드라인
