BOXBOX — F1 실시간 문자 중계 앱
세이프티카 · 핏스톱 · 추월 · 페널티를 발생 순간 알림으로 전달하는 F1 중계 앱. 기획 · 디자인 · 구현 단독 수행
- 기간
- 2025.12 – 진행 중
- 역할
- 기획 · 디자인 · 프론트엔드
성과
Overview
F1은 경기 중에 무슨 일이 벌어지는지 따라가기 어려운 종목입니다. 세이프티카가 나왔는지, 누가 언제 피트인했는지, 페널티를 먹었는지가 순위를 뒤집는데 중계 화면만 봐서는 놓칩니다. 경기 중 발생하는 이벤트를 발생 순간 알림으로 쌓아 올리는 문자 중계 화면을 만들고, 그 주위에 일정 · 순위 · 리더보드를 붙여 하나의 앱으로 구성했습니다.
Architecture
- 중계랩 진행 · 선두 고정 헤더이벤트 타임라인
- 이벤트세이프티카핏스톱추월페널티
- 소통Live Leaderboard실시간 채팅공식 이벤트 배너
- 기록시즌 일정 · 카운트다운이전 중계순위표
- 테마ThemeData · ColorSchemeThemeMode.system
- 데이터Polling (현재)WebSocket (확장 고려)
주요 기능
- 경기 중 실시간 문자 중계 — 현재 랩(44/57)과 선두 드라이버를 상단에 고정하고, 그 아래로 세이프티카 · 핏스톱 · 추월 · 페널티가 발생 순서대로 쌓이는 타임라인 구현
- 각 알림에 맥락 수치를 함께 노출 — 핏스톱은 타이어 교체(Soft → Hard)와 소요 시간(2.4s), 추월은 대상(HAM → ALO)과 격차(+0.4s)
- 이벤트 유형별로 아이콘과 색을 분리(세이프티카 노랑 · 핏스톱 파랑 · 추월 초록 · 페널티 빨강)해, 빠르게 스크롤해도 무슨 상황인지 즉시 구분되도록 설계
- 랩 종료 · 사고 · 피트인 등 새 이벤트가 발생하면 최신 중계가 상단에 오도록 리스트 갱신 · 정렬 로직 구현
- Live Leaderboard — 랩 진행도 · 동시 시청자 수와 함께 실시간 채팅을 두고, 옐로플래그 같은 공식 이벤트를 채팅 스트림 중간에 배너로 삽입
- Race 탭 — 다음 경기까지 D-H-M-S 카운트다운, 월별로 묶은 시즌 일정, 종료된 라운드는 우승자와 함께 이전중계(과거 레이스 다시보기) 진입점 제공
- Rank 탭 — 시즌 선택과 Drivers / Constructors 전환, 팀 컬러 바와 순위 변동 화살표로 순위표 구성
- ThemeData · ColorScheme으로 라이트/다크를 분리하고 ThemeMode.system으로 OS 설정에 따라 자동 전환
문제 해결
Problem
네트워크가 지연되거나 이벤트가 누락되면 중계 순서가 꼬였습니다.
Cause
수신한 이벤트를 도착 순서대로 화면에 쌓기만 해서, 누락분이 생기면 복구할 방법이 없었습니다.
Solution
최신 경기 상태를 기준으로 화면을 재동기화하는 로직을 적용해, 비동기 이벤트가 순서를 어겨도 화면이 일관성을 유지하도록 했습니다.
Problem
중계 메시지가 갱신될 때마다 리스트 전체가 다시 그려져 버벅였습니다.
Cause
이벤트가 하나 추가돼도 리스트 전체를 리빌드하고 있었습니다.
Solution
최신 이벤트만 갱신하는 Diff 기반 업데이트로 전환해 전체 리빌드를 최소화했습니다.
Problem
다크 모드로 바꾸면 중계 텍스트가 배경에 묻혀 읽기 어려웠습니다.
Cause
라이트 기준으로 잡은 색을 다크에 그대로 뒤집어 쓰다 보니, 회색조 텍스트와 어두운 배경의 대비가 무너졌습니다.
Solution
ColorScheme을 라이트/다크 각각 따로 설계하고, 이벤트 유형별 강조색도 두 테마에서 각각 대비를 확인해 값을 나눴습니다. 문자 중계는 경기 내내 읽는 화면이라 대비가 곧 사용성입니다.
결과
- 경기 중 발생하는 4종 이벤트를 실시간 알림 타임라인으로 전달하는 중계 화면을 기획 · 디자인 · 구현까지 단독 수행
- 이벤트 유형별 색상 체계를 만들어 빠른 스크롤 중에도 경기 상황 구분 가능
- 로그인 · 시즌 일정 · 리더보드 · 순위표까지 6개 화면을 전부 라이트/다크로 대응
- 데이터 소스 교체를 고려해 수신 계층과 UI 계층을 분리 (Polling → WebSocket 확장 대비)
화면
