맵 지도 프로젝트

프로젝트를 하게 된 계기

항해99를 하면서 팀원들과 토이 프로젝트를 하기 전 연습 삼아 작은 연습 프로젝트를 하기로 했다

이제 막 항해99를 들어가 강의를 들어 개발을 시작한 나에게는 부담스러운 일이지만

실패하더라도 이것도 또한 하나의 경험이 되기 때문에 자신감을 갖고 시작하게 되었다

 

기술 Stack

• Frontend: Html, CSS, JS
• Backend: mongoDB, Flask

 

맵 지도 프로젝트 아이디어

팀원들과 여러 아이디어를 내면서 처음에는 여행계획을 짜기 위해 장소를 픽하고 그에 따른 계획 내용을 적는 프로젝트를 생각했으나 시간과 실력을 생각한 프로젝트 규모를 줄여 지도 api를 이용해 장소 즐겨찾기를 만들기로 하였다

 

프로젝트 인원 및 나의 역할

프로젝트 인원은 총 3명으로 나는 그중 로그인페이지(frontend, backend), 그리고 맵페이지의 전반적인 UI를 맡았다

 

최종 기능 및 페이지 계획

 

로그인페이지와 회원가입 페이지를 두어 각 유저 데이터를 저장하고

맵 페이지에서 지도를 띄어 원하는 장소를 클릭 시 즐겨찾기를 할 수 있게 한다

즐겨찾기가 추가된 장소는 표식을 주어 유저가 알아볼수 있게 하고 표식을 클릭할 시 옆에 즐겨찾기 리스트를 띄어준다

 

프로젝트 UI

 

개발내용

• 6/2
  • 아이디어 브레인스토밍
  • 기획 및 페이지 계획
  • 일정계획
  • 로그인 UI
  • 회원가입 UI
  • 맵 API
  • 맵페이지 기능
  • 마크 기능
• 6/3
  • 로그인 기능
  • 회원가입 기능
  • 회원가입 유효성 체크
  • 임시 모달 창 UI
  • 임시 리스트 UI
  • 모달 창 기능
  • 리스트 기능
• 6/4
  • 모달창 UI
  • 리스트 UI
  • 리스트 닫기 기능

후기

처음부터 끝까지 스스로 기획하면서 프로젝트를 만드는 경험이 처음이라 많이 어려웠다

팀원분들의 도움이 없었다면 잘 해내지 못했을 것이다

팀원분들과 이야기를 계속 나누며 프로젝트를 진행한것이 프로젝트를 끝까지 완료하는데 큰 도움이 되었다

프로젝트는 항해99에서 하는 css 공부와 병행하게 되었는데 공부한 css 내용을 이용해 animation UI를 만드니

간단한 animation을 넣더라도 정말 다른 페이지가 되는 것이 너무 놀라웠다

프로젝트를 처음하다보니 서툴러서 계획을 세세하게 하지 않아 후반에 가서 많이 계획과 달라지고 변경되었다

다음에 프로젝트 계획을 할 때는 아이디어에 대한 명확한 주제를 잡고 세세한 계획을 세워야 할 거 같다

모든 게 처음이라 너무 어려웠지만 이렇게 하나의 프로젝트를 만들어 완성하니

앞으로 열심히 공부하면 무엇이든 만들 수 있겠다는 자신감을 얻었다