인스타 포스팅 예시로 나온 사진. 고양이가 귀여운 뉴스.
프로젝트 2가 시작되었다. 이번 주제는 데이터 분석 웹 서비스 제작이 필요했다. 통계 자료 모아서 matplotlib를 실전 응용하라고 준 기회였던 것 같다.
이번에도 프로젝트 1처럼 프론트엔드와 백엔드로 팀을 나누었다. 다른 점은 데이터 수집 및 시각화를 동시에 모두가 책임감 있게 진행하므로 데이터 코치와의 오피스 아워가 따로 선정되었다.
오피스 아워 스케줄
이번 프로젝트는 통계 자료 모으는 것부터 기획에 들어가다 보니 거의 1주 가량 관련 자료를 수집하고, 프로그램에 맞추기 위해 항목을 편집하는 작업을 진행했다. 그를 위해 프로젝트 주제부터 정해야 했는데, 유의미하게 자료 수집을 하기 위해 여러 안건이 나왔고, 최종적으로 도시에 있는 삶의 만족도를 올려주는 영향이 있는 녹지 환경, 즉 ‘도시에 숨어 있는 오아시스’에 대한 정보를 제공하고자 프로젝트는 시작되었다. 이번 프로젝트에는 분담이 필수라서 프론트엔드 리포지토리랑 백엔드 리포지토리를 분리하는 멀티 리포 방식으로 작업하게 되었다.
내가 프론트엔드 작업을 자원했기 때문에 피그마에서 MUI를 디자인하고 이후 리액트로 그 모습을 가져오는 작업을 진행했다. 처음으로 MUI 체계를 접하다 보니, 피그마 사용하듯이 하다가 프론트엔드 코치에게 ‘이건 MUI가 아니다. MUI는 템플릿 규격의 페이지 요소들을 복사 붙여넣기 해서 사용해야 한다’라는 충격적인 사실을 알게 되었다…일단 시작은 했으니 MUI는 아니더라도 디자인 속행하고 구현이 성공하는 부분에 집중했다. 홈 화면 이후 나오는 공원 검색 화면의 초안을 작업해두고, 이후 프론트 팀끼리 분배해서 또 피그마를 수정해가며 모양새를 꾸며갔다.
내가 집중한 역할은 왼쪽 화면에 나오는 선택 목록과 카테고리 분류가 눌리고, http 리퀘스트를 백엔드로 보내어 필터링 된 검색 목록이 받아지는지 확인했다. 그렇게 받아진 결과물은 다른 팀원이 작업한 지도 파트와, 오른쪽에 있는 공원의 상세정보 페이지에 반영될 수 있었다.
이외에도 커뮤니티라는 항목에서 게시글을 작성하고(=게시판) 인스타처럼 해시태그도 입히는 작업을 원했으나(=갤러리) 결국 시간 부족으로 게시판만 구상하고, 갤러리는 팀원에게 부탁했다. 추가로 제대로 된 민원과 관련된 서비스는 사전에 모아 둔 지자체 사이트로 새로운 리디렉팅이 열리게 방향성을 바꾸었다. (=민원넣기) 해당 과정을 도입하면서 뒤로 가기 기능이 필요해서 useState을 이용해 이전 페이지로 돌아가는 기능을 반영했다. 그 과정에서 임의로 존재하지 않는 페이지에 접속하는 경우를 대비해 404 디자인도 구상했다.
404 페이지
많은 것을 계획하고 개발에 착수했지만 결국 프로젝트의 주요 목표인 통계 자료를 추출해낸 데이터의 시각화는 어떻게 되었는지 아직 설명이 필요하다.
사실 이미 데이터 스토리라는 페이지에 미리 완료해놓았고, 나머지는 추가 작업들이다. 구현에는 recharts.js 라는 시각화 툴을 빌려 파이썬으로 구축했으며, 초반에 각자 간단하게 시각화를 했으나, 한 분이 매우 빠르게 적응을 하셨기 때문에 그 분이 시각화 총괄을 하시고, 내가 지원한 건 페이지의 편의성, 즉 스크롤의 부드러움이나 화면상 아이콘의 디자인이 주였다.
얼추 완성되어 갈 즈음에 회원페이지의 css가 갑자기 마음에 안 든다고 해서 최대한 박차를 가했지만, 개인사정으로 몸이 탈이 나서 이후에 팀에게 도움이 안 되고 마감이었기 때문에 그렁게 사이트 작업은 마무리 되었다. 이번 프로젝트로 프론트 쪽 작업을 하면서 가장 힘들었던 점은 css를 스타일 컴포넌트로 작업하면서 모르는 게 너무 많아서 시간을 계속 예기치 않게 빼앗기거나, MUI 다루는 방법과 구현을 병행해서 사이트의 컴포넌트가 디자인적으로 타협을 여러번 해야 했다는 점이 제일 아쉬웠다. 나름 좋은 점이라면 이번엔 postgreSQL로 작업해 보면서 다른 데이터베이스 관리 방식임에도 기존에 지식이 있던 mySQL과 크게 차이점은 없어서 금방 학습할 수 있었다는 점을 배울 수 있었다.
(이 모든 내용의 상세 기록은 포스팅 된 노션의 프로젝트 2 항목에서 열람 가능합니다).
내가 작업한 프론트엔드: UrbanOasis 프론트엔드 깃헙 연관된 백엔드: UrbanOasis 백엔드 깃헙