주제 선정

주제

Mildo - 인구 밀도 정보 제공 서비스(figma 링크)

주제 선정 이유

• 인구 밀도가 높은 장소의 혼잡도를 미리 알 수 있는 서비스의 필요성이 제기되었다.
• 기존에 있는 서비스
  • 서울시 실시간 도시데이터
  • 미세미세 UI (직관적)
• 기존 서비스의 문제점
  • 모바일 친화적이지 않다.
    • 모바일로 들어가면 ‘PC에서 이용해주시기 바랍니다’ 안내문구가 띄워진다.
  • 기존의 서비스가 별로 없고 있더라도 찾기 힘들다.
  • 너무 많은 정보가 있어 사용자가 스스로 필터링해서 봐야한다.
  • PC에서도 창 크기를 줄이면 구체적인 정보를 보지 못한다.

대상

• 서울 인구 밀도 데이터를 얻고 싶은 사람

목적

• 서울 주요 50곳에 대한 인구 밀도 정보를 제공

개발 요구사항

메인 화면

전체적인 화면에는 지도와 인구 밀도 핀을 출력한다.

화면 상단에는 검색바, 마이(사람 모양) 버튼, 혼잡도 필터링 버튼이 있다.

1. 지도

   a. 사용자 위치를 중심으로 지도를 보여준다.

   b. 서울 이외 지역에 사용자가 있다면 서울의 중심을 지도로 출력한다.

2. 인구 밀도 핀

   a. 현재 해당 지역들에 대한 인구 밀도 단계를 알맞은 색깔의 핀으로 출력한다.

   b. ‘인구 밀도 핀’을 클릭할 경우 해당 지역의 상세 정보를 출력한다.

3. 검색바 : 서울 주요 50곳 지역에 한정하여 원하는 지역을 검색할 수 있다.

4. 마이 버튼

   a. 로그인 하지 않은 사용자는 로그인 모달창이 출력되고 로그인한 사용자는 사이드바가 출력된다.

5. 혼잡도 필터링 버튼

   a. 원하는 혼잡도를 복수 선택할 수 있다.

   b. 처음엔 모든 혼잡도가 선택되어 있다.

로그인 모달

사용자가 로그인하지 않았을 경우 ‘마이 버튼’을 누르면 로그인 모달창을 띄운다.

1. X 버튼을 누르면 모달창이 닫힌다.

2. 모달 밖의 영역을 누르면 모달창이 닫힌다.

3. ‘네이버로 로그인’ 버튼을 누르면 사용자의 네이버 계정으로 로그인할 수 있도록 한다.

사이드 바

사이드바는 로그인이 된 사용자만 접근할 수 있다.

사이드바에는 현재 로그인된 사용자의 닉네임, 북마크 리스트, 내일 갈 거야 리스트, 로그아웃 버튼이 있다.

1. 북마크 리스트

   a. 사용자가 지도에서 북마크한 장소들이 실시간 인구 밀도와 함께 표시된다.

   b. 삭제를 클릭하면 북마크 리스트에서 장소가 삭제된다.

2. 내일 갈 거야 리스트

   a. 사용자가 지도에서 ‘내일 갈 거야’한 장소들이 ‘실시간 내일 갈 거야 장소 순위’와 함께 표시된다.

   b. 삭제를 클릭하면 ‘내일 갈 거야 리스트’에서 장소가 삭제된다.

   c. 순위가 변경되면 ‘N’ 마크를 표시한다. 사이드 바를 닫으면 ‘N’마크는 지워진다.

   d. ‘내일 갈 거야 리스트’는 오전 4시에 모두 초기화된다.

3. 로그아웃 : 사용자가 로그아웃 할 수 있다.

검색

사용자는 검색바에 서울 주요 장소 50곳을 검색할 수 있다.

1. 사용자가 검색 바에 단어를 입력했을 때, 그 단어를 포함하는 장소들을 출력한다.

2. 검색 결과들 중 사용자가 입력한 단어는 메인 색으로 표시한다.

3. 돋보기 아이콘을 클릭하면 해당 지역으로 지도가 이동하고, 그 지역의 ‘상세 정보 모달’을 출력한다.

4. 만약 검색 결과가 없다면 ‘검색 결과가 주요 50곳에 포함되지 않습니다.’ 라는 문구를 출력한다.

상세 정보 모달

상세 정보 모달에는 현재 장소의 인구 밀도 상태, 실시간 인구수, 북마크 버튼, ‘내일 갈 거야’ 버튼이 있다.

1. 현재 장소 상태 : 현재 장소의 상태 메시지를 표시한다.

2. 실시간 인구수 : 현재 장소의 실시간 예상 인구 수를 표시한다.

3. 북마크 버튼

   a. 로그인한 사용자만 사용 가능하다.

   b. 북마크한 장소는 이후 사이드바에서 확인 가능하다.

4. ‘내일 갈 거야’ 버튼

   a. 로그인한 사용자만 사용 가능하다.

   b. ‘내일 갈 거야’한 장소는 이후 사이드바에서 확인 가능하다.

북마크 추가

1. 상세 정보 모달의 우측 상단에 있는 ‘북마크 아이콘’을 클릭하면 북마크를 추가할 수 있다.

2. 북마크가 추가된 상태에서 다시 클릭하면 북마크가 삭제된다.

3. 북마크는 최대 5개만 추가 가능하다.

'내일 안 갈 거야' 버튼

1. ‘내일 갈 거야?’ 버튼을 누르면 ‘내일 안 갈 거야’ 버튼으로 바꾸고 해당 지역을 ‘내일 갈 거야 리스트’에 추가한다.

2. ‘내일 안 갈 거야’ 버튼을 누르면 ‘내일 갈 거야?’ 버튼으로 바꾸고 해당 지역을 ‘내일 갈거야 리스트’에서 삭제한다.

3. ‘내일 갈 거야’는 최대 3개까지 추가할 수 있다.

상세 정보 슬라이드 모달

상세 정보 모달을 위로 슬라이드하면 과거 시간대별 그래프와 ‘내일 갈 거야 순위’ 추가적으로 표시한다.

1. 과거 시간대별 그래프

   a. 해당 장소의 이전 시간대별 인구 수를 그래프로 표시한다.

   b. 아래로 스크롤하면 최대 24시간 전까지의 시간대별 인구 수가 표시된다.

2. 내일 갈 거야 순위 : 해당 장소의 ‘내일 갈 거야 순위’를 서울 주요 50곳 중 몇 위인지 표시한다.

(선택) 추가로 제안된 기능

• 사이드 바에 내일 갈 거야 1등 장소, 꼴등 장소 보여주기
• mildo 아이콘 만들기
• 북마크, 내일갈거야 삭제 시 모달창 띄우기
• 내일갈거야 설명해주는 버튼 및 모달창
• 북마크와 내일갈거야 같은 로그인한 사용자만 사용 가능한 기능은 로그인되지 않은 사용자가 클릭시 로그인 모달창 띄우기
• 로그아웃시 모달창 생성