Choe's In coding...

GDG in songdo
플러터 사이드 팀프로젝트가 끝나고

지금까지 약 한달 가량

혼자 프로젝트를 진행했다.

팀프로젝트에서는 디자이너 개발자가 각각 포지션에 맞는 역할에 집중해서 수행하면됬는데

혼자 하다보니.. 많은 어려움이 있었다.

UI 쪽으로 많은 신경을 쓰는 난.. 디자인 작업에 많은 시간을 썻던것같다.

사실 처음엔 10정도의 퀄리티를 갖는 앱을 구상했지만 내 욕심에 점점 기능은 추가되었고

구현하는 과정에 있어 많은 시간이 더 소요됐다.

사실 앱만 보면 별 기능 없다...

어떤 사람에겐 일주일이면 뚝딱 만들 앱이지만

초보인 나에겐 한달정도 걸린것이다.

더 많은 기능을 추가하고싶었는데

앱 출시를 더 미룰 수 없기에 그만 개발하고 출시했다.

앱 출시 만큼 중요한 포트폴리오는 없다고 생각했기 때문이다.

개인적으로 아주 만족스러운 앱이다.

첫 배포 앱인데 디자인적이나 기능적이나 현재 나에게 딱 맞는 수준인것 같다.

다음 앱은 뭘 만들면 좋을지 고민이 되면서

이제는 취업을 하여 빡시게 배워보고싶은 마음도 있다.

https://apps.apple.com/kr/app/task-us/id6445977626

https://play.google.com/store/apps/details?id=com.taskus.taskus&pli=1 

개인 프로젝트를 새롭게 시작하고

구현중에 있다.

현재 UI는 다 그렸는데 이제 DB 작업만 남았다..

앱 개발자를 준비하면 프론트, 백 둘다 빡시게 준비해야되는건가,,,

어렵다,,

오늘은 오늘 구현중 알게된 신박한 기능하나 소개하려고한다.

나는 보통 GetX를 이용하여 상태관리를 하고 있는데

수 많은 Get의 기능중

snackbar 이다.

간단한 사용법은

    Get.snackbar("저장 실패", "빈칸 없이 채워주세요",
          colorText: Mycolor().snackbarText,
          snackPosition: SnackPosition.TOP,
          backgroundColor: Mycolor().snackbarBg,
          icon: const Icon(Icons.warning_amber));

이며 설명이 필요한 부분은 따로 없어보인다.

이렇게까지 구현하고 테스트 해봤는데

사진과 같이 버튼을 막누르면 그 횟수만큼 계속해서 창이 나온다는점이다.

이를 해결하기 위해선

isSnackbarOpen를 써주면 된다.

 if (Get.isSnackbarOpen) {
      } else {
        Get.snackbar("저장 실패", "빈칸 없이 채워주세요",
            colorText: Mycolor().snackbarText,
            snackPosition: SnackPosition.TOP,
            backgroundColor: Mycolor().snackbarBg,
            icon: const Icon(Icons.warning_amber));
      }

코드와 같이 If문을 한번 걸어 현재 snackbar가 떠있는 상황인지 확인후 기능을 수행하도록

바꿔주면 아래와같이 해결된 결과를 확인할 수 있다.

이번 GDG 플러터 프로젝트에서

우리팀은 상태관리를 GetX로 진행하기로 했다.

그동안 거의 GetX만 사용하던 나에겐 그나마 위로가 되었다.

GetX를 초심부터 배우자는 마음으로 이번시간에는

플러터 프로젝트를 만드면 나오는 기본 카운터를 GetX으로 바꾸어 보도록하겠다.

https://pub.dev/packages/get/install

우선 해당 패키지를 설치해주자

처음엔 pubspec.yaml에 직접 작성하여 설치했는데 이제는 터미널에 치고 끝낸다.

먼저 count에 필요한 controller를 만들어주겠다.

Rx는 UI에 그려지며 실시간으로 데이터가 변화되오니 지속적으로 관찰이 필요하다는 말이다.

따라서 num이란 Int형을 0으로 초기화 해두며 동시에 .obs(상태변화를 감지하라)를 해주면 된다.

이 밖에도 모든 자료형이 사용될수 있다.

이제 메인페이지에서 increaseNum 함수를 통해 num을 1씩 더해줄 것이다.

추가로 Rx로 지정된 변수들은

num = 3;

이 아닌

num(3); 과 같이 대입시켜줘야한다.

메인페이지를 수정해보자

기본적으로 GetX는 StatefulWidget을 지양하고 있기에 최대한 사용을 자제해야한다.

해당 파일을 지워 Stateless로 만들어주자

다음으로 빨간줄이 뜨는 텍스트 부분과 onPressed 부분을 일단 지워주자

이제 메인페이지에 아까 만든 컨트롤러를 등록시켜줘야한다.

맨 아래와 같이 컨트롤러를 등록시켜주면 된다.

다음은 숫자를 그려보자

등록한 controller의 num의 값을 문자열로 변환하는 코드이다.

버튼을 눌렀을때 실행되는 함수는 아래와 같다.

마지막으로 제일중요한 상태관찰이다.

위와 같이 하고 버튼을 눌러도 변화가 없을것이다.

변화가 필요한 위젯을 ObX(()=> )로 감싸주면 끝이다.

이 안에 데이터가 변경되면 UI를 다시그려주게된다.

https://github.com/tngudzzz/flutter_demo_counter_getx

모바일 앱은 사용자 한손 한손가락으로 모든 정보를 접할 수 있게 해야한다고 생각한다.

여럿 앱을 사용하다 보면 UI/UX가 너무 복잡하고 난잡하게 되어있는 경우가 있다.

방대한 양의 데이터를 알맞게 분류하고

이를 화면에 어떻게 보여질 것이며

사용자가 쉽게 앱을 조작할 수 있어야 한다.

요즘 금융 앱을 보면 예전과 다르게

비교적 간단하게 디자인되어 리뉴얼 되고있다.

토스 주식, 카카오 주식 어플과 키움,한국투자,신한투자 어플을 비교해보면 많이 다를것이다.

비교적 낮은 연령의 이용자가 많은 토스, 카카오는

심플하면서 직관적인 UX/UI를 택한 반면

연령대가 좀 있는 이용자가 많은

키움, 한국투자, 신한증권등 보면

직관적이지 않고 조금 복잡한 UI/UX를 가지고있다.

이러한 증권사 어플들도 최근 보면 토스, 카카오를 따라가는 듯하다.

해당 디자인 출처 -  https://dribbble.com/shots/19858341-Financial-Mobile-IOS-App

좌측이 원본이고 우측이 내가 한것이다.

최대한 비슷하게 구현해봤다.

우선 목표는 1주일에 3개이다.

점차 늘려가거나 아니면 구현 퀄리티를 높일 계획이다.

지금은 단순하게 레이아웃만을 따라한것이다.

어느새 눈이 오는 계절이 되어버렸다.

눈오는날엔 움직이기 너무 귀찮지만

창밖으로 카페에 앉아 눈내리는 걸 보면 정말 느낌있다.

프로젝트를 조금씩 완성시키고 있지만..

하나의 산을 넘을때 시간이 너무 들고 바로 다음 산을 넘어가야하나...

이렇게 비효율적으로 시간을 쓰는것보단 다시 기초를 다지자라는 생각에

Dart, Flutter 강의를 찾았고 우연히

노마드코드의 무료강의를 보았다.

인터넷 유튜브에서 여럿 강의를 보면서 공부했지만

개인적으론 노마드코드 강의가 최고인듯하다.

영어로 설명하여 자막을 보며 들어야한다는 장점아닌 단점이 있지만

내용이 너무 알차고 설명을 잘해준다.

이번주 토요일부터 GDG송도에서 하는 플러터 사이드프로젝트를 시작하는데

앞서 기초를 다지기에 너무 좋은 강의였다.

추후 유료 강의도 들어볼 예정이다.

Dart, Flutter를 시작하는 사람에게 꼭 추천하고 싶다.

토이 프로젝트를 시작한지 한달이 좀 넘었다.

라이버리의 버프를 받으며 이것저것 붙혀가며 앱을 구현하고 있지만

여럿 라이브러리를 적용해보고 또 나에게 맞게 코드를 커스텀 해보기도 하며

점점 완성시키고 있다.

한 70%? 정도 구현 됐다고 생각한다.

내년 2월까지는 꼭 앱 스토어에 출시까지 해보고싶다.

더불어 12월 중순부터는 GDG 송도 플러터 사이드프로젝트에 참여하게 되었다.
혼자 프로젝트를 진행할떄 정말 답답했는데 정말 잘됐다.

큰 성장이 기대된다.