시연 영상 시나리오 - boostcampwm-2022/web33-Mildo GitHub Wiki

시연 영상: 주요 기능 시연 녹화본 (1분 내외)

  • 데모 준비 방법

    데모는 어떻게 준비하는 것이 좋을까

    • 시청자들은 무엇을 했는 지 잘 모른다. 그래서 이 영상에서 보여주고자 하는 기능과 주제가 ‘명확할수록’ 좋다!
    • 배포된 서비스를 볼 수 있으면 베스트! 다만 서버가 죽었을 때, 서버를 빠르게 살릴 수 있도록 꼼꼼한 모니터링을 해야 한다.
    • 배포, CI/CD 관련된 사이클도 정리해서 공유하면 좋다.
    • 사람들이 의외로 무엇을 물어보아야 하는 지, 뭘 봐야 하는 지를 모른다. → 미리 QnA를 준비를 해두면 좋다.
    • 돌아가면서 한 명씩 서비스 소개와 시연 영상 등등의 이야기를 하면 좋다.
    • 기능이 너무 여러 갈래로 나뉘면 피곤하다. 핵심 기능 한 두가지 정도만 준비를 하는 것이 좋다. (백종원: 음식점의 음식을 1, 2가지로 추려라!)

  • 영상 결과

    수료생 부스 준비 안내

    • 수료생 부스의 디자인은 아래 이미지를 참고해주세요.

      Untitled

    • 부스 내 오브제를 누르면(f를 누르면) 콘텐츠를 볼 수 있습니다.

      • 노트북, 스크린과 같은 오브제에 여러분이 제출한 GitHub, Notion 등 산출물이 연결됩니다.

    • 12월 14일(수)까지 아래 내용을 추가 제출해주세요. 각각 좌측 벽면 스크린 오브제에 반영 예정입니다.

      1. 시연 영상 : 주요 기능 시연 녹화본 (1분 내외)
      2. 발표 영상 : “프로젝트에서 어떤 기술적인 경험을 했는가?”에 대한 발표 녹화본 (10분 내외)
      * 영상은 유튜브 업로드한 후 링크를 “프로젝트 소개 페이지” 속성에 추가해주세요.

제안 사항

  • 배포된 서비스를 볼 수 있도록 하자 → 어떻게 보여줄까
    1. 시작했을 때 URL 간단하게 소개하고 넘어가기
    2. 시연 영상 마지막에 URL 간단하게 소개하기
    3. 계속 한쪽 구석에 띄어두기 (왼쪽 아래, 오른쪽 위) + 자막(URL 화살표 넣어서)
  • 1분 내외의 시간 때문에 핵심 기능 한 두가지만 추려서 준비하는 것이 좋을 듯 → 무엇이 핵심 기능일까?
    1. 전체 서울 지도 보여주기 → 한눈에 어느 장소에서 어떤 상황인지 파악하는 것이 가능하다.
    2. 마커 클릭하기 → 1단계, 2단계 모달창 보여주기
    3. 필터링
    4. 검색
    5. 로그인 → 북마크 (근데 이건 시간이 너무 오래 걸릴 것 같아 제외하고, 간단한 설명으로 넘어가도 되지 않을까 싶다. 예를 들자면, 이외에도 이런 저런 기능을 사용할 수 있습니다!)

시나리오 순서

  • 간단한 인사 및 서비스 소개(이 때, 전체 지도 보여주기) → 10~20초
  • 마커 클릭 및 모달창 보여주기 → 10~20초
  • 필터링 및 추가기능(검색 기능, 로그인했을 시 북마크 가능) → 10~20초
  • 마무리 및 끝인사

시나리오 대본

간단한 인사 및 서비스 소개

  • 안녕하세요 저희는 우아한 아이들입니다! 저희는 서울시 실시간 인구밀도 정보를 반응형 웹으로 제공하는 서비스 Mildo를 제작하였습니다.
    • URL을 사용해 네이버에서 Mildo로 이동하는 짤방
    • 반응형 웹으로 늘렸다 줄였다 하는 짤방

서울시 전체 지도 소개

  • 사이트에 접속하면 서울시의 지도가 나타나고, 주요 50곳의 인구 밀도 정보를 나타내는 마커를 통해 서울시 전역의 대략적인 인구 밀도를 확인할 수 있습니다.
    • 지도를 축소하여 서울시 전역 지도와 인구 밀도 마커 50개를 보여주는 짤방

마커 클릭 및 모달창 보여주기

  • 또한, 주요 장소의 마커를 클릭하여 해당 장소의 인구와 최근 24시간 인구 동향을 파악할 수 있습니다.
    • 서울시 전역 지도에서 마커를 클릭하여 상세 정보 1단계를 보여주는 짤방
    • 상세 정보 2단계를 보여주는 짤방

필터링 및 검색 기능

  • 뿐만 아니라 필터링 기능을 통해 이용자가 원하는 특정 혼잡도의 마커만 확인할 수 있으며, 검색 기능을 통해 주요 장소를 쉽게 찾을 수 있습니다.
    • 지도에서 필터 기능을 통해 혼잡 마커를 제거하는 짤방
    • 검색을 통해 강남을 검색하고 검색창이 뜰 때까지 기다렸다가 강남역으로 이동하는 짤방

로그인 및 북마크 기능

  • 마지막으로 네이버 계정을 통해 Mildo에 로그인할 수 있으며, 로그인된 사용자는 북마크 기능을 활용하여 관심 있는 장소의 혼잡도를 한눈에 확인할 수 있고 해당 위치로 쉽게 이동할 수 있습니다.
    • 네이버 로그인하는 짤방
    • 상세정보 1단계 모달에서 북마크 등록하고, 사이드바에서 확인 후 장소로 이동하는 짤방

마무리 및 끝인사

  • 지금까지 저희 Mildo를 소개 드렸습니다. 감사합니다!
  • ppt 링크