로그인 화면, 회원가입 화면 등 구성

로그인 전 & 후

(좌) 로그인 전 / (우) 로그인 후

로그인 전/후 화면을 테스트하기 위해 테스트용 버튼을 만들었다. (메뉴들 맨 위에)

물론 테스트이기 때문에 로그인 로직 없이 뷰만 전환한다.

(viewModel의 loggedIn: Boolean 변수의 값에 따라 뷰를 전환한다)

 

Material Design 적용

로그인

(좌) 와이어프레임 / (중) 기존 디자인 / (우) 메테리얼 디자인 적용

회원 가입

(좌) 와이어프레임 / (중) 기존 디자인 / (우) 메테리얼 디자인 적용

 

위 사진 중 맨 왼쪽의 사진은 와이어 프레임으로 짜여진 화면이다.

기존에는 가운데 사진처럼 와이어 프레임의 디자인에 맞춰 뷰를 작성했다.

하지만 좀 더 깔끔한 디자인과 사용성을 위해 메테리얼 디자인을 적용했다.

자세한 동작은 밑에서 이어 설명한다

---

 

로그인 화면

더 보기 탭에서 (로그 아웃 상태에서) 상단의 로그인하기 버튼을 누르면 로그인 화면을 띄운다.

로그인 동작 화면

 

아이디 & 비번 찾기 화면

아이디/비번 찾기 동작 화면

 

회원 가입 화면

회원 가입 동작 화면