← 포트폴리오 목록으로

축구·풋살 경기 모집·소통 앱 개발 사례

경기 모집·채팅·후기를 연결한 축구·풋살 앱 ‘매치스토리’

원하는 경기 조건을 찾고 작성자와 대화한 뒤 모집 마감과 후기까지 이어지는 사용자 앱과 운영 관리자 개발 사례입니다.

프로젝트 개요

서비스 형태
iOS·Android 사용자 앱 / 운영 관리자 웹
제작 범위
모집 조건과 이용 흐름 설계 사용자 앱·운영 관리자 구현
핵심 기능
경기 초청·구장 양도·용병 모집 조건 검색·1:1 채팅·마감·후기
운영 관리
회원·게시물·댓글·신고 게시판·배너·광고·공지

축구·풋살 팀과 선수가 지역·날짜·시간에 맞는 모집 글을 찾고, 경기 조건을 확인한 뒤 작성자와 대화할 수 있는 모바일 앱입니다. 경기 초청·구장 양도·용병 모집을 유형별로 구분하고, 모집 마감과 후기까지 연결했습니다. 운영 관리자는 회원·게시물·댓글·신고와 배너·공지를 관리합니다.

01

게시판에서 원하는 경기를 찾는 홈과 모집 목록

축구·풋살·여성축구·자유게시판을 구분하고, 모집 목록에서는 카테고리·지역·날짜·시간으로 조건을 좁힙니다. 참여 가능한 글을 따로 보고 최신순·가까운 일정순·조회수순으로 정렬할 수 있습니다.

원하는 경기 조건을한눈에 비교합니다.

필터와 모집 상태를 화면별로 확인할 수 있습니다.

01 · 홈 · 게시판 선택

축구·풋살·여성축구·자유게시판과 공지사항을 확인합니다.

매치스토리 홈 · 게시판 선택

02 · 모집 목록 · 필터와 정렬

모집 유형과 지역·날짜·시간 조건을 좁히고 참여 가능한 글을 찾습니다.

매치스토리 모집 목록 · 필터와 정렬
홈의 게시판 선택과 조건별 모집 목록을 함께 보여줍니다. 개별 화면을 열면 필터·모집 유형·참여 상태를 크게 볼 수 있습니다.이미지를 누르면 새 탭에서 크게 볼 수 있습니다.홈 · 게시판 선택모집 목록 · 필터와 정렬

02

경기 조건 확인과 모집 글에 연결된 대화

날짜·시간·지역·구장·인원·비용을 확인하고 상세에서 1:1 채팅으로 이동합니다. 대화 상단에는 연결된 모집 글을 표시해 같은 경기 정보를 보며 이야기할 수 있습니다.

경기 조건을 확인하고,모집 글에서 대화로

경기 조건을 확인하고 같은 모집 글을 표시하는 1:1 채팅으로 이동합니다.

01 · 경기 상세 · 모집 조건

날짜·시간·구장·인원·비용과 작성 내용을 확인하고 대화로 이동합니다.

매치스토리 경기 상세 · 모집 조건

02 · 1:1 채팅 · 경기 정보 공유

대화 상단에 연결된 모집 글을 표시하고 텍스트·이미지와 읽음 상태를 제공합니다.

매치스토리 1:1 채팅 · 경기 정보 공유
경기 조건을 확인하고 같은 모집 글을 표시하는 1:1 채팅으로 이동합니다.이미지를 누르면 새 탭에서 크게 볼 수 있습니다.경기 상세 · 모집 조건1:1 채팅 · 경기 정보 공유

03

모집 마감 · 함께한 사람 선택과 후기

작성자는 모집을 마감할 때 해당 모집 글로 대화한 상대 중 한 명을 선택합니다. 마감된 경기에서는 매너점수를 0.5점 단위로 선택하고 후기를 작성할 수 있습니다.

함께한 사람을 선택해 마감하고,후기를 남깁니다

작성자가 해당 모집 글로 대화한 상대를 선택해 마감하고, 마감된 경기의 매너점수와 후기를 작성합니다.

01 · 모집 마감 · 함께한 사람 선택

작성자가 해당 모집 글로 대화한 상대 중 함께한 사람을 선택하고 마감합니다.

매치스토리 모집 마감 · 함께한 사람 선택

02 · 후기 작성 · 매너점수

마감된 경기의 매너점수를 0.5점 단위로 선택하고 후기를 남깁니다.

매치스토리 후기 작성 · 매너점수
작성자가 해당 모집 글로 대화한 상대를 선택해 마감하고, 마감된 경기의 매너점수와 후기를 작성합니다.이미지를 누르면 새 탭에서 크게 볼 수 있습니다.모집 마감 · 함께한 사람 선택후기 작성 · 매너점수

04

신고 내용을 찾고 사유와 대상 게시물 확인

게시물·댓글 신고를 구분하고 신고 정보로 검색합니다. 목록에서 신고일자·신고자·신고대상과 상태를 확인하며, 보기 버튼으로 신고 사유와 해당 게시물의 내용을 살펴볼 수 있습니다. 대시보드에서는 회원 현황과 월별 가입 현황을 조회합니다.

신고 내용을 찾고,사유와 대상 게시물을 확인합니다

게시물·댓글 신고를 구분하고 검색한 뒤 신고 사유와 해당 게시물을 확인합니다.

01 · 운영 관리자 · 신고 관리

게시물·댓글 신고를 구분하고 사유와 대상 게시물·댓글을 확인합니다.

매치스토리 운영 관리자 · 신고 관리

02 · 운영 관리자 · 대시보드

활동·탈퇴·오늘 가입한 회원 수와 월별 가입 현황을 조회합니다.

매치스토리 운영 관리자 · 대시보드
게시물·댓글 신고를 구분하고 검색한 뒤 신고 사유와 해당 게시물을 확인합니다.이미지를 누르면 새 탭에서 크게 볼 수 있습니다.운영 관리자 · 신고 관리운영 관리자 · 대시보드

앱과 운영 관리자의 연결

모집 유형마다 필요한 입력 항목을 나누고 목록·상세·채팅에서 같은 모집 글의 정보와 상태를 이어서 사용하도록 구성했습니다. 마감 상태나 차단·탈퇴 회원에 따라 대화를 제한하고, 마감된 경기의 후기를 해당 모집 글에 연결합니다.

사용자 앱은 Angular·Ionic·Capacitor로, 운영 관리자 웹은 Angular로 구성했습니다. Firebase 인증·데이터베이스·스토리지를 사용하고 알림과 푸시 연결을 제공합니다.

RELATED WORK

비슷한 구조의 포트폴리오

같은 준비 상황이나 서비스 구조를 가진 포트폴리오를 이어서 확인해보세요.

RELATED GUIDE

비슷한 앱을 준비할 때 함께 볼 가이드

이 사례와 비슷한 서비스를 준비하면서 업체·견적·일정을 결정할 때 확인할 내용을 정리했습니다.