딛자인 데이 :: 01 Sign up
회원가입 페이지를 만들어보자!
대망의 첫 번째 디자인. Sign up.
기본적으로 현재 내가 일하고 있는 회사의 서비스인 '라프텔'을 바탕으로 리디자인 해보려고 한다.
1.목표
쉽다 / 친절하다 / 세련되다 라는 느낌이 드는 회원가입 페이지.
2.리서치 내용
일단, 회원가입 디자인 관련한 글들을 리서치했다. 레퍼런스를 너무 많이 찾지는 않았다.
왜냐하면 그거 찾다가 제 풀에 죽어버려 결국 시작도 못하는 불상사를 맞이하고 싶지 않기 때문에...!
회원가입에서 사용자에게 제공해야 하는 경험은 크게 3가지라고 생각했다.
- 쉬워야 한다.
- 친절해야 한다.
- 귀찮게 보이면 안 된다.
넘나리 당연한 것들이지만... 인간은 망각의 동물이기에 이들을 종종 잊어버리곤 한다. (뉴뉴)
그렇다면 위에서 언급한 각각의 경험들을 제공하기 위한 방법에는 무엇이 있을까?
1. 쉬워야 한다.
1) 소셜 로그인 제공. (페이스북, 구글, 트위터, 카카오톡, 네이버 등)
- 나는 요새 무조건 소셜 로그인으로 가입한다. 왜냐하면 따로 정보를 입력할 필요가 없기 때문에.
2) 아이디는 유저 네임보다는 이메일이나 전화번호 활용.
- 유저 네임으로 하면 나중에 분명히 기억 안 난다. 그리고 가입할 때 중복 체크도 해야 하는 번거로움 발생...!
2. 친절해야 한다.
1) Label, Placeholder를 사용.
- 요건 꼭 필요한 것 같다. 이메일 주소는 어떤 형식으로 써야 하는지, 해당 form에는 어떤 데이터를 입력해야 할지 미리 힌트를 주자.
2) 첫 번째 Input Filed에 Auto Focus.
- Border나 Background에 Color를 줘서 강조를 해줘야 유저가 갈팡질팡 하지 않겠지?
3) 명확한 Heading
- 'Good design은 Text와 함께하고, Good form은 Title과 함께한다.' 고 한다. 적극 동의한다.
4) 패스워드에 특정한 형식이 있다면 미리 알려주자.
- 예를 들어 특수문자를 포함한 6자리라던가.
5) Microcopy 사용.
- 유저에게 입력된 데이터가 왜 때문에 안되는지 알려주자.
6) 가능한 오류를 미리 방지하자.
- 핸드폰 번호 같은 경우 필드 입력할 때 숫자만 쓸 수 있도록 하던가 하는 그런 거.
7) 에러 난 필드는 표시해주자.
- color, icon, text 등을 활용해서 '유저님 여기 틀렸어요!!!!'라고 알려주자.
3. 귀찮게 보이면 안 된다.
1) 가능한 Form을 짧게, 길다면 단계를 나눠서 진행하자.
- 진짜 필수적으로 입력해야 하는 것만 제공해서 그만큼 시간과 에러를 줄이자.
...뭔가 쭉 보니 이 회원가입 구역의 친절보스는 나야.^^ 이런 느낌이다.
아무튼 이외에도 여러 가지 방법들이 있지만 다 적기에는 무리니 다음으로 신속히 넘어가자.
3.UI 레이아웃 그리기
시작 전에, 현재 우리 서비스인 라프텔을 다시 한번 살펴봤다.
사실을 고하자면 웹디자인은 거의 손을 못 댔었다.(뉴뉴) 우리 프론트엔드 개발자가 그냥 알아서 슥슥삭삭 만든 거다. (디자인에도 관심이 많아 자유롭게 해볼 수 있어서 괜찮았다는 넓은 아량의 개발자님.)
미안하다!!!!!!!!!내가 회사에 입사하자마자 얼마 안 가서 서비스가 엄청나게 큰 변화가 생겼는데 웹, 안드로이드, iOS를 동시에 디자인해야 하는... 지금 다시 생각해보면 약간 말이 안 되는(ㅋㅋㅋㅋ) 프로세스를 가져가야 했다.
그래서 불가피하게 우리 라프텔 유저의 상당수가 사용 중인 안드로이드 디자인에만 신경을 쓸 수밖에 없었다.
현재는 전보다 다소 여유로운 마음으로 웹과 안드로이드에 집중하고 있다. (iOS는 여전히 미안하다!!!!)
대박이다. 지금 일요일 새벽 6시에 기상해서 밥 먹고 이 글을 쓰고 있다.레이아웃을 대충 그려봤다. 근데 여기서 갑자기 의문이 드는 게 하나의 주제에 대해서 어떤 디바이스? 까지 포함시켜서 디자인할 것인가? 그리고 웹을 한다면 반응형을 포함시킬 것인가?
일단은... 반응형을 버린 웹만 디자인해보겠다. 왜냐면 모든걸 디자인하다가 이 글을 영원히 끝내지 못할 것 같다.
Color가 빠진 대강의 레이아웃과 느낌4.GUI 작업
본격적으로 디테일하게 컬러를 지정하고 아이콘을 그려 넣고 위에서 정리한 것들을 토대로 디자인해보았다.
가장 기본적인 모습
형식에 맞게 다 잘 입력했을 경우
자네는 틀렸어!이렇게 보다 보니깐 빠진 게 몇 개 있다. 대표적으로 비밀번호를 글자로도 보여줄 수 있게 하는 옵션이 빠졌다.
5. 결론 및 느낀 점
1) 일단...! 한 주제를 일주일 단위로 하는 게 꽤 시간이 걸린다. 그래도 일단 첫 번째 주제는 완벽하진 않더라도 무언가 시간을 들여 완성을 했다는 것에 의의를 두려고 한다.
2) 확실히 뭔가 한 부분에 대해서 공부를 하고 디자인을 하니깐 왜 이런식으로 디자인을 했는지 조금이나마 논리적으로 이유를 설명할 수 있어서 좋은 것 같다.
근데 한 편으로 딜레마가 있는 게 논리적으로 디자인하는 게 맞다고는 생각하지만, 디자이너 입장에서 어느 특정 포인트에서는 이렇게 디자인을 한 것에 대해 뭔가 정확하게 말로 설명할 수 없는 부분들이 있다. 이게 참 어렵다. 이런 건 어떻게 해결해야 할까...?
3) 요걸 하면서 느낀 건데 버튼 하나만으로도 엄청나게 공부할게 많았다. 나중에 버튼 관련한 글을 써야겠다.
4) 웬만하면 Framer로 하이파이 프로토타이핑까지 해서 실제 구현되는 모습까지 보여주고 싶었다.
하지만 아직은 코알못이라 어렵다.(엉엉) 디자이너지만 가끔씩 개발자들처럼 막 글로 다닫다다다다!!!!! 써서 뭔가를 그려내고 싶을 때가 종종 있다.
5) 다음 주제는 'Credit Card Checkout'이다. 마침 또 서비스와 관련한 적절한 주제가 나왔다...
라프텔 페이를 만들어 놨었는데...그나저나 이거 언제 승인나는거지? (ㅠㅠ) 그럼 다음 주제에서 봐요.
감사합니다.
6. 참고자료
- https://brunch.co.kr/@ebprux/26
- https://uxplanet.org/how-to-design-great-ux-for-sign-up-form-8ce39f84659
- https://blog.nfnlabs.in/inspiring-designs-7-sign-up-sign-in-ec8918bb4be0
