#3-2. 플러터플로우 사용법: 5분 안에 소셜앱 만들고 배포까지.

 

이 블로그의 목표는 초 간단 소셜 앱을 만들어서 플레이스토어, 앱스토어에 심사요청을 하는 것입니다. 

 

회원가입, 데이터베이스, 그리고 데이터베이스에 항목을 생성/조회/수정/삭제하는 기능을 갖춘 앱 정도는 만들어봐야 개발할 수 있다고 할 수 있겠죠. 정렬, 필터, 소셜로그인, 이미지 업로드도 해보면 좋겠죠. 남이 만든 템플릿을 가져와서, 우리 데이터베이스로 바꾸고, 약간의 변화만 주어 배포해보는 연습을 해봅시다.

 

 

 

2개의 템플릿을 가져와봤는데, 디버거를 살펴보고 어떤 큰 차이가 있는지 생각해보세요!

 

 

 

둘 다 방금 막 가져온 템플릿인데 어떤 프로젝트는 버그가 있고, 어떤 프로젝트는 버그가 없어요. 버그가 있으면 실행을 시킬 수 없고, 당연히 배포할 수도 없어요. 버그 내용을 살펴보면 아래 4가지입니다.

 

1. custom code

2. firestore setup

3. firebase setup

4. push notification config

 

 

대체로 데이터베이스나 기타 설정이 빠져있어서 그렇습니다. 반면 버그가 없는 프로젝트를 가져올 수 있었다면 그건 ui만 구현한 프로젝트를 가져왔을 확률이 커요. 백엔드 관련 쿼리나 함수 호출이 없을 확률이 크고, 리스트 대신 하드코딩으로 데이터들을 집어넣고 보여주기식 프로토타입을 짜두었겠죠. 실제로 저 음악 프로젝트가 그러했구요. 백엔드는 직접할테니까 그림만 누가 그려줬으면 한다면 오히려 깔끔하게 이런 방식의 프로젝트를 가져와서 시작하는 게 나을 수도 있고, 아예 다 되어있는 거에 내 firebase project id로 바꿔치기만 하고 싶다면 거의 다 되어있는 것에서 시작하는 게 나을 수 있어요.

 

 

 

 

우리는 백엔드도 거의 되어있는 인스타그램 프로젝트를 가져와서 작업해봅시다. 4개의 버그만 고치면 구글과 애플에게 제출할 수 있어요. 하나하나 고칠 때, 클릭하면 고칠 수 있는 화면으로 이동하니까 참고하세요!

 

 

 

1. custom code

대부분의 기능은 드래그 앤 드롭으로 가능하다지만, 모두 그렇지는 않습니다. 어떤 특정 형태의 문자열로 바꾸고 싶다거나, 시간의 모든 정보를 담은 데이터를 주 단위, 일 단위로 바꾸고 싶다거나 이런 기능이 모두 다 빌트인으로 제공되지는 않으니까요. 해서 커스텀 코드를 써야할 경우가 이따금 생깁니다.

 

차치하고, 왜 버그가 있을까요? 템플릿 제작자가 버그가 있는 커스텀 코드를 준 건 아닙니다. 코드는 그대로지만 환경이 바뀌면, 예전에는 에러가 없던 코드가 에러가 있는 코드로 새로 평가되어야할 수 있겠죠? 하여 셋팅이 변할 때마다 디버거에서 이따금 커스텀 코드에 에러가 없는지 확인해달라는 식으로 버그 표시가 들어오게 됩니다. 들어오자마자 커스텀 코드를 다 확인하고, No Errors가 뜨면서 버그 숫자가 4에서 3으로 바로 주는 걸 확인할 수 있었습니다. 템플릿을 쓴다면 이 문제는 너무 염려하지 않고 클릭 한번 해주면 되겠습니다

 

 

 

 

2. firebase setup, firestore setup, push notification config.

다른 에러보다도 파이어베이스 셋업을 해둬야 이후 내부 기능을 고칠 수 있습니다. 해서 파이어베이스 셋업부터 진행합니다. 

firebase 셋업을 시작해봅시다. 마법사의 모자를 누릅니다.

 

 

 

여기서 tutorial이나 documentation을 참고하면서 파이어베이스와 연동하라고 말하고 있습니다. 이 과정이 엄청 쉽지는 않은데, 튜토리얼 영상에서 시키는 그대로 따라가면 문제없이 프로젝트를 연결할 수 있게 됩니다.

 

 

project/ 옆에 있는 부분이 project id입니다. 플러터플로우에서 기입해야합니다.

 

기입하면 이렇게 버튼이 모두 활성화됩니다.

 

일단 지금 push notifications가 잘 안되네요. 보통 파이어베이스 결제 설정을 blaze로 바뀌면 풀리는데, 그것도 바로 안 될때가 있어서 그 문제인 것 같은데. 일단 알림 보내는게 급한 구현은 아니니 끄고 진행하겠습니다.

 

에러가 늘어나요. (셋업이 되니까 보다 구체적인 문제 사항을 지적할 수 있게 된 거겠죠)

 

 

 

 

3. 새로 생긴 이슈들 -> 전부 Firebase Setup

새로 생긴 이슈는 모두 Firebase 셋업에 관련된 것들이죠. 7개 이슈지만, 한 번 클릭으로 6개는 해결할 수 있어요.

이거 auto generate config files 누르고 확인 버튼 누르면 필요한 config 설정이 다 정리되면서 해결됩니다 !:)

 

 

 

이제 1개의 에러만 남은 것으로 나오네요!

 

 

4. Firebase Storage

남은 버그를 클릭해보니 Firebase Storage 설정 문제라서 Deploy를 누르니까 Not Deployed (Error)이 떴어요. 옆에 i 버튼을 눌러서 왜 에러가 떴는지 살펴볼까요?

Firebase > Storage > 활성화 한 다음 다시 해 달라고 하네요.

 

 

console.firebase.google.com -> 프로젝트 선택 -> 사이드바 build 클릭하면 하위 메뉴가 열리는데 Storage 선택 -> Get Started

 

이제 되겠지? 싶으면 다시 flutterflow에서 작업하러 가볼까요.

 

오래 기다렸어요! 이제 모든 에러가 해결되었으니 동작할겁니다.

 

 

 

테스트

잘 되는지 플러터플로우 내에서 테스트만 해보시죠. (버그가 있으면 애초에 되지 않거든요.)

3가지 모드가 눈에 보이죠. 옆에 눈알 버튼(프리뷰)까지 치면 4가지 모드라고 해도 괜찮고요.

 

1. run 모드: 백엔드 호출까지 동작하고, 현재 코드 기준으로 빌드를 수행하기 때문에 2~3분 시간이 소요됩니다. test와 다르게 링크가 만료되지 않는다는 장점이 있어 주변에 테스트 용으로 편하게 공유하기에 적합한 모드입니다.

2. test 모드: 백엔드 호출까지 동작하고, 현재 코드 기준으로 빌드를 수행하기 때문에 2~3분 시간이 소요됩니다. run과 달리 링크가 

3. publish: 안드로이드, ios는 이렇게 버튼 한 번으로 될 일이 당연히 아니죠. 웹 퍼블리시 버튼입니다! 대신 설정에서 어떤 url로 퍼블리시할 것인지 결정해두고 진행하면 좋아요.

4. preview(눈알): 백엔드 호출은 동작하지 않고, 현재 ui의 프리뷰입니다. 빌드를 하지 않아서 빠르게 프리뷰를 볼 수 있다는 장점이 있어서 화면 그리는 작업할 때는 유용해요. 다만 기능 구현이 사라지니까 제대로 테스트할 땐 적합하지 않아요.

 

 

1) run mode

현재 코드와 디자인 기준으로 빌드한 결과물을 링크로 공유할 수 있는 모드. 간단히 만든 결과물이라도, 얼른 run을 돌려서 친구와 가족에게 자랑해보세요. 또 각각의 링크가 살아있는데다가, 링크 히스토리도 남아있습니다. 방금 인스타그램 클론 프로젝트의 첫 run 모드 링크입니다. 들어가보세요!

https://app.flutterflow.io/run/7kNh2IgRBKZ8TRIBEOWJ

 

 

 

 

2) test mode

1. 10분만 살아있는 링크. 그래서 타인에게 공유하는 용도로 적합하지 않습니다.

2. 대신 instant reload라는 강한 기능을 제공합니다. 코드나 디자인을 수정하고, 매번 새로 2~3분을 기다려서 테스트하는건 괴로운 일이 될 수 있습니다. 대신 10분에 한하여, 전체를 매번 새로 빌딩하는 것이 아니라, 수정 내용만 고려한 빌드 결과물을 약 10초 정도만에 새로 뽑아줍니다. 개발할 때, 특히 디버깅할 때 꼭 권고하는 모드.

테스트 모드에서 수정한 다음, instant reload를 눌렀습니다.

 

3) publish

publish는 사실 웹 퍼블리시입니다. example.flutterflow.app이라는 도메인을 잡아주는거죠!! 웹개발도 뚝딱인 세상입니다. 대신 site url을 미리 설정해두고 publish하는 게 좋겠죠.

크로스플랫폼이라고 안드, ios, 웹 모두 잘 지원한다지만, 이렇게 웹에선 안 된다는 말이 보이면 아직은 아쉬운..

 

짜잔~

cleverway-instagram.flutterflow.app

 

4) preview

ui만 간단하게 확인하고 싶을 때 사용하기 좋아요. 빌드를 거치지 않아서 다른 것들은 2~3분이나 기다려야하지만, 프리뷰는 몇 초만에 금방 결과물을 볼 수 있고, 간단한 버튼 클릭 같은 interaction은 동작해요. 마치 피그마 프로토타입 run과 비슷하다고도 보입니다.

 

 

이슈와 데이터베이스?

이 프로젝트가 아니라도 이렇게만 진행했다면, 사실 곧 문제를 찾을 수 있을 겁니다. 파이어베이스 실제 데이터베이스와 플러터플로우에서 생각하는 파이어베이스의 예상 모습이 다른것을 디버거가 잘 못 잡아내거든요. 아직 우리는 파이어스토어(firestore)를 제대로 건드려준 적이 없죠. 사이드바에서 데이터베이스 클릭, 상단 메뉴 중 또 데이터베이스 클릭하면 데이터베이스가 어떻게 생겼는지를 플러터플로우가 기대하는 대로 적어둔 게 있어요. 이런걸 스키마(schema)라고도 부르고요. 이거 해줘야합니다... 이거 만들 때, 파이어베이스랑 플러터플로우의 콜렉션 이름이 동일해야합니다. 또 탭처럼 들어가있는 것들은 subcollection이라고 특정 콜렉션에 하위 종목으로 들어가는 것을 말해요. 파이어스토어 구조가 이해가 안 되는 분은 https://docs.flutterflow.io/data-and-backend/firebase/firestore-database#structuring-the-database 이 글을 한 번 읽어보는 것을 추천드립니다.