부스트캠프 그룹프로젝트 : DDara
🏃 부스트캠프 9기 그룹 프로젝트 : DDara
네이버 부스트캠프 9기 그룹 프로젝트인 DDara에 대한 기록입니다.
개발 기간은 6주였으며, 1-2주는 기획, 마지막주는 발표로 실 개발기간은 3-4주 동안 진행되었습니다.
그 이후, 자율적으로 리팩토링을 진행하였으며 본 카테고리는 주로 리팩토링 과정을 다룹니다.
프로젝트의 배경, 주제, 기획, 개발, 배포, 그리고 마무리까지의 과정을 최대한 기록하고자 했습니다.
자세한 내용 제공을 위해 팀의 README.md를 첨부합니다.
✈ 팀 소개 ✈
안녕하세요, 팀 "따라따라" 입니다!
저희는 6주간 ⚒ "기술적 도전" ⚒을 목표로 삼았습니다.
저희는 단순히 api나 라이브러리를 "가져다 써서" 구현 하는 것이 아닌,
모든 것을 "직접 구현" 해보고, 그 과정에서 깊이 있는 기술적인 도전을 해 나갑니다.
🌍 서비스 소개 🌍
✨ 서비스 소개
📳 온보딩 페이지
📳 회원가입/로그인
| 회원가입 | 로그인 |
|---|---|
📳 채널 생성 (호스트 기준)
📳 채널 공유 (호스트 기준)
📳 채널 접속 (게스트 기준)
| 주원님 (게스트1) 화면 | 동율님 (게스트2) 화면 | 재도님 (게스트3) 화면 |
|---|---|---|
📳 채널 및 게스트 현황 확인 (호스트 기준)
| 사용자 별로 필터링해서 보기 | 사용자 위치/방향 실시간 확인 |
|---|---|
📳 모바일 접속시 데스크탑으로 유도
📳 메인 페이지로 리다이렉션
| 존재하지 않는 URL 접속 시 | 로그인하지 않았을 시 |
|---|---|
📳 게스트가 이동 중일 때 호스트와 게스트 화면 비교
| 동율님(게스트)을 보고 있는 호스트 화면 | 동율님 (게스트) 실시간 위치와 방향 화면 |
|---|---|
💡 라이브러리나 API에 의존하지 않기 위한 노력
🎨 1. 지도 위 캔버스에 출발지/도착지 마커, 경로 그리기
- 캔버스 위에 그려둔 그림은 지도(캔버스)를 이동하거나 확대/축소하더라도 그린 위치(지도 기준)에 그대로 존재해야 함
단순히 지도 API를 사용하는 것이 아닌,
어떻게 동작되는지 모두 알고 직접 구현하기 위해 모든 그림과 마커는 캔버스로 직접 구현하였고,
지도의 좌표 연동하는 로직을 직접 구현하였습니다.
지도 위에 캔버스를 연동하는 과정에서 이벤트 관련 많은 이슈들이 있었고, 문제 없이 이벤트를 전달하기 위해 많은 설계와 고민 과정을 거쳤습니다.
🧭 2. 실시간 위치 파악
- 호스트(손자)는 게스트들(할머니, 할아버지)의 위치를 실시간으로 확인 가능해야 함
- 게스트(할머니)는 본인의 위치와 호스트(손자)가 설정해둔 출발지, 도착지, 경로만을 확인할 수 있어야 함
단순히 지도에서 제공하는 현재 위치 API를 사용하는 것이 아닌, 어떻게 동작되는지 모두 알고 직접 구현하기 위해
현재 위치와 모바일 디바이스의 회전 각도를 가공하여 소켓 통신을 통해
다양한 사용자의 위치를 확인할 수 있도록 직접 구현하였습니다.
특히 소켓 통신 과정에서 각 사용자 권한마다 (호스트/게스트) 보내야 하는 정보와 받아야 하는 정보가 다르기 때문에
클라이언트/서버에서 각각 필요한 정보만을 통신할 수 있도록 많은 고민 과정을 거쳤습니다.
📃 우리가 집중해서 해결한 문제
by. J060_김주원
by. J174_이동율
by. J210_임재도
by. J234_정혜인
... 그 외 다양한 기술적 도전 보러가기
⛏ 서비스 아키텍처
🌱 팀원 소개
| J060_김주원 | J174_이동율 | J210_임재도 | J234_정혜인 |
|---|---|---|---|
| FE | FE | FE | Full Stack (FE + BE) |
| @juwon5272 | @leedongyull | @effozen | @happyhyep |
🎢 바로가기 링크
저희는 모바일 웹서비스이기 때문에, 모바일로 접속하시는 것을 추천드립니다.
(모바일에서 위 QR 코드로 접속하실 수 있습니다.)