← 포트폴리오 목록으로

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

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

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

프로젝트 개요

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

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

01

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

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

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

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

01 · 홈 · 게시판 선택

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

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

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

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

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

02

경기 상세에서 대화하고, 마감 후 후기를 남기는 흐름

용병 모집 글에는 날짜·시간·지역·구장·인원·비용을 표시합니다. 상세에서 1:1 채팅으로 이동해 경기 정보를 나누고, 작성자는 모집을 마감할 때 함께한 사람을 선택합니다. 마감된 경기에서는 매너점수와 후기를 작성할 수 있습니다.

조건을 확인하고 대화한 뒤,경기 후기를 남깁니다.

상세·대화·마감·후기를 각각 크게 볼 수 있습니다.

01 · 경기 상세 · 모집 조건

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

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

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

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

매치스토리 1:1 채팅 · 경기 정보 공유

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

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

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

04 · 후기 작성 · 매너점수

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

매치스토리 후기 작성 · 매너점수
경기 상세 → 1:1 채팅 → 모집 마감 → 후기 작성으로 이어지는 화면입니다. 함께한 사람 선택은 작성자가 모집을 마감할 때 사용하는 단계입니다.이미지를 누르면 새 탭에서 크게 볼 수 있습니다.경기 상세 · 모집 조건1:1 채팅 · 경기 정보 공유모집 마감 · 함께한 사람 선택후기 작성 · 매너점수

03

회원 현황과 콘텐츠를 관리하는 운영 관리자

운영 관리자는 활동·탈퇴·오늘 가입한 회원 수와 월별 가입 현황을 조회합니다. 회원·게시물·댓글·게시판과 배너·광고·공지 등을 관리하고, 게시물·댓글 신고를 검색해 신고 사유와 대상 내용을 확인할 수 있습니다.

회원과 콘텐츠 운영을관리자 화면으로 모았습니다.

관리자 웹은 원래의 가로 비율로 제공합니다.

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

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

매치스토리 운영 관리자 · 대시보드

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

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

매치스토리 운영 관리자 · 신고 관리
회원 현황을 보는 대시보드와 게시물·댓글 신고 관리 화면을 제공합니다. 관리자 웹 화면은 가로 비율로 표시하며, 이미지를 누르면 전체 크기로 볼 수 있습니다.이미지를 누르면 새 탭에서 크게 볼 수 있습니다.운영 관리자 · 대시보드운영 관리자 · 신고 관리

앱과 운영 관리자의 연결

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

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

RELATED WORK

비슷한 구조의 포트폴리오

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

RELATED GUIDE

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

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