✈ 팀 소개 ✈

안녕하세요, 팀 "따라따라" 입니다!

저희는 6주간 ⚒ "기술적 도전" ⚒을 목표로 삼았습니다.

저희는 단순히 api나 라이브러리를 "가져다 써서" 구현 하는 것이 아닌,

모든 것을 "직접 구현" 해보고, 그 과정에서 깊이 있는 기술적인 도전을 해 나갑니다.

🌍 서비스 소개 🌍

✨ 서비스 소개

📳 온보딩 페이지

📳 회원가입/로그인

회원가입	로그인

📳 채널 생성 (호스트 기준)

📳 채널 공유 (호스트 기준)

📳 채널 접속 (게스트 기준)

주원님 (게스트1) 화면	동율님 (게스트2) 화면	재도님 (게스트3) 화면

📳 채널 및 게스트 현황 확인 (호스트 기준)

사용자 별로 필터링해서 보기	사용자 위치/방향 실시간 확인

📳 모바일 접속시 데스크탑으로 유도

📳 메인 페이지로 리다이렉션

존재하지 않는 url 접속시	로그인하지 않았을 시

📳 게스트가 이동 중일 때 호스트와 게스트 화면 비교

동율님(게스트)을 보고 있는 호스트 화면	동율님 (게스트) 실시간 위치와 방향 화면

💡 라이브러리나 API에 의존하지 않기 위한 노력

🎨 1. 지도 위 캔버스에 출발지/도착지 마커, 경로 그리기

• 캔버스 위에 그려둔 그림은 지도(캔버스)를 이동하거나 확대/축소하더라도 그린 위치(지도 기준)에 그대로 존재해야 함

단순히 지도 API를 사용하는 것이 아닌,

어떻게 동작되는지 모두 알고 직접 구현하기 위해 모든 그림과 마커는 캔버스로 직접 구현하였고,

지도의 좌표 연동하는 로직을 직접 구현하였습니다.

지도 위에 캔버스를 연동하는 과정에서 이벤트 관련 많은 이슈들이 있었고, 문제 없이 이벤트를 전달하기 위해 많은 설계와 고민 과정을 거쳤습니다.

🗺️ 지도와 캔버스 연동을 위한 고민 스토리 바로가기

🧭 2. 실시간 위치 파악

• 호스트(손자)는 게스트들(할머니, 할아버지)의 위치를 실시간으로 확인 가능해야 함
• 게스트(할머니)는 본인의 위치와 호스트(손자)가 설정해둔 출발지, 도착지, 경로만을 확인할 수 있어야 함

단순히 지도에서 제공하는 현재 위치 API를 사용하는 것이 아닌, 어떻게 동작되는지 모두 알고 직접 구현하기 위해

현재 위치와 모바일 디바이스의 회전 각도를 가공하여 소켓 통신을 통해

다양한 사용자의 위치를 확인할 수 있도록 직접 구현하였습니다.

특히 소켓 통신 과정에서 각 사용자 권한마다 (호스트/게스트) 보내야 하는 정보와 받아야 하는 정보가 다르기 때문에

클라이언트/서버에서 각각 필요한 정보만을 통신할 수 있도록 많은 고민 과정을 거쳤습니다.

🔌 실시간 위치 파악 구현을 위한 고민 스토리

📃 우리가 집중해서 해결한 문제

by. J060_김주원

• [FE] 🎨 지도의 기능들 canvas에서 구현하기

by. J174_이동율

• [FE] 💾 초보 개발자의 데이터 관리 시행착오

by. J210_임재도

• [FE] 🧬 캔버스와 네이버 지도 API를 연동하기 위한 과정

by. J234_정혜인

• [FE] 🗺️ 지도와 함께 움직이는 캔버스 설계/구현 시행착오 스토리

• [BE] 🔌 실시간 소켓 통신의 도전기: 다양한 조건이 존재하는 통신 feat. 클라이언트와 서버 각각에서의 고민과 설계 과정

... 그 외 다양한 기술적 도전 보러가기

• 기술적 도전 모음zip

⛏ 서비스 아키텍처

🌱 팀원 소개

J060_김주원	J174_이동율	J210_임재도	J234_정혜인
FE	FE	FE	Full Stack (FE + BE)
@juwon5272	@leedongyull	@effozen	@happyhyep

🎢 바로가기 링크

저희는 모바일 웹서비스이기 때문에, 모바일로 접속하시는 것을 추천드립니다.

(모바일에서 위 QR 코드로 접속하실 수 있습니다.)