시너지 개발 기록서 2장 - 디자인 프로토타입, 로그인 유지, UI

디자인 프로토타입 7월 9일

 

오늘 회의에 앞서 디자인의 프로토 타입을 작성해보았다. 피그마의 UI템플릿과 dribble을 참고하며 만들어보았는데 색과 관련해서는 좀더 생각해보아야겠다. 프로젝트 시작전 디자인, 로그인, 뼈대까지 다 만들었으니 이정도면... 팀장역할을 잘 하고있는것같다. 9시에 회의를 하며 세부사항은 좀 더 논의하면 좋을듯  

 

메인 화면이다

메인화면은 너무 텅 비어있으면 공허하게 느껴진다.

기존에는 Team Up, 즉 팀원 구하는 부분만 넣으려고 했는데, 뭔가 앱을 키자마자 게시글들만 보이면 느낌이 이상할것같아 다른 요소들도 넣어주었다.

우선 맨 위에는 클릭시 어플의 소개와 이용방법이 나오는 페이지를 보여줄것이다.

 

Team Up 의 경우 스터디 모임 구하기와 팀 구하기가 함께 보여지며, 더보기를 클릭시 세부 화면이 보여질것이다(아래 설명)

 

IT 공부와 관련된 컨텐츠들도 배치해주어 홈 화면의 느낌을 더 주었다.

알림 버튼을 누르면, 나에게 온 채팅이 있을시, 내 글에 댓글이 달릴시 알림이 오게된다.  

 

알림 화면과 클릭시 튜토리얼, IT 정보 화면 구현 필요

 

 

 

 

 

 

 

 

 

팀을 구하는 화면이다. 탭을 이용해 팀 구하기와 스터디 구하기를 각각 나눠줄 예정

 

또 참가 인원을 보여주어 어느정도 인원이 참가했는지 사용자에게 정보를 보여줄것이다.

 

게시글 작성버튼을 누르면 작성 화면으로 넘어간다.

 

 

 

 

 

 

 

 

 

 

 

 

 

게시글 상세 화면이다. 이부분은 좀 더 디자인 해야할듯 싶다

 

참가 요청을 누르면 게시글을 올린사람에게 메세지가 전송된다.

 

프로젝트 상세에 관한 설명이 들어가고, 아래에 댓글 달기 기능도 포함할 예정이다

 

 

 

 

 

 

 

 

 

 

 

 

 

 

채용 정보 모음이다.

 

개발자와 관련된 채용정보를 사람인 등에서 크롤링해와 보여줄 예정

 

 

 

 

 

 

 

 

 

 

 

 

 

 

프로필화면은 간단한 소개와 내가 쓴글, 내 프로필에 대해 보여지고, 로그아웃 기능이 있을 예정이다.

 

내가 좋아요 한 프로젝트(만약 구현한다면)를 보여주는 탭도 만들까 고민중

 

프로필 수정도 구현해 주어야하는데, 로그아웃 부분에 메뉴로 세로점 3개 아이콘을 배치하고, 클릭시 옵션화면이 나와 수정할수 있는것도 괜찮을듯 하다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

이 부분은 참가 요청을 눌렀을시 채팅방이 생성되는 부분이다. 해당 방식을 사용할지, 아니면 단순히 댓글 기능만 사용할지는 고민중이다.

 

 

 

 

 

 

 

 

 

 

구현은 로그아웃, 로그인까지 했고, 앱을 종료해도 로그인 상태가 유지되도록 했다.

 

 home:
      StreamBuilder(
        stream: FirebaseAuth.instance.authStateChanges(),
        builder: (BuildContext context, AsyncSnapshot<User> snapshot) {
          if (snapshot.hasData) {
            return BottomTab();
          } else
            return WelcomePage();
        },
      ),

간단하게, 메인 화면에서 스티림 빌더를 이용해 분기를 나눠주어 유저 정보가 있는지에 따라 화면을 나눠주는것으로 해결하였다.

 

-------------------------------------------------------------------

아.. 너무 재밌어서 혼자 한 한두시간동안 왕창 쳤다. 메인화면 UI구성이랑 프로필 화면을 간단하게 만들었다.