SYSTEM BLUEPRINT

Battle Seoul
모바일 우선 커뮤니티 및 음악 게임 설계

팬, 크리에이터, 운영자가 각각 안정적으로 콘텐츠를 보고 만들고 관리하는 흐름을 정의합니다.

팬 사용자 시나리오

모바일 홈에서 음악 배틀 참여까지

팬 사용자가 간편 로그인 후 배틀을 선택하고 카운트다운에 맞춰 투표하는 흐름입니다.

1. 홈 진입

추천 배틀과 인기 콘텐츠 확인

2. 디스코드 로그인

익숙한 계정으로 빠른 인증

3. 배틀 선택

음악 배틀 상세 진입

4. 카운트다운

음원 준비 후 게임 시작

5. 투표 결과

결과 확인과 다음 참여 유도

팬 사용자 | 화면 01

모바일 홈 개선

https://battleseoul.com/mobile-home
BATTLE SEOUL
오늘의 음악 배틀
실시간 인기 배틀
아이돌 보컬 대결, 참여 12,482명
추천 콘텐츠
Music, Star, Fashion 카드가 한 줄씩 노출

[화면 개요 및 목적]

배너와 캐릭터 이미지가 겹치지 않도록 높이와 카드 밀도를 조정하고, 주요 배틀 진입 버튼을 엄지 영역에 배치합니다.

[핵심 기능 로직]

홈 첫 화면은 콘텐츠 카드 가로 스크롤과 추천 배틀을 분리해 터치 오류와 가독성 문제를 동시에 줄입니다.

  • 반응형 중단점
  • 터치 영역 기준
팬 사용자 | 화면 02

배틀 상세 및 카운트다운

https://battleseoul.com/battle/track-vote
BATTLE SEOUL
3초 후 배틀 시작
03
음원 준비 완료
Spotify 미리듣기 29초, 지연 82ms
투표 대기
A팀 보컬 컷 대 B팀 댄스 컷

[화면 개요 및 목적]

사용자는 배틀 상세에서 음원 준비 상태와 카운트다운을 확인한 뒤 투표 가능 상태로 자연스럽게 이동합니다.

[핵심 기능 로직]

사용자 터치 이후 오디오 프리로드를 실행하고 준비 완료 시 카운트다운과 투표 버튼을 활성화합니다.

  • Web Audio API
  • 상태 머신
팬 사용자 | 화면 03

투표 결과 및 공유

BATTLE SEOUL
A팀 58퍼센트 승리
총 투표 18,204
실시간 댓글 392개
58
42
다음 추천
힙합 신곡 배틀 바로가기

[화면 개요 및 목적]

팬 사용자는 투표 직후 결과와 반응을 확인하고 다음 배틀로 이어지는 커뮤니티 흐름을 경험합니다.

[핵심 기능 로직]

결과 데이터는 투표 카운트와 댓글 반응을 즉시 갱신하고, 공유 버튼과 다음 배틀 추천을 함께 노출합니다.

  • Firestore 실시간 갱신
  • 결과 캐시
크리에이터 시나리오

콘텐츠 업로드와 배틀 생성

크리에이터가 기존 에셋을 활용해 음악 또는 이미지 콘텐츠를 등록하고 반응을 확인하는 흐름입니다.

1. 로그인

크리에이터 권한 확인

2. 업로드 시작

이미지와 음원 소스 등록

3. 배틀 생성

카테고리와 투표 조건 설정

4. 미리보기

모바일 카드 노출 확인

5. 반응 확인

좋아요와 댓글 추이 확인

크리에이터 | 화면 01

업로드 시작 화면

https://battleseoul.com/upload
콘텐츠 업로드실시간
커버 이미지
1080 대 1350 비율 통과
음원 링크
Spotify 트랙 식별자 확인 완료
모바일 미리보기
카드 제목 2줄 제한 적용

[화면 개요 및 목적]

크리에이터가 이미지, 음원 링크, 설명을 한 화면에서 등록하고 모바일 노출 상태를 미리 확인합니다.

[핵심 기능 로직]

파일 업로드와 음원 메타데이터 검증을 분리해 실패 원인을 즉시 표시합니다.

  • Cloud Storage
  • 메타데이터 검증
크리에이터 | 화면 02

배틀 생성 폼

https://battleseoul.com/creator/battle-new
새 배틀 만들기실시간
대결 카드 A
메인 보컬 컷, 29초
대결 카드 B
댄스 브레이크 컷, 28초
노출 설정
Music 카테고리, 7일 진행

[화면 개요 및 목적]

크리에이터는 두 콘텐츠를 매칭하고 카테고리, 노출 기간, 투표 방식을 설정합니다.

[핵심 기능 로직]

필수값 누락과 음원 권한 상태를 저장 전에 검증해 운영 오류를 줄입니다.

  • React Hook Form
  • 권한 검증
크리에이터 | 화면 03

콘텐츠 반응 관리

https://battleseoul.com/creator/insight
크리에이터 반응실시간
투표 전환율
홈 노출 대비 18.6퍼센트
댓글 감성
응원 72퍼센트, 문의 11퍼센트
다음 액션
비슷한 장르 배틀 생성 추천

[화면 개요 및 목적]

업로드 이후 좋아요, 댓글, 투표 전환을 확인하고 다음 콘텐츠 제작 방향을 잡습니다.

[핵심 기능 로직]

카드별 반응 데이터를 집계하고 이상 증가 또는 신고 발생 시 운영자 검수로 연결합니다.

  • Data Aggregation & Visualization
  • 운영 알림
운영자 시나리오

콘텐츠 검수와 오류 모니터링

운영자가 신고 콘텐츠, 인기 배틀, 음악 API 오류를 빠르게 확인하고 안정성을 관리하는 흐름입니다.

1. 대시보드

운영 지표 확인

2. 신고 확인

문제 콘텐츠 검수

3. 인기 관리

노출 우선순위 조정

4. 오류 추적

API 실패 로그 확인

5. 배포 검수

모바일 회귀 체크

운영자 | 화면 01

운영 대시보드

admin.battleseoul.com/dashboard
운영 대시보드실시간
모바일 오류
오늘 7건, Safari 터치 이벤트 집중
API 상태
Spotify 정상, Apple Music 재시도 2건
검수 대기
신고 콘텐츠 4건

[화면 개요 및 목적]

운영자는 모바일 오류, 인기 배틀, API 상태를 한 화면에서 확인하고 우선순위를 판단합니다.

[핵심 기능 로직]

주요 지표를 실시간으로 모아 장애 대응과 콘텐츠 운영 결정을 빠르게 만듭니다.

  • 운영 로그
  • 상태 모니터링
운영자 | 화면 02

콘텐츠 검수 화면

admin.battleseoul.com/review
신고 콘텐츠 검수실시간
신고 사유
이미지 저작권 의심 3건
처리 선택
숨김, 복구, 크리에이터 요청
감사 로그
운영자, 시간, 사유 자동 저장

[화면 개요 및 목적]

신고 콘텐츠와 부적절 이미지를 빠르게 비교하고 승인, 숨김, 수정 요청을 처리합니다.

[핵심 기능 로직]

운영 액션을 기록으로 남겨 추후 분쟁과 재검수 상황을 추적합니다.

  • 권한 로그
  • 신고 큐
운영자 | 화면 03

로그 및 오류 확인

admin.battleseoul.com/logs
오류 로그실시간
재생 실패
모바일 자동 재생 제한, 안내 노출 완료
로그인 오류
Discord 연결 재시도 성공률 96퍼센트
회귀 테스트
390, 768, 1280 뷰포트 통과

[화면 개요 및 목적]

음원 재생 실패, 인증 오류, 배포 후 반응형 회귀를 로그 단위로 추적합니다.

[핵심 기능 로직]

장애 유형별로 재시도, 대체 안내, 개발 티켓 등록 흐름을 연결합니다.

  • 오류 추적
  • Issue Tracking & Status Management