때는 바야흐로 2024년 7월 19일
노마드코더에서 진행했던 플러터 스터디를 마치고 어떻게 써먹어볼까 고민하던 와중, 연구실에서 진행하고 있는 프로젝트에서 전기차 충전 데이터를 수집, 저장, 조회, 관리 등이 필요한 상황에서 문득 아이디어 하나가 떠올랐다. "플러터로 만들어볼까?" 그 간단한 생각에서 출발해 약 한 달간 개발을 진행했다.
 |  |
|---|---|
| 노마드코더 플러터 10주 스터디 | 플러터 10주 스터디 후기 |
외로운 1인 개발기
직무 담당자 관련 기술스택 기획 나 대충 그때그때 추가하기디자인 나 Figma, Excaildraw 개발 나 Python, JS, Dart, Flutter 서버 나 FastAPI, 연구실 서버재원 비용조달(식량) 나 연구실 인건비 기능검수 나 열심히 살펴보기 + unittest 작가의 보유 기술 스택
솔직히 개발 프로젝트를 1인 프로젝트로만 진행해봤던 나는 오히려 잘됐다는 마음으로 호기롭게 개발을 시작했다.
System Overview
시스템을 기획할 당시 뭐 개발에 대한 전문적인 지식은 없으니 몇 가지 고려할 점을 염두에 두고 시스템을 구성해봤다.
| 순번 | 고려사항 | 해결 | 관련 기술스택 |
|---|---|---|---|
| 1 | 개발 난이도 | 익숙한 프로그래밍 언어 및 툴 사용 | Python, Flutter |
| 2 | DB와 웹 서버 미들웨어(?) | 지정 IP, 역할 기반 접근 제어 사용 | Firebase, FastAPI |
| 3 | 웹 서버 구축 및 호스팅 | 로컬 환경에서 구동할 것 | Flutter Web build |
| 4 | DB 서버 구축 | 관리 난이도가 쉬우며 성능 고려 | SQLite |
가장 쉽게 구현할 방법을 찾은 결과 위와 같은 시스템을 구상했다. 물론, 처음과는 많이 달라지긴 했다.
Web Server: Flutter, Firebase
Firebase는 참 Web Server라고 두기에는 애매하긴 했지만 일단 편의상 관리 역할이 이쪽에 가까워서 여기로 분류했다. 일단 NodeJS 기반으로 웹사이트를 만들기도 해봤지만, Flutter로 웹을 구현하는 것은 신경쓸것도 훨씬 적도 무엇보다 적은 코드로 더 그럴싸한 결과물이 나오기에 더 좋다.
페이지 구성
순 번 페이지 내 용 사용자 권한 1 온보딩 스크린 웹 페이지 소개 및 요약 로그인하지 않은 유저 2 회원 가입 및 로그인 플랫폼 회원 가입 및 로그인 수행 로그인하지 않은 유저 3 홈 스크린 서버 콘솔 역할 및 DB 현황 확인 로그인한 유저(admin, user, USER) 4 데이터 다운로드 스크린 데이터 다운로드 요청 및 다운로드 관리자 및 정회원(admin, USER) 5 프로필 스크린 로그인한 사용자의 정보 변경 로그인한 유저(admin, user, USER) 6 사용자 관리 스크린 모든 유저의 정보 변경 관리자(admin)
사용자의 권한에 따라 각 페이지 및 기능에 대한 접근 권한을 아래와 같이 정의하였다.
사용자의 등급 분리
순 번 명 칭 설 명 온보딩 가입 및 로그인 홈 데이터 프로필 사용자 관리 1 로그인X 유저 - O O X X X X 2 admin 관리자 X X O O O O 3 USER 정회원 X X O(일부) O O X 4 user 예비회원 X X O X O X
1. 온보딩 스크린(Onboarding Screen ▷ SignUp & Login)
온보딩 스크린에서는 로그인하지 않은 유저를 대상으로 플랫폼이 제공하는 서비스나 기능에 대해서 간단하게 설명하고 로그인 혹은 회원 가입 페이지로 이동시킨다.
2. 로그인 & 홈 스크린(Login Screen ▷ Home Screen)
로그인한 모든 유저는 기본적으로 Home Screen을 시작 화면으로 갖는다. 해당 화면에서는 다음과 같은 기능을 제공한다. Card 위젯으로 스크립트 상태를 표시했고, 아래 테이블은 ListView 위젯, 우측 차트는 fl_chart 위젯을 사용하였다. 테이블과 차트에는 AnimatedBuilder를 연결해서 자연스러운 애니메이션을 추가하였다.
Home Screen 기능 목록
순 번 명 칭 설 명 권한 1 서버 스크립트 상태 조회 서버 측 현재 상태를 웹 화면에 띄운다(Running, Error, Rebooting 등) admin, USER, user 2 서버 스크립트 재부팅 서버 측 스크립트를 종료하고 재실행한다 admin 3 DB 저장 로그 확인 DB에 저장된 데이터를 차트, 테이블 형식으로 조회하고 필터링 admin, USER, user
3. 데이터 스크린(Data Screen {Status, Info})
3-1. 데이터 스크린(Status)
전기차 충전과 관련하여 Status를 조회하기 위해 각 필드를 입력하고 Submit을 누르게 되면 서버 측으로 요청이 전달되고 서버에서는 임시 파일을 생성하고 다시 웹 서버로 작업 결과 압축 파일을 반환한다. 다운로드시 모바일 웹에서 사용할 경우를 고려해서 실행 환경에 따라 다운로드 방법을 다르게 설정하였다.
3-2. 데이터 스크린(Info)
전기차 충전과 관련하여 Info를 조회하기 위해 각 필드를 입력하고 작업을 수행한다. 3-1 스크린과 기능이 거의 비슷하지만 입력 필드에서 주소, 충전기명 등 DB에서 쿼리를 통해 검색하는 기능을 구현하는데 애를 먹었다. 만약 동시 접속자, 사용자가 많은 환경으로 예측한다면 SQLite는 비추천한다. 동시 이용에서 굉장히 불리하다...
4. 프로필 & 유저 관리 스크린(Setting & Management Screen)
프로필 스크린은 로그인한 본인의 계정 정보를 변경할 수 있는 스크린이다. 별로 특별한 것은 없지만, 소속(Belong)과 세부소속(Detail Belong)은 Firebase Database에 먼저 Belong 컬렉션에 문서를 생성하고 그 아래에 있는 Detail Belong에 문자열들을 추가해서 조회해 출력하는것도 Belong에 소속해 있는 세부소속을 조회해오고, 추가하는것도 마찬가지고 상위 소속에 추가한다. 그리고, 아래에 있는 IP 주소와 같은 경우는 지정 IP 접근 제어를 사용하기 위해 추가된 필드이다. FastAPI의 CORSMiddleware와 Regex 정규식을 조합해서 접근 제어를 시행할 수 있다.
