< Web 개발 – “Hello, World!” Flutter multi-platform web apps >
앞의 글에서 Dart 언어를 사용한 Web 어플리케이션을 개발해 보았다면, 이번에는 Flutter 기반의 Web 어플리케이션을 만들어 봅니다. 앞의 글에서 사용한 기술이 Dart 언어의 코어 라이브러리인 dart:html 을 사용한 방법이라면, 이번에는 말그대로 Flutter 프레임워크를 사용합니다. 사실 이 tutorial의 주제는 Flutter를 통한 개발에 주안점을 두기에, Web 어플리케이션도 지금 설명하는 Flutter 기반으로 이루어 지기를 권장합니다.
Flutter for Web은 아직 공식 릴리즈가 아니기에, 추가로 설치해야 할 사항이 있습니다. Web 어플리케이션을 Flutter로 개발하기 위한 개발환경 설정은 Flutter의 공식 사이트( https://flutter.dev/docs/get-started/web )에서 확인할 수 있습니다. 설치는 어렵지 않으나, 현재 Flutter for Web은 베타 버전이므로, 문제가 발생하면, 공식 사이트에서 언급한대로 버그 리포트를 하기 바랍니다.
Flutter for Web 개발 환경을 구축하기 위해서 다음의 명령을 수행합니다. 이해를 위해서 실행한 결과 화면도 명령어의 밑에 추가 하였습니다.
[Step.1] flutter channel beta
[Step.2] flutter upgrade
[Step.3] flutter config –enable-web
[Step.4] flutter devices
Step.4를 실행하여, flutter device에 Chrome 브라우저가 등록된 것을 볼 수 있습니다. 그리고 Web Server는 Web 어플리케이션을 실행하기 위하여 활용 됩니다.
이제 Flutter for Web을 위한 개발 환경은 구축이 되었습니다. 다음은 앞서 Flutter를 통해서 프로젝트를 만들고 실행하는 환경과 유사합니다. 다음은 Flutter for Web 공식 사이트의 내용대로, myapp이라는 이름의 project를 만들고, 이를 Chrome 브라우저에서 실행한 예제 입니다.
flutter create myapp
cd myapp
flutter run -d chrome
여기서 flutter run 명령은 Web 어플리케이션을 development 모드(dartdevc 기반)로 동작하게 합니다.이제 아주 익숙한 화면이 넓은 Chrome 브라우저의 화면에 [그림 1]과 같이 펼쳐지는 것을 확인 할 수 있습니다.
한가지 장난을 해보도록 하겠습니다. 앞서 darttutorial-35-01.dart 프로그램으로, 이번에 새롭게 만든 myapp 프로젝트의 main.dart를 대치해 보겠습니다. 이를 위해서 flutter가 자동 생성한 lib 디렉토리의 main.dart를 지우고, darttutorial-35-01.dart를 main.dart로 저장합니다. 그리고 flutter run -d chrome
명령을 실행하면, 익숙한 프로그램이 [그림 2]와 같이 Chrome 브라우저 화면 가득하게 채워지는 것을 볼 수 있습니다. 즉, 기존에 모바일 용도로 만든 프로그램도 수정 없이 Web 어플리케이션으로 변환하는 것이 가능합니다. 단, Web의 UI/UX는 이에 맞춰야 하니, 제대로 된 프로그램은 아니라고 할 수 있습니다. 하지만, 이제 모바일 환경을 위하여 만든 프로그램을 Web 어플리케이션에서도 seamless 하게 제공할 수 있는 열쇠를 확보한 셈입니다.
Flutter 공식 사이트에서는 이렇게 기존의 프로젝트를 Web 어플리케이션으로 적용하기 위한 첫번째 작업으로, 기존 프로젝트의 디렉토리 안에서 다음의 명령을 수행하도록 하고 있습니다.
flutter create .
그리고 Web 어플리케이션으로 실행하기 위해서, 앞서 사용한 flutter run -d chrome을 실행하도록 권장하고 있습니다.
앞서 flutter run이 dartdevc를 기반으로 동작한다고 하였으니, 이제 작업을 마친 Web 어플리케이션을 정식 릴리즈 하려면 dart2js를 기반으로 동작하는 방법이 필요합니다. 이는 flutter build web 명령을 실행하여 가능합니다. 이 명령은 릴리즈를 위한 코드를 생성해 줍니다. 이 명령을 수행 하기 전에, 프로젝트 안의 /build 서브 디렉토리를 확인하면, asset 화일이 있는 것을 볼 수 있습니다. 이제 flutter build web을 실행하고, 다시 /build 서브 디렉토리로 들어가면 /web 서브 디렉토리가 생성되어 있으며, 안으로 들어가면 Dart 언어에서 변환된 코드들이 자동 생성되어 있는 것을 볼 수 있습니다. flutter build web 외에 flutter run –release 옵션을 줌으로써 릴리즈 모드에서 수행하는 것도 가능합니다. 따라서 향후 Web 어플레이션을 릴리즈 하는 경우는 /build 서브 디렉토리의 /web과 asset 화일들을 사용하는 것 입니다.
마무리
익숙한 Flutter의 자동생성 예제 프로그램을 커다란 Web 브라우저 화면에 채워서 나타나도록 해 보았습니다. 그리고 이미 모바일 용도로 만든 프로그램을 Web 브라우저에서 구동하는 방법도 배웠습니다. 아직 Flutter for Web은 공식 릴리즈가 나오지 않아 안정적이라고 보기는 어렵지만, 많은 개발자들의 지지속에 낙관적인 미래를 조심스레 예상해 봅니다.
Creative Commons License (CC BY-NC-ND)