안녕하세요!
개발자 다보(보라)입니당 🙇🏻‍♀️

모두의 연구소 2022 컨퍼런스(MODUCON 2022)를 다녀왔는데요,
플러터 관련 세션이 하나가 통으로 잡혀있길래
신기해서 호다닥 신청하고 다녀와봤어요

다녀온 당일 바로 작성하는건데
1빠 였으면 좋겠네요..ㅎ

0. 모두연 컨퍼런스 2022

신청 링크:
https://moducon.kr/sessions/t2s4

요약:

• 모두연은 매년 마다 컨퍼런스를 개최함 (20,21년도는 코로나 때문에 오프라인 컨퍼런스를 못 열었다구 함)
• 모두연을 모르시는 분은 사이트와 EO 유튜브 영상 참고하시면 좋을 듯 함
• 이번엔 오프라인으로 연세대에서 진행함, 15일 목요일 눈 오는 지금 .. ❄️
• 온라인은 4주 이내로 공식 유튜브 채널에 발표자료와 영상이 공유된다고 한다.
  • 모두연 답변 "컨퍼런스 종료 후 4주 이내 공식 유튜브에 게시될 예정이에요. 단, 유튜브 업로드를 원하지 않는 연사님들의 발표는 공개되지 않아요."
• 컨퍼런스는 하루만 진행
• 크게 오전, 오후 세션 발표하는데 개발 커뮤니티 세션 중 하나가 플러터가 차지함..! (플러터가 하나의 세션을 차지할 정도로..! 커졌다니.. 너무 싱기🥹)

그러면 나는 우째 이런 정보를 알았나? (주절주절..)

이틀 전 사내 슬랙에서 (AI 연구하고 계신 짱짱맨)훈재님께서 모두연 컨퍼런스 정보를 주셔서 신청하고 바로 인스타그램 스토리로 공유함.

나는 커뮤니티 활동을 따로 안하다 보니 외부 발표, 행사를 잘 모르는데.. 감사하게도 회사에서 떠먹여 줄 뿐,,🥄

그래서 외부 컨퍼런스, 행사? 궁금하면 제 인스타가 아닌 녜.. 플러터 커뮤니티, 밋업에 가입하셔서 정보 줍줍하시면 좋을 것 같습니다

(그래도 내가 참여하는 컨퍼런스나 행사 있으면 무조건 인스타그램 스토리로 올림..그러니깐 팔로우..큼큼..🤗)

1. 플러터로 앱/스토어/스크린샷 80개 언어로 자동 번역/배포 구축하기

앱/스토어/스크린샷 80개 언어로 자동 번역/배포 


이준규님이 발표해주셨고,
GDG SongDo, Flutter Songdo 커뮤니티에서 활동해주시고 계신다고 합니다.

intro

• 어플 개발하면서 어떤 고민이 있었는지, 어떻게 해결했는지 발표

• 앱 개발자라면 한번쯤 고민해봤을, 전 세계 사람들에게 배포하고 싶다. 그러면 번역.. 국제화.. 다국어.. 처리 어떻게 할지?

• 다국어 배포시 장단점 설명
  (너무나도 당연하게 관세, 서비스 추가 비용 없이 국내 유저 뿐만 아니라 해외 유저까지 얻을 수 있다.)
  (단점은 번역 비용과 유지보수 품이 많이든다가 있음)

• 앱 개발 다국어(국제화) 처리를 할려면 실제 3가지 일 해야함

  1. 앱 컨텐츠 번역 & 적용 자동화
  2. 스토어 정보 번역 자동화 / 배포 프로그래밍
  3. 스토어 이미지 번역 자동화

1) 앱 화면 컨텐츠 번역

요약:

• easy_localization 패키지 이용해서 번역, 다국어 처리함.
  • csv 파일(localization.csv)로 쉽게 번역 가능
• auto_app_translate 자동번역 라이브러리로 번역된 csv 뱉도록 함

어떻게 실행?

• 열심히 요약요약 하며 적었는데 패키지 README에 아주..정말 아주 친절하게 발표 내용 그대로 기입되어있었음
  • How to Use? 참고
• 뭐 정말 간단히 말하면 아래와 같은데 패키지 README 설명이 사진도 있고 더 친절히 설명되어있음
  1. import package
  2. easy_localization 읽을수있게 csv 파일 만듦
  3. easy_localization 관련 셋팅
  4. easy_localization가 읽을 수 있는 csv 만들고 str(키)와 가능한 언어 (ko, en.. ) 열로 만들어서 적어주기
  5. 이제 발표자님이 만든 auto_app_translate 패키지 활용하기
  6. auto_app_translate 셋팅
  7. run (빌드러너 동작 시키듯이, 수행해주면 easy_localization csv 파일에 모두 번역 되어있음🎉)

2) 스토어 번역

요약:

• 배포는 fastlane (배포 라이브러리) 이용
  • 특정한 형태 파일 → 읽어서 → 스토어 정보 자동 등록
• 발표자 님이 만든 auto_store_translate 자동번역 라이브러리로 번역되게 함
  

어떻게 실행?

• How to Use? 참고

3) 스토어 이미지

요약:

• 언어별 기기 실행 (애뮬레이터 또는 시뮬레이터로 실행) → 스크린샷 자동 촬영 (test_drive) → screenshot_info.dart 설명 적음 → Frameit으로 스크린샷+설명 제작된 이미지 반환
• 아니 요 친구도 패키지 있음..🫢 auto_screenshot_translate

어떻게 실행?

• How to Use? 참고

위를 보셨다면 아시겠지만, 해당 이슈 진행하면서 다국어 처리를 자동으로 쉽게 만들 수 있도록 3가지 패키지 발행함.. (정말 대단쓰.. 사용해보시고 like 눌러주고 오세요.. 다들👏🏻👏🏻)

발표의 내용은 길지 않았고 패키지 README에 작성된 how to use를 제작자 분이 설명해주시는 느낌..!? 튜토리얼 식으로 "이렇게 이렇게 슉슉 했어요~" 가볍게 넘어갔습니다.
그래서 이러한 패키지가 있구나 하고 토이 프로젝트에 적용해보면 좋을 것 같았어요.

• 발표자님이 말씀하시기론, 구글 번역을 돌리다보니 단어와 짧은 문장은 괜찮은데 문장이 길어질 수록 번역이 어색하다고 했습니당

2. github actions로 CI/CD 하기

github actions를 활용해 Flutter 배포 자동화 하기

양수장님이 발표해주셨구요,
bluefrog 테크 리더로 참여하고 계시고 첫번째 발표자분과 동일하게 GDG 송도, Flutter 송도 커뮤니티를 운영하고 계시고 있다고 합니다.

github actions?

• CI/CD 플랫폼 (배포 자동화 툴)
• 다양한 이벤트 트리거 삼아 스크립트 실행 가능
• yaml기반 스크립트
• marketplace에 배포된 actions를 설치 없이 사용 가능함

github actions 기본 구성요소

• workflows 경로 안에 main.yaml 생성
• 한개 이상의 워크플로우와 브랜치 필요함

workflows

• 자동화 해놓은 작업 과정

jobs

• runner에는 동작하는 일련의 단계를 가진 작업 단위

actions

• 마켓플레이스에 게시된 어플리케이션

runners

• 프로비저닝된 가상머신에서 수행

self_hosted runners

• 러너 돌리면 비용이 드니깐, 셀프로 호스팅해서 러너 동작되게 처리
• 비용절감 갑

flavors
: 환경마다 구성을 달리 할 때 사용 (ex. dev, production 환경)

• android → gradle script
• ios → .scconfig (scheme)

fastlane

로컬에서 작동함 (루비 기반)

• iOS 사용자들을 위해서 2가지 정도 제공함 (app_store_connet_api_key, match)
  : match는 lane에서 빌드하기 전 인증서 대조함 (외부 유출되지않도록)
• ./github/workflows/deploy_prod.yaml 수행되도록 처리
• github 내 actions에서 workflow수행 확인하면 완료 됨

정신 없죠?
네.. 제가 놓친 부분이 많아서 위에 작성된 내용이 다예요..

요약하자면, Github Actions + fastlane로 구글 스토어, 앱스토어에 자동 배포한다. 입니다..!

저는 회사에서 CI/CD로 codemagic를 셋팅하고 자동화 해두어서 그냥 차이점 위주로만 들었어요. (codemagic fluttter CI/CD 셋팅글은 여기에..)

코드매직은 UI로 쉽게쉽게~ 워크플로우를 셋팅하고 배포까지 가능한데 actions는 뭔가 더 언어 친화적인 느낌쓰? 아님 말고..

그래서 이런게 있구나~ 정도로만 보시고
자세한 내용은 구글에 github actions fastlane 이라고 검색하시면 잘 작성된 게시글 눈에 보이는 것 만 3-4개 정도 되는데 잘 정리되어있는 글 보고 따라가시면 될 것 같습니다

3. Flutter로 머신러닝 활용

Flutter와 함께하는 ML세상 탐험하기

박제창님이 발표해주셨고,
Flo에서 근무하고 계시구 Flutter 커뮤니티를 홍보해주셨어요.

누가 들으면 좋을까요?

• ML모델 앱 적용 하시는 분
• 플린이라..머신러닝 어떻게 붙여요? 막막하신 분
• 어디서 어떻게 사용하는지 가이드 정도로 생각 부탁

1. 플러터 개요

• 공홈에서 가져온 메세지 기반으로 설명함

2. 플랫폼 채널?

• 플러터는 플랫폼 채널을 사용함

• 실제 사용될 땐 플랫폼 채널 대신 메소드 채널로 불림

• 메소드 채널을 통해 각 플랫폼 호스트와 통신
  

• method channel = future
  event channel = stream

• ML모델 구동은 네이티브 플랫폼에서 실행되기에 알아두면 도움이 됩니다.

• 근데 이미 잘 만들어진 머신러닝 패키지가 있다면, 그거 쓰시고 위 내용은 몰라도 돼요.

3. 최신 Flutter ML

• 발표자는 ML수행 했었음 (TF 2.0까지만..ㅎㅎ)
• Tensorflow lite(TFlite) 제일 많이 쓰이고 있음
• 메소드 채널 통해서 안드로이드 호스트 안에 돌아간 모델을
  반환해서 flutter View로 반환하게끔 사용
• flutter ML → 2019.03에 나온 공식 영상 있음
  • 2020 6월에 Firebase Kit → ML kit로 discontinue(중단) 되버림
  • google_ml_kit 로 사용하시면 될 것 같아요.

4. ML MODEL 적용

• Google ML Kit 기준으로 설명
• OCR 바코드 인식 → google_mlkit_barcode_scanning 패키지 이용해서 사용
• google_mlkit_barcode_scanning 패키지 사용해보니 BarcodeScanner 값으로 잘 반환 됨

실제 아트랩에선 자체 모델을 제작하고
tflite 모델을 플러터로 이관하는 작업을 수행하고 있는데
flo에선 어떻게 적용했을까?가 궁금했는데

이론적인 설명과 시중에 나와있는 이미 잘만들어져있는 모델을 플러터로 이관까지 해둔 패키지를 설명해주셨어요.

웬만한 라이브러리 쉽게 붙일 수 있다 하면, google_mlkit_barcode_scanning 패키지 처럼 이미 잘 만들어져있는 AI 모델을 적은 코드로 쉽게 붙여보세요!

내 앱에 AI 붙이고 싶다? Google ML Kit 중에서 찾아보시는 걸 추천드려요 (다만 패키지가 언제 중단될지 모르지만.. 모델 만드는 것, 모델 이관보다 쉬우니깐요..)

4. flutter 3년 사용해본 짬으로 플러터 설명과 꿀팁 전달

Flutter, 어떻게 해야 더 잘 쓸까? (with 3 years)

유병욱님이 발표해주셨구요,
Flutter 커뮤니티 활동을 누구보다 활발히 해주시는 것 같아요.
(여러 커뮤,밋업에서 발표하시더라구요)

flutter 설명

• 플러터 장점 및 특징 설명
• 우리가 주로 사용하게 되는 플러터 프레임워크 파트 부분 설명
  

Tips?

• 오픈소스
• DartDev Tools
• FVM (version management)
• 커뮤니티

오픈소스

• 오픈 소스가 장점

DevTools

• inspactor 이용해서 UI 위치 보기
• CPU → 앱이 얼마나 최적화 되어있는지 프로파일링
• 포퍼먼스 체크
• 네트워크 감지도 같이 진행하고있음

fvm

• 플러터 버전 관리
• 플러터가 워낙 버전 업그레이드를 자주 하니깐 버전을 프로젝트마다 버전을 달리 관리 할 수 있게 사용

커뮤니티

• 디스코드가 있구나
• 밋업.. 뭐 많이 있었는데 제가 캡처를 못했어요 죄송죄송..

플러터 입문자 대상으로 준비해주신 발표 였어요.
(그래서 똑같이 3년차 플러터 개발자는 미처 못 적었습니다..)

플러터 입문자 분들은 꼭 영상 풀리면 따로 찾아보시는 걸 추천 드려요! 😅

발표 내용 보다 무한 공감갔던 내용이 있어서 몇자 적자면..

Q. 플러터 개발하면서 이상적인 디자인 패턴? MVC? MVVM?
A. 특정 디자인 패턴 보다 상태관리에 따른 권장되는 디자인 패턴 따라 가는게 좋은 것 같다.