프로젝트 UI/UX를 설계해보자

• 먼저 이것은 토이 프로젝트이고, 당연히 모든 서비스의 UI 설계를 블로그에 포스팅할 생각은 아니다.
• 이번 포스팅에서는 로그인과 회원가입 화면의 UI를 설계해 볼 것이다. 참고로 PPT를 통해서 작성하였다.
   

로그인 화면

• 기본적으로 회원가입을 통해 이메일, 비밀번호를 입력하여 로그인하게 될 것이다.
• 추가로 구글로그인, 카카오로그인을 도입하여 OAuth 2.0 인증을 구현할 예정이다.
• 구글과 카카오를 선정한 이유는 단순히 내가 많이 쓰기 때문이다.
• UI가 허전하다면 네이버도 추가할 생각이다.
• UX를 고려하여 로그인 버튼은 이메일, 비밀번호를 둘 다 입력할 경우에만 활성화할 것이다.

 

회원가입 화면

• 프로젝트 특성상 사용자에게 모바일 알림을 줄 수 있는 부분이 있어서 추후 사용자 테이블에 전화번호 컬럼이 추가될 가능성이 높기 때문에 약관동의 화면이 필요하다.
• 이 화면에서도 전체 약관에 동의하지 않을 경우 동의 버튼은 활성화되지 않는다.

 

• 인증과 확인 버튼 역시 값을 입력하지 않으면 활성화되지 않는다.
• 가입 버튼 또한 모든 값을 입력해야 활성화될 것이다.

 

• 가입을 완료하면 사용자가 로그인을 할 수 있도록 홈으로 돌아갈 수 있는 버튼을 노출한다.
• 그런데 [사용자 정보] 메뉴에서 [비밀번호 변경] 서비스 이용하라는 저 문구는 수정해야 한다. 🙀

 

마치며

이 사람은 이렇게 UI를 설계를 하는구나 정도로 가볍게 봐주시면 좋을 것 같다.

나는 사실 아직도 화면 설계의 중요성을 못 느끼고 있다.
시간 소요도 많고 설계를 하더라도 계속 방향이 바뀌는 등 여러 가지 이유가 있다.

그런데 지나가는 사람 아무나 붙잡고 물어보더라도 설계가 중요하다는 점은 명백한 사실이다.
그래서 작성하기는 싫었지만 블로그 포스팅을 핑계로라도 간단하게 작성해 보았다. 🤣