[Project 1] 첫 프로젝트 EatTwoGetter 초기 구현

[Project 1] 첫 프로젝트 EatTwoGetter 초기 구현

8월 초부터 첫 프로젝트를 시작했다. 내 아이디어는 선정이 되지 못했지만, 마음에 드는 아이디어를 선택해서 팀이 만들어졌다. 프로젝트의 핵심 아이디어는 '배달요금 절약을 통한 지역경제 활성화'이다. 근거리에 사는 사람들이 배달 요금으로 인해 먹고 싶은 음식을 시키지 않고 지갑을 닫는 부분을 해결하는 것이 프로젝트의 주요 목표이다.

 

 

1.  프로젝트의 목표

 

이 목표를 달성하는 과정에서 얻어지는 효과로는 소비자 소비 심리 진작과 지역 경제 활성화, 그리고 지역 커뮤니티의 활성화가 있을 것이다. 경제적인 것뿐만 아니라, 사회 자본이라고 할 수 있는 지역 커뮤니티 활성화를 통해 사람들의 1인 가구의 증가, 스마트폰 컨텐츠의 발달로 사라져가는 지역 주민들 간의 소통과 정보 교류를 원활하게 할 수 있는 것도 부수적인 효과라고 할 수 있다.

 

물론 이 프로젝트가 해결하고자 하는 지역경제 활성화 문제가 단순히 '배달 요금'으로 인해 발생된 문제는 아니다. 코로나 경제의 여파로 인한 인플레이션, 전쟁으로 인한 인플레이션, 프랜차이즈 업체의 수수료, 중개 업체의 수수료 등 많은 요인들이 있긴 하다. 하지만 본 프로젝트는 경제에만 포인트를 맞추는 것이 아니라 '지역 사회의 발전'을 도모하고, 배달 요금이라는 작은 것도 배달을 시킬 것인지를 결정하는 중요요인이 되는 사람들에게 도움이 되는 것이 더 큰 목표이기에, 그 부분에 더 초점을 맞추려고 한다.

 

 

2. 프로젝트 아이디어의 구체화

 

기획과 관련된 부분이라 어디부터 손을 대야 할 지 잘 감이 오지 않았다. 그렇지만, 우리가 해결하고 싶은 것, 가상의 고객이 이 웹 서비스에 들어와서 가져가야 할 기능들을 생각해보면서 찬찬히 생각해보았다. 몇 가지 중요한 기능을 추릴 수 있었는데, 게시판, 지도, 채팅, 중간거리 기능이 필요했다. 

 

게시판은 내가 먹고 싶은 음식, 가게 등의 정보를 담아 놓은 것이고, 지도는 마커와 같은 것을 특정위치에 생성하고 게시판을 그 마커를 통해 들어갈 수 있게 하는 것, 채팅은 게시판을 보고 사람들이 협의를 할 수 있는 곳, 중간거리 기능은 사람들이 적절한 장소를 선택할 수 있도록 보조 정보를 제공하는 기능이다. 부가적으로는 사람들이 신뢰를 하고 거래를 할 수 있도록 예치금 시스템 기능 등을 생각해 볼 수 있었다.

 

1) 게시판

 

게시판의 경우 생각할 것이 많았다. 일단 회원가입과 로그인, 배달 메뉴, 요금 등을 담은 게시판, 지도의 마커와 연동되게 하는 것, 채팅으로 넘어가는 기능까지 다양한 것들이 있었다. 

 

일단 데모 버전으로 여러 가지를 시도해보다가, 일정한 템플릿이 있으면 좋을 것 같아서 startbootstrap에서 무료 템플릿을 다운받고, 스프링부트 프로젝트를 생성해서 그 둘을 합쳤다.

 

로그인 기능은 내가 주로 구현을 하지는 않았지만, 간략히 설명해보자면 다음과 같다.

 

 

 

2) 지도

 

지도는 메인 페이지에서 나오는 것으로, 본인의 게시판을 생성할 위치를 직접 고르는 것이다. 고르고 나서 마커 생성을 누르면 그 마커에 생성될 정보들을 입력할 수 있게 한다.

 

지도 기능은 카카오맵 API를 사용하여 구현하였다. API 사용법을 숙지하고, 화면에 구현하는 것이 지금까지 배워왔던 백엔드 과정과는 관련이 많이 없어서 고생을 많이 했다. 일단 열흘 정도 API를 갈아 엎었다가 새로 만들고 해서 아래와 같은 형태로 만드는 것에 성공했다.

기본적으로 중앙에 마커를 배치하고 고정을 시켜서 현 위치가 나타나게 하는 것을 구현하였다. 또한 위에 음식 종류를 필터링할 상단 메뉴바를 만들었고, 축척을 조절할 수 있는 확대, 축소 컨트롤 바를 두었다.

 

기본적인 것은 카카오 API에서 제공하는 샘플을 참고하였다.

 

https://apis.map.kakao.com/web/sample/

 

그런데 샘플로 할 수 있는 것은 많이 없고, 커스텀을 해야 하는 부분들이 많았다. 커스텀하는 과정에서 프론트 지식이 많이 필요했는데, 이 기회를 통해서 하나씩 더 알아보는 시간을 가졌다(그래서 본 과정인 스프링부트 공부에 소홀해졌다...). 아무튼 자바스크립트 동작과 관련된 것들을 좀 더 학습했고, 이 부분들은 추후에 더 자세한 포스팅으로 정리를 해볼 예정이다. 

 

백엔드 스쿨이었지만, 나혼자 프론트 엔드 스쿨을 잠시 다녀온듯...

 

 

3) 채팅

 

마커(게시판)를 생성한 사람들이 다른 사람의 마커를 누르면 그 사람이 원하는 메뉴, 음식점과 현재 배달 요금, 최소 주문 가격 등이 나오는 데, 그것을 보고 그 사람과 협의하기 위한 소통 창구이다. 현재 자세하게 구현된 바는 없지만, 1:1 채팅을 기준으로 진행을 할 것이며, 여력이 되면 단체 채팅도 가능하게 만들 것이다.

 

채팅 중에 중간거리를 불러올 수 있게 하고, 매칭 성사 기능을 만들어 게시판을 없애서 추가적인 채팅을 받지 못하게 하는 기능도 추가될 것이다.

 

 

4) 중간거리

중간 거리의 경우, 길찾기 기능을 카카오에서 제공하기 위해 카카오에서 제공하는 geocoder 객체를 사용하였다. 함수를 사용하면 간단한데, 마커를 생성할 때, 데이터베이스에 같이 경위도 값을 넣어놓고 그것을 바탕으로 각각의 중간 경위도 값을 찾아서 각각의 유저의 출발 지점과 중간 지점까지 가는 길을 카카오 길찾기를 통해서 보여주는 시스템을 구현하였다.

 

우리 홈페이지 안에서 구현하는 것은 어려웠고, 외부 링크로 주소값 들을 보내서 서비스를 제공하는 것으로 마무리 하였다. 현재 구현은 여기까지이고, 만약 여력이 있다면, 내부에서 API를 활용하여 길찾기를 제공해볼 생각이다.  

 

 

 

3. 앞으로의 구현과 현재까지 하면서 느낀점.

 

새로운 것들을 많이 체험할 수 있었다. 아직 내가 부족한 점이 많고, 스프링부트도 완벽하지 않은 상황에서 css와 js, bootstrap을 가지고 매일 새벽까지 이게 왜 안 되지? 라는 질문을 거듭하면서 고민하는 과정에서 갑자기 무기력증이 오기도 했다. 조금 삽질을 한 기분도 없지 않아 있지만, 이제는 매끄럽게 무엇을 해야 할 지, 하지 말아야 할 지를 생각할 수 있게 되었다. 첫 프로젝트... 잘 끝내고 싶다.

 

다음 편에서는 조금 더 나아진 화면과 기능을 기대해본다.