[Backend] 화면 설계

이용자 입장에서의 UI 흐름도는 틴더 화면을 참고하였습니다.

구글 프레젠테이션으로 간단하게 만들었지만 그래도 간단해서 이해하기는 쉬울(?)겁니다.

 

 

첫 화면은 가운데 말 사진과 함께 회원가입, 로그인 버튼이 있습니다.

로그인 버튼을 누를 경우, 로그인 페이지로 이동합니다.

 

 

첫 화면에서 회원가입 버튼을 누를 경우, 휴대폰 인증 화면으로 이동합니다.

여기서부터 회원가입 및 프로필 작성 절차입니다.

 

 

휴대폰 인증이 완료되면 아이디 비밀번호를 입력합니다.

 

 

회원가입이 끝나고 프로필 작성하기 전 환영인사 페이지입니다.

Welcome~!

 

 

 

각종 개인정보를 입력하는 곳입니다. 사람들에게 노출시킬 닉네임부터 시작해서 MBTI도 넣어주었습니다. 처음에 화면 계획할 때, 조금만 넣으려고 했는데 넣다보니 조금 많아졌네요.

마지막 프로필 사진만 넣어주면 회원가입은 끝이네요.

 

 

원하는 성별 기반으로 피드를 보여주는 페이지인데 여기서 '좋아요', '싫어요'를 누르는 곳입니다. 구글 도형에서 아이콘을 만들어서 넣다보니 종류가 많지는 않네요. 화면 맨하단의 '하트'와 '엑스' 아이콘는 '좋아요', '싫어요'를 누르는 아이콘이구요. 최상단은 왼쪽부터 '피드', '날 좋아요 누른 사람', '채팅 리스트', '내 프로필 수정 및 기타 등등' 관련한 설정 페이지입니다.

 

 

채팅방 페이지인데 이건 틴더, 카카오톡 채팅과 같이 일반적인 채팅방의 형태입니다. 

 

 

화면 설계를 만들다보니 Frontend 쪽 코딩하기가 쉽지는 않겠네요.

기능상으로 확장한다면 신고하기 기능부터 시작해서 여러가지가 있지만 그렇게 만들다보면 프로젝트가 끝도 없기에 일단 여기까지 하겠습니다. 완성 후 추후에 다른 기능을 넣고 싶으면 보충하겠습니다.

 

미래의 나에게 건승을 기원합니다.