Playground는 서울 시내에서 아이랑 갈만한
실내외 놀이터, 박물관/미술관, 도서관등의 장소(약 3,400군데)들을 모아서,
일목요연하게 보여 주는 웹 사이트로
주말 같은 여유 시간에 아이랑 어디를 가야 할지 고민하는 부모들을 위해
개인의 경험을 토대로 제작하였다.
수 많은 날을 검색으로 지새우며 놀러 갈 곳을 찾아 다니다
집 주변에 괜찮은 시설이 제법 많다는 것을 알게 되어 정리하면서 시작하였다.
개발은 2단계로 나누어서 진행하고 있다.
현재는 1단계 개발을 완료한 상태로 서울 시내의 시설과 장소 데이터를 모아서 DB로 구축하고,
내 주변의 시설과 장소에 대한 리스트(맵)를 보여주는 것에 집중하였다.
현재는 개발 버전이라 가격이 싼 웹 호스팅을 사용해서 SSL을 적용하지 못했다.
(정확하게는 가격이 싸서 적용되지 않는 것이고, 싼 호스팅이라 동접이 많아지면 속도가 ...)
SSL이 되어야 웹 브라우저에서 제공하는 현재 위치를 찾는 기능(navigator.geolocation)을 사용할 수 있다.
따라서 나의 주변이라기 보다는 내가 지정한 위치 주변의 시설과 장소를 조회할 수 있게 구현하였다.
2단계는 각자의 경험을 공유하는 추천코스이다.
개인이 괜찮다고 추천하는 시설과 장소들을 묶어서 소개하는 기능으로 ,
개인의 경험을 공유하고, 의견을 공유하는 기능으로 구현하고 있다.
회원 관리 기능은 구현되어 있지만 (github에서 소스로 확인가능),
SSL이 적용되지 않아서 [개인정보보호법] 준수 문제로 운영에 배포되어 있지 않다.
현재는 제작자(관리자)만 작성 가능하다.
이 사이트의 소스는 Nodejs와 MariaDB를 기반으로 제작한 것으로
github에서 다운로드 받아서 샘플 데이터와 같이 실행 가능하지만
구축된 데이터는 공유하지 않는다.
데이터는 계속 구축 중으로,
데이터 양이 너무 많아 현재는 서울만 제공하며
원 데이터의 출처는 Playground 사이트와 github에 공유되어 있다.
다음으로 주요 기능에 대한 사용법을 정리한다.
먼저, [우리 동네] 메뉴를 실행하면 다음과 같이 지도(Daum map)가 실행된다.
기본 위치는 광화문이고,
마커를 마우스(PC일경우)나 손가락(스마트폰)으로 움직여서 위치를 지정한다.
지도를 클릭해서 마커를 이동 시킬 수 있다.
SSL이 적용되지 않아 현재 위치를 자동으로 찾는 기능은 사용할 수 없지만
지도 좌측에 있는 [주소로 위치 검색] 기능을 이용해 이동할 수 있다.
지도 좌측에 있는 [주소로 위치 검색]을 선택하면, 그림과 같은 다이얼로그 창이 실행된다.
이 창에서 찾을 주소나 시설명을 입력하면 된다.
주소 검색기능은 Daum에서 제공하는 기능으로,
검색된 리스트에서 해당하는 장소를 클릭하면 위치(마커)가 이동된다.
위치를 지정하고 [2Km내에서 검색] 버튼을 클릭하면
다음 그림과 같이 지정된 위치의 주변에 있는 실내외 놀이터, 박물관, 도서관등의 위치가 색깔별로 표시된다.
조회된 데이터양이 많을 경우,
상단의 실내외 놀이터, 박물관, 도서관 옵션 기능을 이용해서
보고 싶은 종류만 볼 수 있다.
옵션 좌측에 있는 리스트 버튼을 클릭해서 시설과 장소 리스트를 보면서 선택할 수 있다.
지도에 표시된 마커(색깔별 원)를 클릭해서 상세한 정보를 볼 수도 있다.
다음은 [추천 코스] 기능이다.
특정 장소를 중심으로 갈만한 장소들을 묶어서 하나의 코스로 정리하여 보여 주는 기능으로
아직은 개발 중인 기능이며,
실행하면 다음 그림과 같이 리스트가 출력된다.
각 항목을 클릭하면 다음과 같은 상세 페이지가 실행된다.
상세 페이지는 추천하는 장소에 대한 리스트 아이콘, 소개글, 위치를 나타내는 지도로 구성되어 있다.
장소에 대한 리스트 아이콘이나 지도의 마커를 클릭하면
다음 그림처럼 각 장소에 대한 상세 정보를 확인할 수 있다.
지도의 좌측 중앙에 있는 빨간색 지도 아이콘을 클릭하면
현재 보고 있는 위치를 중심으로 2Km내에 있는 다른 장소들을 볼 수 있는
[우리 동네]로 이동한다.
아직은 개발 중이고, 기능이 제한적이지만
도움이 되는 사용자가 많았으면 좋겠다.
'Node.js > 기타' 카테고리의 다른 글
nineBatis (9batis) (2) | 2017.08.16 |
---|---|
1. Node.js 프로젝트 생성 및 개발 준비 (0) | 2017.08.05 |
2. MariaDB 기반 CRUD 게시판 만들기 (23) | 2017.08.05 |
3. 게시판 예제 보강 (4) | 2017.08.05 |
4. GitHub에서 Node.js 소스 가져오기 (0) | 2017.08.05 |