첫 미니 프로젝트 & 협업 - 중간 보고 🌱
얼마 전 시작한 나의 첫 프로젝트인 "Find Your Plant - 찰떡 식물 추천 서비스" 가 거의 마무리 단계에 왔다. 작은 규모의 서비스인데도 첫 프로젝트인지라 타임라인이 잘 머릿 속에 그려지지 않아서 계속 조바심 내면서 진행했는데 이젠 좀 릴랙스하고 다음 메인 프로젝트를 준비해야겠다. 👶 일단 프로젝트 진행 중간 정리를 해보즈아!
1. 기획
일단 아이디어 발산 수업을 통해 아래와 같은 작업을 하긴 했으나...
사실 이 때 기획한 아이디어는 구현이 너무 까다로워서 깔끔하게 포기하고! 미니 프로젝트거리를 찾다가 내가 예전에 생각해두었던 식물 큐레이션 웹앱을 진행하기로 결정했다. 🌱
1-1. 스케치
똥손 냄새 풀풀나는 스케치 ㅋㅋㅋㅋ 근데 지금 보니까 결과물이 비슷한 구조로 딱 나와서 신기신기
어우 사진이 많이 크네요
1-2. 와이어프레임
이때까지만 해도 결과물이 어떻게 나올지 감이 안 와서 계속 갸우뚱하면서 작업했던 것 같다. 질문은 사실 스르륵 떠오르는 대로 일단 써놓고 나중에 다듬으려고 했는데 어찌어찌 그냥 그대로 사용하고 있다. 칭구들한테 보여주고 피드백 받아서 멘트는 좀 수정하고 싶다.
2. 디자인
디자인은 핀터레스트에서 식물 관련 앱들을 참고해서 작업했다. 뭔가 서정적이고 편안한 분위기에 식물 느낌 낭낭한~ 그런 느낌으로 (+ 퍼블리싱 어렵지 않게) 작업! 사실 내 디자인 스타일이 원래 그럼 ㅋㅋ 나중에 또 토이 프로젝트 디자인을 하게 되면 좀 과감한 디자인으로 해보리라!
아 키비주얼 이미지는 내가 그린 거 아니다! 다들 내가 그린 줄 알길래... 무료 소스 가져다 색상만 바꿔서 쓴 겁니다.
3. Open API 데이터 추출하기
사실... 처음엔 API fetch 하는 것도 짝꿍이랑 겨우겨우 했던 생각이 난다 😂 성공하고 나니 별 것 아닌 것 같지만 딱 데이터 불러와졌을 때는 진짜 기뻤다 ㅋㅋ
그리고 원래 구상은 API에서 매번 데이터 요청해서 화면에 표시하는 것이었는데! 막상 데이터 내용을 찬찬히 뜯어보니 우리가 원하는 것과 다른 부분이 많아서 일단 데이터를 다 뽑아서 수정했어야 했다. 그리고 그러려면 모든 식물의 상세정보를 일일히 요청해서 통합해서 저장..해야 했고 그거슨 약 80번의 API call & 80번의 데이터 포맷 변환을 뜻했다 🤓
뭐... 짝과 반반씩 나눠서 40번 작업을 할 수도 있었으나 ㅋㅋㅋ 뭔가 명색이 개발자 되겠다는 사람이 이런 반복작업은 좀 아닌 것 같아서 제대로 배워보지도 않은 파이썬으로 API Call & Data Parsing 코드를 짜보기로 했고, 우여곡절 끝에 짝궁이 잘 해결해주었다 히히. 그래서 2시간 반복작업할 일을 3시간 걸려서 자동화시켰다 ^^
4. 데이터 전처리 (매운맛) 😈
음 그렇게 짝꿍님이 뽑아준 데이터를 가지고... 데이터 전처리를 하기 시작했다. API에서 추출한 로우데이터에는 빈 부분, 항목에 맞지 않는 데이터, 갑툭튀 영어문장 등등 의 다양한 문제점들이 도사리고 있었고, 처음에는 어디서부터 손을 대야 할 지도 감이 안 왔다.
(🔝 그나마 꽤 다듬어진 단계의 데이터. 여기서 더 더 더 깎고 자르고 붙이고 아주 열심히 작업했다)
심호흡 몇 번 하고 하나 둘씩 처리해나가니 점점 원하던 형태의 데이터가 나오기 시작했고 그 때부터 속도를 가해서 데이터를 쳐밀ㄷ..아니 쳐내기 시작했다. 식물 목록 중에서 일반 소비자가 소매로 구매하기 어려운 식물들은 제한 뒤 나머지 식물들에 인기도를 수동으로 매겼다. 그리고 총 200여개 식물 중에서 인기 상위 80개로 추려서 그 데이터만 사용하기로 기준을 정하고 작업을 했다.
이번 프로젝트의 컨텐츠가 식물🌲이라 그나마 재미있게 했다만 지금 생각해도 데이터 전처리는 진짜 노가다.. 식물 추천 결과지에 바로 데이터를 불러와도 예쁘게 나올 수 있도록 많은 고민을 해가면서 여러번 수정했다. 후.. 다시는 보지 말자 이런 뎌려윤 데이터!(현업에서 실무하면 뎌려윤 데이터는 자주 보게 될 것이라는 이야기는 많이 들었습니다만.. 예..)
5. 퍼블리싱
비반응형으로 모바일 버전만 슉 작업해서 시간은 생각보다 진짜 얼마 안 걸렸다. 그리고 디자인을 해놔서 그냥 그대로 퍼블리싱만 하면 됐기에 머리도 덜 아팠고. 재밌는 퍼블리싱 작업이었다 ㅎㅎ.
사실 개발자가 와이어프레이밍부터 디자인까지 굳이 세세하게 다 하는 게 좀 뻘짓으로 보일 수도 있겠다만 그래도 기획/디자인은 재밌으니까! 또 개인적인 생각으로는 나중에 이런 뻘짓이 다~ 도움이 되지 않을까~ 헌다~ 💁♂️
6. Redux 없이 React Hooks로만 개발
데이터 전처리에 시간을 많이 쏟은 탓에 실제 개발에 주어진 시간이 많이 없는 상황이었다. 거기다가 뭔가 빨리 완성하고 다음 프로젝트를 해야 한다는 압박감에..! Redux까지 써서 프로젝트의 복잡성을 높이고 싶진 않았다 😢 그래서 일단은 Hooks로만 상태관리를 해서 1차로 개발하고, 시간 여유가 되면 Redux로 다시 개발해보기로 했다.
7. Redux로 다시 개발 + 사용자 피드백 바탕 UX 개선
그리고 어제 hooks로만 기능 구현을 거의 끝 마쳤고 👏 🎉 다음주에는 리덕스로 다시 구현해 볼 예정이다. (메인프로젝트의 초석을 다진다 셈 치고!)
미니프로젝트는 볼륨을 작게 가져가더라도 일단 완성하는 데에 목표를 두고 진행하기로 했었는데 기간 내에 잘 끝마칠 수 있어서 감사하다. 친구들한테 결과물 좀 보여주고 사용성 관련 개선사항 받으면 적용해서 디테일도 조금 고치려고 한다. 작지만 볼 때마다 뿌듯한 그런 첫 프로젝트 작품이 될 것 같아서 기쁘다 😁
수요일에 미니프로젝트 발표하고 최종 프로토타입 가지고 또 포스팅 해야지!
