2018년 3월의 깃허브 트렌드 - Flutter ②

2018년 3월의 깃허브 트렌드 - flutter2

지난 연재에서는 3월 깃허브(GitHub) 10대 트렌드에 대해 알아보고, Flutter에 대한 소개와 설치 방법을 알아보았습니다. 이번 연재에서는 설치된 Flutter의 실행 방법과 개발 언어인 Dart에 대해 살펴보겠습니다.

1. 실행

Flutter를 설치하고 콘솔 메시지를 확인하고 나면(지난 연재 참조) Flutter를 실행하려고 해도 어떻게 시작해야 할지 감이 오지 않습니다. 주저하지 말고 일단 에디터를 켜 보세요.

이후 VS Code의 마켓 플레이스에서 dart code를 검색하여 설치합니다. 그리고 윈도우 reload를 하면, 명령 팔레트에서 flu까지만 입력해도 Flutter용 명령어가 아래와 같이 나타납니다.

명령 팔레트에 flu까지만 입력했는데 Flutter용 명령어가 여러가지 나타남 명령 팔레트에 Flu 입력

Flutter 설치 시, Doctor를 실행했으므로 New Project를 실행합니다.

Newproject를 실행하기 위해 프로젝트 명을 TestD까지 입력했는데 Flutter는 모든글자를 소문자로 적어야 한다고 나타나고 있다 New Project 실행

단, CamelCase (backColor처럼 연결된 단어의 첫 글자는 소문자로, 이후 연결된 단어들의 첫 글자는 대문자로 표기하는 방식)는 허락하지 않으며 프로젝트 이름은 소문자로만 작성할 수 있습니다. test_drive로 명명하고 프로젝트를 생성하면 새 창이 뜨면서 main.dart를 포함한 프로젝트가 아래와 같이 생성됩니다.

프로젝트 이름은 소문자로만 작성 할 수 있다는 규칙에 맞춰 test_drive로 명명하고 프로젝트를 생성하여 새창이 뜨면서 main.dart를 포함한 프로젝트가 생성된 화면이 나타난다 main.dart를 포함한 프로젝트가 생성됨

화면의 우측 하단을 보면 No Devices라고 뜨는데, 이때 아이폰 시뮬레이터를 작동시켜봅니다.

시뮬레이터 실행을 위해 Simulator를 검색하는 화면 시뮬레이터 실행

화면 우측 하단 바가 바뀐 것을 확인할 수 있습니다.

우측하단바가 No Devices에서 iPhone X (ios Emulator)로 변경된 화면 우측하단바 변경됨

이때 디버깅 시작을 클릭하면 개발 툴이 디버깅 툴로 바뀌며 실행되는 놀라운 광경을 목격할 수 있습니다.

디버그를 시작하기 위해 메뉴바의 디버그를 선택해서 디버그 메뉴의 전체가 보이는 화면 디버그 시작

디버깅 시작!

우측하단바 색상이 파란색에서 갈색에 가까운 색으로 변경됨 디버깅 중

하단 바의 색깔이 바뀌고 있습니다.

변경 최종화면으로 갈색 같았던 하단바 색상이 주황색으로 변경 되었고, 에뮤레이터도 Flutter Demo Home Page라는 타이틀을 보여주는 화면으로 변경된 화면 디버깅 완료

드디어 원하는 화면이 나왔습니다. (안드로이드의 경우는 생략하겠습니다.)

2. Dart

개발을 하기 위해서는 Dart를 익혀야 합니다.

링크: https://www.dartlang.org/

Dart(다트)는 구글에서 2011년에 공개한 웹 프로그래밍 언어로, Java Script를 대체하는 언어로 알려져 주목을 받았습니다. Dart의 장점은 C나 Java처럼 main진입점을 갖고, 클래스와 동적, 정적 타입을 사용할 수 있다는 겁니다. 하지만 현재는 이런 모든 역할을 TypeScript가 대체하고 있고 구글 사내에서도 TypeScript를 표준으로 사용한다는 점으로 볼 때 이번 행보는 약간 의아합니다.

3. 그럼에도 불구하고

그럼에도 불구하고 React Native에 비해서 좋은 점을 또 하나 꼽으라면 자체적으로 위젯을 지원해 준다는 것인데, Material Guide에 나온 위젯 위주라 대안이 있을 법도 하죠.

Flutter Widget: https://flutter.io/widgets/
React Native UI Components for Material Design: https://github.com/react-native-material-design/react-native-material-design

사실 Flutter가 갖는 디버깅의 장점도 React Native에서 플러그인을 통해 제공해 주고 있기 때문에 크게 놀라운 일은 아닐 수도 있습니다. 하지만 이런 경쟁자가 나온다는 것은 개발자에게 축복이 될 확률이 높으므로 Flutter도 사용해 보는 것을 추천합니다!
개발회의를 위해 남자한명과 여자 주명이 회의를 하고 있다 개발회의

시사점

모바일 환경이 점점 발전하면서 이제는 생산성의 시대에 돌입했습니다. 어딜 가든지 모바일 플랫폼 이야기가 많이 들리고, 한번 개발하면 다양한 곳에서 쓰이는 방식으로 점점 추세가 변하고 있습니다. 그 시작이 폰갭(PhoneGap)과 같은 하이브리드 앱이었다면, React Native는 성능까지 고려한 것입니다. 그런 의미에서 구글의 행보를 단순히 미투 전략으로만 보기는 힘듭니다. (NativeScript를 보더라도.) 하지만 PWA와 같은 미래의 경쟁자가 등장한다면 어떤 포지셔닝을 하게 될지 저도 궁금합니다.



▶   해당 콘텐츠는 저작권법에 의하여 보호받는 저작물로 기고자에 저작권이 있습니다.
▶   해당 콘텐츠는 사전 동의없이 2차 가공 및 영리적인 이용을 금하고 있습니다.

공유하기
도경태 프로
도경태 프로 IT테크놀로지 전문가
삼성SDS 개발실

SCP(SDS Certified Professional)로 삼성SDS에서 테크리드를 담당하고 있습니다. OSGeo에서 오픈소스 활동을 하고 있습니다. 잘 모르는 기술에 대해서 낯선 사람들과 이야기 하면서 배워 나가는 것을 좋아합니다.