< div class = " form-group " > < input type = " text " class = " form-control " placeholder = " 아이디 " name = " userID " maxlength = " 20 " > < div class = " form-group " > < input type = " password " class = " form-control " placeholder = " 비밀번호 " name = " userPassword " maxlength = " 20 " > < div class = " form-group " > < input type = " text " class = " form-control " placeholder = " 이름 " name = " userName " maxlength = " 20 " > < div class = " form-group " style =" text-align : center ; " > < div class = " btn-group " data-toggle = " buttons " > < label class = " btn btn-primary active " > < input type = " radio " name = " userGender " autocomplete = " off " value = " 남자 " checked > 남자 < label class = " btn btn-primary " > < input type = " radio " name = " userGender " autocomplete = " off " value = " 여자 " checked > 여자 < div class = " form-group " > < input type = " email " class = " form-control " placeholder = " 이메일 " name = " userEmail " maxlength = " 20 " >
기본적으로 이름과 이메일 필드는 전에 만들었던 아이디, 패스워드 양식과 똑같이 하고 placeholder 값만 바꾸면 된다.
성별 필드를 생성할 때, 남자 혹은 여자를 선택할 수 있도록 하기 위해 폼 태그로 toggle 버튼을 생성했다. 또한 하나만 선택해야하므로 radio 속성으로 만들었다.
이렇게해서 간단하게 회원가입 페이지 디자인이 끝났다. 한번 테스트 해보자.
우리가 코딩한 대로 디자인이 잘 되었다.
[디자인 꿀팁] 빠른 회원가입을 이끌어내는 회원가입 ui 디자인 가이드
“웹 폼 디자인이 지루하다면, 사람들은 그 양식을 기입하는 걸 싫어하게 됩니다.”
웹 폼(양식)은 모든 웹사이트에서 필수적인 요소입니다. 연락처 정보, 지불 수단, 아이디와 비밀번호, 이름 및 나이 등, 여러분의 제품을 사용하는 사람들은 어떤 형태로든 폼 양식과 마주할 수밖에 없습니다. 그래서 이번 시간 위시켓은 고객 경험을 높여 빠르고 편리한 회원가입을 도모할 수 있는 ‘회원가입 UI’를 소개해드리고자 합니다.
짧게 만든다.
긴 양식을 좋아하는 사람은 없습니다. 디자인의 ‘범위 정하기(Define scope) 단계에서, 폼 양식의 각 필드를 사용자들이 꼭 기입해야 하는 것인지에 대해서 질문하는 시간을 가져 보세요. 시간이 조금 걸릴지라도 의미 있는 일이 될 겁니다. 사용자에게 부담이 덜 될수록, 더 많은 사용자들이 그 양식을 끝까지 기입할 것이기 때문입니다.
회원가입 UI 예시: ASOS
: 아소스(ASOS)의 가입하기 화면은 불필요하게 길고, 그중에서는 반복되는 요소들도 보입니다.
각 필드와 그 라벨(항목)을 가까이 둔다.
모든 라벨들은 그 기입 피드와 가까이 있어야 합니다. 특히 라벨이 다른 필드 위에 있는 경우에는 흰색 여백으로 둘 사이를 명확하게 구분시켜 주세요. 모든 라벨들은 다른 필드가 아닌 그 라벨에 해당하는 기입 필드와 언제나 더 가까이 있어야 합니다. 왜냐하면 사람들은 서로 가까이 있는 요소들끼리 더 관계가 있다고 생각하는 경향이 있기 때문입니다.(게슈탈트의 법칙)
회원가입 UI 예시: 아마존
: 아마존의 가입하기 화면을 보면, 각 필드들 사이에 흰색으로 충분히 여백을 두어서 쉽게 구분할 수 있게 되어 있습니다.
필수 항목을 분명하게 보여준다.
사용자들에게 여러 항목들 중에서 필수 항목이 무엇인지를 말해주세요. 회원가입 양식을 끝까지 기입했는데 나중에 에러 메시지가 뜨게 해서는 안 됩니다. 사용자가 에러 메시지를 보게 되면, 부정적인 경험이 강화되기 때문입니다. 어떻게 해야 잘 작성한 것인지에 대한 분명한 표시가 없다면, 사용자들은 확인하기를 눌렀을 때, 어떤 결과가 나올지를 예측할 수 없습니다. 특히나 ‘비밀번호’ 항목에서 이 부분이 중요한데, 그 이유는 모든 서비스나 사이트들마다 비밀번호 설정에 요구되는 규칙이 다르기 때문입니다.
회원가입 UI 예시: 메일침프(Mailchimp)
: 메일침프(Mailchimp)의 가입 화면을 보면 비밀번호 오류의 기능성을 줄여줄 뿐만 아니라, 사용자가 새로운 계정을 만드는 과정을 긍정적인 경험으로 만들어주고 있습니다.
플레이스홀더(입력예시) 문구를 필드 라벨로 사용하지 않는다.
입력 칸에 흐릿하게 표시되는 플레이스홀더(입력예시) 문구는 특정한 기입 필드에 입력해야 하는 정보에 대해서 힌트를 주는 용도로 사용되곤 합니다. 하지만 일부 디자이너들 중에서는 입력 칸 위에 라벨을 없애서 디자인을 심플하게 하고, 사용자의 혼란도 줄이기 위해서 플레이스홀더를 사용하는 이들도 있습니다. 플레이스홀더를 사용한 디자인 방식의 문제는 사용자가 입력 칸을 클릭하면 플레이스홀더가 사라진다는 점입니다. 그렇기 때문에 그 내용을 정확히 기억하지 못하는 사용자들은, 그 항목이 무엇이었는지를 다시 확인하기 위해서 입력 칸 밖을 클릭하기도 합니다.
회원가입 UI 예시: 구글
: 구글에서는 디테일하고 스마트한 상호작용을 통해 이런 문제를 해결하고 있습니다. 사용자가 입력 필드를 클릭하면, 플레이스홀더의 텍스트가 사라지고 위쪽에 작은 미니 라벨로 변합니다.
자동 포커스(Auto-focus) 기능을 사용한다.
자동 포커스 기능이 잘 갖춰진 웹 폼 디자인은 어디서나 환영받는데요. 필요한 내용을 타이핑하고 나면 탭(Tab) 자판만 눌러서 다음에 입력해야 하는 필드로 넘어갈 수 있기 때문입니다. 이는 마우스를 클릭하는 수고를 덜어줄 뿐만 아니라, 그 사이트에 대한 전반적인 경험에 미묘한 차이를 줍니다. 자동 포커스를 적용하여 사용자들에게 어떤 필드가 활성화되어 있는지를 시각적으로 보여주세요.
활성화된 필드를 부각시켜서 보여준다.
활성화된 필드를 보여주기 위해서는 일반적으로 입력 칸의 테두리와 크기를 키워서 보다 시각적으로 강하게 표시를 해줍니다. 선택된 필드의 색상이 다른 필드들 보다 시각적으로 두드러져 보여야 하면, 그렇게 하면 사용자들은 무의식적으로 해당 활성화된 필드에 눈이 가게 됩니다. 에러가 발생했을 때에도 동일한 개념이 적용될 수 있는데, 에러가 발생한 필드를 붉은색으로 강조하는 방식이 일반적으로 사용됩니다.
회원가입 UI 예시: 활성화된 필드 강조
: 활성화된 필드를 강조해서 집중하기 쉽게 만들어줍니다.
Caps Lock 키가 눌려 있다면 사용자에게 알려준다.
이건 매우 간단한 기능이지만, 이를 적용한 곳들은 많지 않습니다. 여러분도 Caps Lock 키가 눌린 줄도 모르고 계속해서 입력을 시도하다가 번번이 거부된 경험이 있을 겁니다. 더욱 당황스러운 것은 키보드의 Caps Lock 키가 눌려 있다고 알려주지도 않고, 그저 비밀번호가 틀렸다는 안내 글귀만 반복해서 나타나는 웹사이트가 있다는 건데요. 사용자 입장에서 굉장히 짜증 나는 상황이 아닐 수 없습니다.
회원가입 UI 예시: CAPS LOCK 알림
: 맥 OS에서는 로그인 시에 Caps Lock 키가 눌려 있는지를 알려주는 기특한 기능이 있습니다.
필요한 조건을 시각적으로 보여준다.
필요한 사항을 시각적으로 보여주게 되면 사용자들에게 필수 항목에 대한 보다 자세한 정보를 줄 수 있습니다. 예를 들어서 ‘연도’ 항목에 두 자릿수만 필요하다면, 그 내용을 시각적으로 표시해서 사용자들의 혼란을 줄여줄 수 있지요.
회원가입 UI 예시: 인버전
: 인비전(Invision)에서는 서로 다른 자릿수가 필요한 항목에 대해서는 필요한 자릿수를 시각적으로 다르게 보여주는 스마트한 방식을 채택하고 있습니다.
에러 메시지를 감추지 않는다.
어떤 페이지들을 보면 툴팁(Tooltip) 방식으로 에러 메시지를 전달하는 경우가 있습니다. 즉, 입력 칸 옆에 알림 표시를 나타내고, 그 위에 마우스 커서를 가져가면 에러 메시지를 보여주는데요. 이는 사용자들이 자신들의 실수를 바로잡기 위해서 보다 많은 시간을 들여야 하는 것이기에 매우 나쁜 UX라고 할 수 있습니다. 사용자들 중에서는 어떻게 해야 하는지를 모르는 경우도 있습니다. 에러 메시지를 보려면 마우스 커서를 그곳으로 가져가야 하는 것인지를 모르는 것이죠.
회원가입 UI 예시: 페이스북
: 입력 칸 바로 아래에 에러 메시지를 보여주는 게 낫지 않을까요?
선택항목에 대해서도 분명하게 보여준다.
맨 처음에 말씀드린 가이드라인(폼 양식을 짧게 만든다)을 무시하고 선택 항목을 사용하기로 했다면, 이 항목은 선택에 의해서 건너뛸 수도 있다는 사실을 분명하게 보여줘야 합니다. 필수 항목을 별표(*)로 표시하는 것뿐만이 아니라, 선택 사항에 대해서는 입력 칸에 ‘선택’이라는 문구를 더 분명하게 보여주세요. 사용자들 중에서는 별표(*) 기호의 의미를 정확히 파악하지 못하는 사람도 있을 수 있습니다. 별표(*) 기호가 비밀번호 설정 칸 등에서도 사용되기 때문입니다.
회원가입 UI 예시: 넷플릭스
: 별표(*)보다는 ‘선택’이라는 문구로 표시하는 것이 그 의미가 훨씬 더 잘 드러납니다.
이미지를 활용해서 더 많은 참여를 이끌어낸다.
여러 가지 옵션 가운데에서 하나를 골라야 하는 경우에는 이미지를 사용해서 사용자의 결정을 도울 수도 있습니다. 텍스트, 아이콘, 이미지를 활용해서 보다 더 효과적으로 설명할 수 있다면 이런 방법도 좋을 것입니다.
회원가입 UI 예시: 구글 애드
: 구글 애드(Google Ads)에서는 각각의 광고가 어떻게 보이는지에 대한 예시를 이미지로 설명해주고 있습니다.
가능하다면 언제나 자동완성 기능을 사용하도록 한다.
이 방식은 이미 존재하는 어떤 정보를 사용자가 입력해야 하는 경우에 사용하면 효과적인데, 대표적으로는 여행지 명칭이 있습니다. 사람들이 여행 가는 도시 전체의 이름을 전부 입력할 필요 없이, 몇 글자만 입력해서 찾을 수 있게 해주는 것입니다. 때로는 긴 도시의 이름을 다 입력하는 일이 상당히 성가신 과정으로 느껴집니다. 그리고 사용자들이 오타를 낼 수도 있기 때문에, 오히려 자동완성으로 보여주는 것이 실수할 확률을 줄여줄 수도 있습니다.
회원가입 UI 예시: 에어비앤비
: 에어비앤비(Airbnb)에서는 자동완성 기능을 이용해서 사용자들이 원하는 목적지를 쉽게 찾을 수 있도록 하고 있습니다.
웹 폼을 디자인한다는 것은 어려운 과정일 수도 있습니다. 대부분의 사용자들은 회원가입 양식에 정보를 기입하는 걸 좋아하지 않기 때문입니다. 하지만 위에서 소개한 가이드라인을 지키고 UX 문구에도 약간의 유머를 더한다면, 사용자들의 경험을 향상시키고 호의적인 반응을 이끌어낼 수 있습니다. 그렇게만 된다면 사용자들이 양식을 끝까지 기입하는 비율이 높아질 것이며, 좋은 UX 디자인이 구현되는 것이죠.
웹 폼 디자인을 비롯한 다양한 디자인 프로젝트를 진행하고 싶으신 분들은 위시켓 사이트를 방문해보세요:)
7만 명의 검증된 전문가가 여러분의 디자인 프로젝트를 기다리고 있습니다.
본문 내용은 ‘11 form design guidelines’를 각색하여 작성되었습니다.
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)으로 활성화된다. 키보드가 나오면 화면에는 이메일을 입력하는 텍스트 필드만 보이게 되고 이메일에만 집중할 수 있는 화면이 된다.
사용자가 텍스트 필드에 적는 이메일이 조건에 맞으면 텍스트 필드 아래에 있는 ‘계속하기’ 버튼이 활성화된다. 입력한 텍스트에 @와 .이 포함돼 있고 .은 @보다 문자열 뒤쪽에 있으며 @ 앞, @와 . 사이, . 뒤에 텍스트가 있다는 조건이다. 즉 ‘[email protected]’처럼 이메일의 형태로 적어야 계속하기 버튼이 활성화돼 누를 수 있다. 조건이 성립해야만 버튼을 누를 수 있기 때문에, 잘못된 이메일을 입력한 사용자에게 팝업이나 토스트를 보여주는 것보다 사용성을 높인다.
조건에 맞게 이메일을 입력한 사용자가 ‘계속하기’ 버튼을 누르면 앱은 서버와 통신한다. 이 이메일이 기존 회원의 이메일인지 아닌지 판단하기 위해서다. 기존 회원의 이메일이라면 로그인 화면으로 이동하고, 등록되지 않은 이메일이라면 회원가입 화면으로 이동한다.
이렇게 하면 사용자가 ‘이메일로 회원가입하기’, ‘이메일로 로그인’ 같은 선택지를 직접 선택하지 않아도 된다. 그 판단을 앱이 해준다. 사용자가 보는 선택지를 줄여, 사용자의 노력을 줄이고 사용성을 높일 수 있다.
웹 기반 앱이라 이런 화면으로 구성돼 있는 것으로 보인다.
한 가지 유의할 건 서버 통신 중에는 ‘로딩 중’이라는 걸 꼭 사용자에게 알려줘야 한다는 점이다. 앱이 사용자의 행동에 반응한다는 걸 반드시 보여줘야 한다. 앱이 빠르다는 인상을 주려면 도달 화면으로 먼저 이동 후 서버 통신을 하며 로딩을 보여줄 수도 있다. 이때 기본적인 로딩을 보여줄 수도 있지만, 스켈레톤 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. [방송통신위원회] 스마트폰 앱 개인정보보호 가이드라인
이 기사는 인터넷의 다양한 출처에서 편집되었습니다. 이 기사가 유용했기를 바랍니다. 이 기사가 유용하다고 생각되면 공유하십시오. 매우 감사합니다!
