없애고 없애고 없애 업.ㅅ...ㅇ
Daily Ui 1일 차
Daily Ui
'Daily Ui'는 하루에 하나씩(주말 제외) 주제를 이메일로 보내주며 '형태'에 구속받지 않고 내 맘대로 디자인하여 #daily ui를 붙여 인터넷 세상에 공유하는 챌린지를 운영한다. 이는 100일 동안 계속되며 중간중간에 상품을 지급한다고 한다.
1일 차의 주제는
회원가입
회원가입은 앱, 웹 등 본인 계정을 요하는 서비스/게임에서 계정을 생성하는 것을 뜻한다. 서비스(게임)의 첫인상을 주는 화면으로서 서비스(게임)의 성격을 볼 수 있는 화면이기도 하다.
https://www.figma.com/file/oDvD5dHAuNAP7dMHIeatVU/100?node-id=1%3A8&t=F4W3WiyuidBnxEwZ-1
1일 차 Ui의 컨셉은 츤데레이다. 친절하면서 살갑진 않고 그렇다고 사람들을 불편하진 않게 하는 사람을 떠올리며 만들었다.(Ui의 언어가 영어인데 이건 영어 써보니 간지가 나서 영어로 작업했다.)
사용한 폰트는 Montserrat라는 폰트로 간결하고 강해 보이는 것이 특징이다.
컬러칩은
Black(Hex : 000000)
Gray(Hex : 808080)
Gray 60%(Hex : B3B3B3)
Gray 40%(Hex : CCCCCC)
를 사용하였고 상단의 피그마 링크에 접속을 하여 더 자세하게 볼 수 있다.
https://fonts.google.com/specimen/Montserrat
첫 화면이다.
유저는 이 화면을 보고 '뭐지?'라고 생각할 것이다.(사실 그렇게 생각하길 바람) 기존 봐 왔던 회원가입들과는 다르기 때문이다. 이메일을 입력하는 창을 보고 어느 누구가 이메일 입력하는 것을 참을 수 있을까.
로그인 / 회원가입이란 텍스트가 없는 이유는 화면 전환을 줄이고 불필요한 컴포넌트를 만들지 않기 위함이다. '불필요한 컴포넌트'라는 말은 위 화면에 Sign Up이라는 텍스트와 함께 버튼이 있다고 가정해 보자. 디자이너와 개발자 입장에선 쓴 디자인 / 코드를 복붙하면 되겠지만 유저가 '쓰읍... 내가 회원가입했었나?'라고 생각을 하는 것은 저 화면 체류시간(화면에서 머무는 시간)을 늘려 로그인/회원가입 시간을 쓸데없이 늘린다.
이메일만 입력하는 절차가 가능한 이유위 화면으로 설명을 해보겠다.
1) 유저는 이메일을 타이핑한다.
2) 이메일을 서버에 보내 서버에 존재하는 지를 판단한다.
2-1) 이메일이 서버에 있는 경우이고 그 이메일로 유저가 간편 로그인으로 가입을 했을 때다.
2-2) 이메일이 서버에 있는 경우이고 그 이메일로 유저가 회원가입을 했을 때다.
2-3) 이메일이 서버에 없는 경우이고 회원가입 페이지로 넘어간다.
정리해 보자면 유저는 단지 이메일만 입력한 것이고 나머지 인지 과정은 서버가 해주는 것이다.
이메일로 유저가 간편 로그인으로 가입을 했을 때유저에게 간편 로그인만 보여주어 로그인하도록 도와준다.
이메일로 유저가 회원가입을 했을 때익숙한 로그인 화면으로 이메일은 이미 입력했으니 Enabled 상태로 두고 비밀번호만 입력 가능하도록 한다. 비밀번호 또한 유저에게 치명적인 아픔을 안겨줄 수 있기에 조건은 그저 6자리로만 두었다.
회원가입 페이지회원가입 페이지 중 1번으로 이름을 입력할 수 있다. 처음엔 비밀번호 입력 창을 두었지만 유저 입장에선 처음부터 비밀번호를 입력하면 지레 겁을 먹을 수 있기에 이름을 입력하라고 하며 유저의 긴장을 풀어준다. 또한 이름 입력 후 인증 버튼이 활성화가 되었을 때 버튼을 누르면 약관들에 동의하는 것으로 간주한다.(간편 로그인에 대한 니즈가 있을 수 있기에 위 화면에도 삽입함)
좀만 쉬었다가 설명하겠다...
Ui 작업을 하다 보면 사소하지만 에러 색상에 대해 고민한 적이 많다. 에러 색상... 에러색상.. 어떻게 하지... 유저들은 빨간색을 보면 뭐가 잘못됐다는 인식이 이미 있어 대부분의 에러 색상은 형광 빨간색이다. (형광은 직관적이어 보이기에 추가된 것이다.)
작업을 하면서 이와 같은 고민을 당연히 했다. '아.. 빨간색? 쓰읍... 너무 튈 거 같은데?' 맞다. 에러만 혼자 튀는 걸 보기가 싫었다.
작업물의 에러
일반적인 에러한 화면에 두고 보면 일반적인 에러는 눈에 너무 튄다.(사실 작업물의 에러만 본다 해도 에러가 튀긴 하는데 어쩌겠냐.. 에러는 에러로 남아야 되는데...)
고심 끝에 에러 색상의 채도를 죽였다. 컬러칩을 보면 알겠지만 다 모노톤으로 채도가 0이다. 채도를 죽임으로써 계층 구조와 Ux에 집중을 하였기에 결과가 그렇게 된 것이다.
내가 지금까지 작업했던 사이드 프로젝트, 과제 등을 통틀어서 이번 에러 색상? 아주 맘에 든다.
그만 쉬어보도록 하자..
전에 설명한 것들이 사실 알맹이고 껍질만 남았다. 껍질까지 설명하기엔 글이 길어져 소감을 밝히겠다.
주변에서 나에게 '졸업하고 넌 어디에서 뭘 하고 싶니?'라고 물으신다면 (토스에서) 'Ui' 디자이너라고 대답을 했다. 모두가 알겠지만 Ui와 UX는 짝꿍이다. 하지만 내가 그저 Ui 디자이너라고만 한 것은 내가 UX에 대한 고찰을 안 했기 때문이다. UX에 대한 고찰 없이 이쁜 것들만 추합을 하여 디자인을 해왔다. 사실 이 방식이 잘못됐다고는 느끼진 않는다. (디자인은 내가 창조하는 것이 아닌 창조한 것을 시대, 형식, 컨셉에 맞게 재창조한다고 생각한다 난.) 이렇게 쭉 작업하다 보니 Ui를 만들고 거기서 UX에 대해 고민을 했긴 했지만 Ui의 크나큰 변화를 주기가 조심스러웠다.
이번 작업에선 '유저들의 선택지를 줄이자'를 생각하며 머릿속으로 그려보았다.(물론 레퍼런스를 많이 찾아봄) 나에겐 놀라운 결괏값이었다. 유저들의 선택지에 집중하며 없애고 없애고 없애다 보니 Ui에 뭐가 남질 않았다. 미니멀한 방식을 좋아하던 나에게 '이게 왜 이렇게 되지?'라는 생각과 함께 놀라움을 금치 못했다. 사실 처음엔 UX를 생각하면 뭐가 많아질 줄 알았다. 유저들은 우리에게 원하는 것이 다양하고 많기 때문이다. 그러기에 이번 작업은 더욱 놀랍고 앞으로도 이 방식 그대로 며칠이라도 유지해 볼 생각이다.(사실 쉽지 않다. 머리가 터질 거 같고 작업하다가 작업물 보면 티끌만큼 이상해도 유저가 불편할 거 같은 것이 쳇바퀴처럼 계속 돈다. 시간이 엄청 걸린다.)
끝으로 상단의 피그마 링크에 접속하여 회원가입 끝났을 때 프로토타입을 한번 봐주면 좋겠다. 이쁘다.
