3. 개발 배경 개발 환경 프로젝트 구조 개발 과정 후기
가장 많은 푸드트럭 창업자 회원을 보유한 인터넷 카페
푸사모에서 발취한 옆의 그림을 보면 알 수 있듯이,
대부분의 창업자들이 푸드트럭 장소 결정에 많은 어려움을
겪는다는 것을 알 수 있습니다.
푸드트럭 장소설정에 유동인구와 같이 매출에 영향을
줄 수 있는 데이터에 대한 분석 자료를 필요로 하는
창업자들이 많다는 것을 알 수 있습니다.
따라서, 본 웹서비스는 푸드트럭 창업자들에게 가장
필요한 푸드트럭 상권추천 서비스를 제공함과 동시에
그들이 필요로 하는 유동인구, 상권매출 등 관련된 다양한 분석
데이터를 시각화 하여 제공하기 위해 서비스를 개발하게 되었
습니다.
`
`
`
`
`
`
`
`
`
4. 개발 배경 개발 환경 프로젝트 구조 개발 과정 후기
웹서비스를 개발함에 현업에서 많이 보편화된 자바 프레임워크인 스프링을 사용
하여 보다 더 편리하고 완성도 높은 서비스 개발을 했습니다.
1. 서비스 구현에 필요한 개발 환경
자바스크립트와 제이쿼리를 사용하여 해당 프로젝트에서 맡은
Front-End 업무의 개발을 진행했습니다.
2. 서비스 기능에 필요한 개발 환경
Visual Code를 사용하여 실시간으로 제작과정을 조금 더 쉽게 확인
할 수 있고 해당 편집기에서 제공하는 편리한 기능들을 통해 조금
더 효율적인 개발을 했습니다.
D3.js 부트스트랩 다음 지도 API 구글 차트 API
5. 개발 배경 개발 환경 프로젝트 구조 개발 과정 후기
초기 화면
가입
계정
No
회원가입
Yes
로그인 Main 창
조건
선택
Yes
No
분석 결과 창
리포트 창
즐겨
찾기
No
즐겨 찾기 창
Yes
6. 개발 배경 개발 환경 프로젝트 구조 개발 과정 후기
1. 제작 기간 (2018.10.10 ~ 2018.11.04 : 25일)
2018.10.10 ~ 2018.10.14
- Custom Map 제작(Main Map)
- 이벤트 적용 (클릭), 페이지 이동
- Custom Map 제작(강남구), 특정 마커 찍기, UI제작(선택 창), UI이벤트 적용(페이지 이동)
2018.10.15 ~ 2018.10.21
- Custom Map(서울시 구의 반), 페이지(로그인, 회원가입, 초기화면) 제작 및 상호작용
- Custom Map(서울시 나머지 반)제작, 로그인, 회원가입 Modal팝업 창으로 제작
- 설계 마무리 및 확정
- Custom Map(서울시 구)제작 코드 수정(오류 수정)
- 파일 세분화(서울시 구 : HTML -> JS / 속성 : <style>태그 -> CSS)
2018.10.22 ~ 2018.10.28
- Custom Map(서울시 구)제작 코드 수정(오류 수정)
- Modal팝업 창으로 다음API를 이용하여 다음 Map 띄우기 Tab창 만들기
- 자바 Spring(초기화면, 로그인, 회원가입, Main Map 창)으로 구현
- Main Map에서 구 별 Map으로 페이지 이동시 파라미터 주고 받기(구, 선택사항 2개) 구현
- 구 별 Map 페이지 Json형식 데이터를 통해 관련 장소(길) 표시 및 마커 찍기
- 구 별 Map 페이지 세부 리포트 Modal 팝업 창 제작(카카오 map 띄우기)
2018.10.29 ~ 2018.11.04
- 구 별 Map 페이지 세부 리포트 Modal 팝업 창 제작(Json형식 데이터를 통한 예시 차트 띄우기)
- 추천 받아질 구 3개 모두 차트 띄우기
- Modal팝업 창을 이용해 다음 지도 띄울 때 오류 수정, 차트 한글 깨짐 수정
- 즐겨 찾기 버튼 클릭 시 데이터 전송
- Carousel을 이용한 즐겨 찾기 창 제작
- 오류 및 버그 수정
7. 개발 배경 개발 환경 프로젝트 구조 개발 과정 후기
자바스크립트 대표적인 비동기 통신이 Ajax를 사용하여 회원가입시 아이디를 입력할 때
그 아이디가 중복인지 아닌지를 다른 페이지 이동없이 실시간으로 확인할 수 있게 구현했습니다. Ajax를
통해 입력 받은 아이디가 서버에 동일한 것이 있는지를 판단한 후 나온 결과를 가지고
조건을 설정하여 만약 입력한 아이디가 중복이면 아이디 입력 창 밑에 빨간색으로 알림 창을
띄우고 중복이 아니면 파란색으로 알림 창을 띄우게 구현했습니다.
2. 개발 과정2. 개발 과정
(1-1) 회원가입 창(ID 중복검사)
8. 개발 배경 개발 환경 프로젝트 구조 개발 과정 후기
바로 앞에서 Ajax를 통해 회원가입시 ID의 중복검사를 실행한다고 했습니다. 그때 JSP에서 넘어온
데이터(회원가입 할 ID)를 중복 검사하는 부분입니다. Mapper에 쿼리문을 통해 회원가입 할 ID가
존재하는지 파악합니다. 그 후 마지막 Controller에서 결과를 다시 JSP 즉, Ajax의 결과값으로
넘겨 줄 수 있습니다.
2. 개발 과정2. 개발 과정
(1-2) 회원가입 창(ID 중복검사)
DAOImpl
Mapper DAO
Controller
9. 개발 배경 개발 환경 프로젝트 구조 개발 과정 후기
(2) 회원가입 창(NULL값 체크)
FormValidate라는 함수를 선언하여 입력 창에 입력 값에 대한 value들이 null이면 알림 창을 통해 사용자
에게 회원가입이 제대로 되지 않았음을 알립니다. 마지막 회원가입 완료 즉 join us 버튼을
클릭하게 되면 함수가 실행되며 검사를 한 후 아이디, 비밀번호, 이름, 이메일 중 입력되지 않은 것 즉,
null 값이 존재하면 해당 입력에 대한 alert창을 띄우고 회원가입 창으로 다시 되돌아가도록
구현했습니다.
이름 입력 X
비밀번호 입력 X
10. 개발 배경 개발 환경 프로젝트 구조 개발 과정 후기
(3-1) 로그인 창(로그인)
로그인 창 구성요소는 회원가입 창과 동일하게 닫기 버튼과 로고를 상단에 배치했습니다. 다음으로 input
태그를 통해 아이디와 비밀번호를 입력하고 그를 form태그로 감싸 login버튼을 누르게 되면
매핑 주소가 login인 컨트롤러 메소드에 입력 한 값 즉 input태그의 value값이 post방식으로 전달이 되도
록 구현했습니다.
11. 개발 배경 개발 환경 프로젝트 구조 개발 과정 후기
(3-2) 로그인 창(로그인)
대부분의 홈페이지는 로그인을 한 후 로그인 정보를 가지고 있어야 합니다. 로그인이 되어 있어야
열람, 작성, 수정, 삭제, 선택 등의 기능을 할 수 있기 때문입니다. 이 프로젝트 역시 로그인이 되어
있어야만 선택을 할 수 있도록 설계했습니다. 그러기 위해 추가적으로 사용한 기능이 Intercepter
입니다. Intercepter를 통해 로그인 한 정보를 저장하고있다가 필요할 때 바로 사용 할 수 있도록
했습니다. 추가적으로 로그아웃시 invalidate를 통해 저장된 정보가 삭제되도록 구현했습니다.
Mapper DAO DAOImpl
Controller Intercepter Intercepter
12. 개발 배경 개발 환경 프로젝트 구조 개발 과정 후기
(4) Modal 팝업 창(※로그인 창 예시)
이를 사용하게 되면 불필요하거나 낭비되는 페이지를 줄일 수 있고 어플리케이션을 보다 더 간결하
고 심플하게 제작할 수 있습니다. 로그인 창 구성요소는 회원가입 창과 동일하게 닫기 버튼과 로고를
상단에 배치했습니다. 다음으로 input태그를 통해 아이디와 비밀번호를 입력하고 그를 form태그로
감싸 login버튼을 누르게 되면 매핑 주소가 login인 컨트롤러 메소드에 입력 한 값 즉 input태그의
value값이 post방식으로 전달이 되도록 구현했습니다.
Modal 팝업 창이란 사용자가 어
느 이벤트를 발생시켰을 때 즉,
상호작용 했을 때 페이지
이동을 통한 결과 확인이 아닌
현재 페이지에 창을 하나 더
띄어 결과를 보여주는 기능 중
하나 입니다.
13. 개발 배경 개발 환경 프로젝트 구조 개발 과정 후기
(5) Main 창(Custom 지도)
- 캔버스와 지도에 필요한
scale, 중심좌표, width,
height 변수 선언
- 선언한 중심 좌표를 캔버스
안에 투영
- Width, height, id 값을
속성으로 적용한 캔버스
생성
- 서울시 Geojson 파일을
로드 후 파일내 data값을
통하여 속성 적용
- 서울시 구별 라벨 생성 및
적용
- 해당 지도에 상호작용 함수
선언 후 적용
- GeoJson파일을 이용, 다양한 event 사용
- 기존의 Map API에서 없었던 event 함수
제작 사용 가능
14. 개발 배경 개발 환경 프로젝트 구조 개발 과정 후기
(6) Main 창(업종 선택)
Select box의 옵션 중 value값을 데이터 분석 자료 중 하나인 업종 코드로 설정하여 업종을
선택하여 파라미터 값을 넘길 때 input타입을 hidden으로 하여 사용자에게는 보이지 않고 넘길 수 있도록
구현했습니다. 이때 Select box의 value값을 넘겨 업종 코드로 분석 할 수 있도록 했습니다.
함수를 만들어 Select box에서 선택된 업종의 value값을 변수로 지정하고 그 변수를 return하고
그 값을 input의 value값으로 정하여 컨트롤러로 보낼 수 있게 했습니다.
15. 개발 배경 개발 환경 프로젝트 구조 개발 과정 후기
(7) Main 창(업종 선택)
jQuery에서 제공하는 달력 형식의 UI 위젯 중에는 datepicker가 있습니다. 영업 시작일 선택을
위해 이 위젯을 사용했습니다.
영업시작일의 input태그를 클릭하면 datepicker 위젯에 의해 달력이 만들어 집니다. 이 출력 값은 원하는
형태로 지정이 가능합니다. 달력을 통해 정해진 날짜 즉 value 값을 변수로 지정하고 변수를 return 합니
다. 그 후 form 태그를 통해 컨트롤러로 보내질 값의 value 값으로 지정합니다.
16. 개발 배경 개발 환경 프로젝트 구조 개발 과정 후기
(8) 분석 결과 창(구 별 지도)
지도를 띄우는데 필요한 값(scale, 위도, 경도, 구 이름)을 리스트로 만들어 놓고 for문을 통해 넘어온 데이
터에 따라 변수로 지정해 놓았습니다. 이를 통해 선택한 구에 따라 그 구를 보여줄 수 있습니다. 위에서 for
문을 통해 정해 놓은 변수를 D3.js의 지도를 만드는 코드에 변수로 넣었습니다. 위도, 경도는 x, y값으로 크
기는 scales로 GeoJson파일을 불러오는 코드에 경로 이름은 gus로 지정하였습니다. 이와 같은 작업을 통
해 메인 창에서 어떠한 구를 선택하더라도 그 구에 맞는 위도, 경도, 크기,
불러 올 GeoJson파일을 정할 수 있습니다.
0
17. 개발 배경 개발 환경 프로젝트 구조 개발 과정 후기
(8) 분석 결과 창(구 별 지도)
메인 창에서 구, 업종, 영업 시작일, 영업 시작 시간, 종료 시간을 선택하고 submit버튼을 누르면
해당 값 즉, 파라미터들을 가지고 머신 러닝을 진행합니다. 그 후 머신 러닝을 통해 추천된 장소
3군데의 데이터들이 넘어옵니다. 이때 이 데이터들에 위도, 경도를 for문을 통해 추출하고 추출된
값들에 해당하는 곳에 마커를 찍을 수 있습니다.
18. 개발 배경 개발 환경 프로젝트 구조 개발 과정 후기
(9) 상세 리포트 창(다음 지도 API)
다음에서 제공하는 API중 하나인 지도 API를 사용하여 앞에서 선택 한 장소
를 보다 구체적으로 보여줍니다.
div태그를 이용하여 지도를
띄울 위치와 id값을 설정합니다.
다음 개발자센터에서 받은 키를 입
력하여 스크립트를 선언하고 다음
지도를 띄웁니다.
이때 추천 장소를 알아보기 쉽게 제
작한 이미지를 넣어 마커
효과를 볼 수 있습니다.
19. 개발 배경 개발 환경 프로젝트 구조 개발 과정 후기
(10-1) 상세 리포트 창(분석결과 _ 구글Chart)
분석 결과를 구글 차트로 띄우기 위해 알맞
은 위치에 div태그를 생성합니다. 이때 각
각의 div에 id값을 부여하여 그 id값을 통
해 구글 차트를 띄울 수 있습니다.
컨트롤러로부터 넘어온 파라미터를
el문을 통해 각각의 변수로 지정하여 그 값
을 사용할 수 있습니다. 추천 장소는 총 3
곳이므로 클릭 할 수 있는 버튼도
총 3개로 구성됩니다. 각각의 버튼에
따라 추천 장소에 이름과 위도, 경도가 다
르기 때문에 버튼 클릭 이벤트 함수를 총 3
개를 만들었습니다. 이렇게 지정된 변수는
Ajax와 지도를 띄우는데 필요한
값으로 사용됩니다.
20. 개발 배경 개발 환경 프로젝트 구조 개발 과정 후기
(10-2) 상세 리포트 창(분석결과 _ Ajax)
분석 결과 창에서 추천된 장소에
따른 버튼들을 클릭하면 Ajax를 통
해 실시간으로 데이터를 받아오면
데이터들은 구글차트를
그리는데 사용됩니다.
Ajax를 통해 추천 장소(gil)와
업종(service)의 데이터를
각각의 컨트롤러의 파라미터로 보
내면 추천 장소와 업종에
관한 빅데이터 분석 결과가
JSON형식으로 넘어오게 되고
그 데이터는 각각의 차트를
그리는데 컬럼 값과 로우 값으로
사용됩니다.
21. 개발 배경 개발 환경 프로젝트 구조 개발 과정 후기
(11) 즐겨 찾기 창
Carousel 슬라이드를 받아와 변수로 지정하고 초기화 작업을 진행합니다. 이때 조건문을 이용하여 슬라이
드의 개수가 1개이면 왼·오른쪽 버튼이 보이지 않게 했습니다. 다음으로 왼·오른쪽 버튼을
누르면 발생시킬 이벤트를 설정했습니다. 버튼을 누르게 되면 슬라이드들이 왼쪽으로 한 칸 밀리게 했습니
다. 가장 왼쪽에 배치되어 있던 슬라이드는 화면에서 보이지 않게 제거합니다. 반대로
가장 오른쪽에는 제거되었던 슬라이드 중 가장 첫번째 슬라이드를 다시 재 생성시킵니다.
이와 같은 작업은 클릭 이벤트를 통해 발생하게 되고 사용자는 슬라이드가 회전을 하는 것으로
보이며 시각적으로도 좋은 효과를 불러올 수 있습니다.
22. 개발 배경 개발 환경 프로젝트 구조 개발 과정 후기
프로젝트를 시작하면서 처음 시작하는 것이 많아 초기에는 많은 어려움이 있었습니다.
D3.js 같은 경우에는 아예 처음 사용 해 보는 라이브러리이고 혼자 습득해야 하는 기능이라
시간을 꽤 많이 사용했습니다. 또 프로젝트를 개발하는 동안 Custom지도를 제작할 때 실제 좌표를
투영 및 변환 작업에서 원하는 위치에 지도가 그려지지 않아 Scale과 좌표를 일일이 변경해 가면서 작업 했
습니다. 시간이 상당히 오래 걸림과 동시에 총 26개의 지도를 모두 그렇게 수작업을 할 수
없었습니다. 그러다 다행히 오류부분을 알게 되었고 수정하게 되었습니다.
이처럼 25일간 많은 문제와 어려움이 있었지만 잘 해결하였고 끝내 프로젝트에서 맡은 모든 분량에 작업을
완료하며 프로젝트를 종료했습니다. 처음 해보는 웹 서비스개발 팀 프로젝트라서 서툰 점도
많고 더 높은 완성도가 나올 수도 있었지만 팀원들과 열심히 노력하여 최대한의 결과를 만들어 낼 수 있었습
니다. 이처럼 앞으로도 프로젝트를 진행하게 되면 맡은 업무에 주인 의식을 가지고 팀원들과
협동하며 더 노력하는 개발자가 되겠습니다.
감사합니다.
