나들이 프로젝트 회고 (지역별 관광 데이터를 활용한 여행 정보 사이트)

작업 기간
2023.05.08 ~ 2023.05.25


팀원 구성
프론트엔드 1명
백엔드 1명


기술스택
프론트엔드 : Vue.js, HTML, CSS
백엔드 : SpringBoot, MySQL
라이브러리 : emailjs, cheerio, vue-chartjs
협업 툴 : GitLab, Notion, Jira


후기
3주동안의 프로젝트가 끝났습니다. 
kakao map API와 전국 관광지 API를 사용해서 여행 정보 사이트를 만들었습니다. 
싸피에서는 프론트와 백엔드간에 연결해야하는 부분을 개발하고, 집에서는 더미데이터로 개발을 하고 버그 수정 및 디테일한 UI 추가 작업을 진행하였습니다.
인원이 2명에 개발 기간이 짧아서 최대한 빠르게 개발을 진행하였습니다. 그리고 최우수 프로젝트로 선정 될 수 있었습니다.


배운점
1. Open API 사용 (전국 관광지 데이터, 카카오 지도)
- 처음으로 Open API를 사용해서 개발을 진행해보았습니다. 생각보다 많은 데이터들이 제공되었고, 해당 데이터를 가공해서 사용자에게 다양한 기능을 제공할 수 있었습니다. 단점으로는 제공되는 데이터에 비어있는 값이 있거나, 데이터 내용 자체를 가공하거나, 추가적으로 필요한 정보가 없는 경우 들이 있어서 주의해서 사용해야 할 것 같습니다.

2. 다양한 라이브러리 사용
- 이메일 전송을 위해서 emailjs, 크롤링을 위해서 cheerio, 데이터 시각화를 위해서 vue-chartjs를 사용했습니다. 사용하기 쉬우면서 효과는 좋았습니다. 프로젝트에 접목 할 수 있는 라이브러리가 있는지 찾아보는 것도 개발시간을 줄이는데 도움이 될 듯 합니다. 하지만 재가공해서 사용하기 어려우므로 상황에 따라서 사용하는 것이 좋아보입니다.

3. CSS 활용
- 현재 Tailwind, Style Component, BootStrap등 다양한 css 프레임워크가 있지만 기본기를 먼저 익히고 싶어서 기본 CSS로만 스타일링을 진행하였습니다. 어려웠던 점으로는 네이밍을 BEM 방식으로 진행했지만 블록으로 선정하는 기준을 제대로 안 잡아서 개발 초기에는 규칙적이지 못한 네이밍을 했습니다.

4. 벤치 마킹
- 화면 설계서(figma)가 없이 개발을 진행해서 머릿속으로 구상한데로 개발을 진행하였습니다. 하지만 주변에서 UI가 좋지 못하다는 피드백을 많이 받았고 UI를 새로 쓰게 되었습니다. 전 보단 나아졌지만 동일하게 좋지 못하다는 평을 받았습니다. 그래서 긴 시간 동안 많은 사이트들을 참고하여서 UI를 짰고 이전보다 많이 나아지게 되었습니다. 디자인에 대해서 배운적이 없고 이미 운영중인 사이트들은 해당 부분에 전문가들이 진행을 하므로, UI를 디자인할 때 벤치마킹을 많이 하고, 그 과정에서 디자인을 보는 눈을 기르는 노력이 필요할 듯 합니다.


아쉬운점
1. 기획 설계
- 개발기간과 인원이 너무 적어서 기획설계를 하지 못하였습니다. 이 경험으로 기획과 설계가 잘 되어있지 않다면 개발이 늦고 힘들다는 것을 깨닫게 되었습니다.

1-1. API 명세서
- API 명세서를 작성하지 않아서 백에서부터 받을 데이터를 임의로 지정해서 사용하거나, 연락이 될 때까지 기다려야했습니다.

1-2. 컨벤션
- 컨벤션을 제대로 정하지 않고 개발을 해서 폴더구조나 코드들이 정리되지 않았습니다.

1-3. 화면설계서
- 화면설계서를 작성하지 않아서 UI가 좋지 못하였고 그로인해 UI를 2번 수정하게 되었습니다.

2. 깃 활용
- 프론트엔드 개발자가 혼자여서 깃을 제대로 활용해 볼 수 없었던게 아쉬웠습니다.

3. Jira 활용 미숙
- 프론트엔드 개발을 혼자하여서 해야할 일에 대한 이슈는 잘 사용하였지만 새로운 이슈(추가 개발, 버그 등)에 대해서 즉석으로 처리하여 Jira를 효율적으로 사용하지 못했습니다.

4. 디자인
- 피그마를 작성하지 않고 생각나는데로 개발을 진행하였고 그 결과, 총 2번을 더 수정하게 되었습니다. 그리고 실제 디자인을 전공한 사람과 같이 개발을 해보고 싶다는 생각을 하게 되었습니다.


향후 계획
1. 어떤 API가 있는지 조사하고 만들 수 있는 것들을 나열해서 프로젝트를 진행하기.
2. 기획 설계에 시간을 많이 들여서 개발을 진행하기.
3. gif flow전략과 Jira를 활용해 이슈 관리를 열심히 해보기.