[UX] 가벼운 이야기2011.05.25 18:01



최근, 미투데이의 miriya 님이 올려주신 UX movement 링크를 보게 되었습니다.
http://uxmovement.com/forms/innovative-techniques-to-simplify-sign-ups-and-logins 



웹사이트의 회원가입과 로그인을 어떻게 하면 쉽게 할 수 있을지에 대한 몇가지 테크닉에 관한 글입니다.
그 중에도 인상깊었던 부분은 '웹사이트 로그인을 할때 어떤 정보를 통해서 로그인을 하게 할 것인가?' 였습니다.

로그인 방식은 다음과 같이 몇가지 유형이 있습니다.

1. ID + Password 로 로그인 하는 방법
국내 웹사이트에서는 거의 이 방식을 사용하고 있습니다.
이 경우에는 사용자가 ID를 기억해야 한다는 부담감이 있습니다. 
ID 입력 방식도 사이트에 따라 천차만별이기 때문에 한 사람이 여러개의 ID를 가질 수 있습니다.(첫 글자가 숫자면 안된다는 규칙, 6자리에서 12자리 사이로 입력해야 한다는 규칙같은것들 때문이죠.) 저의 경우 4~5개의 ID와 마찬가지로 4~5 개의 Password가 있어서 상황에 따라 조합해서 가입하는 경우가 있습니다. 
또한 회원 가입시에는 별도로 E-mail 정보를 입력해야 한다는 부담이 있습니다.(E-mail 정보를 ID, Password 확인 용도나, 이벤트 알림 용도로 사용할 수 있죠.) 

미투데이의 로그인 방식


2. E-mail + Password 로 로그인 하는 방법
외국 웹사이트에서는 거의 이 방식을 사용하고 있습니다.
이 경우에도 마찬가지로 사용자가 E-mail을 기억해야 한다는 부담감이 있습니다. 
또한 상대적으로 ID보다는 긴 형태이기 때문에 입력하는데 시간이 걸리며, 인지하는데도 어느정도의 어려움이 있습니다. E-mail을 몇 개나 사용하고 있는지도 마찬가지로 천차만별입니다. 저의 경우를 비추어보자면 E-mail을 4~5개 정도 보유하고 있어서 이 경우에도 어떤 E-mail로 가입했는지 고민을 해야 합니다. 그렇지만 E-mail을 한 개만 사용하는 경우에는 크게 문제는 없을것 같습니다.  

또한 웹사이트에서는 E-mal 입력이 편한 반면, 모바일에서는 E-mail 주소 입력이 상대적으로 불편합니다. 이런 여러가지 생각들속에서 올바른 가치판단을 해야겠습니다.

페이스북의 로그인 방식



그렇다면 회원 가입 시 E-mail 인증 및 E-mail 중복 체크를 해야될까요?
E-mail 중복 체크는 꼭 해야 할것으로 보입니다. 하나의 E-mail로 두 명이 사용할 수는 없기 때문입니다. E-mail 인증 절차도 복잡하지않게 설계한다는 전제하에서 필요할 것으로 보입니다. '인증을 해서 사용자를 불편하게 할 것인가?' vs '인증을 하지 않아 입력단계를 편하게 하지만, 이메일을 잘못 입력했을 경우에는 사용자의 책임으로 전가할 것인가?' 를 사이에 두고 가치판단을 하여야겠습니다.

3. E-mail or ID + Password 로 로그인 하는 방법
E-mail 혹은 ID 둘 중 하나만 입력해도 로그인 하는 방법입니다. 이 경우 E-mail 과 ID 둘다 입력되어있다는 전제하에서 로그인이 성립 될 것 같습니다. E-mail 통해 가입하는걸 원하는 사람 혹은 ID를 통해 가입하는걸 원하는 사람이 있을 수 있으므로 둘 다 지원하자는건데, 개인적으로는 부가적인 방법으로 상황에 따라 적용하는 것이 좋다고 생각합니다.

4. 아예 회원가입을 하지 않고 로그인 하는 방법
회원 가입대신 Facebook이나 Twitter 로그인으로 대신 하는 방법이 있습니다. 원래는 이 방법이 보안을 위해 특정 어플리케이션에서 직접 ID, Password를 입력받지 않고 사용자의 정보에 접근하기 위한 표준이었습니다. 그러나 요즘에는 개인정보가 많이 필요하지 않은 경우 페이스북, 트위터 OAuth로 사용자 인증을 하는 서비스가 많아졌습니다. 

그 전에는 통합아이디 개념의 Open ID 가 하나의 방법이었는데, 요즘에는 이 방식이 점점 줄어들고 있는 것 같습니다. 미투데이에서도 Open ID를 지원하다가, 최근 어떤 이유로 인해 Open ID를 지원하지 않고 있습니다.

5. 전화번호로 로그인(인증)하는 방법
이 경우는 웹사이트보다는 모바일에서 적합한 방식으로 보입니다. '카카오톡'에서 이 방식을 사용하고 있지요. 이 방식은 회원가입 없이도 로그인을 할 수 있다는 장점이 있습니다. 하지만 전화번호가 바뀌거나 없어질 경우에는 이 방식이 문제가 됩니다. 카카오톡의 경우 문자를 주고받는 커뮤니케이션 앱이기 때문에 전화번호가 바뀌어도 크게 이상하지는 않습니다. 하지만 다른 종류의 앱들이 전화번호로 로그인을 할경우에는 다시 친구를 맺어야 하는 문제가 생길 수 있습니다. 
또한 어떠한 연유로 두 개의 전화번호를 가지고 있는 사용자의 경우를 고려할 필요가 있습니다. 카카오톡은 한번에 한 개의 전화번호를 인증하기 때문에 두 개의 전화번호를 인식할 수 있는 방법이 없습니다.

또한 카카오톡은 전화번호 정보밖에 가져오지 않기 때문에, 다른 서비스(이를 테면 웹)에 접목시키기가 매우 어려운 실정입니다. 추가적으로 ID를 입력하게 하는것도 이 때문으로 보여집니다. 

카카오톡의 로그인(인증) 방



웹사이트 로그인, 어떤 방식으로 하는 것이 좋을까요?
저는 요즘 'E-mail + Password' 방식이 좋은 것 같다는 생각이 듭니다. 여러분들의 생각은 어떠세요?


PS. Log in vs Sign in 어떤 용어를 쓰는것이 좋을까요? 
http://legendre.tistory.com/entry/Log-in%EA%B3%BC-Sign-in




* 본 블로깅은 PXD 사내메일의 글을 일부 포함하고 있습니다. 
(글 쓰는데 많은 도움주신 이재용님, 無異님 감사합니다.)
* 좋은 자료 링크해주신 miriya님 감사합니다. 

Posted by 위승용 (uxdragon)

댓글을 달아 주세요

[UX] 가벼운 이야기2010.09.21 06:02

최근 아이폰4를 구매하였습니다. 그 전에는 아이팟 터치(2세대)를 사용했었는데, 아이폰4를 몇 일 동안 사용하면서 약간의 차이를 발견할 수 있었습니다. 이 차이는 아이팟 터치 (2세대)와 아이폰4의 차이라기 보다는 애플 OS 3.0과 4.0 의 차이로도 해석이 되겠지요. 기능상의 차이점은 스티브 잡스의 키노트나 다른 블로깅에서 잘 다루고 있습니다만, 저는 기능상의 차이점보다는 잘 알려지지 않은 디테일의 차이점들을 비교해보려고 합니다.

그림1. 잠금 화면 비교 - 좌) 아이폰4 우) 아이팟터치 2세대

메인화면은 이렇게 바뀌었습니다. 아이팟 터치에는 요일에 괄호를 치지 않았지만 아이폰4에는 요일에 괄호를 치고 있습니다.[각주:1] 이는 날짜와 요일의 구분을 용이하게 하는 것으로 생각합니다. 또한 잠금해제 아이콘도 디테일을 살렸습니다. 기존의 평평한 화살표 모양에서 그라데이션이 들어간 형태로 모양이 바뀌었습니다.

그림2. 검색 화면 비교 - 좌) 아이폰4 우) 아이팟터치 2세대

아이팟 터치 검색화면의 크롤바는 어색하게 최우측에 위치했습니다. 반면 아이폰4는 스크롤바의 위치가 리스트 안쪽으로 변경되었습니다.

그림3. 메일 리스트 화면 비교 - 좌) 아이폰4 우) 아이팟터치 2세대

메일 리스트 화면에서는 UI 가 약간 바뀌었습니다. 아이팟 터치의 메일 UI는 메일의 흐름을 파악하기 힘들었습니다. 아이폰4의 메일은 답글이 오고갔다면 답글의 히스토리를 관리해서 숫자로 보여줍니다. 리스트를 선택 하면 시작글과 해당 답글들의 목록이 보여집니다. 

그림4. 음악 리스트 화면 비교 - 좌) 아이폰4 우) 아이팟터치 2세대

음악 리스트 화면은 어떻게 바뀌었을까요? 다음 화면은 음악 재생시 우측 상단의 앨범 커버를 눌렀을때 나오는 화면입니다. 앨범 리스트 숫자에 점이 붙고 공간이 넓어졌습니다. 공간이 넓어진 이유는 숫자가 100단위 이상으로 생길 때를 대비한 것 같습니다.

그림5. 앨범 리스트 화면 비교 - 좌) 아이폰4 우) 아이팟터치 2세대

아티스트에서 앨범을 선택하면 나오는 리스트 화면도 바뀌었습니다. 아이팟 터치에서는 기본적인 리스트 구조를 가지고 있습니다. 반면 아이폰4는 앨범 UI가 좀 더 앨범의 리스트인양 바뀌었습니다.

그림6. 동영상 재생 화면 비교 - 좌) 아이폰4 우) 아이팟터치 2세대

동영상 재생 화면 에서는 우측 확대 축소 버튼이 삭제되었습니다. 확대 축소 버튼은 동영상 크기가 제공하는 화면보다 작을 경우 늘려서 보여주는 버튼입니다. 그러나 인코딩을 화면 사이즈에 딱 맞게 했을때는 이 버튼이 무의미합니다. 그래서 이 버튼을 제거하지 않았나 생각합니다. 화면 사이즈에 맞지 않는 동영상인 경우에도 동영상 확대 축소 버튼을 제공하지 않는지에 대해서는 확인해보지 않았기 때문에 알 수 는 없지만 아마도 제공하고 있지 않을까라고 조심스럽게 추측해봅니다.

그림7. 알람 설정 화면 비교 - 좌) 아이폰4 우) 아이팟터치 2세대

그 외에도 알람 설정 화면을 보시면 레이블의 변경, 날짜 규칙, 날짜 폰트 크기, 설명 문구의 제거 등을 보실 수 있습니다. 애플 인터페이스 가이드라인을 보시면 설명 문구에 대한 가이드라인이 있습니다만, 그것을 굳이 제거 한 이유는 설명 문구가 불필요하기 때문이라고 생각이 됩니다. 적어도 이 화면에서는 '이벤트의 자세한 내용 설정' 이라는 문구가 없어도 이해하는데는 문제가 없으니까요. 이 설정 화면 말고도 이런 방식으로 레이블, 폰트 크기, 규칙 등이 알게 모르게 개선되고 있음을 알 수 있습니다.


정리하며...

다음과 같이 아이폰 4와 아이팟 터치 2세대의 UI 화면 디테일을 비교해 보았습니다. '가이젠(改善)'은 생활의 모든 면을 계속 고쳐나간다는 일본의 생활철학에서 유래한 말입니다. 애플의 철학은 하나의 제품에서 끝나는 것이 아니라, 그것이 제대로 사용될때까지 끊임없이 디테일을 갈고 닦는것일지도 모르겠습니다. 끝은 존재하지 않습니다. 다만 끊임없는 수정과 개선이 존재할뿐입니다. 오늘도 디테일을 갈고 닦을 애플에게 한 수 배웁니다.

  1. PXD 사내메일의 '[정보디자인] 아이폰 락스크린 요일표시' 라는 글에서 인용 [본문으로]

Posted by 위승용 (uxdragon)

댓글을 달아 주세요