부트캠프의 꽃(?)이라고 할 수 있는 팀 프로젝트가 끝났다. 쓰고 지우고 쓰고 지우고 날리고(방금도 날렸다^^) 그리고 좀 쉬어가기도 하고 하느라 이제서야 올리는 한참 늦은 프로젝트 회고. 재충전의 시간을 갖겠다고 잠시 멈췄던 벨로그의 신호탄 정도로 해두자. 부트 캠프를 하면서도 느꼈지만 시간이 정말 빠르다. 이러다 6월도 금방이고 곧 7월이겠구나 싶다.
처음 시작할 땐 이게 될까? 싶었는데 결국 이게 되네? 가 되었던 프로젝트. 처음으로 다른 사람과 협업하면서 해본 프로젝트였기 때문에 부족한 점도 많고 아쉬운 점도 있지만 이 시간을 통해서 내가 하고 싶은 일에 한 발 더 다가선 느낌이었다.
🌡 프로젝트 온도의
👩🏻💻 시작
온도의는 기온에 맞는 옷을 추천해주는 서비스로 만들어졌다. 매번 집에서 나갈 때마다 기온에 따른 옷차림을 모아둔 짤을 찾곤 했는데 그게 이 프로젝트를 시작하게 된 계기였다.
🗓 기간
2022.05.09 ~ 2022.05.31
🧩 역할
기획
프론트 엔드
디자이너
⚒ 구현 기능
- 랜딩 페이지
- OOTD 페이지
- 피드 CRUD
🔗 링크
어떤 걸 어떻게?
랜딩 페이지
랜딩 페이지는 사이트의 첫인상이라고 생각했다. 그래서 잘하고 싶었다. 랜딩페이지를 보고 우리가 만든 사이트가 어떤 서비스를 제공하는지에 대한 정보를 줄 수 있어야 한다고 생각했다. 사이트 이름인 온도의에서 아이디어를 얻어 온도계도 넣어봤다가, 심플하게 이미지만도 넣어봤다가 웹디자인을 모아둔 사이트 여러 곳을 돌아다니며 의류와 관련된 서비스들이 어떤 식으로 디자인을 했는지 찾아보는 것도 잊지 않았다.
또, 사이트 메인 기능에는 애니메이션이 거의 적용되지 않았기 때문에 랜딩 페이지는 좀 더 동적인 느낌을 주고 싶었다. AOS(https://michalsnik.github.io/aos/) 라이브러리를 사용해서 요소들이 스크롤에 따라 나타날 수 있도록 적용했다.
OOTD 페이지
OOTD 페이지의 주요 기능은 사용자가 선택한 태그에 맞게 게시글을 보여주는 것이었다. 우리 프로젝트가 날씨에 초점을 맞추다보니 지역이 가장 중요했고, 따라서 지역 태그를 디폴트로 두고 그 밑에 하위 분류로 옷 스타일에 대한 태그를 두었다.
피드 레이아웃으로는 핀터레스트에서 볼 수 있는 레이아웃을 골랐다. 그 이유는 옷 정보의 유무 때문인데 옷에 대한 정보가 있으면 높이가 늘어나고 없으면 줄어들어야 하기 때문이었다.
처음에는 height: auto 로 해두면 자연스럽게 줄어들 거라고 생각했다. 문제는 flex 를 사용했기 때문에 같은 줄에 위치하게 되면 높이가 가장 높은 요소를 기준으로 맞춰진다는 거였다. 문제가 될 거라고 생각했던 부분이 아니었어서 더 당황스러웠다. 해결책은 다른 팀의 팀원에게 얻을 수 있었다. 예전에 이런 레이아웃을 만들려고 시도해보셨다는 거였다! masonry 라는 키워드를 얻었고 react-masonry-css(https://www.npmjs.com/package/react-masonry-css)을 적용해서 문제를 해결할 수 있었다.
피드 CRUD
CRUD 는 수업 때 매번 하던 일이었어서 크게 어려운 건 없었다. 모든 건 순조로웠지만 역시 Update 에서 조금 버벅였다. update 를 하면서 백엔드와의 소통이 중요하다는 걸 다시 한 번 느꼈다. 수업 시간에 배운대로 이미지 수정 코드를 짰다가 안 돼서 머리가 하얘졌다. 침착하게 생각하면 충분히 해결할 수 있는 일임에도 시간이 얼마 안남은 상황이었기 때문에 조급했던 것 같다. 알고보니 백엔드에서 프론트가 더 쉽게 이미지를 서버에 보낼 수 있도록 만들어 뒀던 건데 그부분을 알지 못했다. (그래서 백엔드 팀원이랑 서로 내가 미안해 아니야 내가 더 를 몇 번이고 반복했다.) 변명하자면 이미지 업로드는 내가 구현했던 부분이 아니라...고 하고 싶지만, 이건 인수인계를 제대로 받지 않은 내 잘못이 맞다고 생각한다.
📝 돌아보며
가장 힘들었던 점은 디자이너가 없었던 점이었다. 정확히 말하자면 있었는데 사라진 거였다. 디자이너 구인 여부가 불투명했지만 그렇다고 손 놓고 있을 수는 없었다. 그래서 부족하지만 내가 디자인을 해보겠다고 했고 디자인을 하게 되었는데 역시나 쉽지 않았다. 디자인만 한 건 아니고 기능 구현을 맡긴 했지만 어쨌거나 인력이 부족해진 것과 마찬가지인 상황이라 기능을 더 넣지 못해서 아쉬웠다.
어쩌다보니 서비스 아이디어도 내가 제안한 게 선택됐고, UI 도 내가 디자인하게 됐다. 그리고 프론트 업무도 해야했다. 발표 자료도 만들어야했고... 한 달 내내 쉴틈없이 달렸다. 아무리 생각해도 아쉬움이 많이 남는다. 어떻게 첫 술에 배부를 수 있겠느냐만 그래도 아쉽다. 디자이너가 있었다면 어땠을까? 다른 서비스를 했다면 어땠을까? 기능을 더 넣을 수 있었다면 어땠을까? 하는 가정들이 프로젝트 내내, 그리고 프로젝트가 끝나고도 내내 머릿속을 맴돌았다.
그래도 즐거웠다. 혼자서는 절대 할 수 없을 일이었다. 같이 문제를 해결할 수 있는 동료가 있어서 안심이 됐고 내가 무언가를 만들어 냈다는 게 제법 기특하기도 했다. 그리고 역할 분담의 중요성을 다시 한 번 깨달을 수 있었던 경험이었다😇
이 경험이 앞으로 나아갈 길에 엄청난 무언가가 될 수는 없을지라도 떠올렸을 때 힘이 되어줄 수 있는 시간으로 남아있길 바란다.
