생성 AI 이미지 공유 플랫폼 - Gatchai
💻 개발 환경 및 툴
- HTML
- CSS
- Javascript
- React
- redux-toolkit
- Firebase
- Firebase database
- Firestorage
- Authentication
- Hosting
- Nodejs
- cloudtype
- open-graph-scraper
- Figma
🧭 개발목적
미드저니, Stable diffusion 등 이미지 생성 AI로 제작한 이미지들을 공유하는 플랫폼 개발
🦾 진행한 부분
프로젝트 기획
기획, 디자인, 개발 WBS
퍼블리싱(피그마에 디자인된 화면 설계 그대로)
Figma 디자인 원본
로그인/회원가입 구현
로그인 / 회원가입
- firebase 로그인/회원가입 + 구글 소셜로그인/회원가입
무한스크롤
무한스크롤로 데이터 추가 get
검색기능
데이터 검색 기능
이미지 및 데이터 업로드/수정/삭제
메인 업로드/수정 기능
마이페이지 업로드 / 수정
- firestore / firebase databse에 저장
- 업로드 전 이미지 사이즈(용량) 조절 기능
- 미리보기 기능
- 전에 저장된 정보 불러오기(수정시)
- 업로드 전 이미지 사이즈(용량) 조절 기능
- 미리보기 기능
- 전에 저장된 정보 불러오기(수정시)
좋아요/북마크 기능
좋아요/북마크 기능
좋아요/북마크 기능 - 마이페이지
팔로우/팔로워 기능
팔로우/팔로워 기능
인사이트 페이지 meta tag 가져오기
각 홈페이지 meta tag 데이터 크롤링명
- Nodejs 의 open-graph-scraper 라이브러리 사용
모바일 / 태블릿 반응형
모바일 / 태블릿 반응형 화면
📃 결과
- 기획했던 기능들을 모두 개발 완료, 예정 기간도 맞춰서 진행
- React를 좀더 익숙하게 사용할 수 있게됨
- Firebase를 사용하였지만 서버 개발을 이해할 수 있는 계기가 됨
🤓 이번 프로젝트에서 배운점
- 사용자가 많지는 않았지만 처음 기획했던 기능이나 디자인을 그대로 구현
- 기획부터 개발까지 모두 참여했고, 처음 디자이너와 협업을 진행
- 혼자서 프론트와 백을 모두 담당하니 생각보다 오래걸리고 공부할게 많았음 but 좋은 경험
- 특별한 기능이 없다면 사람들이 관심을 많이 가지지 않음
😓 이번 프로젝트에서 아쉬운점 & 보완점
- 내 코드가 효율적이고 잘 짜여지고 있는지 확인할 수 없다는 점
- 사용자가 많이 없어서 사용자 리뷰를 많이 못받은 점
- 트래픽에 대해서 서버가 얼마나 효율적으로 사용되고 있는지 궁금함
