01 / Context
무엇을 해결할 것인가.
이동 중 일행의 위치를 반복해서 묻거나 지도와 통화를 번갈아 사용해야 합니다. 가입 절차 없이 같은 지도에 접속하고 음성으로 소통할 수 있는 도구가 필요합니다.
가족·지인이 초대 링크로 들어와 실시간 위치와 음성을 공유하는 모바일 웹앱.
02 / Direction
프로젝트를 바라본 방향.
초대 링크로 입장해 지도와 음성을 함께 사용하는 흐름으로 구성했습니다. 위치의 최신성과 정확도, 백그라운드 갱신 제약을 화면에 표시합니다.
빠르게 합류하는 일
초대 링크를 열고 이름을 입력하면 같은 방에 들어갑니다. 별도 가입 절차를 두지 않아 이동 중에도 합류할 수 있습니다.
위치는 점이 아니라 상태
좌표와 함께 최신성, 정확도, 연결 상태를 표시합니다. 멈춘 위치를 지금의 위치로 오해하지 않도록 갱신의 제약을 드러냅니다.
일시적인 만남에 맞는 데이터
방은 24시간 후 만료됩니다. GPS 이동 경로와 참여자 이름은 디스크에 보관하지 않고 방 설정과 집결지 같은 운영 정보만 복구합니다.
03 / Experience
사용자의 다음 행동을 설계하다.
모바일 지도를 중심으로 일행 따라가기, 집결지와 음성 패널을 배치했습니다. 화면과 지도 렌더링 부담을 줄이는 포켓 모드를 제공합니다.
- 01방 만들기·초대↓
- 02이름으로 입장↓
- 03일행 위치 확인↓
- 04집결지·음성 대화↓
- 05방 종료·만료↓
04 / Making
경험을 실제 시스템으로.
React 기반 지도 화면에 Socket.IO 위치 공유와 LiveKit 음성을 결합했습니다. 모바일 브라우저에서 사용할 수 있도록 PWA와 터치 중심 화면을 구성했습니다.
05 / In detail
구현의 디테일.
전체 기능 보기 +
- 이름만 입력하는 초대 링크, 무작위 방 URL·서명 세션
- GPS 공유·재연결·위치 최신성/정확도/연결상태 구분
- 내 위치/일행 따라가기·모두 보기
- 나 여기 있어 강조 신호
- 방장 집결지·잠금·참가자 내보내기·방 종료
- 방별 LiveKit 마이크 음성·음소거·발화자 표시·iOS 오디오 복구
- Wake Lock 기반 포켓모드
- PWA 홈 화면과 마지막 방 이어가기
- 24시간 방 만료·메타데이터만 재시작 복구
06 / Intelligence & automation
인터랙션과 자동화.
기기의 위치 정보와 실시간 통신으로 일행의 상태를 갱신합니다. 위치의 최신성과 정확도를 표시하고 연결 복구를 처리합니다. 백그라운드 위치 갱신은 브라우저와 기기의 제약을 따릅니다.
07 / Outcome
그래서, 가능해진 일.
초대 링크 입장, 일행 위치 확인, 집결지 설정과 음성 대화를 한 화면에 통합했습니다.
프로젝트 직접 보기 ↗08 / Continuity
만든 이후의 시간까지.
방 잠금, 집결지, 참여자 퇴장과 만료를 관리합니다. GPS 이동 경로는 보관하지 않으며 방 단위의 운영 정보만 유지합니다. 웹·위치 통신·음성 서비스의 상태를 분리해 점검합니다.