Article

Flutter로 포켓몬 도감 앱 만들기: GetX 상태 관리

2023. 3. 14.

프로젝트 개요

이 프로젝트는 Flutter와 GetX를 활용하여 개발한 포켓몬 도감 앱입니다. PokéAPI라는 무료 공개 API를 활용하여 실제 포켓몬 데이터를 제공합니다.

앱 특징

무료: 완전 무료로 제공되는 앱
실시간 데이터: PokéAPI를 통한 최신 포켓몬 데이터
모바일 최적화: iOS와 Android 모두 지원

개발 경험과 학습 포인트

PokéAPI 사용 경험

PokéAPI는 포켓몬 데이터를 제공하는 좋은 API이지만, 실무 적용 과정에서 몇 가지 어려움을 경험했습니다.

주요 이슈:

포켓몬 리스트 데이터에 한글 지원 부재
포켓몬 이미지가 모든 항목에서 제공되지 않음
API 응답 구조가 다양하여 데이터 통합이 복잡함

이러한 제약을 극복하기 위해 데이터 전처리와 폴백(fallback) 로직을 구현해야 했습니다.

기술 스택

사용 기술:

프레임워크: Flutter
상태 관리: GetX
HTTP 클라이언트: http 패키지
API: PokéAPI (공개 API)

GetX 패턴 경험

GetX를 사용하여 상태 관리, 라우팅, 의존성 주입을 통합적으로 처리했습니다. GetX의 간편함과 성능이 좋아서 빠른 프로토타입 개발에 적합했습니다.

GetX 장점:

간단한 문법
뛰어난 성능
라우팅 통합
의존성 주입 포함

향후 개선 계획

다음 버전에서는 BLoC 패턴으로 상태 관리를 리팩토링할 계획입니다.

BLoC 도입 이유:

비즈니스 로직과 UI의 완전한 분리
테스트 용이성 향상
확장성 개선
팀 프로젝트에서의 일관성

개발 기간

항목	예상 시간	실제 소요 시간
자료 수집	-	일부
UX/UI 디자인	-	일부
개발	-	대부분
총 개발기간	-	1일

빠른 개발 사이클로 MVP(Minimum Viable Product)를 완성했습니다.

GitHub 저장소

전체 소스 코드는 다음 저장소에서 확인할 수 있습니다:

Flutter Pokémon App - GitHub

주요 기능

1. 포켓몬 리스트 조회

전체 포켓몬 목록 표시
페이지네이션 지원
한글 이름 및 이미지 표시

2. 포켓몬 상세 정보

포켓몬 기본 정보 (이름, 번호, 타입)
능력치 표시
진화 체인 정보

3. 검색 기능

포켓몬 이름으로 검색
타입별 필터링

기술 구현 하이라이트

API 데이터 처리

// PokéAPI 통신 예제
final response = await http.get(
  Uri.parse('https://pokeapi.co/api/v2/pokemon/$pokemonId'),
);

GetX 상태 관리 구조

class PokemonController extends GetxController {
  final RxList<Pokemon> pokemonList = <Pokemon>[].obs;
  
  @override
  void onInit() {
    super.onInit();
    fetchPokemon();
  }
  
  void fetchPokemon() async {
    // 데이터 로드 로직
  }
}

배운 점과 결론

이 프로젝트를 통해:

실제 공개 API 활용 경험
GetX를 통한 효율적인 상태 관리
API 데이터 전처리 및 에러 처리
빠른 프로토타입 개발 방법론

을 배울 수 있었습니다.

마치며

이 프로젝트를 통해 다음을 경험했습니다:

빠른 프로토타입 개발: MVP를 1일 만에 완성하는 효율성
공개 API 활용: 실제 데이터 통합의 현실적 문제 해결
GetX의 강점: 간단한 문법으로 상태 관리 구현
확장 가능성: BLoC 패턴으로의 마이그레이션 경로 확보

Flutter와 GetX는 빠른 개발이 중요한 프로젝트에 탁월한 선택입니다. 추가로 BLoC 패턴을 도입하면 더욱 강력하고 테스트 가능한 구조로 개선할 수 있습니다.