[프로젝트][Zwitter] 기획 및 와이어프레임 만들기

 

노마드코더에서 주관하는 트위터 클론코딩 챌린지에 참여하게 됐다!

2주 트위터 클론코딩 컨테스트 – 노마드 코더 Nomad Coders

 

오랜만에 Firebase를 다루고 싶기도 하고

새로 습득한 기술 스택들로 CRUD를 혼자서 완성도 있게 만들어보고자 챌린지에 임하게 됐다.

 

 

목표는 챌린지 참여에 그치지 않고 제대로된 개인 프로젝트로 발전시키기!

제시하는 기능 외에 추가적인 기능 작업과 성능 개선까지 할 수 있는 만큼 완료 시키는 것이 목표로 한다

 

 

 

컨셉

단순히 구twitter 현X 의 UI를 따라가는 것도 좋겠지만

동작하지 않는 기능들까지 노출하는 것은 개인적으로 아쉽게 느껴져 컨셉과 디자인에 변화를 주었다.

 

Z세대들을 타깃으로 한 레트로한 컨셉의 메신저!

이름하여 Zwitter 제트위터 !!!!

 

메인 색상 코드는 #FF7AB2 를 이용할 예정이다.

 

 

 

와이어프레임

 

와이어프레임 작업은 Figma를 통해 진행했다.

 

애초에는 가볍게 작업하려고 했으나

서비스의 전체적인 맥락을 잡기 위해 가능한 페이지별로 작업해봤다.

 

Login

유저에게 최초로 보여질 페이지이자 로그인 페이지이다.

Firebase를 이용한 이메일을 이용한 로그인과 소셜미디어 로그인을 함께 적용해볼 예정이다.

"계정 만들기" 버튼을 통해서는 이메일을 통한 회원가입을 진행한다.

 

Create Account

기존 트위터의 디자인을 참고하여 회원가입을 팝업으로 띄울 예정이다.

이름, 이메일, 비밀번호 3가지 정보를 입력받아 계정을 생성한다.

 

Home

로그인이 완료되면 홈으로 이동한다.

홈 역시 트위터를 참고하여 3분할된 화면으로 디자인했다.

좌측에는 네비게이션, 우측에는 검색, 그리고 중앙에는 글을 작성하는 기능과 모든 회원들이 작성한 글을 시간순으로 보여주도록 구현할 예정이다.

 

네비게이션의 "프로필" 을 클릭하여 내 프로필로

혹은, 각 회원들의 프로필 사진을 클릭하면 각 사용자의 프로필로 이동한다.

 

User

프로필 페이지는 홈과 비교하여 좌우는 동일하고 가운데 콘텐츠만 변경된다.

상단에는 유저의 프로필 정보가, 하단에는 유저가 작성한 글들이 보여지도록 한다.

 

만일 내 프로필을 들어간 경우에만 프로필을 수정할 수 있는 버튼이 렌더링 된다.

 

Edit Profile

해당 버튼을 클릭하면 내 프로필 사진과 이름을 변경할 수 있는 프로필 수정 팝업이 노출되도록 구현할 예정이다.

 

 

 

 

구현하고 싶은 사항

필수적으로 구현해야 할 주요 기능은 다음과 같다.

• 회원
  • 회원가입 및 로그인
    • 소셜 로그인
    • 로그인된 회원 정보 연결
  • 회원 정보 수정
  • 로그아웃
• 게시물
  • 작성 유저 / 시간 저장
  • 회원별 게시물 렌더링
  • 게시물 삭제

 

그 외 구현하고 싶은 기능은 아래와 같다.

• 게시물 검색
• 게시물 별 좋아요
• 반응형 작업
• 팔로우 / 팔로워

 

 

작업 화이팅!!!! 🦾🦾🦾