비개발자가 플러터플로우를 쓰기 위해 알아야 하는 것들 (1편)

플러터플로우란? 

 

플러터플로우Flutterflow란 네이티브 앱을 개발하는 로우 코드 빌더다. 네이티브 앱은 운영체제(OS, Operating System)^[각주:1]에 맞는 프로그래밍 언어를 사용해 개발한 앱으로 높은 수준의 성능을 발휘한다. 다만 각 운영체제에 맞는 언어가 달라 각각 개발해야 하는 단점이 있어 이를 보완하고자 크로스 플랫폼 프레임워크^[각주:2]가 존재한다. 대표적인 크로스 플랫폼 프레임워크인 플러터Flutter는 Dart라는 언어를 사용한다. Dart는 구글에서 개발한 오픈 소스 프로그래밍 언어로, 핵심은 Skia라는 그래픽 엔진^[각주:3]을 사용해 UI를 그려내는 것이다. 때문에 플랫폼 관계 없이 일관된 UI를 제공할 수 있다. 

 

로우 코드 빌더란 코딩을 거의 할 필요 없이 앱 개발이 가능하게 해주는 소프트웨어를 말한다. 플러터로 앱 개발을 하려면 코딩을 할 줄 알아야 하는데 플러터플로우는 그렇지 않다.

---

비개발자로서 1개월가량 플러터플로우를 사용해 본 결과 개발을 아예 모른다면 기능 구현 시 어느 지점에서 한계가 있을 것으로 보인다. 코드를 읽고 수정할 수 있다면 더 빠르게 해결할 오류도 많다고 생각한다. 그래도 비개발자가 튜토리얼만 보고 구글 로그인 기능을 구현할 수 있게 하는 플러터플로우란 마법 같은 도구다. 무엇보다 기능 구현 과정이 눈으로 보이기에 개발에 관심 있지만 코딩을 배우기 힘든 사람에게 도움이 된다.  

 

아래 내용은 플러터플로우에서 많이 마주치는 주요 요소를 정리한 것이다. 비개발자는 평소 접할 일 없는 개념이지만 플러터플로우를 쓰기 위해서는 알아야 한다.

• 플러터 플로우 주요 요소
  • 위젯 Widget 
  • 파라미터 Parameters
  • 변수 Variables 
  • 도큐멘트 Document 
  • 레퍼런스 Reference  
  • 데이터베이스 스키마 Database Schema
  • 데이터 타입 Data Type
  • 커스텀 데이터 타입 Custom Data Type
  • 파이어베이스 Firebase

---

위젯

 

위젯은 화면을 구성하는 작은 부품들이다. 위젯의 종류는 크게 두 가지로 나눌 수 있다. 모양만 보여주는 것, 그리고 사용자가 눌렀을 때 반응하는 것. 위젯은 방향 설정을 해줘야 하는 특징이 있다. 그래서 처음 빈 화면에서 시작할 때 컬럼 Column  위젯부터 넣는다. 모든 화면은 위에서 아래 방향으로 구성되기 때문에 위젯들의 방향은 위에서 아래라고 공지하는 것이다. 

 

그런 다음 위젯을 배치하는데, 만약 버튼이나 텍스트와 같은 위젯이 가로로 나란히 배치되는 경우 로우 Row 위젯으로 방향 설정을 먼저 해준 후 버튼 위젯을 넣는다. 

위젯들이 세로로 나란히 배치되는 경우에는 컬럼 Column 위젯으로 방향 설정을 한다. 이게 반복되면 하나의 화면은 마치 여러 개의 가로/세로 블록으로 나뉜 것처럼 보인다. 위젯은 자유롭게 배치될 수 없으며 방향 규칙에 따라야 한다. 만 위젯 위에 위젯을 놓고 싶을 때는 또 다르게 방향 설정을 해줘야 하므로 스택 Stack 위젯이 존재한다.  

컬럼과 스택 위젯의 방향 차이 (출처 : FlutterFlow DOCS)

 

방향에 맞게 배치되는 특성 상 위젯은 순서대로 차곡차곡 쌓아지고 위젯 트리가 생성된다. 위젯 트리는 부모-자식 관계로 구성된다. 아래 이미지에서 홈페이지는 루트 위젯 Root Widget, 컬럼은 루트 위젯의 자식 Child이다. 

플러터플로우 위젯트리 화면

 

부모-자식 관계 특성 때문에 볼 수 있는 팝업창이 있다. 루트 위젯은 자식을 하나만 가질 수 있다. 자식 위젯이 이미 있는데 하나 더 넣어서 '형제 Sibling widget'를 만들어 주려고 시도할 경우 아래와 같은 팝업창이 뜬다. 래핑을 선택하면 아래와 같이 된다.

1. 감싸는 역할을 하는 위젯이 루트 위젯의 자식이 된다.
2. 기존 자식 위젯은 감싸는 역할을 하는 위젯의 자식이 된다. 

이렇게 되면 기존 자식 위젯은 루트 위젯의 자식이 아니니 형제를 가질 수 있다. 

루트 위젯에 자식 위젯을 두 개 넣으려고 할 때 뜨는 팝업창

---

참고 자료 

1. FlutterFlow DOCS, 링크
2. FlutterFlow University, "The Widget Tree", 링크

용어 설명

1. 운영체제 : 컴퓨터 하드웨어를 관리하고 사용자에게 편리한 인터페이스를 제공하는 소프트웨어 [본문으로]
2. 크로스 플랫폼 프레임워크 : 단일코드로 멀티 플랫폼iOS,Android,Windows,MacOs,Linux을 지원하는 도구 [본문으로]
3. 그래픽 엔진: 컴퓨터 화면에 그래픽을 렌더링하기 위한 소프트웨어 [본문으로]