Flutter(플러터) 란? Flutter 의 특징에 대해..
Flutter(플러터) 설치하기 - Windows & VSCode
Flutter(플러터) 설치하기 - Mac & VSCode
1. 개요
플러터(Flutter) 로 앱을 개발하기 위해서는 기존 강좌에서 설명 했듯이 자신의 컴퓨터에 Flutter SDK 와 안드로이드 셋팅, IDE 설치 등의 여러 과정을 거쳐야 합니다.
앱 빌드를 위해 어쩔 수 없는 과정이긴 하지만 그러다보니 간단한 아이디어를 구현해 보려고 할때 자신의 개발 PC 가 당장 손에 없다면 방법이 없죠.
그럴 때 더할 나위 없이 좋은 솔루션이 최근 업데이트 되었습니다.
2. CodePen
바로 코드펜(Codepen.io) 이라는 툴입니다.
코드펜은 웹 브라우저 기반으로 작동되는 프로그래밍 에디터(IDE) 입니다.
단순히 에디터 기능에서 그치지 않고 소셜 개발 환경(Social development environment) 를 표방하여 많은 사람들이 서로 개발하는 소스를 함께 공유하고 팔로우 하면서 소통 할 수 있는 기능을 갖고 있습니다.
게다가 웹 브라우저가 설치된 기기라면 PC가 아닌 스마트폰이나 스마트TV 등 무엇이든 가능합니다.
그리고 개발을 위해 어떤 설정도 추가로 해줄 필요가 없죠.
어떤 기기에서든 그냥 사이트에 들어가기만 하면 코딩 준비 끝입니다.
주로 HTML/CSS/JavaScript 등의 전처리 언어의 에디터 기능을 제공하는데 이번에 플러터(Flutter) 지원이 추가 되었습니다!
3. 코드펜 플러터(Flutter) 이용하기
우선 코드펜의 플러터(Flutter) 페이지로 이동합니다.
Flutter on CodePen
Dart You work with Flutter in Dart, Google's language that not only can compile to JavaScript for the web, but has compilers for all the other major platforms.
codepen.io
보는 것은 비회원도 가능하지만 실제 코딩을 위해서는 결국 무료 회원 가입을 해야 합니다.
이메일과 아이디 정도만 입력하면 바로 등록 됩니다.
이후 위 화면의 Open Flutter Editor 버튼을 누르면 Editor 메뉴로 이동 됩니다.
익숙한 형태의 IDE 가 펼쳐집니다.
Hello World 수준의 가장 기본적인 텍스트 출력 앱입니다.
좌측의 코드 편집 창에서 원하는 코드를 입력한 후 화면 상단의 Save 버튼을 누르면 약간의 딜레이 후 바로 적용이 됩니다. (AutoSave 도 가능합니다)
안드로이드 스튜디오에서 Flutter 프로젝트 생성 시 기본적으로 제공되는 코드를 붙여넣어봤습니다.
실제 안드로이드 스튜디오에서 에뮬레이터로 돌렸을 때와 동일한 화면이 나오는 것을 확인 할 수 있습니다.
코드펜의 가장 큰 특징인 웹 브라우저 기반 IDE 라는 점을 이용해 제가 가지고 있는 아이패드 미니 5세대에서 띄워 봤습니다.
PC 에서와 동일한 인터페이스를 유지하면서 실제 결과물도 동일하게 보여줍니다.
즉, 랩탑 없이 패드나 스마트폰 만으로도 이동 중에 얼마든지 코딩과 테스트, 그리고 공유 까지 가능합니다.
또한 https://codepen.io/flutter 페이지에서 에디터 버튼 옆의 Try a Template 버튼을 누르면 다른 사람들이 코드펜에서 작성하여 공개한 플러터 프로젝트를 직접 볼 수 있습니다.
실제로 다른 사람들이 개발한 플러터 기반 컨텐츠를 소스코드까지 볼 수 있습니다.
다양한 코드가 공유되어 있으므로 공부하기에도 아주 좋습니다.
물론 코딩 및 테스트를 위한 플랫폼이며 여기에서 실제 빌드를 해서 실행파일을 뽑아낼 수 있다는 건 아닙니다.
어디까지나 간단한 코딩 및 테스트에 유용한 툴 입니다.
댓글