사용자 시나리오 by 정혜인

정혜인 사용자 시나리오

프로젝트 정리

• 중장년층 사용자가 쉽게 길 안내를 받을 수 있도록 설계된 웹서비스
• 손녀가 출발지와 도착지 설정 후 링크를 공유하면, 할머니(혹은 할아버지)는 실시간으로 자신의 위치와 함께 길 안내
• 실시간 위치 공유와 저작 도구를 포함한 지도 기반 서비스로 구성

주요 기능

• 사용자별 경로 설정:
  • 손녀는 길 안내 방 생성 후 사용자를 추가하며 각 사용자마다 출발지와 도착지를 지도에 마커로 설정할 수 있습니다.
  • 설정된 경로는 지도의 확대, 축소 및 이동에도 비율을 유지하며 표시됩니다.
• 실시간 위치 공유:
  • 할머니(혹은 할아버지)가 링크에 접속하면, 현재 위치와 경로가 지도 위에 표시되고, 손녀의 화면에서도 실시간 위치가 나타납니다.
  • 여러 사용자 추가 시, 각 사용자마다 다른 출발지와 도착지 경로 설정 및 관리가 가능합니다.
• 링크 기반 사용자 전송 및 관리:
  • 각 사용자의 경로마다 고유의 링크가 생성되며, 공유된 링크에 접속하면 해당 경로와 실시간 위치가 표시됩니다.
  • 최대 5명까지 추가 가능하며, 각 사용자별로 다른 색상의 경로와 마커로 구분됩니다.

기술적 도전

• 실시간 위치 공유: WebSocket을 활용해 각 사용자의 실시간 위치를 실시간으로 갱신하는 기술
• 지도 위 저작도구: 경로가 지도의 확대/축소에 따라 비율을 유지하며 그려지도록 하는 고정 비율 구현
• 여러 사용자 관리: 5명까지 사용자 별로 구분된 출발지/도착지, 경로를 구분된 색상으로 표현

사용자 시나리오

채널 주인 (ex. 손녀)

• 로그인 후 메인 화면에서 새 길 안내 방을 생성하고, 할머니와 할아버지의 출발지 및 도착지를 설정합니다.
• 각 사용자를 위해 지도에 마커를 설정하고, 출발지에서 도착지로의 경로를 그립니다.
• 각 사용자에게 고유한 링크가 생성되며, 할머니와 할아버지에게 링크를 전송합니다.
• 할머니가 링크에 접속하면 할머니의 현재 위치가 지도에 실시간으로 나타나며, 설정한 경로와 마커가 함께 표시됩니다.
• 할아버지가 다른 링크에 접속하면 할아버지의 출발지, 도착지, 경로가 지도 위에 표시됩니다.
• 각 사용자의 위치와 경로가 손녀 화면에서 실시간으로 확인됩니다.

사용자 1 (ex. 할머니)

• 손녀가 보내준 링크에 접속하여 로그인 없이 바로 길 안내를 시작합니다.
• 할머니의 현재 위치가 지도의 마커로 나타나며, 손녀가 설정한 출발지/도착지와 경로가 시각적으로 안내됩니다.
• 지도는 사용하기 쉽게 확대와 축소가 가능하며, 할머니는 실시간 위치를 확인하며 길을 따라갑니다.

사용자 2 (ex. 할아버지)

• 손녀가 보낸 링크에 접속하여 할머니와 동일한 방식으로 길 안내를 시작합니다.
• 할아버지의 경로는 다른 색상으로 표시되며, 할머니와 개별적으로 경로가 관리됩니다.

기술적 고민

• canvas 등을 이용해서 그리면, 그 데이터를 어떻게 저장할 것인지

  • 그림을 모두 그리게 하는 것보다, 피그마의 직선 툴과 같은 것을 사용해서 직선으로만 연결시킬 수 있게 하는 것이 좋을듯
  • db에 저장할 때 출발지와 도착지 위도/경도 좌표 + 경로를 저장해야하는데, 경로를 배열 형식으로 (naver api에서 polyline 저장한 것처럼) 저장하는 것이 가장 베스트.
  • ex) 데이터

  {
  ...
  channelId: "uuid",
  owner: "손녀",
  users: [
  	{
  		userId: "할머니",
  		startLocation: {”lat”: 36.5, “lng”: 127.2},
  		endLocation: {”lat”: 36.5, “lng”: 127.2},
  		path: [
  			{”lat”: 36.5, “lng”: 127.2},
  			{”lat”: 36.5, “lng”: 127.2},
  			{”lat”: 36.5, “lng”: 127.2}
  			…
  			],
  		markerStyle: {"color": "ffffff"},
  		...
  		},
  			{
  		userId: "할아버지",
  		startLocation: {”lat”: 36.5, “lng”: 127.2},
  		endLocation: {”lat”: 36.5, “lng”: 127.2},
  		path: [
  			{”lat”: 36.5, “lng”: 127.2},
  			{”lat”: 36.5, “lng”: 127.2},
  			{”lat”: 36.5, “lng”: 127.2}
  			…
  			],
  		markerStyle: {"color": "000000"},
  		...
  		}
  	],
  	...
  }