플러터 포 디자이너(Flutter for Designer)

참석인증샷은 찍어줘야지!

개인적인 빅 이벤트(!!!) 덕분에 정신이 없다보니 이 후기를 일주일하고 더 지나서 적게 됐다. 사실 지난 밋업이 재밌었지만 약간 감을 잡기는 어려운 감이 있었는데, 이번에 플러터 포 디자이너 행사가 있다는 걸 알자마자 바로 결제하고 참여하게 되었다. 아무튼 결론부터 말하자면 나는 이 밋업이 너무 즐거웠다😊 사실 'for Designer'라고 타깃을 정해둔 행사였지만 개인적으로 개발자만 아니라면, 개발에 관심이 있는 사람이라면 모두 참여해도 좋지 않았나 싶었다. 이번 밋업도 역시 삼성동에 있는 Google for Startups에서 이뤄졌고, 이번에는 다과를 준비해주셨다🎶 그리고 오늘도 입정하면서 플러터, 다트 스티커와 'Come to the Dart Side' 스티커를 받았다. 나는 이 다트 사이드 스티커가 너무 좋다(ㅋㅋㅋ)

이번 밋업은 머터리얼 디자인 컴포넌트를 가지고 앱을 만드는 연습을 했는데, 플러터의 이해나 느낌을 전반적으로 또는 대략적으로 하는 것을 목표로 한다. 개발에 대해서 경험이 없는 분들도 다수 있을거라고 예상하셨는지 코드랩 코치 분들도 함께 해주셨다. 플러터 포 디자이너 밋업은 크게 3개의 시간으로 구분할 수 있는데, 첫 번째로는 플러터 개발환경을 세팅하는 시간이고, 두 번째는 구글 코드랩에 있는 튜토리얼을 따라하는 시간, 마지막으로 후원사의 라이트닝 토크로 이루어진 시간이다.

 

플러터 개발환경 세팅

이번 밋업에서는 다 함께 안드로이드 스튜디오와 플러터 SDK를 설치하는 시간을 가졌다. 나는 이미 VSCode와 에뮬레이터를 다 설치한 터라, 나머지 분들이 어떻게 하는지를 보면서 안드로이드 스튜디오로는 어떻게 하는지 기록해가면서 관찰했다 (본격 3인칭주의 관찰...!) 앞서 말했듯이 이번 밋업은 안드로이드 스튜디오를 기반으로 하고, 안드로이드 어플리케이션을 어떻게 만드는지 볼 수 있는 시간이다.

플러터를 시작하는데 필요한 도구는 안드로이드 스튜디오와 플러터 SDK와 XCode인데, 여기서 XCode는 iOS 어플리케이션을 만들 때 테스트 하기 위한 에뮬레이션으로 반드시 Mac에서만 설치할 수 있다. 만약 윈도우 유저라면 XCode는 설치 할 수가 없을 뿐더러, iOS 어플리케이션도 만들 수 없다.

사실 이 시간에서 좀 아쉬웠던게 구글 캠퍼스 내의 와이파이로 밋업의 모든 사람의 데이터양을 커버하기엔 조금 버거웠던 것 같아서 빠른 진행이 어려웠던 것 같다. 사전에 안드로이드 스튜디오만 설치하는 걸 과제로 내주셨으면 진행이 더 매끄럽지 않을까 싶다. 아무튼 안드로이드 스튜디오를 설치하고 실행시키면 아래와 같은 화면이 나타난다. 그럼 밑에 있는 [Configure]를 클릭하면서 플러터 개발환경 설치를 시작할 수 있다.

이미지는 구글링으로 찾아왔다 :-)

1. [Configure]-[Plugins]-[Marketplace]로 들어가서 'Flutter'를 검색해서 Flutter 플러그인을 설치한다. 그런 다음에 안드로이드 스튜디오를 다시 실행한다.
2. 위의 화면이 다시 나타나면 [Start a new Flutter Project]를 볼 수 있는데, 그걸 클릭하고 Flutter Application의 Flutter SDK Path에 플러터 공식홈페이지(flutter.dev)에서 설치한 파일의 경로를 입력하고 쭉 [Next] 클릭하여 완료한다.
3. 마지막으로 에뮬레이션을 설치할 차례다. 먼저 Flutter App 개발환경을 띄우고, [Tools]-[AVD Manager]-[Create Virtual Device]를 눌러서 Pixel 2를 선택한다. 이때 안드로이드 버전은 Android Q나 10을 선택하여 다운로드 받은 다음, [next]를 클릭해서 설정을 완료하면 된다.

여기까지 마무리 됐으면 플러터로 개발할 준비는 다 됐다 :)
주최 측에서는 플러터를 통해 안드로이드 어플리케이션을 만들기 위해서는 안드로이드 스튜디오가 더 편하다고 판단하여 안드로이드 스튜디오를 사용했지만, 만약 가벼운 IDE 툴을 좋아하시는 분이라면 나의 고군분투(!)를 참고하시는 편도 좋다. 물론 구글링해도 좋고! (막간 조회수 올리기 희희)

 

코드랩 코드 따라하기

열심히 설명해주시는 코치님

플러터는 크게 두 가지의 컴포넌트로 말할 수 있는데, 바로 안드로이드의 머터리얼과 iOS의 쿠퍼티노다. 그 중에서도 오늘은 안드로이드의 머터리얼 컴포넌트를 따라하는 시간을 가졌다. 위젯의 위치는 가로(Row, 이하 로우)와 세로(Column, 이하 컬럼)으로 배치할 수 있다. 표를 그리듯 그리고 싶은 순서대로 로우와 컬럼을 번갈아가면서 순차적으로 선언하여 배치하면 된다. 참고로 오늘의 코드랩 메인코치님이 로우와 컬럼 위젯에 관해 더 알고 싶다면 조은 님의 미디엄 글을 읽어보라고 추천하셨다. 알고 있던 글이라 매우 반가우면서도 다시 읽어보리라 다짐했다. (그리고 아직 읽지 않았다[??], 아니 읽지 못했다로 정정하자)

코드랩 튜토리얼 진도

코드랩 코드는 구글 코드랩으로 들어가서 검색창에 Flutter를 입력하면 위와 같은 화면이 나오는데 여기서 MDC 101부터 104까지의 코드를 따라해보는게 오늘의 목표였다. 물론 104는 약간 어려운 편이라 103까지 따라해도 아주 잘한거라고 북돋아주셨다 :) MDC의 코드는 'Shrine'이라는 쇼핑몰을 로그인 화면부터 리스트뷰까지 구현하는 내용이고, 가장 기본적인 수직형태로 밑으로 스크롤하는 리스트뷰부터 수평형태로 옆으로 스크롤하는 리스트뷰와 다양한 컬러 모드를 입힐 수 있는 코드를 따라할 수 있다.

MDC 104까지 하면 이런 모양의 안드로이드 앱을 만들 수 있다!

 

후원사 라이트닝 토크

자란다의 정서경 대표님의 스피치

성공적인 행사 뒤에는 후원사의 후원이 있다. 오늘의 행사와 지식을 위해서 기꺼이 후원해주신 후원사는 Google Korea와 아이맞춤 놀이/학습시터 매칭사 '자란다'와 디지털 광고 제작과 시각 디자인 AI를 제작하고 있는 '리메이크'에서 인사이트가 될 만한 토크와 인재를 구한다는 소식을 전해주셨다. 자란다와 리메이크 모두 좋은 말씀으로 좋은 시간을 함께 해주셨지만, 특히 여성 대표님이 와주신 자란다의 라이트닝 토크는 자신의 경험담을 풀어가면서 어떻게 커리어를 키워나갔고 사업을 시작하게 되었는지에 관한 스피치에서 많은 영감을 얻고 본보기가 되어주셨다. 비록 나는 디자이너 직군이 아니지만 앞으로 상대를 설득할 때 어떤 근거 자료를 가지고 설득하면 좋은지, 기획을 할 때 정량적인 데이터가 왜 중요한지 깨달을 수 있는 시간이었다.

 

개발 밋업을 많이 다녀본 적이 없어서 기타 다른 밋업과 어떻게 비교해야 할 지 모르겠지만, 개인적인 경험에 비춰보자면 플러터 행사는 항상 사려가 깊어서 현장에 참여하는 것을 주저하지 않게 만들어준다. 덕분에 용기를 얻어서 개발자 밋업을 다녀보려고 여기저기 기웃거리는 중이다. (네트워킹이 필요하니 친한 척(?) 부탁드립니다;ㅅ;) 그리고 커피만 있을 줄 알았는데 차도 있어서 좋았다. 나는 티 러버니까 희희. 그래도 아쉬운 점을 지적하자면 콘센트가 부족했다는 점과 개발환경에서 진행속도가 좀 천차만별이었다는 점이랄까. 콘센트는 멀티탭을 여기저기서 끌어오면 좋았을 텐데 싶지만 그래도 공간의 한계라는게 있어서 크게 아쉽진 않았고 전날 내가 충전을 해올걸 싶었다. 아무튼 이번에도 만족스러웠던 플러터 행사였다!