📚 기획 회의 정리본 (작성일 : 2024 10 31)

기획 회의 정리본

• 분류: 정규 회의 정리
• 생성 일시: 2024년 10월 31일 오후 5:55
• 선택: 정리본

---

📝 오늘 하루 내용 요약

이번 주 프로젝트 "선따라 길따라(DDara)"와 관련된 활동을 시간 순서에 따라 정리하겠습니다. 이번 주의 활동은 기획회의부터 시작하여 테스트 설정, 각 기능별 시나리오 기획, 기술적 도전 사항 및 회의 결론에 이르기까지 광범위하게 진행되었습니다.

---

1. 10월 31일 오전 - 기획 회의 및 테스트 준비

• 기획회의 진행:
  • 10월 31일 오전 10시부터 팀 전체 기획 회의가 열렸습니다. 이번 회의는 프로젝트 초기 구상을 명확히 하고, 필요한 기술 스택과 기능을 구체화하는 것을 목표로 했습니다.
  • 주제 정리: 중장년층 사용자에게 쉽게 길 안내를 제공하는 위치 기반 지도 웹서비스로 주제를 구체화하였습니다. "선따라 길따라(DDara)"라는 서비스명을 선정하고, 팀명은 "따라따라"로 결정했습니다.
  • 사용자 설정 및 주요 기능 논의: 사용자는 자신만의 경로를 설정할 수 있도록 하며, 경로는 지도 위에서 그리기 도구를 통해 직관적으로 설정됩니다. 경로마다 마커를 추가하고, 실시간 위치를 추적하는 기능을 통해 사용자 경험을 향상시키기로 했습니다.
• 기술 스택 설정:
  • Vite, Tailwind 및 네이버 지도 API: 서비스 환경을 Vite와 Tailwind를 사용하여 구축하고, 네이버 지도 API로 지도를 표시하며 다양한 경로 및 마커를 추가할 계획을 세웠습니다.
  • @types/navermap 활용: 네이버 지도 API에 필요한 타입을 별도로 설정하여 타입스크립트로 편리하게 작업할 수 있도록 준비하였습니다.
• 기능 테스트 계획 수립:
  • 간단한 경로 설정과 마킹이 가능하도록 네이버 지도 API와 Polyline을 활용한 마킹을 테스트하여 초기 기술 환경과 지도 설정의 문제를 확인했습니다.

---

2. 10월 31일 오후 - 사용자 시나리오 기획

오후 시간에는 네이버 지도 API를 이용한 지도 생성, 경로 표시, 마커 배치 기능 등을 고려하여 구체적인 사용자 시나리오를 작성했습니다.

• 사용자 시나리오 개발:
  • 시나리오 세부화: 각 팀원은 중장년층 사용자를 고려하여 시나리오를 세분화했습니다. 손녀가 할머니에게 실시간으로 길을 안내하는 시나리오, 에어비앤비 호스트가 숙소 근처 주요 장소를 표시하는 시나리오 등 다양한 상황에서의 사용자 경험을 구체화했습니다.
  • 그룹화 기능: 특정 마커와 경로를 그룹으로 묶을 수 있도록 하는 기능을 구상하여, 마트, 은행, 카페 등 주제에 따라 경로와 마커를 시각적으로 구분할 수 있도록 했습니다.
• 주요 기능 및 인터랙션 방식 정리:
  • 마커 및 경로 설정: 사용자는 출발지와 도착지를 마커로 표시하며, 주요 경로는 직관적인 선으로 그려집니다. 실시간 위치는 지도를 통해 확인되며, 확대 및 축소 시 경로가 함께 조정됩니다.
  • 이미지 삽입: 복잡한 골목이나 특정 건물 앞에서 경로를 이해하기 쉽도록 지도 위에 이미지를 삽입하는 기능도 추가했습니다.
  • 실시간 위치 공유: 각 사용자의 실시간 위치를 손쉽게 파악할 수 있도록 WebSocket을 통한 실시간 위치 갱신을 논의했습니다.

---

3. 10월 31일 저녁 - 기술적 도전 과제 정리 및 확장 가능성 논의

저녁에는 사용자 시나리오 기획에 이어, 이 기능들을 구현하면서 발생할 수 있는 기술적 도전 과제를 분석하고 확장 가능성을 검토했습니다.

• 지도와 캔버스 동기화 최적화:
  • 문제 분석: 지도 이동 및 확대/축소 시 캔버스 레이어의 동기화가 성능에 큰 영향을 줄 수 있음을 확인했습니다.
  • 해결 방안 검토: requestAnimationFrame, Offscreen Canvas, WebGL 등의 성능 최적화 방법을 도입하여 부드러운 사용자 경험을 제공할 방안을 모색했습니다.
• 데이터 저장 및 동기화 방안:
  • 데이터 직렬화: 경로와 마커의 데이터를 직렬화하고, SVG를 통한 데이터 저장 방식 및 이미지 압축 기법을 검토했습니다. 실시간 데이터의 크기를 줄이기 위해 최적화된 데이터 구조를 구성할 계획을 세웠습니다.
• 실시간 협업 기능 확장:
  • WebSocket 기반 동기화: 다중 사용자가 동시에 지도 위에서 그림을 그릴 때 발생할 수 있는 충돌 문제를 해결하기 위해, WebSocket과 WebRTC를 사용하여 실시간 통신을 구현하고 충돌 관리 기법도 함께 도입할 것을 논의했습니다.

---

4. 10월 31일 이후 - 다음 주 과제 및 환경 설정

10월 31일 회의를 마지막으로 프로젝트에 필요한 다음 과제와 환경 설정을 명확히 하여 다음 주부터 본격적인 개발에 돌입하기로 했습니다.

• 커밋 전략 및 코드 컨벤션 설정:
  • Airbnb 스타일 가이드를 사용하여 코드 스타일을 통일하고, ESLint와 Prettier를 통해 코드 품질을 관리하기로 했습니다.
  • 팀원 간 효율적인 협업을 위해 커밋 전략과 네이밍 컨벤션을 정하고, GitHub에서 코드 리뷰 프로세스를 수립하기로 했습니다.
• 주요 기능의 테스트 전략 확립:
  • Vitest와 스토리북을 사용하여 각 기능에 대한 테스트를 먼저 작성하고, 테스트 주도 개발(TDD)을 적용하기로 했습니다.
  • 자동화 및 CI/CD 구축: GitHub Actions을 이용한 자동화 배포 및 빌드 시스템을 도입하여, Vercel을 통해 자동 배포하도록 설정할 계획을 세웠습니다.
• PWA 구현 계획:
  • 오프라인 기능: Progressive Web App(PWA)로의 확장 방안을 모색하였으며, 서비스 워커를 통한 오프라인 기능을 지원하고 위치 데이터를 저장하는 방법도 연구했습니다.
• 기술 학습 계획:
  • Vitest와 스토리북 학습: 모든 팀원이 각자 Vitest와 스토리북을 학습하여 다음 주부터 바로 기능별 테스트와 스토리 작성에 돌입할 수 있도록 했습니다.
  • 백엔드 학습과 Swagger 도입: 백엔드 경험이 부족한 팀원을 위해 REST API 설계 및 Swagger 문서화도 학습할 계획을 세웠습니다.

---

요약

이번 주의 활동을 통해 팀 프로젝트의 주제와 기능을 구체화하고, 기술적 도전 과제와 확장 가능성을 면밀히 검토했습니다. 다음 주에는 Vite 환경 설정, Vitest와 스토리북 학습, CI/CD 구축, 기능 개발 및 테스트 작성에 집중할 예정입니다.

📝 기획안 정리

1. 프로젝트 개요 및 배경

"선따라 길따라(DDara)" 프로젝트는 중장년층 사용자를 주요 대상으로 하는 길 안내 모바일 웹 서비스로, 사용자가 특정 경로를 그리거나 기록하고 실시간으로 자신의 위치를 추적하면서 쉽게 길 안내를 받을 수 있도록 설계되었습니다. 이 프로젝트는 특히 중장년층의 사용자 편의성을 목표로 하며, 직관적인 인터페이스와 저작 도구, 실시간 위치 추적 기능을 갖춘 모바일 지도를 제공합니다.

프로젝트 주제

• 목표: 중장년층 사용자가 직관적이고 쉽게 길을 안내받을 수 있도록 지도 상에 경로를 설정하고, 마커 및 선을 통해 시각적으로 이해를 돕는 모바일 웹 서비스를 제공하는 것.
• 사용자 정의: 기본적으로 중장년층을 대상으로 하나, 사용자가 개인적으로 사용할 수도 있으며, 다수의 사용자에게 실시간 경로를 안내할 수 있도록 경로 커스텀 기능을 제공.

프로젝트의 주요 컨셉과 특성

• 지도 위 실시간 위치 추적: WebSocket을 통해 실시간으로 사용자의 위치를 추적하고, 특정 위치에서 경로 안내를 지속적으로 제공합니다.
• 저작 도구: 선 그리기, 마커 추가 등 지도 위에서 직접 경로를 표시하고, 각 지점에 설명을 추가할 수 있는 기능을 제공합니다.
• 비회원 사용: 사용자는 로그인 없이도 지도 및 경로를 볼 수 있으며, 로그인하면 경로 저장 및 수정이 가능합니다.
• 다양한 경로 및 테마 지원: 숙소 근처 마트나 공원, 카페 등 주변의 다양한 정보를 포함하여 개별 사용자의 목적에 맞는 경로를 설정할 수 있습니다.

---

2. 기획 회의 정리 및 주요 논의 사항

이번 주 기획 회의에서는 프로젝트의 구현 방향과 각 기능에 대한 구체적인 시나리오가 다뤄졌습니다.

회의 주요 안건

1. 테스트 진행 현황: Vite, Tailwind, 네이버 맵 API 설정을 통한 환경 구축 및 기본적인 폴리라인 마킹 테스트가 진행되었습니다.
2. 네이버 지도 API: @types/navermap의 타입을 정리하여 사용하기 쉽게 준비했으며, 기본적인 지도 표시와 경로 그리기를 검토했습니다.
3. 주요 기능 및 사용자 시나리오: 시나리오별로 사용자 경험을 정의하고, 경로 설정과 실시간 위치 추적의 기술적 도전 과제를 분석했습니다.

기능별 기획 및 기술적 도전

• 경로 설정과 마커 기능: 사용자가 지도에 마커를 추가하여 경로를 설정하는 방식과, 이를 커스터마이즈하여 시각적 구분을 두는 기능이 논의되었습니다. 각 경로와 마커는 사용자 맞춤형으로 설정할 수 있으며, 사용자의 현재 위치와 목적지까지의 안내가 포함됩니다.
• 지도 기반 저작 도구: 직선 그리기, 선의 굵기 및 색상 변경, 텍스트와 이미지 추가 기능이 포함되며, 실시간으로 저장하고 공유할 수 있는 기능이 필수로 포함됩니다.
• 폴리라인 기능 및 확대/축소 관리: 경로의 매끄러운 연결과 선의 이어짐을 유지하며 확대/축소에 대응하는 기능이 주요 쟁점이었으며, 이를 반투명 선으로 표시하고 직선 연결을 유지하는 방식이 제안되었습니다.
• 로그인 시스템과 비회원 접근: 비회원 사용자도 지도 및 경로 확인이 가능하지만, 커스텀 경로 생성 및 저장은 회원에게만 허용됩니다.
• 캔버스의 확장 가능성: 프로젝트 확장 방안으로 캔버스를 통해 추가적인 저작 기능을 구현하고, 개인화된 경로 공유를 지원하여 여러 사용자와의 경로 공유가 가능합니다.

주요 기능 및 설정 계획

1. 경로 설정 및 마커: 각 사용자의 출발지와 도착지 설정, 위치별 경로와 마커 설정을 통해 직관적으로 경로를 시각화할 수 있습니다.
2. 저작 도구 UI: 지도 위의 그리기 도구 패널과 실시간 미리보기 기능을 제공하여 사용자가 원하는 경로와 마커를 쉽게 설정하도록 지원합니다.
3. 다중 사용자 지원: 최대 5명의 사용자가 서로 다른 경로를 확인할 수 있으며, 실시간 위치를 표시하여 위치 간 충돌을 최소화할 계획입니다.

---

3. 사용자 시나리오

사용자 유형 및 시나리오

각 사용자 유형에 맞춘 상세 시나리오와 예상 활동이 기획되었습니다.

1. 일반 사용자 시나리오
   • 로그인하여 경로를 생성하고, 저작 도구를 사용해 경로를 커스텀하는 방식.
   • 예시: 숙소 근처 주요 장소 마킹, 경로 그룹화를 통해 다양한 경로와 목적지 표시.
2. 비회원 사용자 시나리오
   • 로그인 없이 지도와 경로 확인이 가능하며, 실시간 위치는 확인할 수 있지만, 경로 생성 및 수정은 제한됩니다.

서비스 확장 방안

프로젝트 주제는 중장년층 대상의 길 안내 서비스로 시작했지만, 다양한 유스케이스가 논의되었습니다. 예를 들어 축제 지도를 통해 다수의 경로를 한 번에 관리하거나 에어비앤비와 같은 서비스에 활용될 수 있습니다.

---

4. 기술적 도전과 최적화 방안

프로젝트의 기술적 도전과 기획에서 주요하게 다뤄진 부분입니다.

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

지도 확대/축소와 이동 시에 캔버스 레이어가 매끄럽게 동기화되어야 하며, 이 과정에서 성능 최적화가 필요합니다. requestAnimationFrame, Offscreen Canvas, WebGL 등을 통해 성능을 개선할 계획입니다.

데이터 저장 및 동기화

사용자의 경로와 마커는 네이버 맵 API의 폴리라인과 함께 저장됩니다. 데이터가 많아질 경우에는 압축 및 최적화 기법을 사용하여 빠른 로딩을 유도하고, SVG 및 Protobuf 등으로 데이터 직렬화를 고려 중입니다.

실시간 협업 기능

여러 사용자가 한 지도를 보면서 경로를 설정할 수 있도록 WebSocket을 활용할 계획입니다. 이 과정에서 충돌 관리 기법이 적용될 것이며, 특히 실시간 위치와 경로를 동시에 표시할 수 있도록 WebRTC 등 추가적인 실시간 통신 기능도 고려합니다.

---

5. 마무리

이번 주 활동을 통해 "선따라 길따라(DDara)" 프로젝트의 전체 기획, 주요 기능, 기술적 과제가 체계화되었으며, 각 기능별로 구체적인 사용자 경험이 설계되었습니다. 다음 주에는 기능 개발과 환경 설정에 들어가며, 특히 Vitest와 스토리북 등을 활용한 테스팅 및 개발을 예정하고 있습니다.