🫧프로젝트 소개
- 프로젝트명 : 공기팡
- 프로젝트 인원 : 6명 (프론트엔드 4명, 백엔드 2명)
- 개발 기간 : 2024.7.22 ~ 2024.8.9
- 프로젝트 : 실시간 대기질 정보를 제공하고, 친환경 챌린지로 지역 대기 질 개선에 기여하는 웹서비스
- 깃허브 링크 : https://github.com/remazitensi/AIR-PANG
- 협업 : GitLab, Notion, Google Sheet, Discord
- 기술 스택
- Frontend : React, Bootstrap
- Backend : Node.js, Express, TypeScript, Google-Oauth2
- Infra : Nginx
나의 역할
- 팀장
- 기획서 작성
- 백엔드 개발
- 소셜 로그인 구현(Google-Oauth2)
- 마이페이지 구현
- 서버 검증 및 자체적인 JWT 발급
- ERD 설계
- PPT 담당
프로젝트 과정
1. 기획
데이터 분석 프로젝트를 진행하면서 환경을 주제로 어떤 아이디어를 구상할까 고민하던 중, 대기 오염 문제에 대한 아이디어가 떠올랐습니다.
이번 프로젝트는 단순히 대기 정보를 제공하는 데 그치지 않고, 사용자들이 친환경 챌린지에 참여함으로써 보다 적극적으로 환경 보호에 동참할 수 있도록 유도하는 방향으로 기획했습니다.
기획서에서 일부 내용을 발췌하여 작성해보았습니다.
프로젝트 아이디어 동기
최근 대기 오염이 심각해지면서 이에 따라 데이터 분석을 통해 지역별 대기질 현황을 파악하고, 이를 사용자에게 시각적으로 제공하고자 합니다. 또한 사용자가 친환경 챌린지에 참여하여 대기 정화에 기여할 수 있도록 하는 기능을 구현함으로써, 환경 보호에 대한 사용자의 인식을 높이고 실질적인 대기 개선 효과를 달성하고자 합니다. 이를 통해 우리는 사용자들이 자신이 살고 있는 지역의 대기질을 실시간으로 확인하고, 자발적인 참여를 통해 지역 사회의 환경 보호에 기여할 수 있도록 지원하고자 합니다.
프로젝트만의 차별점, 기대 효과
실시간 대기질 데이터와 시각화 기능을 통해 사용자의 환경 의식을 향상시키고, 실제 대기 개선 활동에 적극적으로 참여할 수 있습니다! 이는 단순히 대기질 정보를 제공하는 기존 서비스와는 차별화되며, 사용자의 능동적인 참여를 이끌어내어 지역 사회의 환경 보호에 기여할 것으로 기대됩니다.
2. 협업
사실 개발만큼 중요한 부분이 있습니다. 혼자 진행하는 것이 아니라 팀과 함께 작업하기 때문에 현재 진행 상황과 진척도를 어떻게 효과적으로 공유할지가 가장 큰 고민이었습니다.
협업툴
📝구글 스프레드 시트
먼저 구글 스프레드 시트를 통해 프로젝트 일정표를 만들고, 팀원들에게 일자별 달성목표 및 현황을 작성부탁드렸습니다!
📝노션
팀 프로젝트와 관련된 기록은 노션에서 관리하였습니다.
- 스크럼
- 미팅
팀 스크럼
팀 프로젝트를 진행하면서 스크럼 시작 시간을 10시로 정했습니다. 대부분의 팀원들이 꾸준히 참여해주셨고, 밤을 새거나 잠을 적게 자더라도 항상 정시에 참석해주셔서 정말 감사했습니다. ㅠㅠ
스크럼에서는 다음과 같은 내용을 공유했습니다.
- 프론트엔드/백엔드 별 진행 사항
- 에러 사항 공유
매일 스크럼이 끝난 후, 팀원들이 잊지 않도록 요약한 내용을 올렸습니다.
소통이 중요하다고 생각해서, 팀원들이 어떤 부분에서 어려움을 겪고 있는지 항상 요청하며 확인했습니다!
3. 설계
프론트를 맡게 된 팀원들은 피그마로 디자인 및 UX/UI 설계를 하고, 백엔드를 맡게 된 팀원들은 디렉토리 구조 설계,API 명세서 작성, ERD 설계를 하였습니다.
- 피그마
프론트 팀원 한 분이 UI/UX 설계를 훌륭하게 진행해주셔서, 불과 4일 만에 화면 설계를 완성할 수 있었습니다. 정말 빠른 작업 속도에 놀랐습니다...!
- API 명세서
백엔드 팀원 한 분이 API 설계를 깔끔하게 정리해주셔서 그 덕분에 팀원들이 API의 구조와 기능을 이해하는 데 큰 도움이 되었습니다! 명확한 문서화와 함께 각 엔드포인트의 역할과 사용 방법을 잘 설명해주셔서, 개발 과정에서 발생할 수 있는 혼란을 최소화할 수 있었습니다!
특히, 다양한 요청 방식과 응답 형식에 대한 세부 정보를 잘 정리해주신 덕분에, 프론트엔드와 백엔드 간의 원활한 소통이 가능했습니다.
- ERD
ERD Cloud에서 작성한 초기 설계 / 최종 ERD
ERD는 개발 과정에서 추가되거나 변경되는 부분이 있어 약간 수정되었습니다. 원래는 유저의 관심 지역 정보를 데이터베이스에 저장할 계획이었으나, 프론트엔드에서 로컬 스토리지에 저장하는 방식으로 변경하게 되면서 해당 테이블은 삭제하게 되었습니다.
- 기능 명세 참고표
4. 개발
첫 번째 주는 기획 및 데이터 분석을 진행하였고, 두 번째 주에 개발을 진행했습니다. 그러나 마지막 주는 발표 준비와 버그 수정에 많은 시간을 소모하였습니다. 실질적인 개발 기간은 1주 + 추가로 2~3일이었습니다. 전체적으로 기획, 설계, 발표 준비로 인해 개발 기간이 줄어드는 상황이었지만, 다행히도 최종적으로 맡은 백엔드 서버 개발을 거의 완료할 수 있었습니다. 힘든 과정이었지만, 결과적으로 의미 있는 성과를 이뤄냈습니다!
프로젝트의 기능을 크게 나누자면 다음과 같습니다.
- 구글 로그인 / 인증
- 실시간 대기질 정보 제공: 사용자의 위치 정보를 기반으로 해당 지역의 대기 오염 지수(AQI) 및 오염물질 농도 데이터 제공
- 지역별 대기질 비교 기능: 사용자가 관심 있는 지역의 대기질을 비교 분석할 수 있는 기능 제공
- 친환경 챌린지 참여 기능: 사용자가 대기 정화 활동에 참여할 수 있는 챌린지 기능 제공
- 마이페이지 : 사용자 관심 지역 설정, 본인이 작성한 챌린지 현황
리팩토링
차차 . . . 글 수정 중
🤔배운 점 / 느낀 점
- 포기하지 않고 꾸준히 열심히하면 된다
3주 동안 모든 기능을 구현할 수 있을지 걱정이 많이 들었다. 처음에는 시간적인 압박과 복잡한 요구사항 때문에 불안한 마음이 컸다. 하지만 팀원들이 모두 '프로젝트 완성'이라는 공동의 목표를 가지고 열심히 노력하는 모습을 보니, 점차 희망이 생겼다. 각자의 역할을 충실히 수행하며 서로 협력하고 소통하는 과정에서 팀워크가 강화되었고, 문제를 함께 해결해 나가는 과정에서 큰 힘이 되었다.
결국, 모든 팀원이 열정을 쏟고 끈기 있게 임한 덕분에 프로젝트를 완성할 수 있었다. 이러한 경험은 단순히 기술적인 성장을 넘어, 팀워크의 중요성과 목표를 향해 나아가는 과정에서의 성취감을 깊이 느끼게 해주었다.
- 성장
개발 과정에서 중간에 막히는 부분도 있었지만, 문제를 해결하기 위해 고민하고 찾아보는 과정에서 스스로 성장하고 있다는 것을 느꼈다. 아직 부족한 점이 많지만, 이전보다 더 구조를 고민하며 코드를 작성하려고 노력했고, 타입스크립트를 처음으로 공부하고 사용해보면서 많은 발전이 있었다. 이러한 경험들이 나의 개발 역량을 한층 더 향상시키는 데 기여했다고 생각한다!
- 리팩토링
그럼에도 불구하고 코드와 구조에서 마음에 들지 않는 부분이 존재한다. 특히 개발 후반부로 갈수록 기능이 정상적으로 작동하는 것에 급급해지면서, 깔끔한 코드와 구조에서 멀어지게 되었다. 수정하고 싶은 부분들이 있지만, 이미 개발한 부분과의 연결성 때문에 수정하기가 쉽지 않은 상황이다. 앞으로는 처음부터 설계를 더 철저히 하거나 아키텍처 및 클린 코드에 대한 공부를 통해, 보다 깔끔하고 구조적인 코드를 작성해야겠다는 다짐이 든다.
