📚 [2024-10-31] 프로젝트 기획서

📝 프로젝트 요약

프로젝트명

선따라 길따라 (DDara)

팀명

따라따라

프로젝트 한 줄 소개

중장년층 사용자가 쉽게 길 안내를 받게 해주는 모바일 웹서비스

기술 키워드

#지도, #저작도구, #실시간 위치

깃허브 링크

https://github.com/boostcampwm-2024/web28-DDara

📝 프로젝트 목표

사용자 친화적인 길 안내 서비스 제공

중장년층도 쉽게 사용할 수 있는 직관적인 인터페이스와 기능을 제공합니다.

실시간 위치 공유 및 경로 안내

실시간으로 위치를 공유하여, 사용자는 쉽게 위치를 파악할 수 있습니다.

맞춤형 경로 설정

사용자가 자유롭게 지도 위에 경로를 그려, 원하는 경로를 공유할 수 있습니다.

포트폴리오 가치 향상

팀원 모두가 프로젝트를 통해 기술 역량을 강화하고, 포트폴리오로 활용할 수 있도록 합니다.

📝 프로젝트 배경 및 동기

현대 사회에서 스마트폰과 네비게이션 앱은 필수적인 도구로 자리 잡았지만, 중장년층 사용자들에게는 여전히 복잡하고 사용하기 어려운 경우가 많습니다. 가족이나 친구들이 중장년층 사용자에게 길 안내를 해주고 싶지만, 기존의 지도 앱으로는 충분하지 않을 때가 있습니다. 이에 따라 중장년층이 쉽게 사용할 수 있는 맞춤형 길 안내 서비스를 제공하고자 본 프로젝트를 기획하였습니다.

📝 서비스 예상 이미지

서비스 예상 이미지 링크

📝 사용자 시나리오

1. 사용자 유형 정의

1. 일반 사용자

• 웹 애플리케이션을 통해 지도를 보고, 그림을 그리고, 다른 사용자의 그림을 볼 수 있음.
• 아이디와 비밀번호로 로그인하여 자신의 그림을 생성, 수정(선 그리는 펜과 지우개 사용), 삭제할 수 있음.

2. 비회원 사용자

• 로그인하지 않고도 지도와 그림을 볼 수 있음.
• 그림을 생성하거나 수정할 수는 없음.

2. 주요 시나리오

📝 시나리오 1: 회원 가입 (간단하게 구현)

배경

• 새로운 사용자인 **"홍길동"**은 위치 기반 그림 그리기 서비스를 이용하고자 한다.

단계

1. 접속: 홍길동은 모바일 브라우저에서 웹 애플리케이션에 접속한다.
2. 회원 가입 페이지 이동: 화면 우측 상단의 "회원 가입" 버튼을 클릭한다.
3. 정보 입력: 아이디와 비밀번호 입력 후 가입 완료.
4. 자동 로그인: 가입 후 자동으로 로그인되어 메인 페이지로 이동한다.

예외 사항

• 비밀번호 불일치 시 경고 메시지 표시.

📝 시나리오 2: 로그인 및 로그아웃

단계

1. 로그인 페이지 이동 후 정보 입력 및 로그인 성공.
2. 로그아웃: 우측 상단의 "로그아웃" 버튼 클릭.

예외 사항

• 잘못된 정보 시 경고 메시지 표시.

📝 시나리오 3: 지도 위에 그림 그리기 (펜 사용)

단계

1. 그리기 모드 진입 후 펜 도구 선택 및 그림 그리기.
2. 그림 저장 후 저장 완료 메시지 표시.

예외 사항

• 저장 실패 시 재시도 요청.

📝 시나리오 4: 그림 수정 (지우개 사용)

단계

1. 수정 모드 진입 후 지우개 도구 선택.
2. 수정 후 저장.

예외 사항

• 다른 사용자의 그림 수정 시 권한 부족 메시지 표시.

📝 시나리오 5: 지도 축소 및 확대 시 그림 연동

단계

1. 지도 축소 및 확대에 따라 그림이 연동되어 표시됨.

예외 사항

• 동기화 오류 시 경고 메시지 표시.

📝 시나리오 6: 다른 사용자의 그림 보기

단계

1. 지도 탐색 후 그림 선택 및 상세 정보 표시.

예외 사항

• 불러오기 실패 시 경고 메시지 표시.

📝 시나리오 7: 그림 삭제

단계

1. 내 그림 목록에서 그림 선택 후 삭제 수행.

예외 사항

• 삭제 실패 시 경고 메시지 표시.

📝 시나리오 8: 비회원 사용자의 회원 가입 유도

단계

1. 그리기 모드 시도 시 팝업 표시.
2. 회원 가입 후 기능 사용 가능.

예외 사항

• 가입하지 않을 경우 팝업 닫기.

📝 시나리오 9: 사용자 설정 변경 (펜과 지우개 설정)

단계

1. 설정 페이지 이동 후 설정 변경 및 저장.

예외 사항

• 저장 실패 시 경고 메시지 표시.

📝 시나리오 10: 그림 공유하기

단계

1. 그림 선택 후 공유 링크 생성 및 친구에게 공유.

예외 사항

• 비회원도 링크로 그림 확인 가능.

📝 시나리오 11: 경로 구분해서 추가

단계

1. 경로명 설정 후 저장 및 확인.

예외 사항

• 오류 발생 시 이전 상태로 되돌림.

📝 시나리오 12: 다른 경로 확인

단계

1. 다른 경로 클릭 후 확인.

예외 사항

• 오류 발생 시 이전 상태 유지.

📝 시나리오 13: 권한 허용

단계

1. 권한 요청 시 허용.

예외 사항

• 미허용 시 재요청 메시지 표시.

3. 추가 고려 사항

• 지도와 그림의 동기화: 지도의 확대/축소 시 그림도 연동.
• 도구 제한: 펜과 지우개만 제공.
• 데이터 저장 및 동기화: 좌표 정보 저장 및 렌더링.

📝 유즈케이스

설명:

• 액터:

  • 사용자: 로그인한 사용자로 모든 기능 사용.
  • 비회원 사용자: 제한된 기능 사용.

• 유즈케이스:

  • 회원 가입, 로그인, 지도 보기, 그림 그리기/수정/삭제, 설정 변경, 그림 공유 등.

• 관계:

  • 포함 관계 (<<include>>): 일부 기능이 다른 기능을 포함.
  • 확장 관계 (<<extend>>): 특정 조건에서 기능 확장.

📝 기술적인 도전

모바일 환경 최적화:

• Canvas API 활용 및 성능 최적화.

지도와 캔버스 동기화 최적화:

• requestAnimationFrame, WebGL 사용.

테스트 자동화 및 CI/CD 구축:

• Jest, Cypress, GitHub Actions 사용.

실시간 위치 추적 기능:

• WebSocket 및 WebRTC.

오프라인 기능 구현:

• Service Worker, Cache API 사용.

📝 사용 기술 스택

⚙️ Front-End

• React, TypeScript, pnpm, vite, swc, vitest, storybook, msw

⚙️ Back-End

• Node.js, JavaScript, pnpm, express

📝 기타 참고 자료

• 💡 기능 명세
• 프로젝트 진행 상황 정리본