첫 Flutter 도전기
Flutter로 앱 만들며
– 첫 Flutter 도전기
감정과 방 상태를 기록하면, 나에게 딱 맞는 미션을 추천해주는 앱.
디자인만 하던 내가, Flutter로 직접 앱을 만들어보기로 했다.
Why Flutter?
앱을 만들기 위해서는 3가지 선택 정도가 있었다.
- 네이티브
- 리액트 네이티브
- 플러터
네이티브는 당장 시작하기엔 허들이 좀 높았고
리액트 네이티브나 플러터로 앱을 개발하려고 했다.
< 플러터 vs 리액트 네이티브>
| 항목 | Flutter | React Native |
|---|---|---|
| 개발 언어 | Dart | JavaScript / TypeScript |
| UI 렌더링 | 자체 엔진 (Skia) | 네이티브 브릿지 |
| 퍼포먼스 | 빠름, 모션 부드러움 | 애니메이션 많으면 느려질 수 있음 |
| 디자인 자유도 | 매우 높음 | 제한 있음 (기본 네이티브 컴포넌트 기반) |
| 생태계 | Pub.dev, 공식 위젯 풍부 | 오래된 생태계, npm 라이브러리 다양 |
| 웹 지원 | 가능하나 한계 있음 | Expo 기반 웹 지원 우수 |
| 난이도 | 처음 배우기엔 진입장벽 있음 | JS 경험자에게 익숙함 |
| 디자이너 친화도 | Figma → Widget 전환이 쉬움 | HTML/CSS 감각과 유사 |
처음엔 React Native도 고려했지만,
여러 고민 끝에 나는 조금 더 ‘앱'같은 앱을 만들고 싶었다.
최근 성능 면에서도 좋은 평가를 받고 있고,
개발자 커뮤니티에서도 점점 주목받고 있는 Flutter라
이번 프로젝트는 flutter를 선택하게 되었다.
Flutter는 쉬웠을까?
솔직히 말하면... 처음엔 정신없었다.
Widget이란 개념, build() 함수, Stateful vs Stateless...
-
Row,Column,Expanded,SizedBox
→ 마치 Figma의 Auto Layout처럼 느껴졌다. -
Scaffold,AppBar,FloatingActionButton
→ 템플릿을 이해하면 재구성은 오히려 빠르다. -
Stateful,Stateless
→ Flutter에서 StatefulWidget은 내부에 상태(State)를 따로 관리하는 구조로, React의 useState()와 유사한 역할을 한다. 하지만 React는 함수 안에서 상태를 직접 선언하고, Flutter는 상태 클래스를 분리해서 관리한다는 점이 다르다.
개발 중에 막혔던 부분들
1. 로그인 후에도 회원가입이 실행됨
→ context.push() 후에 return을 안 해서, 흐름이 계속 이어졌던 문제
2. SafeArea 블랙박스 깜빡임
→ 배경색이 없던 SplashPage에서 노치/하단 영역 깜빡임 발생
3. 사진 업로드 실패 (Supabase 403 Unauthorized)
→ RLS 정책 설정에서 때문에 권한 오류 발생
개발하며 얻은 팁
setState만으로도 꽤 많은 인터랙션 구현 가능context.read<AuthProvider>()로 전역 상태 접근 간편- Supabase는 인증은 쉬우나, Storage는 직접 policy 작성이 핵심
-- Supabase 정책 예시
CREATE POLICY "User uploads to own folder only"
ON storage.objects
FOR INSERT
TO authenticated
WITH CHECK (
bucket_id = 'user_mission_photos'
AND storage.foldername(name) = auth.uid()::text
);Flutter의 장점
- 위젯 기반 UI 구조가 모듈 단위 디자인과 유사해 조금만 하다보면 금방 이해할 수 있다
- Figma → Flutter 옮기는 과정이 직관적이다
- Theme / 커스텀 폰트 설정도 명확하다
- 핫리로드와 에뮬레이터 사용으로 시스템 OS상관 없이 앱 개발을 편하게 할 수 있었다
Flutter의 단점
-
HTML/CSS에 익숙한 입장에선 브라우저 개발자 도구(F12)처럼
UI 구조를 바로 찍어보거나 조작하는 방식이 없어 처음엔 답답하게 느껴졌다.
위젯 트리를 눈으로 확인하는 데도 익숙해지는 시간이 필요했다. -
레이아웃 디버깅이 처음엔 낯설다.
Flutter에는 Chrome처럼 실시간으로 태그를 선택하고 수정하는 UI 디버깅 도구가 없다.
대신 Flutter Inspector라는 툴이 있지만, 초반엔 이 툴이 조금 낯설게 느껴졌다. -
브라우저 기반 개발에 비해 Hot Reload가 빠르긴 해도,
상태가 꼬이거나 StatefulWidget에서 전역 상태 공유가 어색한 경우 디버깅이 번거로워질 수 있다.
특히 에뮬레이터로 봐야하다보니 flutter clean 하고 다시 빌딩 해야 적용 되는 업데이트들도 있어서 딜레이가 많아 살짝 😫..
다음에 도전해보고 싶은 것
- 상태관리 패턴(Riverpod, Bloc 등) 적용
- 애니메이션 (Motion UX)
- 다크모드 대응 / 폰트 정제 / 더 예쁜 전환 효과 등등 플러터의 장점을 최대 살린 UI
마무리하며
Flutter는 분명 낯설고, 때로는 까다롭지만,
프로토타입을 진짜 앱으로 만드는 경험은 아주 특별하다.
안드로이드 기기가 없어서 아쉬웠지만 .apk 로 아주 쉽게 뽑아내고
폰에서 앱으로 돌려 볼 수 있다는 점이 아주 굿이었다.
