📌 구현 결과물 미리보기
<aside> <img src="/icons/hashtag_gray.svg" alt="/icons/hashtag_gray.svg" width="40px" /> 목차
</aside>
✔️ 해당 글은 부스트캠프 웹・모바일 8기 멤버십 활동과 관련된 내용을 담고 있습니다.
📌 구현 결과물 미리보기
부스트캠프 그룹 프로젝트는 총 6주간 진행됩니다. 주어진 기간 안에 최소한의 MVP를 목표로 개발하는 것이 하나의 챌린지이기 때문에 서비스에 있어서 상대적으로 중요하지 않은 부가적인 부분들은 제외하는 것이 옳다고 생각했습니다.
다른 캠퍼분들과 각 팀에서 개발하고 있는 서비스를 소개하는 과정에서 저희 서비스가 모바일에서도 이용할 수 있으면 좋을 것 같다는 의견을 주셨습니다. 이를 바탕으로 대부분의 UI는 media query를 이용하여 반응형으로 동작할 수 있도록 작업하였으나, 문제는 강의자 페이지였습니다.
강의자 페이지는 아래와 같은 기능들을 포함하고 있습니다.
[강의자 페이지 주요 기능]
- 화이트보드에 펜으로 그림을 그릴 수 있습니다.
- 화이트보드에 포스트잇을 생성해 텍스트를 입력할 수 있습니다.
- 음성을 참여자들에게 전달할 수 있습니다.
- 참여자들이 보낸 질문들을 확인하고 이를 포스트잇으로 붙여넣을 수 있습니다.
이러한 모든 기능들이 모바일에서도 문제없이 잘 동작하도록 구현하는데 많은 시간을 소요할 것이라 예상하였습니다. 강의자 페이지에서 사용자에게 보여줘야 할 요소들이 많았고, 핵심이 되는 화이트보드는 화면이 작아질 수록 그만큼 활용할 수 있는 크기가 작아지기 때문이기도 합니다.
다만, 다른 페이지들은 논외에 해당합니다. 충분히 모바일 환경에서도 이용하기에 무리가 없다고 생각하여 강의자 페이지와 같은 특정 페이지만 모바일의 접근을 제한하기로 하였습니다.
모바일 기기의 접근을 제한하기 위해서는 우선 접근한 기기가 모바일인지, PC인지를 판단할 필요가 있었습니다. 이를 어떻게 구분할 수 있을지 다양한 방법을 찾아봤습니다.