이전 포스트 에서는 Client 와 Server, 그리고 Database의 개발환경을 세팅했었다.
이제 본격적으로 UI 디자인에 들어간다. 사실 원래는 DB 디자인을 먼저 하는 편인데, 매번 잊어버린 필드가 디자인을 만들면서 생각나서 수정하는 경우가 있었다. 그래서 이번에는 디자인을 먼저 하고, 그에 맞춰서 필요한 기능에 따라 DB를 디자인하려고 한다.
구현할 기능 정리
페이스북 메신저에는 정말 많은 기능이 있다.
메인 기능으로 메시지, 보이스 챗, 페이스 챗이 있고,
부차적인 기능들로 이모티콘, 테마 변경이 있다.
페이스북과 연결되는 기능으로는, 페이스북 마켓플레이스, 스토리 보기, 친구 추가 와 커뮤니티 등 정말 기능이 많다.
이렇게 많은 기능들을 다 구현하는건 솔직히 말이 안 된다고 생각한다. 그래서, 딱 메신저 다운 기능만 남기고, 페이스북과 연결되는 기능, 그리고 세부 기능중 미미한 것들은 날려버리려고 한다.
결과적으로 페이지 그룹은 다음과 같이 분류되었다
- 로그인 페이지
- 회원가입 페이지
- 비밀번호 찾기 페이지
- 채팅방 리스트뷰 페이지 (메인)
- 채팅 생성 페이지
- 채팅 페이지
- 친구 페이지
- 설정 페이지
총 8개의 그룹으로 나누어서 작업했다.
로그인 페이지
로그인 페이지는 위와 같이 간단하게 카피되었다.
필드에 값이 다 채워지지 않았을 경우 버튼이 비활성화 처리되게 하였고, 비밀번호를 확인할 수 있는 버튼도 넣었다.
로고는 Adobe Illustrator로 Hessenger의 H를 따서 메신저 아이콘과 비슷하게 만들었다.
라이트모드와 다크모드 두 버전을 모두 만들어보았다.
회원가입 페이지
회원가입 페이지는 이렇게 구성된다. 아래에 있는 로그인 버튼을 누르면 로그인 페이지로 이동한다.
다크모드가 적용된 모습은 아래와 같다.
사실 본체가 페이스북인 만큼 메신저 자체적으로 회원가입 페이지가 존재하지 않는다.
따라서 위 페이지들은 페이스북의 회원가입 페이지에서 디자인을 따왔다. 완전히 똑같진 않지만 최대한 비슷하게 했다.
비밀번호 찾기 페이지
비밀번호 찾기 페이지는 회원가입 페이지와 유사한 형태를 띄는데, 이메일 인증 기능이 추가된 모습을 볼 수 있다.
다크모드가 적용된 모습은 아래와 같다.
채팅방 리스트뷰 페이지 (메인 페이지)
이 부분부터 슬슬 뭔가 많아지기 시작했다. 사이드 바와, 바텀시트, 그리고 모달까지 다양한 UI 컴포넌트가 있었다.
다크모드는 아래와 같은 모습이다.
채팅 생성 페이지
채팅 생성 페이지는 두 종류로 구성된다. 그룹 생성과 메시지 생성.
다크모드는 아래와 같다.
채팅 페이지
제일 기능이 많고 페이지 변종도 많은 채팅 페이지다. 만들면서 정말 힘들었다.
충격적인 건 아직 이 페이지 그룹에서 못 만든 부분이 있다는 것이다. 우선 이정도만 만들고 개발을 시작해야 할 것 같아서 더 만들지 않았다.
그래도 일단 웬만한 기능들은 다 구현 할 수 있는 디자인이 있는 상태다. 그리고 반응 기능에서 이모지가 구린데, 이모지는 따로 아이콘을 만들어서 넣을 것이기 때문에 신경 쓰지 않았다.
다크모드는 생략하겠다ㅋㅋ.
친구 페이지
친구 페이지는 나와 친구인 사람을 볼 수 있는 페이지와 내게 온 친구 요청을 확인하고 친구 요청을 보낼 수 있는 페이지로 나뉜다.
사이드 바의 친구 요청 메뉴를 누르면 친구 요청 페이지가 나오고, 친구 페이지를 누르면 친구 목록을 볼 수 있다.
다크모드는 아래와 같다.
설정 페이지
설정 페이지는 이렇게 구성된다.
다음 포스트부터 본격적으로 개발이 시작된다.
