[지난 6개월간의 Flutter 앱 개발 회고] Chrip_aid

지난 6개월동안, 연구실 선배들이 남겨두고 간 앱 프로젝트를 리팩토링하였다. Flutter는 이전에 개발해본 경험이 아예 없었던 터라, 처음에 굉장히 막막했던 기억이 있다.

이 프로젝트는 거래의 투명성을 강조한 보육원 기부 플랫폼이다.

 

여름방학 때 교수님께서는 기존 코드를 먼저 분석해보라 하셨지만, 아는 게 있어야 머리에 들어오지. Flutter를 하기 전에 기본적으로 Dart 언어도 몰랐기 때문에 기본적인 학습이 필요했다.

 

심지어 이 프로젝트는 MVVM 디자인패턴으로 이루어져 있어, 디자인패턴 또한 학습을 해야했다.

 

프론트엔드 개발만 했었고, 그것도 React만 사용했었기에 디자인 패턴을 왜 사용해야하는지, 그리고 어떻게 사용하는 건지도 몰랐다.

말 그대로 이 프로젝트는 개판이었다. 인수인계서도 없고, 해당 프로젝트에 대한 어떠한 문서도 존재하지 않았다.

코드 중에는 TODO 로만 할 일을 표시해둔 부분도 많았고, 도대체 어디서부터 어떻게 진행해야할지 감이 안잡혔다.

 

2주만에 Dart + 플러터의 기본 문법을 익히고 프로젝트 코드를 pull 받아 로컬에서 작업을 시작했다.

주어진 추가 기능은 4가지였다.

• 관리자 기능 (유저, 게시글에 대한 관리)
• 채팅
• 결제 시 안내문구
• 신고 기능

이 기능을 각각 어떤 페이지에 넣어야 할지 기획하는 데도 시간이 걸렸다.

학기 중에 학교 수업과 병행하며 진행하느라 진도가 빠르지 못한 것도 답답하기만 했다.

그리고 무엇보다 Flutter의 코드 구조와 작성 방식이 너무 낯선 탓에, 적응하고 코드를 이해하기 어려웠다.

그래도 어찌저찌 코드를 작성하고, 수정해보고, MVVM 모델에 대해서 공부하며 repository, model, service파일에 어떤 형식이 위치하는건지 알게 되었다. (백엔드를 공부했다면 진작 알고 있었을 것이다.)

그리고 해당 MVVM 형식에 맞추어, 나머지 추가적인 기능들을 구현하였고, 사실상 12월 말에 종강하고 난 후로부터 본격적으로 속도가 붙었다.

 

 

이제 개발을 거의 다 마무리하여 교수님의 오케이를 받은 상태이고, 추가적인 짜잘한 버그나 디자인만 수정하면 되는 상태이다. 사실상 거의 끝났다고 생각하면 좋을 거 같다.

 

우선 내가 맡은 부분은 채팅, 관리자페이지다.

채팅 기능은 socket을 사용한 양방향 통신 기능이다.

백엔드 측에서 socket에 대한 서버를 작성해주면, 해당 서버에 대해 프론트에서 이벤트를 요청하게 된다.

flutter에서는 socket_io_client라는 라이브러리를 사용하여 개발하였고, 소켓은 기본적으로 구현할 때 신경써야 할 것이 많은 복잡한 기능이다.

구현 중 발생한 문제들은 아래와 같다.

• socket_io 초기화 이전에 모든 이벤트가 등록되는 문제
• Socket_io의 중복연결으로 인한 disconnect
• socket_io에 데이터를 보낼 때 전송되지 않는 문제
• socket으로부터 응답데이터를 받아오지 못하는 문제

우선 socket_io 초기화 이전에 모든 이벤트가 등록되는 문제는 비동기와 동기 코드를 통해 socket이 초기화되기까지 대기한 후 이벤트를 등록하도록 구현했다. Async/ await 을 사용한 방법이 먹히지 않아 complier를 사용했다.

 

socket_io의 중복연결은 소켓을 사용하는 페이지를 벗어나면 자동으로 연결이 끊어져야하는데, 이 부분을 작성하지 않아서 발생했다. 따라서 해당 페이지를 벗어날때마다 소켓의 disconnect()를 호출하도록 구현하였다.

socket_io에 데이터를 보낼 때 전송되지 않는 문제는 프론트측에서 보낸 데이터의 형식과 백엔드 측에서 받는 데이터의 형식이 맞지 않아 발생했다. 나는 jsonEncode()를 사용하여 데이터를 가공하여 전송하여 해결했다.

socket으로부터 응답 데이터를 받지 못하는 문제는 정말 어이없게도 roomId를 room_id로 고쳐서 해결했다.

관리자 페이지는 게시글 관리 페이지, 게정 관리 페이지, 신고 관리 페이지로 나눠지는데, 각 페이지별로 MVVM 모델을 적용하느라 꽤 애를 먹었다. 또한 상태 관리를 위한 riverpod을 적용하는 과정에서 애를 먹었다.

아직까지 notifier와 riverpod은 완벽히 적응하기 못했기에, 추후의 프로젝트에 한해서 다시 사용해보고자 한다.

 

 

한가지 더 느낀 점이라면 ChatGPT에 대한 생각이다.

AI 툴을 잘 활용하는 것이 중요하다고 생각했기에 AI 툴을 사용하는 것에 거리낌이 없었다.

그렇기에 잘 모르는 코드를 좀 더 공격적으로 GPT를 사용해 수정하곤 했다. 근데 그러한 행동의 부작용이 이번 프로젝트를 하며 얼마나 큰 재앙이었는지를 깨닫게 되었다.

 

GPT에 프로젝트의 수많은 코드와 파일들을 담지 못한다. 그리고 GPT는 우리의 의도를 100% 잘 이해한다고 확신할 수 없다.

따라서 간단한 특정 부분을 구현해달라고 하는 것에는 문제가 없지만 그 코드들의 위치와 구현 의도를 명확히 해야하겠다는 생각을 한다.

어떻게 할 지 모르는 상태에서 GPT의 도움을 받는다면 분명 본인이 이 코드가 무슨 코드인지 모를 것이고, 나중에 수정하기 더 어려워질뿐만아니라 Git에 Merge하는 과정에서도 이 코드를 살려야하는지 아무것도 모르는 혼돈의 상황이 올 것이다.

 

개발 공부를 하는 사람들에게 제발 GPT를 신중히 사용하라고 권하고 싶다. GPT를 본인의 실력이 증진될 수 있도록 잘 활용하고 있는지, 혹은 그냥 제출만을 위해 전적으로 맡겨버리는건지.

후자에 해당한다면 그 코드를 다시는 쳐다보지 않게 될 것이다.

정리하자면 이번 프로젝트를 통해 배운 것은 크게 6가지가 있는 거 같다.

 

MVVM 및 디자인 패턴의 이해, 더 나아가 백엔드 로직에 대한 이해
socket을 사용한 채팅 동작 원리
Flutter가 왜 개발하기 쉽게 만들어진 언어라고 하는지
인수인계의 중요성 : 코드 작성 외의 문서화 작업
유지보수하기 쉬운, 클린 코드에 대한 고민
GPT의 위험성