K리그 골 스토리 (KLEAGUE GOAL STORY)
작품 설명
K리그 경기 데이터(198경기 · 약 28만 이벤트)와 FM24 선수 능력치를 기반으로 두 팀이 맞붙었을 때 예상되는 전술 배치, 공격 루트, 슈팅 구역, 예상 스코어, 득점자까지 AI로 예측하고 시각화하는 전술 분석 서비스입니다. 단순 승패 예측이 아닌 "어떤 선수가 어떤 루트로 골을 넣을지"까지 예측하고, 그 근거를 공격 패턴·슈팅 구역·선수 능력치로 설명함으로써 코칭스태프가 실제 전술 수립에 활용할 수 있는 구체적 해답을 제공하는 것을 목표로 했습니다.
기획 의도
기존 K리그 데이터 활용은 '점유율 60%인데 왜 졌지?'라는 질문에 '슈팅이 적었다' 수준의 1차원적 답변에 머물러 있었습니다. 28만 건에 달하는 이벤트 로그가 팬에게는 해석 도구가 없는 암호문이고, 예측은 과거 전적에 의존하는 정적인 형태에 그쳐 동적인 전술 변수를 반영하지 못한다는 문제의식에서 출발했습니다. 이 프로젝트에서는 'Prediction → Reasoning → Actionable'이라는 흐름의 XAI(설명 가능한 AI) 기반 전술 스토리텔링을 통해, 코칭스태프에게는 전술 근거를, 팬에게는 관전 포인트를 제공하는 서비스를 만들고자 했습니다.
핵심 기능
경기 예측 (Predict)
∙
K리그 1·2부 모든 팀 중 두 팀을 선택하면 승/무/패 확률, 예상 스코어, 득점자까지 AI가 예측
∙
예측 결과를 단순 수치가 아니라 '예상 포메이션 → 공격 루트 → 슈팅 구역 → 득점자' 흐름으로 시각화
∙
각 팀 시점의 전술 조언(상대 약점 공략 포인트)을 함께 제공
기존 경기 분석 (Match Analysis)
∙
실제로 진행된 K리그 경기를 선택하면 해당 경기의 실제 포메이션·공격 패턴·슈팅 데이터 기반 히트맵 제공
∙
AI 예측 결과와 실제 결과를 비교해 모델의 적중도와 한계를 함께 보여주는 화면 구성
전술 시각화 4종 탭 UI
∙
전술 배치: 양 팀 포메이션을 105m × 68m FIFA 공식 규격 좌표계 위에 시각화
∙
공격 루트: 상위 3개 공격 패턴(역습/측면/중앙 빌드업 등)의 경로와 위협도 표시
∙
슈팅 구역: 6개 구역별 슈팅/득점 통계 히트맵
∙
득점자 예측: FM 스탯과 포지션 가중치를 결합한 예상 득점자 리스트
반응형 UI · 모바일 탭 전환
∙
데스크톱/태블릿/모바일 3-tier 브레이크포인트 대응
∙
모바일에서는 양 팀 정보를 한 화면에 욱여넣지 않고 탭으로 전환하도록 별도 UX 설계
AI 모델 설계
모델 1 — 공격 패턴 분류 (K-means)
∙
슈팅으로 이어진 약 2,700개 시퀀스(슈팅 직전 10~15개 액션)를 비지도 학습으로 6개 패턴(역습/좌·우 측면/중앙 빌드업/개인 돌파/세트피스)으로 자동 분류
∙
피처: 시퀀스 소요 시간, 패스 횟수, 평균 Y좌표, Y좌표 분산, 전진 속도, 크로스 포함 여부, 드리블 횟수, 슛 위치 구역
모델 2 — 팀 프로파일링
∙
공격 프로파일: 패턴별 비율, 경기당 평균 득점, 구역별 슈팅 분포
∙
수비 프로파일: 패턴별 실점 비율, 취약 구역 분포 — 상대팀 약점 공략 근거로 활용
모델 3 — 매칭 예측
∙
승/무/패 확률은 몬테카를로 시뮬레이션, 스코어 분포는 푸아송 분포 기반으로 산출
∙
득점자 예측은 FM 능력치(finishing/composure/off_the_ball/heading 등) + 포지션 가중치 + 공격 패턴 보정의 3중 가중 모델로 구현
맡은 역할
총 4명(기획/총괄 1명 · 백엔드 2명 · 프론트엔드 1명)으로 구성된 팀에서 단독 프론트엔드 개발자로 참여했습니다. Next.js 15 App Router 기반 화면 구조 설계, Zustand·TanStack Query를 활용한 상태/캐싱 레이어, Tailwind CSS 기반 디자인 시스템(K리그 공식 컬러 팔레트 적용), 그리고 105m × 68m 좌표계를 다양한 디바이스 비율에 일관되게 매핑하는 포메이션·공격 루트·히트맵 시각화 컴포넌트를 처음부터 끝까지 직접 구현했습니다. 또한 백엔드 API 응답 구조(formations / attack_routes / shot_zones / prediction / tactics_suggestion)를 기획·총괄과 함께 정의하고 백엔드 두 분과 합을 맞춰 가며, 모델 출력이 화면에서 어떤 스토리로 풀려야 하는지를 프론트 관점에서 역제안하는 역할까지 함께 수행했습니다.
배운 점
스포츠 데이터처럼 도메인 지식이 강하게 요구되는 영역에서, 단순히 '예측 정확도'를 높이는 것보다 '예측의 근거를 사용자가 이해할 수 있게 풀어주는 것'이 훨씬 더 큰 가치를 만든다는 것을 체감했습니다. 같은 62% 승리 확률이라도 '우측 윙어 돌파율 > 상대 좌측 풀백 태클율'이라는 근거가 붙으면 코칭스태프에게는 전술 자료, 팬에게는 관전 포인트가 되는 경험을 직접 설계해볼 수 있었습니다. 프론트엔드 측면에서는 105m × 68m 좌표계를 다양한 디바이스 비율의 화면에 일관되게 매핑하는 작업, 양 팀 정보를 탭/사이드바/오버레이 등 디바이스 폭에 따라 전혀 다른 레이아웃으로 분기시키는 작업을 통해 '반응형 = 단순히 폭 줄이기'가 아니라 '디바이스별 사용 맥락을 다시 설계하는 일'이라는 관점을 갖게 되었습니다.
