본문으로 건너뛰기
KEEPJOING

2024 ICONICTHON

동구기 — 대학스포츠 커뮤니티 앱

결과 요약

해커톤 이틀 동안 팀이 캘린더·AI 하이라이트 요약·선수 정보·팬 커뮤니티를 갖춘 앱을 구성해 발표했습니다.

2024 ICONICTHON에서 풀카운트(FullCount) 팀으로 만든 대학스포츠 커뮤니티 앱입니다. 저는 React·TypeScript로 사용자 화면을 개발했습니다.

동구기 홈 화면 UI 디자인. 날짜별 경기 일정 카드, 경기 하이라이트 목록, AI가 요약한 기사 화면, 경기 결과 화면이 나란히 놓여 있다.
발표 자료의 홈 화면 UI 디자인 — 날짜별 경기 일정과 AI 하이라이트 요약
발표 자료의 홈 화면 UI 디자인 — 날짜별 경기 일정과 AI 하이라이트 요약
역할
프론트엔드 앱 개발
기간
2024.11.14 – 15
팀
2024 ICONICTHON 6팀 풀카운트(FullCount)
사용 기술
React, TypeScript
팀 기술
Flask, MongoDB, PyTorch

문제

학교가 대학스포츠의 경기 일정과 선수 정보를 제공하고 있었지만, 접근성이 낮고 정보가 정확하지 않아 학생들이 관심을 갖기 어려웠습니다. 팀은 온라인의 정보를 오프라인 응원 참여로 이어 주는 연결고리를 만들고자 했습니다.

핵심 기여와 선택

6팀 풀카운트의 일원으로 참가해, 제한된 시간 안에 팀원들과 아이디어를 구체화하고 역할을 나누었습니다. 저는 React와 TypeScript로 사용자 화면을 개발했고, 팀은 이 화면을 Flask 백엔드, MongoDB, PyTorch 기반 AI 서버와 연결했습니다.

  • AI가 요약한 하이라이트에서 원문 기사로 바로 이동하는 흐름을 기획했습니다.
  • 발표자료에 주요 화면과 시스템 구조를 정리했습니다.
동구기 캘린더 UI 디자인. 월간 달력에 종목별 경기가 색으로 표시되고, 경기 카드의 추가 버튼으로 내 캘린더에 경기를 담는 방법이 설명되어 있다.
내 캘린더 — 보고 싶은 경기를 모아 두는 화면
내 캘린더 — 보고 싶은 경기를 모아 두는 화면
동구기 선수 정보 UI 디자인. 종목별 순위표 화면 세 개, 검색 화면, 선수 개인 기록 화면이 순서대로 놓여 있다.
종목별 순위와 선수 정보 화면
종목별 순위와 선수 정보 화면

검증된 결과

팀은 다음 네 가지를 핵심 기능으로 구성해 발표했습니다.

  1. 내 캘린더 — 보고 싶은 경기를 모아 두는 개인 일정
  2. AI 하이라이트 요약 — 경기 기사를 수집해 AI가 하이라이트를 요약하고, 원문 기사로 연결
  3. 선수 정보 조회 — 종목별 순위와 선수 기록
  4. 팬 커뮤니티

위 이미지는 발표 자료에 담긴 UI 디자인입니다.

배운 점

프론트엔드와 백엔드, 데이터베이스와 AI 서버를 연결하는 팀 개발에서 담당 범위를 명확히 이해하고 결과물을 맞춰 가는 협업의 중요성을 배웠습니다. AI 결과를 화면으로 전달하며, 모델의 성능뿐 아니라 그 결과가 사용자에게 어떻게 쓰일지를 함께 고민하게 되었습니다.