이 프로젝트는 올해 초반에 교내 개발 동아리의 홈페이지를 만들면 어떨까 하고 시작한 기획이다.
방학에 할 프로젝트를 구상하던 도중 교내 동아리 프리미티브 웹사이트를 만드는 아이디어를 떠올렸다.
프리미티브는 국립공주대학교 교내 동아리로 개발·창업동아리이다. 설립일은 2002년으로 오랜 전통을 가진 동아리다.
처음에는 신입생들을 모집하기 위한 홍보 목적으로 개발을 시작했고, 개발 후 순위로 프리미티브 동아리원이 만든 프로젝트를 공유하는 플랫폼으로 만들면 좋을 것 같다는 의견이 나왔다.
프리미티브 개발 회고
🛠️ 개발 스택
프리미티브 웹페이지는 현재 TypeScript + React + Vite로 개발되어있다. 원래는 JavaScript + React + Webpack이었는데, 웹팩 번들링 하는 속도를 개선하려고 Vite로 마이그레이션을 진행했다. Vite로 마이그레이션하는 겸사겸사 TypeScript로 모두 마이그레이션을 진행했다.
📣 홍보 목적 홈페이지
초반에는 홍보 목적으로 개발을 진행했기 때문에 신입생 모집이 시작되는 3월 전으로 마감일을 정했다.
홈페이지 초입 부분
동아리에 지원하려하는 신입생들에게 프리미티브가 어떤 동아리인지를 알기 쉽게 표현하려고 했고, FAQ로 궁금한 점을 해소할 수 있도록 만들었다. Intersection Observer API로 컴포넌트가 화면 안에 들어올 때 애니메이션을 적용했다.
전년도는 노션으로 신입생 모집을 진행했었는데 이번에는 그 역할을 이 사이트에서 구현하고 싶었다.
Join Us 페이지에서는 당해 모집 공고와 OT 자료, 지원서 양식 자료를 다운받아 볼 수 있도록 구현했다.
다 만들때 쯤에 심리테스트를 만든 친구가 있어서 해당 심리테스트로 이어지는 링크도 추가했다!
🚀 공유 플랫폼으로 진화
동아리 홍보라는 목적을 성공적으로 달성했고, 이 후에는 잠시 프로젝트를 유기했다. ㅋㅋㅋㅋ 😅
그러다 5월에 동아리내 홈커밍 데이를 마치고 나서 00학번 선배님이 primitive.kr 도메인을 무료로 사용하게 해주신다고 하셨다. 이 말을 듣고 생각만 해두었던 공유 플랫폼 개발을 다시 시작했다.
홍보 목적으로 개발할 때와는 다르게 기획&설계를 미리하고 진행을 했는데, 프로젝트 업로드, 조회, 수정, 삭제 같은 뼈대가 되는 기능들과 댓글, 프로젝트 썸네일, 유저 프로필 사진 같은 기능들을 기획하고 구현에 들어갔다.
기획하고 개발하니 하루에 하나씩 개발한다던가 하는 일정을 계획할 수 있어서 편리했다.
🔥 백엔드는 Firebase로
홍보목적으로 사용할 때는 백엔드 부분이 필요없이 정적 호스팅으로 배포했었다. 하지만 공유플랫폼이 되려면 백엔드가 필요 했기에 고민을 했다.
처음에는 백엔드를 nodejs + express로 개발할까 했는데, 이미지 업로드를 위한 cdn이나, 회원 인증/인가 등을 생각하면 너무 많은 것들을 학습해야했고, 그렇게 되면 중간에 퍼질 수도 있기 때문에 Firebase를 선택해서 개발을 시작했다.
회원가입을 하면 이렇게 가입 요청을 기록했다고 안내하고, 어드민은 어드민 페이지에서 요청을 수락할 수 있다.
회원가입을 구현하던 도중 어드민이 가입 요청을 수락하면 어드민 세션이 종료되고 가입 요청을 보낸 유저로 로그인이 되버리는 문제가 있었는데 해결방법은 파이어베이스로 어드민 인증 기반 회원가입 구현하기 글에 정리해두었다.
🎨 프로젝트 공유 기능
이 기능은 서로 완성한 프로젝트를 공유해서 동기부여가 이루어질 수 있으면 좋겠다! 하고 만든 기능이다.
프로젝트 업로드는 로그인한 사용자만 접근이 가능도록 설계했다. 아래 화면이 프로젝트를 업로드할 수 있는 화면인데, 오른쪽 상단 썸네일을 추가할 수 있도록 구현했다.
추가된 썸네일은 Firebase의 storage에 저장된다. 중복 썸네일이 들어오는 것을 방지하기 위해 업로드 시각을 파일이름으로 설정했다.
프로젝트를 업로드하면 이렇게 프로젝트 ID 값으로 프로젝트를 조회할 수 있다.
해당 페이지에서 할 수 있는 기능
- 프로젝트 수정 / 삭제
- 댓글 작성 / 수정 / 삭제
- 답글 작성 / 수정 / 삭제
- 프로필 사진 조회
- 공유 기능
- 좋아요 기능
📱 모바일 사용성 개선
프리미티브 웹사이트는 모바일 환경에서의 UI도 지원할 수 있도록 반응형 웹사이트로 구현했다. 이 프로젝트를 하면서 TailwindCSS를 마스터한 기분이다. 😊
🔍 웹 성능
처음부터 성능을 고려하고 개발한 것은 아니었다. 그런데 기존에 티스토리 블로그를 운영하면서 SEO와 CLS에 골머리를 앓아본 적이 있어서 그런가 SEO하고 CLS는 자연스럽게 최적화를 해버렸다..!!
성능 점수도 생각했던 것보다 잘 나와서 기분이 좋았다. 검색엔진 최적화는 100점을 받아서 구글에 프리미티브 동아리라고 검색하면 최상위에 노출된다. 프리미티브라고만 쓰면 안나온다...
🔧 개선 계획
일단은 구현하고 싶은 것들은 대부분 구현했다고 생각한다. 만약 더 기능을 추가해야한다면 1년 2년이 지나도 지속 가능하게 만드는 것을 생각 중이다.
- 🔑 회장이 차기 회장에게 권한을 위임하는 기능
- 📝 소개 페이지 소개글을 운영진이 직접 수정할 수 있도록 변경
- 👥 운영진 정보를 개발자가 아닌 실제 사용하는 운영진이 업데이트할 수 있도록 개선
현재는 상위 권한을 가진 사용자가 하위 권한 유저의 권한을 조정할 수 있게 만들어놨는데, 사실 어설픈 부분이 있어서 좀 더 신경을 써보고 싶다.
🙌 마치며
이번 프로젝트하면서 여러가지 써본 것 같다. 상태관리 라이브러리는 redux만 써봤었는데 최근에는 recoil이나, zustand 같은 라이브러리도 사용해보고 있는데, 확실히 zustand가 사용하기 편리하다는 장점이 있는 것 같다.
백엔드단을 firebase를 사용해서 만드는 과정에서 Firestore, Storage, Authentication 등 firebase의 여러 제품을 사용해보게 됐는데 firebase의 장점과 단점을 명확하게 알 수 있었다.
검색을 구현하려고 했는데, firebase에서는 다른 DB처럼 검색이나 페이지네이션을 구현을 못한다는 것을 알게 됐다. 정말 단순한 검색 수준과 무한 스크롤은 구현이 가능해서 그렇게 구현했던 것 같다.
프로젝트 초기에 같이 기획하고 의견 내주고, 개발 참여한 진성이형과 중간중간 디자인 도와준 가은이에게 감사하다. 😎👍
