회원가입을 쉽게 만드는 UI/UX 디자인은?
디자인 독학하기 01
공부하면서 얻은 지식과 깨달음, 그 과정에서 겪은 시행착오를 공유합니다.
[Contents]
01 목표는? Zero UI
02 회원가입&로그인 UX를 향상시키는 12가지 방법
03 토스(toss), 핀터레스트(Pinterest)의 UI/UX 스터디
04 회원가입을 쉽게
05 참고 자료
작은 앱 프로젝트
많은 기능과 서비스를 갖추고 있는 슈퍼 앱들 사이에서 단순함을 가장 큰 목표로 하는 '작은 앱'이 사람들에게 어떠한 의미로 다가갈지 연구하는 '작은 앱 프로젝트'를 진행하고 있습니다.
최근 재미있는 곳을 하나 알았다. 'Daily UI'라는 웹사이트인데, 메일 주소를 알려주면 주말을 제외한 100일 동안 100가지 디자인 소재를 던져준다. 혼자 공부하고 있기 때문에 소재를 잡기가 쉽지 않았던 내게는 단비 같은 곳이었다. 처음 받은 소재는 '회원가입'이다.
가장 먼저 참고한 자료는 경험 디자이너 Luca Longo의 회원가입과 로그인에 관한 UX디자인 가이드였다. 이 가이드에 따르면 누구도 회원가입을 위해 빈칸을 채우고, 메일로 확인 절차를 거치고, 엄격한 규칙에 따라 비밀번호를 만드는 걸 좋아하지 않는다. 특히 모바일 환경에서는 더 좋아하지 않는다. 작은 화면 속에서 여러 가지 귀찮은 작업을 많이 해야 하기 때문이다. 나의 개인적인 사용자 경험에서도 충분히 납득이 가는 이야기다.
01 목표는? Zero UI
자료를 조사하다가 'Zero UI'라는 개념을 알게 됐다. UI/UX 디자이너 Sean Beaubien이 쓴 Zero UI 초보자 가이드에 따르면 Zero UI(이하 제로 UI)는 터치(탭핑), 클릭, 타이핑 같은 기존의 방식이 아닌 목소리, 제스처, 눈짓 같은 방식으로 작동하는 UI를 의미한다. 스마트폰이나 컴퓨터 같은 장치(device)가 사람의 언어나 행동, 몸짓을 이해해서, 물리적인 UI가 없더라도 지금 장치(device)로 할 수 있는 모든 일을 할 수 있도록 하는 것을 목표로 한다.
"가장 좋은 인터페이스는 인터페이스가 없는 것입니다." - Golden Krishna 구글 디자이너
"미래를 내다 봤을 때, 다음 단계는 바로 장치(device)라는 개념을 없애는 것입니다." - Sundar Pichai 구글 CEO
하지만 제로 UI가 아직 실현되기는 어렵다. UX 디자인이 준비돼 있더라도, 기술이 아직 따라오지 못한다. 갤럭시의 빅스비, 애플의 시리, 여러 인공지능 스피커의 기능은 아직 제한적이다.(덧. 최근 삼성에서 발표한 '갤럭시 폴드'는, 아직 실제로 보진 못했지만 정말 놀라운 기술의 발전이었다.)
구글에서 안드로이드 미래 디자인 전략을 연구하고 있는 디자이너 Golden Krishna는 저서 'The Best Interface is No Interface'에서 사용자의 습관이나 생활 패턴 등을 이해해서 사용자가 최소한의 노력만으로 원하는 목표에 다다를 수 있는 UX 디자인을 연구하다 보면 결국 인터페이스가 없는 인터페이스, 제로 UI에 이를 것이라고 설명하고 있다. 그렇다면 제로 UI의 본질은 '이상적인 사용자 경험'이라고도 생각할 수 있지 않을까?
고민 끝에 이끌어낸 제로 UI의 본질을 바탕으로 현재 시점에서 가장 좋은 사용자 경험을 제공할 수 있는 회원가입 UI를 목표로 만들어 보기로 했다. 사용자(잠재고객)가 가장 적게 버튼을 누르고 가장 적은 단계를 거쳐 스트레스 없이 회원가입 할 수 있는 UI다.
목표 : 사용자가 손쉽게 회원가입 할 수 있는 UI
애플은 얼굴을 비치면 스르륵 잠금이 풀리는 페이스ID를 내세워 아이폰의 홈 버튼을 없앴다. 지문을 터치하는 단계를 없애고 새로운 사용자 경험을 만들었다.02 회원가입&로그인 UX를 향상시키는 12가지 방법
앞서 소개한 Luca Longo의 회원가입과 로그인에 관한 UX디자인 가이드에서는 회원가입 사용자 경험을 향상시키는 15가지 방법을 소개하고 있다. Luca Longo는 회원가입과 로그인을 분리해 15가지 방법으로 정리했는데, 겹치는 부분을 합쳐 임의로 12가지로 줄였다.
1) 사용자가 얻을 수 있는 회원가입의 이점을 설명하라
2) 소셜을 이용한 간편회원가입&간편로그인을 제공하라
3) 최소한의 정보만 요구하라
-
4) 같은 텍스트 작성을 반복시키지 마라(ex. 비밀번호 작성을 2번 반복시키지 마라)
5) 이메일로 확인 절차를 거치지 마라(가이드에서는 이를 강조하고 있으며, 자세히 설명해주고 있습니다.)
6) 비밀번호에 너무 많은 보안 규칙을 적용하지 마라
-
7) '비밀번호 보기'와 '비밀번호 숨기기' 기능을 제공하라
8) 비밀번호 생성 시 보안 강도를 안내하라(약함, 보통, 강함)
9) 비밀번호 생성 시 작성한 비밀번호에 보안 규칙이 얼마나 적용됐는지 실시간으로 표시하라
-
10) 지문 인증을 이용해 로그인할 수 있도록 하라
11) 로그인 항목에는 '비밀번호를 잊으셨나요?' 링크를 넣어라
12) 비밀번호 없이 로그인하도록 하라
여기에서 얻을 수 있는 인사이트 중 하나는 '비밀번호'가 사용자에게 치명적인 스트레스 요인이라는 점이다. 비밀번호와 관련이 있는 항목은 12가지 중 8가지나 된다. 파란색으로 표시한 부분은 중요하다고 생각한 항목이다.
03 토스(toss), 핀터레스트(Pinterest)의 UI/UX 스터디
여러 조사를 거친 뒤 간편송금 서비스인 '토스(toss)'를 주요 레퍼런스로, 이미지 중심 소셜 네트워크 서비스인 '핀터레스트(Pinterest)'를 보조 레퍼런스로 하기로 했다.
토스(toss)
토스, 금융이 쉬워진다
송금은 귀찮지만 토스는 쉽습니다
보험은 복잡하지만 토스는 쉽습니다
......
결제는 번거롭지만 토스는 쉽습니다
-
토스(toss)는 '토스가 쉽다'는 점을 모든 서비스에서 드러내면서 강조하고 있다. 토스가 지향하는 바가 무엇인지 명확하게 보여주고 있는데, 이는 토스의 UI에서도 엿볼 수 있다.
토스를 설치하고 실행한 뒤 전화 걸기 및 관리를 허용하면, 자동으로 사용자의 번호가 입력돼 '확인'만 누르면 다음 단계로 넘어간다.토스 앱을 실행하면 토스 로고로 만든 단순한 애니메이션이 나오는 로딩 화면이 빠르게 지나간 뒤 휴대폰 번호를 입력하라는 창이 하나 나온다. '전화 걸기 및 관리'에 앱이 접근할 수 있도록 허용하면 사용자의 번호를 자동으로 입력해주며, 결국 사용자는 확인 버튼만 누르면 된다. 이를 거부한다고 하더라도 숫자 키보드가 자동으로 나와있어서 숫자를 누르고 확인 버튼을 누르면 다음 단계로 넘어간다.
이후 약관 동의, 이름 및 주민등록번호 입력, 계좌번호 입력, ARS 인증, 숫자 4개와 문자 1개로 이뤄진 토스 비밀번호 생성, 지문 등록 같은 과정을 거치면 회원가입이 완료된다. 사용자 입장에서 많은 과정을 거쳐야 하고, 금융 서비스이기에 보안 이슈로 심리적인 거부감이 있음에도 불구하고 쾌적하고 빠르게 진행된다는 점에서 놀랐다.(다른 은행앱에서 느끼던 앱의 무거움은 전혀 찾아볼 수 없었다.)
-
여기에는 한 화면에 하나의 명확한 목표만 드러내자는 토스의 1 thing / 1 page 철학이 자리잡고 있다. 이를 관철하기 위해 각 화면에서 불필요한 요소는 모두 뺐다. 심지어 브랜드 로고도 뺐다. 오로지 사용자가 그 화면에서 무엇을 하면 되는지 쉽게 알아볼 수 있도록 하는 것에 집중했다.
브랜드 색인 파란색으로 시선의 흐름을 잡아 입력을 더 편하게 할 수 있게 하거나, 상황에 맞는 가장 적절한 키보드를 제공하고 나아가 토스 자체에서 개발한 '쉽고 가벼운' 보안 키보드를 제공하는 것 같은 세심한 배려도 큰 몫을 하고 있다.
왼쪽은 비밀번호 생성 화면. 숫자를 입력할 때는 숫자 키보드, 영문을 입력할 때는 영문 키보드를 제공한다. 은행앱과 달리 가볍고 터치하기 편하다. 오른쪽은 가입을 마친 뒤의 화면.핀터레스트(Pinterest)
재미있는 것들로 전 세계 사람들을 이어주자
-
핀터레스트(Pinterest)의 앱 시작 화면은 로고와 함께 어떤 브랜드인지 시각적으로 보여주는 이미지로 디자인돼 있다. 토스의 회원가입 UI가 파격적이었다면 핀터레스트는 다소 평범했다. 그 안에서 하나 재미있는 점을 발견했는데, 바로 비밀번호 입력 텍스트 필드가 없다는 점이었다. 이메일을 입력하는 텍스트 필드밖에 없었다. (아래 화면은 안드로이드 기준이며, iOS에서는 차이가 있을 수 있습니다.)
여기에서 핀터레스트에 가입돼 있는 이메일을 입력하면 로그인을 진행할 수 있는 화면으로, 가입이 안 돼 있다면 회원가입을 진행할 수 있는 화면으로 바뀐다. 기존에 갖고 있던 이메일 데이터를 활용한 것이다.
메인화면 다음에 나오는 두 화면은 토스와 비슷하다. 하지만 글씨 크기 및 회색 계층구조는 토스가 훨씬 신경쓴 것으로 보인다. 토스는 화면을 딱 봤을 때 사용자가 해야할 일이 무엇인지 비교적 더 선명하다. 또다른 차이는 텍스트 필드의 밑줄 유무인데, 밑줄이 있는 게 텍스트 필드 같다는 느낌을 더 줄뿐만 아니라 시각적으로도 더 안정적이라고 생각한다.
핀터레스트(좌), 토스(우). 둘을 자세히 비교해 보면 여러 차이점을 찾을 수 있다.핀터레스트의 로그인 화면(왼쪽)에서 주목할 부분은 '비밀번호 보기'와 '비밀번호를 잊으셨나요?'다. 앞서 소개한 Luca Longo의 회원가입과 로그인에 대한 UX디자인 가이드에 따르면 비밀번호는 사용성을 크게 해치는 요소다. 비밀번호는 사용자에게 작은 모바일 화면의 키보드로 틀리지 않게 비밀번호를 입력해야 한다는 심리적 부담을 주는 동시에 비밀번호를 기억해내야 하는 부담도 주기 때문이다.
독일 뮌헨 대학교의 한 연구에 따르면 사람들은 모바일 환경에서 비밀번호를 입력하는 데 2배의 시간을 쓰는 경향을 보이며, 컴퓨터에서 비밀번호를 만들 때보다 더 약하게 만드는 경향을 보인다고 한다. 그래서 핀터레스트의 로그인 화면(왼쪽)에 있는 비밀번호를 틀리지 않게 하기 위한 '비밀번호 보기'와 비밀번호를 잊은 사용자를 위한 '비밀번호를 잊으셨나요?'는 사용성을 높이기 위해서는 꼭 필요한 요소다.
핀터레스트에 가입돼 있지 않은 이메일을 입력하면 나오는 화면.위 가입 화면에서 주목할 부분은 '6자 이상의 비밀번호'와 다음 버튼 위에 있는 '1/3' 상태바다. 회원가입을 할 때 비밀번호를 어렵게 만들라는 요청을 받을 때가 있다. 특수문자를 이용하라거나, 키보드 상의 연속된 알파벳이 포함되면 안 된다는 등 다양한 조건이 있다. 이는 사용성을 크게 저해하는 요소로 보안이 중요하거나 꼭 필요한 경우가 아니라면 제한을 적게 두는 게 좋다.
핀터레스트의 경우 '6자 이상'이라는 아주 약한 제한을 걸고 있으며 손쉽게 회원가입을 진행할 수 있다. 이뿐만 아니라 자주 접하게 되는 '비밀번호 확인' 과정이 없다. 즉 비밀번호를 한 번만 입력해도 된다. 사용자가 비밀번호를 틀릴 가능성이 있지만, 비밀번호를 한 번 더 입력하는 것 자체가 사용성을 저해하기 때문에 이렇게 UI를 구성한 것 같다. 앞서 소개한 회원가입&로그인 UX를 향상시키는 12가지 방법 중 일부가 잘 반영돼 있다.
다음 버튼 위에 있는 1/3바의 경우 회원가입까지 얼마나 과정이 남았는지 보여줘 사용자가 언제 최종 목표에 도달하는지 알려준다. 심리적 부담감을 덜어주는 것이다. 비밀번호 입력 뒤에 나오는 과정은 이름과 나이를 묻는 과정으로 각 화면에 하나의 요청만을 하고 있다. 나이 같은 개인 정보는 '건너뛰기(skip)' 버튼을 제공해 입력하지 않고 넘어갈 수 있도록 했다.
핀터레스트는 '나이'에 대해 물어보는 과정에서 '건너뛰기' 버튼을 제공하고 있다.04 회원가입을 쉽게
토스(toss)의 UI는 정말 인상적이었다. 현재의 기술 수준으로 만들 수 있는 UI 구조에서 사용자가 가장 쾌적한 경험을 할 수 있는 디자인이 아닐까? 물론 단점도 있을 거라고 생각한다. 하지만 지금의 내 지식이나 경험으로는 단점이나 부족한 점을 찾기가 어려웠다. 분명한 건 정말 아주 세심한 부분까지 치열하게 고민해서 만든 UI라는 걸 사용해보면서 느낄 수 있었다는 것이다.
목표를 조금 수정해 토스의 UI를 거의 그대로 따라 만들어 보며, 이를 응용해 일반적인 서비스의 회원가입&로그인 UI를 디자인해 보기로 했다. 아주 작은 부분이라도 '왜'라는 질문에 모두 대답할 수 있도록 토스의 UI를 깊이 이해하고 적용하는 것을 목표로 잡았다.
-
먼저 텍스트의 크기와 위치, 계층구조부터 버튼의 위치, 여백까지 기본적인 가이드를 잡는 과정부터 시작했는데, 쉽지 않은 작업이었다. 결정적으로 치명적인 문제가 있었다. 바로 소셜을 이용한 '간편로그인'을 어떻게 놓을지였다. 간편로그인은 사용자 경험을 크게 향상시키는 장치로 꼭 넣어한다고 판단했기 때문에 고민은 깊어갔다.(토스는 금융서비스의 특성상 소셜 로그인을 쓸 수 없다.)
대부분의 앱에서 적게는 2개부터 많게는 4개 이상의 간편로그인을 제공한다. 예를 들어 티몬 앱의 회원가입에서는 티몬 간편 회원가입, TMON*PAYCO 회원가입, ..., 네이버로 회원가입 총 6개의 선택지를 제시한다. 디자인 외에 서비스의 특성과 사업적인 다양한 이유가 들어간 결과물이라고 생각한다.
티몬 회원가입에서는 총 6개의 선택지를 제시한다.보편적인 앱에 따라 나도 2~3개의 소셜 간편 로그인을 포함한 화면을 만들기로 했다. 결과는 썩 좋지 않았다. 간편로그인을 여러 개 넣다보니 선택지가 많아져 목표였던 '쉬운 회원가입'과는 거리가 있다고 판단했다. 무엇보다 시각적으로 별로라고 생각했다. 이번 스터디에서 예쁜 디자인을 하려던 건 아니었지만, 그렇다고 이상하게 디자인할 수는 없었다.
시행착오
또 다른 문제는 '다음' 버튼이었다. 키보드와 시각적으로 잘 어울리지 않아 전반적으로 모양새가 이상했다. 토스 앱에서 답을 찾았는데, 토스 앱에서는 키보드에 따라 버튼의 위치와 모양이 달라졌다. 아래 이미지를 보면 확인할 수 있다. 숫자 키보드(왼쪽)일 때는 버튼(확인)이 키보드에 붙어있는 좌우로 꽉찬 버튼이며, 일반 키보드(오른쪽)일 때는 버튼(입력 완료)이 키보드와 20px 가량 떨어져 있으며 좌우로도 여백이 있는 버튼이다. 이는 버튼이 일반 키보드의 자동완성 부분과 가까이 있으면 터치 오류가 날 수 있다는 점을 반영한 것으로 보인다. 개인적으로는 일반 키보드일 때는 버튼이 20px 가량 떨어져 있는 게 시각적으로도 더 나아 보였다.
키보드에 따라서 버튼이 키보드와 붙어있기도 하고(왼쪽), 떨어져 있기도 하다(오른쪽). 이는 사용성과 심미성을 모두 고려한 선택이라고 생각한다.고민 끝에 간편 로그인 문제는 소셜 계정 하나만을 남기자는 쪽으로 방향을 잡았다. 선택지가 많으면 사용성을 해친다는 게 가장 큰 이유였다. 사람들이 가장 많이 쓰는 소셜의 간편로그인만 제공한다면, 소셜 간편로그인의 목적은 달성하면서 사용성은 높일 수 있었다. 국내용은 카카오톡, 해외용은 구글 계정으로 간편 로그인을 제공하고, 텍스트 필드와 다음 버튼 사이 공간에 버튼을 놓았다. 또 문제가 생겼다. 버튼의 크기를 어떻게 해야 할까?
버튼의 최소 크기는?
버튼의 크기는 조시 클라크(Josh Clark)의 '터치를 위한 디자인하기(원서 : Designing for Touch)' 81~88쪽을 참고했다. 조시 클라크는 터치 타깃(버튼 등)을 사용자가 잘못 누르지 않도록 크게 만들어야 한다고 강조하며, 마이크로소프트의 터치 정확성 연구를 근거로 들어 터치 타깃의 크기는 7mm보다 작아서는 절대 안 된다고 설명하고 있다.
7mm는 160dpi에서 44px로 환산할 수 있다. 터치 타깃의 한쪽은 최소 44px을 유지하고 다른 한 쪽은 30px 이상이어야 한다. 정리하면 터치 타깃의 최소 크기는 44px*30px 혹은 30px*44px이다. 나는 간편로그인 버튼을 카카오톡의 경우 56px*56.82px로 구글의 경우 72px*72px로 잡았다.
터치 타깃의 주변 공간도 터치의 크기만큼 터치 오류를 줄이는 데 중요한 역할을 한다. 마이크로소프트 디자인 가이드라인에 따르면 7mm의 터치 타깃은 최소한 2mm(13px)의 간격을 둬야 하며, 두 터치 타깃이 서로 가까이 있다면 터치 타깃의 크기를 9mm(57px) 이상으로 해야 한다. 나는 이 기준에 근거해 텍스트필드와 간편로그인 버튼, 간편로그인 버튼과 확인 버튼 사이의 간격을 잡았다.
토스 앱의 일반 키보드와 입력 완료 버튼 사이에 잡은 20px 가량의 공간 또한 이런 가이드에 근거했을 거라 생각한다. 여러 시행착오를 겪은 뒤 나온 결과물은 아래처럼 토스의 UI에 간편로그인만 더해진 모양새가 됐다.
내가 만든 회원가입&로그인 UI의 메인 화면. 왼쪽은 국내용, 오른쪽은 해외용.위 UI의 각 부분을 디자인한 이유를 설명하면 아래와 같다. (소셜 로그인과 확인 버튼에 대한 설명은 앞서 자세하게 했기 때문에 아래에서는 간단히만 적었다.)
이메일을 입력해주세요 :)
이 화면에서 사용자에게 요청하고 있는 게 무엇인지 명확하게 알려주자는 목표의 텍스트다. 텍스트의 끝에 :)를 넣은 건 다소 딱딱해 보일 수 있는 화면의 분위기를 부드럽게 풀어주고 싶었기 때문이다. 토스는 금융 서비스로, '신뢰'와 '보안'이 강조돼야 하기 때문에 :) 같은 식의 캐쥬얼한 표현을 넣는 건 독일 것이다. (덧. 토스의 브랜드 로고의 색인 파란색은 상쾌함과 신선함, 이성과 신뢰를 나타내는 색으로 잘 알려져 있다.)
로그인 또는 회원가입에 필요합니다
이메일을 입력해야 하는 이유를 알려준다. 핀터레스트 앱의 UI 메인 화면을 처음 봤을 때 이메일만 있는 게 의아했었다. 이를 해결해 사용성을 올리고 싶었다.
텍스트 필드
이 UI는 브랜드를 드러내는 로고조차 없을 정도로 단순하다. 오직 사용자에게 요청하는 게 무엇인지만 화면에 드러나 있다. 따라서 텍스트 필드 아래의 선과 커서를 브랜드의 색(여기서는 임의로 #EA0442로 정했다)으로 해서 최소한의 시각 언어로 브랜드를 드러냈다. 연한 회색으로 텍스트 필드에 이메일을 보여줘 무엇을 적어야 하는지 사용자에게 추가로 안내했다.
소셜 간편로그인
사용자는 이메일을 타이핑하거나 소셜 간편로그인 버튼을 탭하기만 하면 회원가입&로그인을 진행할 수 있다. 간편로그인 버튼은 마이크로소프트 디자인 가이드에 따라 크기를 잡았으며, 사람들이 가장 많이 쓰는 소셜 계정 1개만 제시해 사용성을 높였다.
여백 가이드 및 텍스트 계층구조
철저하게 토스를 따라해봤다. 결과물은 단순하지만 여러 시행착오를 거치면서 '왜 이렇게 했는지' 이해하려고 노력했다.
키보드
사용자가 이 화면에 도달하면 자동으로 키보드가 나오도록 구성했다. '이메일'을 쓰는 것에만 집중할 수 있도록 하기 위해서다. @과 .이 포함된 이메일을 쓰기 적합한 키보드를 제공했다. 텍스트 필드에 깜박이는 커서를 가이드로 둬 사용자는 이메일만 쓰면 된다는 것을 강조했다.
자동완성은 사용자가 @를 쓰기 이전에는 사용자가 가장 많이 쓰는 이메일 전체 주소를, @ 이후에는 가장 많이 쓰는 이메일의 @ 뒷부분 주소를 추천한다.(디자인 의도를 명확하게 표현하고 싶어서 키보드를 일러스트레이터로 따로 만들었습니다. 혹시라도 필요하신 분은 글 끝에서 다운받으실 수 있습니다.)
왼쪽은 회원가입 화면, 오른쪽은 로그인 화면위 이미지는 첫 화면에 이메일을 입력하면 나오는 회원가입과 로그인 화면이다. 핀터레스트처럼 브랜드가 갖고 있는 이메일 데이터를 활용해 회원인지 아닌지 판단해 자동으로 각 화면으로 넘어가도록 했다.
(공통)비밀번호를 입력해주세요
비밀번호는 '보안'과 관련된 개인 정보이기 때문에 :) 같은 캐쥬얼한 표현은 뺐다.
(왼쪽)회원가입 화면
회원가입 시 비밀번호를 1번만 입력하게 해 사용성을 높이고 싶었다. 하지만 비밀번호를 1번만 입력하면 잘못 입력할 가능성이 있기 때문에 메인 텍스트 밑에 '1번만 입력하니 정확히 입력해주세요!'라는 안내를 넣어 사용자가 실수할 확률을 줄였다. 여기에 '비밀번호 보기'를 넣어 사용자가 원한다면 비밀번호를 보면서 비밀번호를 칠 수 있도록 했다. 키보드는 비밀번호를 치기에 편한 숫자가 포함된 키보드로 바꿔서 제공한다.
(오른쪽)로그인 화면
기존 회원의 이메일이라면 로그인 화면으로 자동으로 바뀐다. '반갑습니다 고객님 :)'이라는 문구로 긍정적인 느낌을 주려고 했다. 회원가입 화면과 다른 점은 '비밀번호를 잊으셨나요?'라는 버튼을 넣어 사용자가 비밀번호를 잊었을 경우에도 로그인을 할 수 있도록 해 사용성을 높였다. 로그인 버튼과의 간격은 20px로 로그인 버튼과 키보드 사이의 간격과 같다. 회원가입 화면과 로그인 화면의 메인 버튼은 각각 '회원가입'과 '로그인'으로 지칭해 각 화면에서 수행할 작업이 무엇인지 설명했다.
마치며
내가 공부하면서 만든 회원가입&로그인 디자인은 이렇게 2가지 과정으로 끝이 난다. 즉 이메일을 입력한 뒤에 비밀번호를 1번만 입력하면 회원가입&로그인 절차가 끝난다. 사용자가 UI를 이용하면서 할 수 있는 고민과 망설임 등을 극단적으로 줄이려고 노력했다.
물론 현장에서는 서비스의 특성와 동료들의 의견을 종합해 브랜드에 가장 좋은 방향으로 UI를 만들다 보면 이처럼 극단적으로 만들 수는 없다. 다만 UX를 최대한 끌어올린 디자인은 어떤 브랜드에서든 '시작점'이 될 수 있을 거라고 생각한다. 뺄 요소가 없으니, 브랜드가 지향하는 방향에 맞춰 하나씩 추가하기만 하면 되지 않을까? 내가 미처 생각하지 못하고, 부족했던 부분을 동료들과 의견을 나누며 채울 수도 있을 것이다.
UI/UX 디자인 공부는 '왜 이렇게 디자인했는지' 답하는 과정인 것 같다. 최종 결과물은 단순하지만 '왜 이렇게 디자인했는가?'에 집중해서 공부하다 보니, 이 스터디를 시작할 때 예상했던 것보다 참 많은 시간이 지났다. 그 과정에서 가장 좋다고 생각하는 UX가 있더라도 그 디자인이 '이상하지 않게' 보이는 것도 중요하다는 걸 알았다. 좋은 시각적 이미지를 만들기 위해서는 또다른 노력이 필요하다는 걸 절실하게 깨달았다.
이번 스터디는 실무와는 크게 거리가 있다고 생각한다. 다음 스터디는 실무에 더 가까운 방향을 고민하며 진행해볼 계획이다.
(덧)
자세하게 정리하다 보니 글이 너무 길어져서, 글을 읽는 사람의 사용성(?)은 아주 떨어졌다고 생각합니다. 개인적인 체감상 글 양으로만 본다면 과학기자일 때 쓰던 특집 기사(14~16쪽 분량)와 비슷하거나 그 이상인 것 같습니다. 처음부터 끝까지 읽어주신 분이 계시다면 정말 감사하다는 말씀을 전하고 싶습니다.
과학 기자에서 IT 프로덕트 디자이너가 되기까지
저의 지난 커리어 여정을 공유합니다 :)
작은 앱 프로젝트
많은 기능과 서비스를 갖추고 있는 슈퍼 앱들 사이에서 단순함을 가장 큰 목표로 하는 '작은 앱'이 사람들에게 어떠한 의미로 다가갈지 연구하는 '작은 앱 프로젝트'를 진행하고 있습니다.
Keyboard Asset
디자인 의도를 명확하게 표현하고 싶어서 키보드를 일러스트레이터로 따로 제작했습니다. Ai 파일 및 png 파일을 아래에 첨부했으니, 혹시라도 필요하신 분이 있다면 다운받아 마음껏 쓰시길 바랍니다 :)
05 참고 자료
1. Daily UI
2. 회원가입과 로그인에 관한 UX디자인 가이드
3. Zero UI 초보자 가이드
4. 어도비(Adobe) 블로그, 제로 UI: 스크린리스 상호작용을 위한 디자인
5. UI디자인에 대한 실용적인 인사이트를 얻을 수 있는 GS SHOP 디자이너 최철호님의 브런치
6. 10분 만에 더 나은 UI 디자인 만들기
7. 플러스엑스의 브런치
8. 토스의 브랜드 스토리 안에 녹아있는 디자인을 공부할 수 있습니다.
9. UI/UX에 대한 새로운 관점을 볼 수 있는 신유민님의 브런치 글 '화면이 사라지는 시대의 UX'
10. [참고서적] 01
About Face 4 인터랙션 디자인의 본질
앨런 쿠퍼 , 로버트 라이만, 데이비드 크로닌, 크리스토퍼 노셀
11. [참고서적] 02
터치를 위한 디자인하기
조시 클라크
- 01화 회원가입을 쉽게 만드는 UI/UX 디자인은? 현재글
- 02화 UI 디자인을 위한 UX 원칙 5가지
- 03화 UI/UX 디자인 가이드_ 내비게이션 바
- 04화 [실무편] 회원가입을 쉽게 만드는 UI/UX 디자인은?
