Dandi

  1. Flutter로 시작하는 KBO 데이터 앱 프로젝트

0. 프로젝트 소개

데이터 분석과 AI를 공부하면서 분석 결과를 실제 사용자에게 보여줄 수 있는 형태가 필요하다고 느꼈다.
그 과정에서 모바일 앱은 좋은 선택지였고, 크로스 플랫폼 개발이 가능한 Flutter를 활용해 KBO 경기 데이터를 보여주는 앱 프로젝트를 시작하게 되었다.

이 글에서는 Flutter 설치부터 홈 화면 UI 구성, 팀 모델링, 구단 컬러 적용까지 프로젝트의 초기 과정을 정리한다.

※ KBO STATS 어플을 모작으로 참고하였다.

1. Flutter 개발 환경 구축

1.1 Flutter 설치

  • Flutter SDK 설치
    • 위 링크로 들어가면 Quick start랑 Custom setup 두 가지의 다운로드 방법이 있는데 편한 방법대로 받으면 된다. Install Flutter
    • 참고로 난 VS Code를 이용해서 Quick start 방식으로 진행했고, 해당 과정으로 진행하면 VS Code에 Flutter 환경 세팅 및 환경 변수까지 세팅해준다. (VS Code 짱👍)
  • flutter doctor로 환경 점검 flutter doctor 결과 이미지
    • 지금은 설치가 다 된 상탠데 처음엔 Visual Studio와 Android Studio가 깔려있지 않아 깔아주었다.
  • Windows + Android 기준으로 개발 환경 구성

설치 과정에서 Android Emulator 관련 에러가 나서 찾아보니 역시나 버전 미스. 항상 개발 환경 세팅할 땐 버전 맞추는 게 제일 큰 관건인 것 같다.

추가적으로 Flutter를 포함한 다른 환경들의 용량이 제법 커서 여유롭지 않다면 하드디스크를 이용하는 방법도 나름 괜찮은 듯 하다.

1.2 IDE 설정

  • Android Studio / VS Code
    • Emulator 사용을 위해 Android Studio 사용
  • Flutter, Dart 플러그인 설치
  • Android Emulator 생성

첫 기본 카운터 앱이 정상 실행되는 것을 확인했다.

2. GitHub 레포지토리 생성 및 관리

2.1 GitHub 레포지토리 생성

  • 프로젝트명 : baseball-data-app
  • Public Repository로 생성
  • 학습 + 포트폴리오 목적

2.2 로컬 프로젝트와 Git 연결

git init
git remote add origin <repository-url>
git push -u origin main

맨날 Fork만 사용하다가 CLI에 익숙해질 겸 사용하는데 역시 git은 공부를 해도해도 어렵다. 끙
첫 push 과정에서 README.md 파일 충돌이 한 번 났었는데 아직 충돌은 Fork를 사용하는 걸로.. ^^..

3. Flutter 프로젝트 구조 설계

Flutter 기본 구조에서 역할별로 폴더를 분리했다.

lib/
 ├─ data/          # 더미 데이터
 ├─ models/        # 데이터 모델
 ├─ screens/       # 화면 단위 위젯
 └─ widgets/       # 공용 UI 컴포넌트

초기부터 구조를 나눈 이유는 나중에 API 연동과 데이터 분석 확장을 염두에 두었기 때문이다. 현재 flutter/dart 입문이라 아직 정확한 구조는 추후 점진적으로 고쳐나가야 할 것 같다.

항상 프로젝트 구조 생각해두기가 목표

4. 홈 화면 UI 구성

4.1 오늘의 경기 리스트

제일 처음 만들기로 한 위젯은 오늘의 경기로 KBO STATS 어플에서도 가장 처음 나타나는 화면이다.
홈 화면에는 오늘 진행되는 KBO 경기 리스트를 카드 형태로 출력한다.

  • 홈 팀
  • 원정 팀
  • 경기 시간

4.2 GameCard 위젯

경기 정보를 표현하는 공용 컴포넌트로 GameCard 위젯을 분리했다.

GameCard(
  homeTeam: game['home'] as Team,
  awayTeam: game['away'] as Team,
  time: game['time'] as String,
);

Map 구조 사용 시 타입 캐스팅이 필요하다는 점도 함께 경험했다.

5. Team 모델 설계

5.1 Team 클래스 정의

각 구단의 정보를 하나의 모델로 관리하기 위해 Team 클래스를 정의했다.

class Team {
  final String name;
  final String logoPath;
  final LogoType logoType;
  final Color primaryColor;

  const Team({
    required this.name,
    required this.logoPath,
    required this.logoType,
    required this.primaryColor,
  });
}

로고 포맷이 다를 수도 있을 것 같아서 Type까지 받는 코드로 수정했다.

5.2 SVG 로고 적용

구단 로고는 해상도 이슈를 피하기 위해 SVG 포맷을 사용했다.

SvgPicture.assets(
  team.logoPath,
  width: 32,
  height: 32,
);

로고 이미지 적용

근데 왜 SSG만 저렇게 나오는 걸까..ㅠ

5.3 UI에 컬러 적용

구단 컬러를 텍스트 및 카드 UI에 적용해보았다. (Container 이용)

Widget _teamRow(Team team) {
  return Row(
    children: [
      Container(
        width: 12,
        height: 12,
        decoration: BoxDecoration(
          color: team.primaryColor,
          shape: BoxShape.circle,
        ),
      ),
      _teamLogo(team),
      const SizedBox(width: 8),
      Text(
        team.name,
        style: const TextStyle(fontWeight: FontWeight.bold),
      ),
    ],
  );
}

구단 색상 추가

추후 목표 : 구단 컬러 모델링 → 컬러 상수 분리

6. Flutter 애셋 관리 주의사항

Flutter에서 애셋을 추가/삭제할 경우 Hot Reload만으로는 반영되지 않았다.
아래와 같은 과정을 거치면 캐시 문제가 해결된다.

flutter clean
flutter pub get
flutter run

7. 현재까지 구현 결과

  • Flutter 앱 정상 실행
  • 오늘의 KBO 경기 카드 UI 출력
  • 팀 로고 및 구단 컬러 적용

초기 목표였던 “데이터를 보여주는 앱의 기반” 완성

8. 다음 단계 계획

  • Game 모델 분리
  • 실제 KBO 경기 API 연동
  • 경기/선수 데이터 분석
  • 데이터 시각화 기능 추가

🔗 GitHub Repository

마무리

Flutter 앱 개발을 통해 데이터 분석 결과를 서비스 형태로 전달하는 방법을 공부 중이다.

다음 글에서는 실제 경기 데이터를 연동하고 분석 요소를 추가하는 과정을 정리할 예정이다.

Leave a comment

You may also enjoy