즐거운 경험을 한 장소를 지도에 기록하여 공유하면 어떨까? 하는 생각에서 이 프로젝트를 시작하게 되었습니다.
-
'MAAP'은 사용자들이 지도에 마커를 남기고 그 위치에 대한 이야기를 기록하는 애플리케이션입니다.
-
회원가입을 하지 않은 사용자도 지도를 조회할 수 있으며, 회원가입을 한 사용자는 지도에 마커를 생성할 수 있습니다.
-
애플리케이션을 실행하면 처음 화면은 사용자의 현재 위치를 중심으로 보여지며, 하단의 버튼을 통해 언제든지 현재 위치를 기준으로 지도를 불러올 수 있습니다.
-
마커를 생성할 때 카테고리, 제목, 내용, 사진을 추가할 수 있으며, 각 카테고리에 따라 마커의 색상이 변경되어 손쉽게 구분할 수 있습니다.
-
마커에 추가된 사진은 클릭하면 확대하여 볼 수 있습니다.
- 프로젝트 이름: MAAP 🗺️
- 프로젝트 기간: 2023.11-2023.12
- 개발 언어: Dart
- 개발자: 김승원
- Front-end : Flutter, riverpod, json_annotation, retrofit, geolocator, go_router
- Back-end : firebase
- 앱을 시작하면 Splash Screen이 몇 초동안 보입니다. 로그인이 이미 완료된 경우, 메인 화면으로 바로 이동하며, 로그인이 되어 있지 않을 경우 로그인 화면이 표시됩니다.
- 이메일 입력 시, 자동으로 gmail, naver, daum 등의 이메일 형식이 제안되어 사용자가 편리하게 이메일을 설정할 수 있습니다.
- 각 항목에 대해 유효성 검사가 이루어지며, 닉네임은 1-9자 이내, 이메일은 해당 형식에 맞게, 비밀번호는 특수문자, 숫자, 문자를 포함한 8-15자 이내로 설정해야 합니다. 비밀번호 확인 과정에서 입력한 비밀번호와 일치하지 않을 경우, 경고 메시지가 표시됩니다.
- 필요한 정보를 입력하지 않으면, 해당 정보를 입력하라는 메시지가 표시됩니다. 올바른 형식으로 정보를 입력하면 메시지는 바로 사라집니다.
| Splash Screen & 회원가입 |
|---|
| splash | sign |
|---|---|
 |
 |
- 로그인은 Firestore에 등록된 회원만 가능하며, 이메일과 비밀번호를 이용하여 진행됩니다.
- 로그인 과정에서도 회원가입처럼 유효성 검사가 이루어지며, 이메일 입력 시 이메일 형식이 자동으로 제안되어 사용자가 편리하게 정보를 입력할 수 있습니다.
- NAVER 사용자들은 자신의 NAVER 계정을 이용하여 소셜 로그인을 진행할 수 있습니다. 또한 Firebase와 연동하여 앱에서 생성한 정보들을 안전하게 저장할 수 있습니다.
| 로그인 & 소셜로그인 - Naver |
|---|
| login | socialLogin - naver |
|---|---|
 |
|
- 비회원 사용자는 앱의 마커 기능을 이용할 수 없습니다.
- 사용자는 앱에서 기본적으로 제공되는 네이버 지도를 활용할 수 있습니다.
- 메인 화면은 사용자의 현재 위치를 기준으로 시작하며, 지도를 이동한 후에는 왼쪽 하단의 버튼을 클릭하면 언제든지 현재 위치로 다시 돌아올 수 있습니다.
| 비회원 & 현재 위치 이동 |
|---|
| Non-member | Move to Current Location |
|---|---|
 |
 |
- 회원은 지도 위에 마커를 남길 수 있습니다. '작성하기' 버튼을 누르면, 지도 위에서 원하는 위치를 클릭하여 마커를 생성할 수 있습니다. 마커의 위치는 필요에 따라 지도를 클릭하여 변경할 수 있습니다.
- 카테고리를 사용하여 마커를 분류할 수 있으며, 마커에는 제목, 내용, 사진을 함께 첨부할 수 있습니다.
- 각 카테고리는 서로 다른 배경색을 가지며, 사용자가 특정 카테고리를 선택하면, 그 카테고리의 배경색과 동일한 색으로 마커가 표시됩니다.
| 글쓰기 - 마커 남기기 & 카테고리 - 마커 색상 |
|---|
| Writing - Leaving a Marker | Category - Marker Color |
|---|---|
 |
 |
- 글 작성을 완료하면, 지도에 해당 위치에 마커가 생성되며, 메인 화면에는 새로 작성한 글 목록이 추가됩니다.
- 메인 화면에 있는 글은 무한 스크롤로 편리하게 조회할 수 있습니다.
- 생성된 마커나 글 목록을 클릭하면, 해당 글의 내용을 확인할 수 있습니다.
- 글에 첨부된 사진을 클릭하면, 확대된 상태로 사진을 볼 수 있으며, 여러 장의 사진이 첨부되어 있는 경우에는 좌우로 스와이프하여 각 사진을 확인할 수 있습니다.
| 마커 누르기 & 글 화면 |
|---|
| Clicking Marker | Post Screen |
|---|---|
 |
 |
|
- 글 수정하기과 삭제는 버튼을 통해 글을 수정,삭제 할 수 있습니다. 수정하기 버튼을 누르면 글의 제목, 내용, 첨부된 사진 등을 수정할 수 있습니다.
- 글을 삭제하면, 해당 글은 메인 화면에서 사라지며, 관련된 마커도 지도에서 제거됩니다.
| 글 수정 & 글 삭제 |
|---|
| Post Edit | Post Delete |
|---|---|
 |
 |
- 로그아웃 버튼을 클릭하면 즉시 사용자의 로그인 상태를 해제하고, 비회원 상태로 전환됩니다.
| 로그아웃 |
|---|
| Logout |
|---|
 |