뚜벅몽

프로젝트 개요

👑 2024년 2학기 산학프로젝트2 - 교내 IT Festival 은상 수상 👑
2024.09.02 ~ 2024.12.16

프로젝트 기획 배경

최근 MZ세대는 장비나 시설 없이 쉽게 할 수 있는 걷기를 가장 선호하며, 이를 게임처럼 즐기고 건강한 라이프스타일을 추구하는 헬시플레저 트렌드가 확산되고 있습니다.

하지만 사용자들은 다음과 같은 불편함을 느끼고 있습니다:

• "같은 길을 반복하며 지루함을 느낀다."
• "산책 기록을 예쁘게 남기고 싶다."
• "지속적인 동기 부여가 어렵다."

이를 바탕으로 저희는 산책을 기록하고 공유하며, 재미있고 지속 가능한 운동 경험을 제공하는 서비스를 기획했습니다.

서비스 소개

뚜벅뚜벅 걷는 작은 여정이 모여 하나의 커다란 이야기를 완성한다는 의미의 뚜벅몽은
산책을 하고 싶지만 운동이 지루한 사용자를 위해 아트러닝과 캐릭터 수집 같은
게이미피케이션 요소를 통해 사용자들이 꾸준히 운동을 할 수 있도록 돕는 서비스입니다.

서비스 화면

➀ 회원가입

초기화면

내 동네 설정

카카오 API를 활용한 간편 로그인

1. 로그인 성공 → 신규 사용자

   • 동네 설정 페이지 → 홈 화면

2. 로그인 성공 → 기존 사용자

   • 바로 홈 화면으로 이동

---

➁ 홈

홈

도감

1. 한 눈에 보이는 산책 정보

• 사용자의 총 산책 횟수와 거리와 오늘 산책 횟수와 거리를 요약하여 표시합니다.
• 간단한 데이터 시각화를 통해 사용자의 성취를 한눈에 확인할 수 있습니다.

2. 함께 성장하는 캐릭터

• 사용자가 선택한 대표 캐릭터가 홈 화면에 표시되어 개인의 성취를 시각적으로 보여줍니다.
• 산책을 3번 완료할 때마다 새로운 캐릭터를 획득할 수 있으며, 경험치와 레벨 시스템으로 동기 부여를 제공합니다.

3. 도감과의 연결

• 사용자가 수집한 캐릭터는 도감에서 확인 가능하며, 원하는 캐릭터를 대표 캐릭터로 설정할 수 있습니다.
• 도감은 사용자의 성취와 수집 활동을 시각적으로 기록하여 꾸준한 동기 부여를 지원합니다.

---

➂ 설정

설정

동네 설정

닉네임 설정

1. 동네 재설정

• 사용자가 회원가입 시 설정한 동네를 새로운 동네로 업데이트할 수 있습니다.
• 새로운 지역으로 이동하거나 생활권이 바뀌었을 때 간편하게 동네 정보를 변경할 수 있습니다.

2. 닉네임 설정

• 커뮤니티 활동을 위해 사용할 닉네임을 설정합니다.
• 닉네임은 자유롭게 변경 가능하며, 다른 사용자와의 소통에 활용됩니다.

3. 로그아웃

• 현재 계정을 로그아웃하고 초기 화면으로 돌아갑니다.
• 안전한 로그아웃을 통해 사용자 정보 보호를 지원합니다.

---

➃ 산책

산책

산책 저장

1. 실시간 경로 기록

• GPS를 기반으로 사용자의 현재 위치와 이동 경로를 실시간으로 지도에 시각화합니다.
• 지정한 대표 캐릭터가 화면에 함께 표시되어 산책에 동반하는 즐거움을 제공합니다.

2. 산책 완료 및 경로 저장

• 산책 종료 시 경로를 자동으로 저장하며, 기록 페이지에서 언제든지 확인할 수 있습니다.
• 킬로미터, 시간, 시속, 평균 페이스가 자동으로 계산되어 사용자에게 제공됩니다.
• 경로 저장 시 산책로명만 작성하면 되어 간편하게 저장할 수 있습니다.

---

➄ 기록

기록

1. 달력 기반 기록 관리

• 사용자가 완료한 산책 기록을 달력을 통해 직관적으로 확인할 수 있습니다.
• 산책 완료된 날짜에 신발 아이콘이 표시되며, 한눈에 산책 여부를 파악할 수 있습니다.
• 특정 날짜를 클릭하면 해당 산책 경로와 세부 기록이 표시되어 상세 내용을 확인할 수 있습니다.

2. 지정 동네와 상관없는 기록 관리

• 설정된 동네와 상관없이 사용자가 한 모든 산책 기록을 확인할 수 있습니다.
• 개인의 이동 패턴과 산책 데이터를 효과적으로 관리할 수 있도록 지원합니다.

---

➅ 동네

동네

1위 유저

정렬

1. 동네 기반 경로 공유

• 사용자가 자신의 동네에서 걸었던 경로를 다른 사용자와 공유할 수 있습니다.
• 공유된 경로를 통해 새로운 산책 코스를 발견할 수 있습니다.

2. 랭킹 시스템

• 거리왕: 사용자가 산책한 총 거리를 기준으로 순위를 제공합니다.
• 횟수왕: 사용자가 산책을 완료한 총 횟수를 기준으로 순위를 제공합니다.

3. 좋아요 및 정렬 검색 기능

• 동네 페이지에서 사용자가 좋아요를 누른 경로를 확인할 수 있습니다.
• 경로를 좋아요 순, 최신 순 등으로 정렬 및 검색할 수 있습니다.
• 돋보기 모양 버튼을 누르면 다른 사용자가 걸은 경로를 자세히 확인할 수 있으며, 루트를 지도로 시각화합니다.

---

➆ NFC 태그 키링

키링

웹앱의 문제점 해결

• 웹앱의 접근성을 강화하기 위해 리사이클링 병뚜껑을 활용하여 NFC 태그 키링을 제작하였습니다.
• 사용자는 키링을 스마트폰에 태그하는 간단한 동작만으로 웹앱 사이트에 즉시 연결됩니다.

시연 영상

📽️ 시연 영상 보기 (Google Drive)
배포 사이트: https://tb-mong.xyz

기술 스택

Frontend

Backend

Deployment

Open API

팀원

서교진 프론트엔드 개발, UI/UX 디자인

한지우 백엔드 개발, 일러스트 제작