1p. As is - To be ← UPF 참가 이전과 중간 발표를 하는 현재 프로젝트 상태 2p. 간트차트 수정 ← 2주차 간트차트 참고 3p. 향후계획
1. As is - To beUI 설계서비스 고도화1. 고객 타겟 정하기, 페르소나 만들기2. 요구사항 명세서 작성, 정제3. 발전 시키고 싶은 기술 스택 공부 (진행형 ^^..)4. 스토리 보드 작성 : 사용자 시나리오5. 서비스 DB 설계2 . 간트3 향후 계획
1. As is - To be
UI 설계
As is
🔼 Main Page Design 중 일부 (로그인 전 화면)
이전 디자인의 경우 1박 2일 동안 이루어진 해커톤 참여작이라는 것과
HTML/CSS/JS만을 이용하여 개발한다는 것을 고려하여 디자인과 페이지 개수를 간소화
🔼 Main Page Design (로그인 후 화면)
이전 UI의 경우 로그인 전 사용자와 로그인 후 사용자에게 다른 메인 페이지를 띄워줌으로서
가입 전 사용자에게는 서비스 홍보, 가입 후 사용자에게는 포트폴리오 관리를 촉구
🔼 Contest Page Design (공모전 게시글 Read 화면)
공모전 게시글을 Read하는 페이지는 이전 디자인의 경우 배너 없이 카드 형태로 구현
🔼 Portfolio Detail Page (포트폴리오 및 프로필 화면)
이전 포트폴리오 디테일 페이지의 경우 간단한 이미지와 소개, 뱃지, 프로젝트 카드로 구성
To be
🔼 Main Page Design 중 일부 (로그인 전)
현재 디자인의 경우 기술 스택을 ReactJS로 변경한다는 점과
웹앱 서비스 혹은 모바일 Cross Browsing을 고려하여 디자인은 간소화하되 페이지 개수를 조절
🔼 Portfolio Detail Page (포트폴리오 및 프로필 화면)
참여 중인 공모전, 스터디를 더 눈에 띄는 위치에 이동시키고 강조, 프로젝트는 아래에 카드 형식으로 위치
뱃지에 대한 이미지와 디자인은 변경 예정
🔼 Contest Page Design (공모전 게시글 Read 화면)
배너를 추가하고 검색 창을 간소화하였으며 카테고리, 카드의 디자인 디테일은 비슷하게 유지
🔼 컴포넌트 별로 UI를 제작
서비스 고도화
1. 고객 타겟 정하기, 페르소나 만들기
:: 서비스의 타겟 집단을 설정, 분석하여 이들을 대표할 수 있는 특징을 가진 실제 존재할 법한 가상의 인물들을 정하여 목표 대상 선정
2. 요구사항 명세서 작성, 정제
:: 페이지 별 기능 고도화
3. 발전 시키고 싶은 기술 스택 공부 (진행형 ^^..)
- MongoDB
- Express
- AWS
- Redux
- React
4. 스토리 보드 작성 : 사용자 시나리오
5. 서비스 DB 설계
DB
Frontend
UI 설계
필요한 Tech Stack 정리
코드 컨벤션 스타일 정하기
프로그래밍 역할 분담 (component, jwt인증 관리)
JWT 로그인 인증 관리 ( LocalStorage? 무엇이 우리 프로젝트에 맞을까? )
Layout Components 구성 (공용으로 사용되는 Layout)
Router Components 구성 ( 컴포넌트들의 URL Point )
Store Components 구성 ( 로그인 정보 등 상태 관리)
API Components 구성 ( REST API 정리 컴포넌트 )
features Component 구성 << 이건뭐지?
Service Components 구성 ( 외부에서 제공하는 기능(서비스)를 사용하는 계층..? 무슨 역할 하는건지 모르겠네 )
Backend
DB 설계
기능 명세서 작성
코드 컨벤션 스타일 가이드 확정하기
사용할 기술 스택 최종 확인(JWT 인증 등...)
기능 명세 최종 확인
mongoDB 구축
기능 별 역할 분담
node.js REST API 설계 및 구축
REST API 배포
REST 서버와 MongoDB Atlas 연결
2 . 간트
프로젝트 진행 사항
3 향후 계획
- 프론트엔드
- 컴포넌트 설계
- Assets 설정 (Font, 핵심 컬러, Button, Header 등 반복되는 요소 미리 설정 )
- 사용할 Library 정리 및 적용
- 컴포넌트 별 역할 분담 ⇒ 개발 시작
- S3 + Cloud Front 사용 프론트 배포
- 안나소 로고 디자인 수정
- 백엔드
- ERD를 이용해 MongoDB 모델 짜기
- Rest API 디자인 설계하기
- Feature 별 파트들 역할 분담하여 개발 시작하기
- AWS EC2 + Gunicorn or Uwsgi + Nginx 사용 Rest 서버 배포
- AWS와 MongoDB 연결하기