목차

프로젝트 개요/동기

현재, 농구를 취미로 하려고 하는 개개인들은 동호회나 오픈 카톡방등을 이용하지 않으면 대전 상대를 만나기 힘든 상황이다.

동호회와 오픈 카톡방을 사용한다고 하더라도 여러 어려움에 부딪히게 된다.

동호회는 주기적으로 농구를 하려고 하는 사람들이 많기 때문에, 가볍게 시간날 때 한 판씩 즐기려는 사람들에게는 무리가 있다.

동호회의 경우 해당 지역의 존재 여부 확인도 여러울 뿐만 아니라 가입 경로가 불분명하여 참여가 힘들다는 단점이 있다. 따라서 개인이 수소문하여 동호회에 들어가기에는 시간적인 무리가 있다.

또한 동호회는 어느 정도 실력이 있는 사람들이 들어오는 경우가 많기 때문에, 초보들이 동호회에 들어가서 선뜻 경기에 참여하기가 사람에 따라 부담스러울 수 있다.

오픈 카톡방의 경우, 익명성이 보장된다는 점이 단점으로 다가올 수 있는데, 오픈 카톡방이 실명 프로필을 사용하지 않는 경우, 비매너 유저나 노쇼 문제를 예방하기 힘들다.

자신의 지역에 오픈 카톡방이 생성이 되지 않아 있을수도 있으며, 오히려 오픈 카톡방이 여러 개가 있어서 모든 오픈 카톡방을 다 참여하여 물어봐야 될 수도 있다는 단점이 있다.

기존에 HoopSquad와 비슷한 서비스를 제공하던 플랫폼으로는 DO IT PLAY와 WEPLAY가 있다.

DO IT PLAY의 경우 경기가 성사될 때마다 요금이 발생되므로, 라이트한 사용자들에게는 부담이 될 수 있다. 또한 정해진 체육관에서만 서비스를 사용할 수 있다는 제약이 존재한다. 종합적으로, 가볍게 즐기고 싶은 사용자가 접근하기에는 어렵고 다소 부담이 될 수 있다.

WEPLAY의 경우에도 정해진 체육관에서만 서비스를 사용할 수 있다는 제약이 존재하며, 5대 5 경기만을 지원하기에 3대 3이나 1대 1과 같이 적은 인원으로 경기를 즐기고 싶은 사람들에게는 맞지 않는다.

HoopSquad는 사용자에게 요금을 받지 않아 접근성을 늘렸으며, 대신 인앱 광고나 각종 농구 관련 매체 홍보등으로 인한 수익으로 서비스에 발생하는 비용을 충당할 예정이다. 또한 체육관을 사용자들이 직접 등록할 수 있게 하고, 1대 1, 3대 3과 같이 대중적으로 많이 선택되는 경기 방식에 대한 게시글도 작성할 수 있게 하여 접근성을 늘릴 예정이다.

1. 공공데이터 포털(날씨예보, 미세먼지)
2. 카카오 OAuth¹
3. Google Maps(매칭 장소 표시 및 저장)
4. Google Firebase

React Native Expo	Javascript

Express	TypeScript	Prisma

사용자가 어플리케이션을 처음 켜면, 로그인 화면으로 리다이렉트 된다. 사용자는 2가지 선택을 할 수 있는데, 회원가입과 Kakao OAuth로 로그인이 가능하다.

회원가입 버튼을 누르면 아이디(이메일) 및 비밀번호 등을 입력하게 된다. 모든 필요 정보를 입력하고 가입하기 버튼을 누르면 사용자는 가입에 성공하고 로그인 화면으로 다시 리다이렉트 된다. 가입한 아이디와 비밀번호로 로그인을 하면 로그인에 성공한다.

카카오 아이콘을 터치하면 WebView²로 카카오 아이디로 로그인하기 화면을 보여준다. 로그인을 완료하면 어플리케이션으로 다시 이동하며, 로그인에 성공한다.

어느 쪽의 방법으로 로그인에 성공하여도, 이후 서버 측에서 지정된 시간 동안은 자동으로 로그인이 된다.

사용자가 로그인에 성공하면, 최소 1개, 최대 2개까지 본인이 주로 활동하는 지역을 설정해야 한다. 사용자는 메인 화면에 접속하면, 해당 지역의 날씨와 해당 지역에서 모집 시간이 얼마 남지 않은 마감 임박 게시글 3개를 볼 수 있다.

매칭 게시글의 경우 각 지역별로 필터링되어 보여진다. 예를 들어, 지역 설정 당시 구미시를 선택하였고, 메인 화면에 존재하는 드롭다운 박스를 통해 구미시를 선택해 놓은 상태라면, 구미시를 지역으로 작성된 게시글만 목록에 보이게 된다.

사용자는 매칭 게시글 목록에서 + 버튼을 터치하여 게시글을 작성할 수 있다. 게시글 제목과 모이는 장소, 사진 등 필요한 정보를 입력한다. 체육관 위치의 경우 지도로 대략적인 현재 위치를 핀으로 보여주며, 사용자는 지도를 드래그하여 핀의 위치를 변경하여 정확한 위치를 골라 해당 장소에 이름을 부여할 수 있다. 이후 등록 버튼을 터치하면 게시글이 등록되며, 이 게시글을 지역 필터링을 기반으로 사용자에게 보여진다.

게시글 목록에서는 게시글 제목, 사진, 원하는 경기 타입(1대 1, 3대 3, 5대 5) 등의 간략한 정보가 표시되며, 게시글을 터치하면 상세 정보를 확인할 수 있다. 사용자가 해당 매칭이 괜찮다고 생각되면, 우측 상단의 채팅 버튼을 터치하여 게시글 작성자와 채팅을 게시할 수 있다.

매칭 참가 신청을 하려는 사용자(게스트)가 채팅을 입력하면 새로운 채팅방이 생성되며, 게시글 작성자(호스트)는 이를 채팅 탭에서 확인할 수 있다. 만약 게스트가 참가 신청을 원한다면, 채팅 방 상단에 위치한 참가 신청하기 버튼을 터치하여 참가 신청을 할 수 있다. 해당 버튼을 누른 순간 호스트는 실시간으로 상단에 수락/거절 버튼이 활성화되며, 호스트는 수락/거절 버튼을 터치하여 해당 신청을 수락/거절할 수 있다. 상단의 게시글 제목을 터치하여 언제든지 게시글을 재검토할 수 있다. 만약 호스트가 이를 수락했다면, 모집된 인원의 수가 1 증가한다.

사용자는 프로필 탭을 터치하여 자신의 프로필을 검토할 수 있다. 프로필 수정하기를 터치하여 프로필 사진이나 이름, 본인의 신장, 몸무게 등의 개인 정보를 수정할 수 있다.

사용자는 팀을 등록하여 마음에 맞는 사람들끼리 팀을 구성할 수 있다. 팀 목록 탭을 터치하여 팀 목록을 확인 할 수 있다. 사용자는 팀 등록 버튼을 터치하여 팀 등록 페이지로 이동할 수 있다. 해당 페이지에서 팀을 생성하기 위한 정보를 입력한 후 등록 버튼을 터치하여 팀을 등록할 수 있다.

Oauth 로그인 방식 중 구글 로그인을 개발하면서 구글 로그인 버튼 클릭 시 구글 로그인 페이지로 이동은 구현 하였지만 로그인을 수행하고 다시 앱으로 돌아오지 않는 문제가 발생하였으며 이를 위해 expo에서 구글 로그인을 구현하는 방법 및 expo 공식 문서를 찾아보았지만 결국 구글 로그인 구현 방법을 찾지 못하여 대신 앱 자체에서 회원가입을 진행하고 로그인을 하는 로컬 로그인을 구현하는 방법으로 변경하였다.

농구를 진행하는 장소에 대한 정보를 받는 과정에서 초기에 우편주소 API를 활용하여 주소 정보를 입력받는 방법으로 개발하였지만 농구를 진행하는 장소 특성상 체육관뿐만 아니라 야외 코드 농구장처럼 보다 상세한 위치를 필요로 하는 장소에 대한 정보를 제공하는데 있어 정확한 위치를 보여주기에 어렵다고 생각이 되어 지도에 핀을찍어 정확한 야외 코트 위치를 제공하는 방식으로 우편주소 API 대신 구글 지도 API를 활용하는 방법으로 변경하였다.

현재 개발한 HoopSquad에서 개인간의 매칭 신청 및 처리에 대한 기능은 구현되었지만 개인들의 팀 가입 및 팀 간의 매칭에 대한 기능은 구현되어있지 않아 동호회, 동아리와 같이 소속감을 가지고 팀원들과 농구를 하고싶은 사람들에게는 팀 소속 및 팀 게임 경험에 대한 한계점을 가지고있으며 또한 사용자들간에 농구장 위치를 등록하고 등록된 농구장에 대한 정보를 제공 받는 기능이 구현되어있지 않아 농구를 하는데 있어 중요한 사항인 공간적인 부분에서 도움을 받을 수 없는 한계점을 가지고 있다.

추후 개인들이 원하는 팀을 가입 할 수 있고 서로 다른 팀 간의 매칭에 대한 기능을 추가하여 개인은 팀 가입을 통해 소속감을 가질수 있고, 서로 다른 팀 간의 매칭 기능을 통해 팀 게임 경험을 쌓을수 있도록 하며 또한 사용자들이 직접 농구장에 대한 정보를 등록하고 등록된 농구장 정보들을 모든 사용자들이 볼 수 있도록 개선 할 것이다.

Google Play Store 등 어플리케이션 보급 스토어 등에 출시 등을 생각해 볼 수 있고, 이를 교내 학생들에게 홍보를 통해 쉽게 접근할 수 있도록 하여 학교 내에서 농구 인원들을 모집할 수 있을 것으로 기대된다.