졸업 전시 프로젝트 회고

프로젝트 개요

2023년 8월에 진행했던 졸업 전시 프로젝트로 축구 중계 스트리밍 웹 서비스를 개발했습니다.
 

졸업 전시 당시 작품 사진입니다..ㅎㅎ

 
기존의 스포츠 중계가 일방적인 정보 제공에 그쳤다면, 해당 프로젝트는 축구 이벤트 데이터와 객체 인식 기술을 활용해 시청자에게 더욱 몰입감 있고 상호작용이 가능한 중계를 제공하는 것이 핵심이었습니다.

특히 선수 위치, 경기 양상, 공격 및 수비 전술과 같은 다양한 정보들을 이벤트 데이터를 기반으로 시각화하여, 시청자가 경기를 더욱 직관적으로 이해하고 분석할 수 있도록 하는 데 중점을 두고 개발했습니다.

개발한 웹 애플리케이션의 주요 기능은 각 선수의 위치 및 경기 데이터를 추적하고, 이를 통해 패스 성공률 예측, 보로노이 다이어그램 등의 다양한 시각화를 상호적인 요소를 통해 제공하는 것이었습니다.
 
웹 애플리케이션은 Vue.js와 FastAPI를 기반으로 구축했습니다. 축구 이벤트 데이터로 Statsbomb에서 제공하는 오픈소스 데이터를 사용했고, 추가로 선수들의 영상 내 위치 데이터를 수집하기 위해 축구 선수 데이터셋을 학습한 YOLOv8 모델을 사용했습니다.
 

여러 중계 영상을 기반으로 애플리케이션을 테스트했었는데, 졸업 전시 기간 동안에는 관람객들의 관심을 끌기 위해 임팩트가 강력한 2018 월드컵 당시 우리나라 vs 독일 경기를 틀어놨었습니다.. ㅋㅋ

 

프로젝트 준비 과정

UI/UX 디자인

프로젝트 초기 단계에서 UI/UX 디자인 설계는 매우 중요하고 어려운 부분이었습니다... 축구 관련 데이터를 실시간 스트리밍과 함께 시각화해서 보여줘야 했기 때문에, 직관적인 디자인을 찾는 과정이 쉽지 않았습니다.
 

012

프로젝트 동안 바뀐 디자인 변천사입니다.

 
여러 시행착오를 거친 끝에 스트리밍 영상 위에 컴포넌트들을 오버레이 하는 방식으로 UI/UX를 구성했습니다. 사용자가 상호작용을 통해 선택적으로 정보를 확인할 수 있도록 구성하였고, 전체적으로 분석적인 느낌을 주면서도 사용성도 고려하여 설계했습니다.
개인적으로, 개발자 입장에서 디자인한 UI/UX 치고는 나름 최선의 결과물이 아니었나... 생각합니다...

영상 스트리밍

스트리밍 서비스를 개발하는 것에 있어서 무엇보다 중요했던 기능은 영상 스트리밍이었습니다.
 

스트리밍 기능을 위해 설계한 파이프라인 구조도입니다.

처음에는 Node.js를 이용해 서버에서 영상 파일을 클라이언트로 버퍼 방식으로 전송하는 방법을 사용했는데, 영상 파일 크기가 커질수록 자체 스트리밍 서버만으로는 감당하기 어려워졌습니다. 해당 문제를 해결하기 위해 HLS 스트리밍 방식으로 전환하여, AWS 기반의 스트리밍 인프라를 구축하였습니다.
 

데이터 프로세싱

축구 이벤트 데이터를 활용하여 중계 영상 위에 다양한 시각화를 구성하고자, 여러 데이터를 전처리하는 파이프라인을 설계했습니다.
 

선수 추적 데이터를 수집하는 파이프라인입니다.

프레임마다 카메라 앵글이 바뀌는 중계 영상을 사용하다 보니 이벤트 데이터에 기재되어 있는 경기 내 선수들의 좌표값을 사용하기 어려웠고, 결국 중계 영상을 기반으로 선수 추적 데이터를 수집하기로 했습니다. 스트리밍 되는 영상을 기반으로 미리 학습된 YOLOv8 모델을 사용하여 Object Tracking을 진행했고, 그 이후 Label Studio를 활용하여 Labeling까지 수행하여 선수 추적 데이터를 수집했습니다.
 
이렇게 수집한 선수 추적 데이터를 기반으로 중계 영상 위에 시각화를 구현했는데, 해당 과정도 미리 수행하도록 파이프라인을 구성했습니다.

보로노이 다이어그램을 중계 영상 위에 시각화하는 파이프라인입니다.

웹 애플리케이션

웹 애플리케이션은 Vue.js와 FastAPI를 기반으로 구축하였고, 가장 중점을 둔 부분은 영상 스트리밍 메타데이터의 활용과 적절한 API 호출을 통해 데이터를 가공하고 시각화하는 것이었습니다.
 
이를 위해 백엔드에서는 Python의 pandas와 scipy 라이브러리를 사용하여 데이터를 처리하는 로직을 구현하였으며, 웹 프론트엔드에서 HTML Canvas와 Chart.js를 활용해 시각화 기능을 구현했습니다. 영상 스트리밍과 동시에 데이터를 가공해 보여주는 기능을 구현하는 과정에서 여러 도전 과제가 있었지만, 최대한 문제가 없어 보이도록 작동하게 구현한 것 같습니다.
 

구현한 웹 애플리케이션에 대한 구조도입니다.

개인적인 성취 및 배운 점

개인적인 관심으로 시작해 졸업 전시 프로젝트까지

평소에 관심이 많았던 축구를 도메인으로 다루는 서비스를 개발했다는 것이 제일 성취감이 컸습니다. 좋아하는 것을 개발하며 졸업 전시 심사에서도 좋은 평가를 받아서 더욱 의미 있었던 것 같습니다.
 
처음에는 해외축구 경기를 보다가 같이 보고 있던 친구가 선수들을 잘 구분하지 못하고 계속 물어봐서, 중계 화면에 선수들의 이름을 띄워줄 수 있으면 어떨까 싶어서 시작한 프로젝트였습니다. 프로젝트를 진행하며 많은 어려움들이 있었지만 축구를 정말 좋아하기 때문에 계속 붙잡고 있을 수 있었던 것 같네요.
 
또한, 프로젝트를 진행하면서 관련 서비스들과 기술들을 조사해 보며 스포츠 데이터 관련 필드가 상당히 크다는 것을 알게 되었습니다. 대표적으로 비프로 11과 같은 축구 데이터 분석 서비스를 찾아보며 자체적으로 축구 경기장 전체를 촬영 가능한 카메라부터 개발한 것부터 시작한 게 대단하다고 느꼈고, 실제 스포츠 데이터 분석을 기반으로 서비스를 제공하기 위해 많은 기술들이 요구됨을 깨달았습니다.
 

축구 데이터 분석 업체인 Statsbomb이 매년 EPL 경기장에서 축구 데이터 분석 컨퍼런스를 개최하는 사실을 나중에 알게 되었는데, 축덕으로서 EPL 경기장에서 논문을 발표할 수 있다면 정말 낭만적일 것 같습니다.. ㅋㅋㅋㅋ

AWS 입문

해당 프로젝트를 통해 AWS 서비스를 본격적으로 학습해 볼 수 있었습니다. 제일 많이 활용하는 AWS S3부터 CDN 서비스인 AWS CloudFront 등 업계에서 많이 활용하는 서비스를 학습하고 직접 프로젝트에 적용해 볼 수 있어서 좋은 기회였다고 생각합니다.
 
그리고 프로젝트를 진행하면서 AWS 비용이 생각보다 많이 나간다는 사실도 알게 되었는데, 프로젝트를 진행하기 전에 미리 비용 계산을 하는 것이 매우 중요하다는 교훈을 얻었네요...

최적화의 중요성

데이터 처리 및 렌더링 최적화의 중요성도 알게 되었습니다.

영상에 맞춰 프레임 단위로 데이터를 가공해 시각화하는 기능을 구현했는데, 생각처럼 잘 되진 않았습니다. 영상 스트리밍과 시각화 결과물의 싱크가 잘 안 맞는 문제가 있었고, 해당 문제는 상당히 복합적이었습니다.
 
정리하자면, 다음과 같은 문제들이 발생했었습니다.

1. 안정적이지 못한 스트리밍 방식의 문제
2. 비동기 처리로 인한 데이터 동기화 문제
3. 초 단위로 여러 개의 Element 랜더링 시 속도가 느려지는 문제

모두 완벽하게 해결하진 못했지만 나름의 방법들을 시도해 보면서 최대한 사용자가 원활하게 사용할 수 있도록 구현했었습니다. 기회가 된다면 이때 겪은 문제들에 대해 어떻게 해결했었는지 추후에 글로 작성해 보겠습니다.
 

아쉬운 점 및 개선점

시간 관리 및 프로젝트 범위 설정

프로젝트에서 가장 아쉬웠던 부분은 시간 관리와 프로젝트 범위 설정이었습니다. 프로젝트 초기 단계에서 계획했던 기능이 지나치게 많았기 때문에, 실제로 모든 기능을 구현하는 데 예상보다 시간이 많이 소요되었는데요. 특히, 스트리밍과 데이터 처리 성능을 최적화하는 데 상당한 시간을 소요하면서, 일부 기능들을 충분히 개발하지 못한 부분이 아쉽게 느껴졌습니다...
 
다음 프로젝트는 철저히 계획하고 충분한 시간을 두고 순차적으로 진행해야겠다는 생각이 드네요.
 

실시간 서비스의 어려움

실시간 스트리밍 서비스를 지향하며 기능들을 구현하고자 했지만 부족한 기반 기술 및 데이터 처리의 성능 최적화 실패로 인해 많은 어려움을 겪었습니다.
 
중계 영상을 기반으로 Object Tracking을 수행하며 각 선수들의 위치를 추적하는 바운딩 박스를 배치했지만, 구현한 API의 성능이 사용자가 시청하는 스트리밍 영상 속도를 따라가기에는 무리가 있었습니다. 많은 양의 데이터를 처리하고 시각화하는 데 성능 병목 현상이 여러 차례 발생했으며, 네트워크 환경이 조금이라도 불안정해지는 순간 스트리밍과 데이터가 처리되는 속도가 안 맞게 되는 문제를 해결할 수 없었습니다.
 
어쩔 수 없이 전시 상황에는 미리 준비한 데이터를 기반으로 서비스를 제공하였는데, 기술적으로 문제를 해결한 것이 아니라 그저 안정적으로 보이게끔 눈속임한 것 같아서 아쉽게 느껴지기도 하네요...
 
그만큼 실시간 서비스의 어려움도 많이 느꼈고, 다음에는 시간을 좀 들이더라도 기술적인 과제를 해결하고 싶은 생각이 드네요.
 

사실 졸업 전시 프로젝트는 약 1년 동안 몰입해서 진행했었던 만큼 정리할 내용이나 회고할 내용들이 많아서 중구난방으로 작성하기도 했고, 아직 작성하지 못한 내용도 많은데 시간 날 때마다 아쉬운 부분들을 수정하거나 추가로 글을 작성해 보겠습니다..!
글 읽어주셔서 감사합니다 :)