강원대버스(KNUBus) - 강원대학교 실시간 순환버스 정보 제공 애플리케이션 🚌

프로젝트 개요

강원대버스(KNUBus)는 강원대학교의 학생 및 교직원을 위한 실시간 순환버스 정보 제공 애플리케이션입니다. 사용자는 이 애플리케이션을 통해 학교 내의 버스 운행 현황을 실시간으로 파악하고, 시간표를 확인하여 효율적인 이동을 도모할 수 있습니다. 또한, 학사 일정 및 종강일 정보를 제공하여 일정 관리에 도움을 줍니다. 📅

주요 기능

1. 실시간 순환버스 위치 및 도착 시간 확인: 사용자는 애플리케이션을 통해 실시간으로 순환버스의 위치와 도착 시간을 확인할 수 있습니다. 🕒
2. 전체 순환버스 노선도 제공: 강원대학교의 모든 순환버스 노선을 한눈에 볼 수 있는 지도를 제공합니다. 🗺️
3. 전체 순환버스 시간표 확인: 각 순환버스의 운행 시간을 상세히 확인할 수 있는 시간표 기능을 제공합니다. 🕰️

추가 기능

• 강원대 종강일 디데이 확인: 사용자는 종강일까지 남은 일수를 디데이 형식으로 확인할 수 있습니다. ⏳
• 강원대 학사일정 확인: 중요한 학사 일정을 놓치지 않도록 애플리케이션을 통해 학사 일정을 확인할 수 있습니다. 🎓

배포

• 버전: 1.0.5
• 배포일: 2024년 4월 23일
• 최근 업데이트일: 2024년 6월 1일
• 다운로드 링크: Google Play Store에서 다운로드
• 플랫폼: 안드로이드 (Google Play Store)
• 순환버스 운행 기간: 2024년 3월 4일부터 2024년 6월 24일까지

개발 환경

• 개발 도구(IDE): Visual Studio Code
• 서버 및 패키지 관리: Node.js(v20.11.1 LTS), npm(v10.5.0)
• 프로젝트 관리: Expo를 이용하여 개발, Google Cloud Platform API 활용
• 버전 관리: Git 및 GitHub
• 문서 관리: Notion

색상 코드

• 메인 색상: #38B6FF
• 보조 색상: #FF5757
• 버튼 색상 #1: #4A90E2
• 버튼 색상 #2: #50E3C2
• 텍스트 색상: #2c3e50
• 배경 색상: #F5F5F5
• 회색: #B0BEC5

팀원

• 구희원(HeHelee)

  • UI 디자인 리드
  • Header.js 및 MapScreen.js 컴포넌트 구현
  • GitHub: HeHelee

• 최수영(scove03)

  • BusTime 기능 개발
  • GitHub: scove03

• 허윤수(sugoring)

  • 내비게이션 구조 설계 및 Navigation.js 구현
  • HomeScreen.js 및 MapScreen.js 개발
  • 애플리케이션 모듈화 리팩토링
  • GitHub: sugoring

설치 및 사용법

사전 준비

1. Node.js 설치: Node.js와 npm을 공식 사이트에서 다운로드하여 설치합니다.
2. Expo CLI 설치: 다음 명령어로 전역적으로 Expo CLI를 설치합니다.

   npm install -g expo-cli

설치

1. 리포지토리 클론:

   git clone https://github.com/yourusername/knubus.git
   cd knubus

2. 필요한 패키지 설치:

   npm install

실행

1. 개발 서버 시작:

   expo start

2. 애플리케이션 실행: Expo 앱을 사용하여 QR 코드를 스캔하고 애플리케이션을 실행합니다.

기여 방법

1. 이슈 확인: GitHub 이슈 트래커에서 해결되지 않은 이슈를 확인합니다.
2. 포크 및 클론: 리포지토리를 포크하고 로컬 환경에 클론합니다.
3. 새 브랜치 생성: 새로운 기능 또는 버그 수정을 위한 브랜치를 생성합니다.

   git checkout -b feature/새기능

4. 코드 작성 및 커밋: 코드를 작성하고 커밋 메시지를 작성합니다.

   git commit -m "새 기능 추가 설명"

5. 풀 리퀘스트 생성: 변경 사항을 반영하기 위해 풀 리퀘스트를 생성합니다.

라이선스

이 프로젝트는 MIT 라이선스를 따릅니다.

문의

질문이나 제안사항이 있으면 아래의 이메일로 연락해 주세요:

• 허윤수: hys990730@gmail.com

version 1.0.0 회고 🌟

@허윤수

• React-Native: 웹 개발 경험을 바탕으로 React Native로 모바일 개발을 시작하였습니다. 웹에서 사용하던 기본적인 컴포넌트 기반 구조가 유사해 접근이 쉬웠지만, 다양한 모바일 기기의 스크린 크기 차이로 결과물의 일관성 유지에 어려움이 있었습니다. (웹의 CSS와 달리) 모든 컴포넌트에 스타일을 개별적으로 지정하여야 했고, 이로 인해 코드의 가독성도 떨어졌습니다. 글로벌 스타일을 설정할 수 없다는 문제도 있었습니다. 이를 극복하기 위해, 레이아웃과 스타일에 관한 명확한 가이드라인을 정립하여 여러 컴포넌트에서 일관된 사용자 경험을 제공할 수 있도록 개선하였습니다.
• React-Native 라이브러리: React Native를 사용하며, 많은 기능이 라이브러리 형태로 제공되는 것에 놀랐습니다. 예를 들어, React에서는 div 태그를 사용해 다양한 요소를 만들지만, React Native에서는 필요한 버튼을 구현할 때 이미 만들어진 Button, Touchable, Pressable과 같은 컴포넌트를 사용해야 합니다. 또한, div와 유사한 기능을 하는 View 컴포넌트 내에 텍스트를 넣기 위해서는 Text 컴포넌트가 필수입니다. 이러한 점은 편리할 수 있지만, 처음에는 컴포넌트의 종류를 잘 모르기 때문에 적절한 컴포넌트를 찾아 사용하는 것이 어색하고 번거로웠습니다. 하지만, 각 요소의 용도가 명확하여 div로 가득 찬 코드보다 가독성이 더 좋다는 장점이 있습니다. 또한, 지도 구현을 복잡하게 예상했으나, 라이브러리를 통해 쉽게 해결할 수 있었고, 다음 업데이트에서는 사용자의 위치도 표시할 수 있도록 개선할 예정입니다.
• 기획부터 배포까지: 필요한 서비스로 판단하고 바로 개발에 착수했습니다. 🏃‍♂️ 시간이 촉박하여 애플리케이션이 효율적인 구조를 갖추었는지는 확신하기 어렵습니다... 🤔 다음 업데이트에서는 컴포넌트 분리를 통해 재사용성을 높이고, 백엔드를 구축하여 API를 통해 데이터를 관리하려고 합니다. 이번에 공공데이터 API를 활용한 것은 전체 개발 프로세스를 빠르게 파악하는 데 큰 도움이 되었습니다! 🎉 배포를 위해 앱을 번들링하는 과정에서 어려움을 겪었습니다. 이를 간편하게 해결하기 위해 Expo라는 툴을 사용했는데, Expo는 사용하지 않는 모듈까지 번들링되어 앱의 용량이 커지는 단점이 있지만, 간단한 앱 배포용으로는 학습하기에 좋은 선택이었습니다. Google API 활용 중 빌드 연결 문제가 발생했으나, 개발자 커뮤니티를 통해 도움을 받고 HTTP 관련 설정 문제임을 이해할 수 있었습니다.
• 팀워크 : 프론트엔드 팀원과 함께 프로젝트를 진행하는 것은 처음이었습니다. 팀원들이 적극적으로 아이디어를 내주고 잘 따라와 준 덕분에 모두 만족할 수 있는 결과를 얻었습니다. 고맙습니다! 🙌 각 페이지와 컴포넌트를 분리하여 작업한 방식이 우리 팀에 잘 맞았고, 기능 구현 후 코드 리뷰 시간을 통해 서로 성장할 수 있는 소중한 시간이었습니다. 📈

@구희원

• 첫 프론트앤드 작업물 : 올해 처음 프론트앤드에 관심을 갖게 되었고, React Native로 Header와 MapScreen을 일부 맡아서 작업했습니다. 처음이어서 Chat-gpt를 많이 이용했지만 더 열심히 배워서 Chat-gpt의 의존도를 낮춰야 겠다고 생각했습니다.
• 효율적인 로직 작성하기 : MapScreen을 만들때 로직이 엄청 길었으나 동작은 잘 되었습니다. 하지만 좀 더 효율적으로 코딩을 하고 싶다는 생각이 들었습니다. 그래서 반복되는 부분을 함수로 묶어서 간략하게 로직을 구현했습니다. 이런 경험을 통해서 코드를 좀 더 효율적으로 설계하는 능력을 키워야 겠다고 생각했습니다.
• 반응형 디자인 사용하기 : 지도에 있는 정류장을 눌렀을 때 팝업이 뜨도록 하고 싶었으나, 제가 설계했던 부분이 반응형이 아니어서 핸드폰의 기종마다 크기가 달라진다는 점이 아쉬웠습니다. 그래서 그 부분은 @허윤수 언니가 맡아서 해줬습니다. 이런 경험을 통해서 반응형으로 어플을 제작하는 것이 중요하다는 것을 깨달았습니다.
• 깃허브 사용법 : 깃허브를 이용해서 파일을 형상관리하는 법을 잘 몰랐었는데, 이번 기회를 통해서 제대로 익힐 수 있었습니다. 저는 GUI툴인 소스트리를 이용했고, Repository에서 Clone을 해서 Pull을 해와서 내용을 받고, 제가 수정하면 Commit하고 Push하는 방식으로 이뤄진다는 동작원리를 알게 되었습니다. 특히 Repository에서 branch를 이용하는 이유와 방식에 알게 되었습니다. branch를 사용하는 이유는 한 branch에다가 몽땅 기능들을 다 만들어버리면, merge하기전에 기능들이 다 섞이기 때문입니다. 그래서 기능이 섞이고 파일이 복잡해지는 것을 방지하기 위함이라고 저는 생각합니다.
• 팀워크 : 프론트앤드를 처음 입문하는 데 어려움이 있었음에도, 잘 도와주고 해서 좋은 결과물을 얻을 수 있었습니다. 깃허브를 이용하는 방법도 많이 서툴렀었는데, 이번 기회를 통해서 깃허브를 이용해서 팀워크를 하는 방법을 제대로 익힐 수 있는 시간이어서 좋았습니다. :blush:

@최수영

• 첫 프로그램 개발을 진행하면서 git 및 React Native 배우고 사용해 보았습니다. 초기 세팅 및 기본 개념공부만 해도 복잡하고 시간이 걸리며 여러 오류 등이 발생하였지만 팀원들과 같이 여러 문제점을 소통하며 해결해 나가면서 React Native에 전반적인 부분을 익혔고 개발 부분에서 많은걸 배울 수 있었습니다.