Fast campus School

프론트엔드 개발

여행 다이어리: Record

여행을 하면서 찍었던 사진을 웹사이트에서 사진을 찍었던 위치와 함께 보여주는 서비스

2017.05.30 | 2661 명 읽음

[특징 및 기능]   

여행을 하면서 찍었던 사진을 웹사이트에서 사진을 찍었던 위치와 함께 보여주는 사이트입니다.

프레임워크를 사용하지 않고 Plain JavaScript와 Scrollmagic 라이브러리를 사용하여 기능구현을 해보았습니다.


[프로젝트 Assets Info]

이번 팀 프로젝트에 사용된 주요 color값 및 Logo 이미지입니다.


[Part 1. Google map view image]

  • Googl Maps JavaScript API 사용

구글에서 제공하는 지도 API를 사용하여 기본적인 Map, Marker, Polyline등을 구현하였습니다.

1) 서버로부터 제공받은 사진의 위도, 경도 값을 사용하여 해당 위치에 marker를 표시

2) marker의 이미지를 팀프로젝트 로고로 변경

3) marker가 생성된 순서에 따라서 label에 numbering 표시

4) polyline을 그려 마커 생성 순서대로 연결된 모습을 나타내었습니다.


  • Marker Tracking

사이트의 사진들을 스크롤 하면 지도상에 해당하는 marker들을 트래킹하며 보여줍니다.

1) 화면에 보이는 사진에 해당하는 marker가 google map의 중앙에 위치하도록 구현

2) Focus된 marker에 info window 팝업


[Part 2. Scroll Man]

  • Scroll Event Control

1) User의 스크롤 위치에 따라 배경 이미지가 변경됩니다.

2) 스프라이트 이미지에 애니메이션 효과를 사용하여 걸어가는 사람 효과를 구현하였습니다.

  • Parallax Background

1) 스크롤에 따라 단순히 배경화면이 바뀌던 것에서 parallax background로 변경할 예정입니다.


[Part 3. User Name, Photo Counter]

로그인된 유저의 정보와 현재 사이트에 올라온 사진의 수를 표시할 영역입니다.

1) User name의 경우 서버를 담당하는 웹 프로그래밍 스쿨에서 작업할 예정입니다.

2) photo Counter의 경우 서버로 부터 받아온 사진의 개수를 표시합니다. - 4/21까지 구현 예정


[Part 4. helper.js]

프로젝트에 필요한 함수들을 DOM Script를 사용하여 helper.js 파일에 만들어 사용하였습니다.

1) iife(즉시실행함수)패턴을 사용하여 기본적으로 전역에 비공개된 형태로 만들었으며, 필요한 함수의 경우만 공개하여 사용할 수 있도록 하였습니다.

2) 팀프로젝트의 팀원이 사용할 경우를 대비하여 헬퍼 함수의 용도, parameter, return값 등을 주석으로 명시해두었습니다.



[프로젝트 Scrum 관련 링크]

1) Daily Scrum

2) Sprint Scrum Board