카드팡! - 첫 개인 프로젝트 회고 (1)

카드팡!

처음으로 개인 프로젝트를 출시하게 되었습니다. 백엔드 엔지니어로 일하고 있지만 플러터에 관심이 생겨 공부를 하다가 프로젝트 출시까지 결심했습니다. 디자이너 여자친구와 함께 우리만의 제품을 만든다는 설렘을 느끼면서 개발을 한다는 건 정말로 행복하고 보람찬 일입니다. 약 3개월간의 "카드팡!" 개발기를 독자 여러분과 함께 공유드리고자 합니다.

 

카드팡! 소개

카드팡!은 플러터로 개발한 메모리 카드게임입니다. 심플한 게임 UI와 아기자기한 카드 디자인을 자랑하고 싶습니다. 현재는 안드로이드 기기에서만 플레이하실 수 있으나, 추후에 IOS로도 출시해볼 예정입니다.

카드 종류에는 색깔 타입, 숫자 타입, 이모지 타입이 있습니다. 레벨이 높아짐에 따라 더 기억하기 어려운 패턴으로 카드가 배치됩니다. 도전욕구가 불타오르시죠? 모바일 게이머 여러분의 많은 관심 부탁드립니다! :D 

• 카드팡! 구글 플레이 URL
• 개발자 - 김건우
• 디자이너 - 박서영

카드팡! cardpang! - Google Play 앱

주요 프레임워크: GetX, Flame engine

 

백엔드 엔지니어의 플러터 적응하기

저는 지금 백엔드 엔지니어로 활동하고 있습니다. 상대적으로 프론트엔드 분야에 대해서는 모르는 부분이 많습니다. 어쩌면 문외한이었다고 해야할지도 모르겠네요. 플러터에 대해서도 우연히 알게 되었는데요. 크로스 플랫폼에 대해 검색을 하다 안드로이드, IOS, 심지어 웹 프로젝트까지 동시에 빌드를 해주는 프레임워크가 있다는 사실을 알게 되었습니다. 바로 플러터지요!

 

플러터를 공부하면서 이해하기 어려웠던 컨셉들이 있었는데요. 그 중 세 가지를 소개해드리려고 합니다.

 

1. 모든 것은 위젯이다.

플러터의 UI를 구성하고 있는 모든 것은 위젯입니다. 상위 위젯에서부터 시작하여 세세한 디자인을 구성하는 하위 위젯까지 모두 위젯을 통하여 디자인이 가능합니다. UI 디자인에서 사용되는 이미지부터 패딩, 마진까지 플러터에서는 모두 위젯인 것이죠. 처음에는 이러한 구조가 왜 필요할까 의문이 들었는데 플러터의 이런 위젯 구조를 HTML과 비교해보니 이해가 쉬워졌습니다. HTML도 DOM 트리 구조로 사용자에게 화면을 보여주는데, 플러터도 이런 위젯 트리를 이용해서 화면을 그리고 있었습니다. 

 

2. 뷰 디자인

처음에 플러터를 접하고 가장 어려웠던 부분은 뷰를 디자인하는 것이었습니다. 이 어려움은 플러터가 기본적으로 제공하는 상위 위젯인 MaterialApp, Scaffold와 같은 위젯을 모르고 있었기 때문입니다. Scaffold에서는 AppBar, NavigationBar 등을 손쉽게 만들 수 있도록 도와주는 기능이 있습니다. 이런 기능이 있는지 몰랐던 저는 수동으로 넓이, 높이 값등을 계산하면서 AppBar를 그리고 있었죠... 바퀴를 다시 만드는 일은 꼭 없어야 합니다!

GetX 프레임워크의 상위 위젯인 GetMaterialApp

Scaffold를 이용하여 body부분을 지정

 

3. 상태관리

백엔드에서는 상태가 변화면 영속성 레이어에 CRUD 작업을 해주게 됩니다. 프론트엔드에서는 어떨까요? 변화한 상태 값을 화면에 다시 그려야 합니다. 이를 위해서 플러터는 계속해서 상태 값이 변화했는지 체크하고 있습니다. 마치 JPA 더티체킹과 비슷한 방식으로 말이죠! 또한 플러터는 상태가 있는 위젯과 없는 위젯을 구분하고 있습니다. 그러나 이러한 상태가 있는 위젯들을 관리하려면 코드가 매우 길어지고 지져분해지는 단점이 있고, BLOC 패턴같은 것들을 사용하려면 러닝커브가 높죠. 이런 부분들을 해결해 준 고마운 프레임워크가 있는데, 바로 GetX입니다. GetX을 사용하면 StatefulWidget을 사용하지 않고 상태를 체크하고 뷰를 다시 그릴 수 있습니다.

 

GetXController에서 상태를 체크할 변수들에 .obs를 붙여서 선언!

GetXController에서 감시하고 있는 변수를 사용하는 Widget에서는 Obx로 감싸주기!

GetX는 손쉽게 상태관리는 제공하는데요. GetXController에서 상태로 관리할 변수들을 선언해주고, UI를 담당하고 있는 Widget에서는 변수들을 GetXController를 통해서 접근하고, Obx로 위젯을 묶어주기만 하면 됩니다! 복잡한 상태관리 코드없이 코드가 깔끔해진 모습입니다.

 

 

다음 회고 포스팅에서는 게임을 구현하기 위한 Flame Engine에 대해 소개드리겠습니다!