-
공유일기 앱 만들기 - 1Flutter 2025. 4. 22. 11:32
일주일이 지났어요.
지난주에 생각한 할 일은 달성한 것 같아요.
디자인
color
어떻게 정하는 건지 모르겠어서 찾아보다가 결국에 Material에서 제공하는 Colors.Purple로 정했어요.
나중에 다시 디자인 고치면서 바꿔야겠어요.
- https://docs.flutter.dev/cookbook/design/themes
- https://api.flutter.dev/flutter/material/Colors-class.html
font
폰트 역시 정하기 어려워요... 일단 무난해 보이는 pretendard로 설정했어요.
- https://m3.material.io/styles/typography/type-scale-tokens
logo
귀여운 느낌의 디자인으로 하려면 캐릭터가 필요해 보이는데 그릴 기운은 없어서 AI에게 만들어 달라고 했어요.
flutter로 만드는데 이미지도 구글이 만들어주는 게 맞는 것 같으니 구글 시켰어요.
펭귄처럼 생겼는데 나무늘보입니다. 귀엽...
- https://pub.dev/packages/flutter_launcher_icons
- https://developer.android.com/develop/ui/views/launch/icon_design_adaptive?hl=ko
- https://aistudio.google.com/
splash screen
로고 만들면서 만든 귀여운 캐릭터 전신 이미지를 사용했어요. 사이즈 규격이 있어서 피그마로 열심히 맞췄어요.
- https://github.com/jonbhanson/flutter_native_splash?tab=readme-ov-file#android-12-support
- https://pub.dev/packages/flutter_native_splash
schema
DB 스키마를 정했어요.
- https://firebase.google.com/docs/firestore/best-practices?hl=ko
플로우차트
UI를 만들다가 계속 브레이크가 걸렸는데 머릿속에서 흐름을 짜놓긴 했는데 제대로 정리를 안 했고 시각적으로 보이는 게 없다 보니 헷갈려서 아이패드로 쭉 그려봤어요. 아직 페이지 남은 게 있긴 한데 일단 여기까지만 먼저 구현하기로Firestore
pricing
개발하다가 혹시 요금 청구되려나 하고 봤어요. 개발단계에서 될 일은 없어 보이는데 용량은 그렇다 치고 읽기, 쓰기 제한이 생각보다 적네요. 그래도 요금청구되면 행복한 걸로,,,
- 저장 1 GiB, 읽기 5만/일, 쓰기 2만/일, 삭제 2만/일
- https://cloud.google.com/firestore/pricing?hl=ko
index
조회할 때 생성일 기준 정렬할 게 있었는데 인덱스를 만들어야 쓸 수 있더라고요. firestore에서는 처음 만들어봐서 적어요.
- firebase.json, firestore.rules, firestore.indexes.json
- firebase --version
- firebase projects:list
- firebase use [project name]
- firebase deploy --only firestore:indexes
- https://firebase.google.com/docs/firestore/query-data/indexing?hl=ko
current timestamp
개인적으로 schema를 정할 때 생성시각, 수정시각, 삭제시각 필드를 대부분의 모델에서 넣는 걸 선호해요. MySQL, PostgreSQL에서는 자동으로 서버 시간으로 관리해 주는 내장 기능이 있는데 firestore에서는 없는 것 같아요. (내가 못 찾는 걸 수도...)
FieldValue.serverTimestamp() 이런 식으로 넣어줘야 하는데 조금 귀찮네요.
잡다한 정보
free image API
AssetImage 가 아니라 NetworkImage 가 필요해서 뒤지다가 괜찮은 걸 찾았어요.
- https://picsum.photos/
- https://picsum.photos/seed/[seedname]/[width]/[height]
- https://picsum.photos/v2/list
macOS 에서 개발한 Flutter android 앱 갤럭시 기기에서 사용해 보기
실제 기기에서도 보고 싶어서 안드로이드 기기를 빌려서 깔아 봤어요. 설치해서 보니 기분이 좋네요.
mac에서 안드로이드로 파일 전송을 처음 해보는데요. 안드로이드에는 애플의 airdrop과 비슷한 quickshare 기능이 있어요.
이걸 mac에서 보낼 수가 없어서 QuickDrop이라는 앱을 설치해서 사용했어요.
- flutter build apk
- build/app/outputs/flutter-apk/app-release.apk 파일 옮기기
- https://apps.apple.com/us/app/quickdrop-android-transfer/id6740147178?mt=12
만들면서 드는 생각들
- tab, drawer을 어떤 앱에서 어떤 경우에 도입하는지 잘 모르겠다.
- 다른 앱들 구경해 보면 tab을 대부분이 사용하고 있어 보여서 나도 해야 하나 생각이 들었다. 근데 지금 내 앱의 경우 기능이 적어서 tab 이 굳이 필요한가 싶기도 하다. tab에 놓을 item 이 3개 이상은 되어야 필요성이 있어 보이는데...
- X 앱을 보면 마이페이지 + 설정과 같은 기능을 좌측 drawer로 사용하고 있는데, 다른 페이지로 이동하는 것보다 뭐가 좋은 걸까? 란 생각.
- drawer를 좌측에 놓을지 우측에 놓을지도 고민이었음.
- 결론은 우측 drawer 쓰기로 했다. 이유는 내 눈에 멋있어 보였음.
- 안드로이드 기기를 안 쓴 지 오래라서 몰랐는데 안드로이드 유저들은 AppBar back button을 거의 누르지 않더라. 대부분 NavigationBar에 있는 뒤로가기 버튼을 사용하는 듯 함. 그래서 AppBar back button을 거의 제거함.
- 구현 문제가 아니라 디자인 너무 어렵다. 사소한 것에서도 계속 브레이크가 걸림. 내가 정하고 앱 전체에서 일관성만 주면 될 것 같은데 일단 내가 납득하고 밀고 나가질 못하겠음. 예를 들어 게시글에서 작성자 정보, 제목, 본문, 이미지, 작성일과 같은 정보가 있을 때 어느 순서로 어떤 위치에 배치하는 게 좋을까 하는 이런 고민들...
- 지금은 일단 작동만 하게 해놓고 있는데 디자인이 너무 구리다. 나중에 전체 디자인 콘셉트를 정하고 수정해야겠다.
- 상태관리 어렵다. 프론트쪽을 안 해봐서 그런지 어떤 식으로 관리하는 게 좋을지 계속 고민. Riverpod 사용 방법을 잘 몰라서 이렇게 고민하나 싶음.
외출을 자주 해서 시간을 적게 썼는데 그래도 나름 많이 했네요.
이번 주는 외출 이벤트가 별로 없어서 남은 걸 완성해 볼게요.
남은 화면 작동하게 하기, 잡다한 버그 수정, 파일 정리 정도면 될 것 같아요.
2편에서도 만날 수 있기를...
'Flutter' 카테고리의 다른 글
공유일기 앱 만들기 - 0 (0) 2025.04.15