본문 바로가기
프로그래머

6. [Android Studio]Flutter 테스트 소스를 안드로이드폰/iPhone에 배포하기

by 정보경험 2022. 2. 22.
반응형

Flutter 설치를 완료 하였습니다. 안드로이드 스튜디오도 완료 하였습니다. 

일단 안드로이드로 앱을 만들어 보도록 하겠습니다.  ( iOS 앱은 안드로이드 먼저 테스트 프로젝트 한번 만들어 보고 

해당 앱의 코드를 써서 iOS 및 맥북 DeskTop Application으로 코드 변경없이 사용을 할수 있는지 테스트를  해보는 단계로 하나씩 진행을 해볼까 합니다. 

 

Flutter를 사용하려고 했던 목적이 One Source Code로 다종의 멀티 OS와 Device에서 작동하는 어플리케이션을 만들수 있는지를

알고 그게 된다고 하면 개인 개발자로서 앞으로 개인 프로젝트 진행시 제 주력 언어로 사용을 해볼려고 합니다.

 

저는 주력이 백엔드 개발자 이고 현재는 개발팀 팀장입니다.

너무 프로그래밍을 안한지 오래되서 개인적으로 프로그램 실력을 계속 유지하고 새로운 기술을 공부하기 위해서 별도 개인 프로젝트를 진행중인데요.

 

솔직히 저는 FrontEnd 개발은 회사용으로 과거 많이 만들어 보았지만 B2C로 제품을 만들어 본적은 그렇게 많지 않습니다. 

그러다보니 범용적으로 쓸수 있는 멀티 OS와 디바이스에 작동하는 언어를 찾고 있었는데

 

앞으로 새로익힐 기술로 Front-End 는 Flutter로 Back-End는 Rust 로 새로운 언어로 기존 방식을 버리고

개발의 효율성 및 클린코드와 아키텍처등을 고려해서 기존 기술과 위 두개의 언어들이 어떤지도 공부하고 새로운 저만의 무기로

갖기 위해서 공부를 시작 했습니다.

 

넋두리가 많네요~ 자 그럼 다시 시작 해볼까요?

 

안드로이드 스튜디오를 맥북에서 실행을 시킵니다. 

아래와 같이 Flutter Project가 화면에 보이네요. 이게 최신 버전들로만 지금 계속 업데이트 하면서 진행중이라

아마 아래 보이는 화면이 최신 UI일껄로 추측 됩니다.

안드로이드-스튜디오-프로젝트
안드로이드-스튜디오-프로젝트

 

 

 

안드로이드-스튜디오-프로젝트-설정
안드로이드-스튜디오-프로젝트-설정

 

 

 

Flutter와 Dart plugin이 설치된 모습을 확인 할수 있습니다. 

그 말로만 듣던 Gradle이 있네요. 이거는 아직까지 필요를 못느껴서 안써봤는데 나중에 시간 나면 공부를 해보아야 겠네요. 

 

 

안드로이드-스튜디오-프로젝트-플러그인
안드로이드-스튜디오-프로젝트-플러그인

 

형상관리 툴 Version Controls Plugin은 아래와 같은게 이미 설치 되었네요. 

Git 하고 GitHub 이미 번들로 있으니 추가 설치 할 필요는 없고 이거 쓰면 되겠네요. 

 

 

 

안드로이드-스튜디오-프로젝트-플러그인-Dart
안드로이드-스튜디오-프로젝트-플러그인-Dart

 

 

 

 

 

안드로이드-스튜디오-러닝센터
안드로이드-스튜디오-러닝센터

 

 

좌측의 메뉴들을 다 눌러보니 다양 하게 안드로이드 스튜디오도 베울께 많겠네요. 

 

Flutter Project를 만들어 보겠습니다. 

 

 

 

안드로이드-스튜디오-프로젝트
안드로이드-스튜디오-프로젝트

 

 

안드로이드-스튜디오-프로젝트-디렉토리
안드로이드-스튜디오-프로젝트-디렉토리

 

 

안드로이드-스튜디오-프로젝트-디렉토리
안드로이드-스튜디오-프로젝트-디렉토리

 

 

안드로이드-스튜디오-프로젝트-디렉토리
안드로이드-스튜디오-프로젝트-디렉토리

 

Dart 언어가 Case-Sensitive 하네요. 프로젝트명에 대문자 썼다고 저한테 컴이 뭐라구 하네요. 

 

 

안드로이드-스튜디오-프로젝트-셋팅
안드로이드-스튜디오-프로젝트-셋팅

 

 

이공 하나만 소문자로 해서는 안되는군요.. 결국 모든 글자를 소문자로 바꾸고 Finish 버튼을 눌렀습니다.

 

 

안드로이드-스튜디오-프로젝트-셋팅
안드로이드-스튜디오-프로젝트-셋팅

 

 

 

아래와 같이 나오네요. 그리고 바로 md 파일 때문에 Plug-in 더 설치하라고 뜨네요. 

 

 

 

안드로이드-스튜디오-프로젝트-셋팅
안드로이드-스튜디오-프로젝트-셋팅

 

 

MD 파일 플러그인 설치 합니다. 

 

 

안드로이드-스튜디오-프로젝트-셋팅
안드로이드-스튜디오-프로젝트-셋팅

 

 

이제 프로젝트 생성 완료. 

 

안드로이드-스튜디오-프로젝트-생성완료
안드로이드-스튜디오-프로젝트-생성완료

 

디바이스 에뮬레이터가 아래와 같이 현재 보이지 않습니다. 

 

 

 

안드로이드-스튜디오-프로젝트-에뮬레이터
안드로이드-스튜디오-프로젝트-에뮬레이터

 

아래 Open iOS Simulator를 선택 하여서 맥북에 설치한 iOS 에뮬레이터 프로그램을 실행 시킵니다. 

 

 

안드로이드-스튜디오-프로젝트-에뮬레이터-IOS
안드로이드-스튜디오-프로젝트-에뮬레이터-IOS

 

 

아래와 같이 화면에 에뮬레이터가 보입니다. 

 

 

 

안드로이드-스튜디오-프로젝트-에뮬레이터-IOS
안드로이드-스튜디오-프로젝트-에뮬레이터-IOS

 

 

 

여기서  파일 -> 오픈 시뮬레이터 -> 아이폰 13 맥스 프로 선택 합니다. ( 선택 하고 싶은걸 선택 하세요 ) 

 

 

 

안드로이드-스튜디오-프로젝트-에뮬레이터-IOS
안드로이드-스튜디오-프로젝트-에뮬레이터-IOS

iOS 에뮬레이터를 띄웁니다. 

 

안드로이드-스튜디오-프로젝트-에뮬레이터-IOS-iPhon13ProMax
안드로이드-스튜디오-프로젝트-에뮬레이터-IOS-iPhon13ProMax

 

이제 프로젝트 화면에서 에뮬레이터가 보이는지 찾아 봅니다. 

 

안드로이드-스튜디오-프로젝트-에뮬레이터-IOS-iPhon13ProMax
안드로이드-스튜디오-프로젝트-에뮬레이터-IOS-iPhon13ProMax

 

 

 

오~~ 보이는군요. 이걸 선택 해놓고 프로젝트를 실행하여 보겠습니다.  우측 녹색 화살표 버튼입니다. 

 

 

 

안드로이드-스튜디오-프로젝트-에뮬레이터-IOS-iPhon13ProMax
안드로이드-스튜디오-프로젝트-에뮬레이터-IOS-iPhon13ProMax

 

 

어떤 모습이 나올지 한번 보시죠~  

 

이렇게 나옵니다. 설치 할때 테스트 앱을 만들고 플러터를 실행 했을때와 같은 모습이 에뮬레이터에 뜨는것을 볼수 있습니다. 

이제 안드로이드 스튜디오로 iOS 앱을 만들수 있겠군요. 

안드로이드 앱을 만들고 싶으면 안드로이드 에뮬레이터를 설치 해서 쓰고 싶은 안드로이드 에뮬레이터를 실행하여 사용하면 되겠습니다. 

 

 

안드로이드-스튜디오-프로젝트-에뮬레이터-IOS-iPhon13ProMax
안드로이드-스튜디오-프로젝트-에뮬레이터-IOS-iPhon13ProMax

 

 

자~~ iOS 에뮬레이터는 되었고 그럼 안드로이드 에뮬레이터는 어떻게 될지 한번 해볼까요? 

 

아래 화면에 맨 오른쪽에 안드로이드 로봇 그림 삐죽 나온 핸드폰이 보입니다. 그게 AVD 안드로이드 에뮬레이터 이겠군요

 

 

안드로이드-스튜디오-프로젝트-에뮬레이터-안드로이드
안드로이드-스튜디오-프로젝트-에뮬레이터-안드로이드

 

 

 

메뉴에서 찾으면 아래에서 찾을수도 있더군요. 

 

 

안드로이드-스튜디오-프로젝트-에뮬레이터-안드로이드-AVDManager
안드로이드-스튜디오-프로젝트-에뮬레이터-안드로이드-AVDManager

 

 

 

안드로이드-스튜디오-프로젝트-에뮬레이터-안드로이드-AVDManager
안드로이드-스튜디오-프로젝트-에뮬레이터-안드로이드-AVDManager

 

해당 툴을 실행 하면 아래와 같이 에뮬레이터 화면이 나옵니다. 

 

 

안드로이드-스튜디오-프로젝트-에뮬레이터-안드로이드-AVDManager
안드로이드-스튜디오-프로젝트-에뮬레이터-안드로이드-AVDManager

 

 

 

 

안드로이드-스튜디오-프로젝트-에뮬레이터-안드로이드-AVDManager
안드로이드-스튜디오-프로젝트-에뮬레이터-안드로이드-AVDManager

 

 

 

여기서 맨 밑에 보니 가상 에뮬레이터 생성하기가 있네요. 전 갤럭시 노트를 사용해서 그거 찾아서 생성하여 보겠습니다. 

헐 기본적으로 삼성폰은 제공이 안되네요. 전부 구글 폰....  그래서 사이즈 좀 큰걸로 선택 하여 추가하였습니다. 아래것입니다. 

 

 

 

안드로이드-스튜디오-프로젝트-에뮬레이터-안드로이드-AVDManagerp-Device선택
안드로이드-스튜디오-프로젝트-에뮬레이터-안드로이드-AVDManagerp-Device선택

 

 

 

 

안드로이드-스튜디오-프로젝트-에뮬레이터-안드로이드-AVDManagerp-Device선택
안드로이드-스튜디오-프로젝트-에뮬레이터-안드로이드-AVDManagerp-Device선택

 

 

 

 

 

안드로이드-스튜디오-프로젝트-에뮬레이터-안드로이드-AVDManagerp-Device선택
안드로이드-스튜디오-프로젝트-에뮬레이터-안드로이드-AVDManagerp-Device선택

 

 

 

안드로이드-스튜디오-프로젝트-에뮬레이터-안드로이드-AVDManagerp-Device선택
안드로이드-스튜디오-프로젝트-에뮬레이터-안드로이드-AVDManagerp-Device선택

 

 

흰색 삼각형 화살표 눌러서 실행 하여 보겠습니다. 

 

 

 

안드로이드-스튜디오-프로젝트-에뮬레이터-안드로이드-AVDManagerp-Device선택
안드로이드-스튜디오-프로젝트-에뮬레이터-안드로이드-AVDManagerp-Device선택

 

 

아래와 같이 핸드폰 세뮬레이터가 뜨네요.. 엄청 크네요. 

 

 

 

안드로이드-스튜디오-프로젝트-에뮬레이터-안드로이드-Pixel4XL
안드로이드-스튜디오-프로젝트-에뮬레이터-안드로이드-Pixel4XL

 

 

 

안드로이드-스튜디오-프로젝트-에뮬레이터-안드로이드-Pixel4XL
안드로이드-스튜디오-프로젝트-에뮬레이터-안드로이드-Pixel4XL

 

 

이제 프로젝트를 해당 안드로이드 시뮬레이터를 선택 하고 빌드 해보겠습니다. 

아래 시뮬레이터 폰이 보이네요 선택 하고 녹색 삼각현 화살표 눌로 빌드 합니다. 

 

 

안드로이드-스튜디오-프로젝트-에뮬레이터-안드로이드-Pixel4XL
안드로이드-스튜디오-프로젝트-에뮬레이터-안드로이드-Pixel4XL

 

 

아래와 같이 열심히 만들고 있네요. 

 

 

안드로이드-스튜디오-프로젝트-에뮬레이터-안드로이드-Pixel4XL-빌드
안드로이드-스튜디오-프로젝트-에뮬레이터-안드로이드-Pixel4XL-빌드

 

 

 

생각 보다 처음 안드로이드 시뮬레이터에 배포하는거라서 그런지 안드로이드 SDK설치등  이것 저것 없는 것들 찾아서 자동으로

안드로이드 스튜디오가 설치를 하고 빌드까지 하니 모든 과정이 끝나는데 까지  오래 걸리네요. 

다음 번에 배포 해보면 좀더 빠르지 않을까 싶습니다. 

 

 

 

안드로이드-스튜디오-프로젝트-에뮬레이터-안드로이드-Pixel4XL-빌드
안드로이드-스튜디오-프로젝트-에뮬레이터-안드로이드-Pixel4XL-빌드

 

 

 

시뮬레이터에 iOS시뮬레이터와 똑같이 뜨네요. 하나의 소스로 두개의 다른 모바일 OS에 배포가 가능하네요. 

원래 맥에서 모바일 앱 개발을 하면 그냥 이렇게 되는걸까요?  아니겠죠? ^^ 

 

일단 맥북 M1 프로세스 프로맥스에서 안드로이드 스튜디오를 깔고  플러터 프로젝트를 생성해서 iOS 시뮬레이터와 안드로이드 시뮬레이터에 하나의 프로젝트를 배포하여 같은 결과를 얻을수 있는것 까지 확인 하였습니다. 

 

 

안드로이드-스튜디오-프로젝트-에뮬레이터-안드로이드-Pixel4XL
안드로이드-스튜디오-프로젝트-에뮬레이터-안드로이드-Pixel4XL

 

 

 

일단 하나의 플러터 테스트 프로젝트를 생성하여 두 종류의 구글과 애플의 디바이스에 배포가 가능한것을 확인 완료하였습니다. 

신기하고 참 재미있네요.

 

이제 환경은 갖추었으니~ 실제 구현을 통해서 어떤걸 만들어 낼수 있을지 공부를 시작 해보아야 겠네요.

 

저는 백엔드 소프트웨어 엔지니어이고 백엔드 개발팀 팀장이다 보니 앱이 원래 이렇게 쉽게 만들수 있는건지?

그리고 구글과 아이폰에 이렇게 앱을 쉽게 배포할수 있는 환경을 만들수 있는건지 아니면 네이티브 앱들이

양진영이 많이 달라서 쉽게 만들수 없었는데 플러터라서 쉽게 만들수 있는건지는 현재 비교 분석할 지식이 없습니다.

 

하지만 백엔드 개발자가 이렇게 쉽게 앱을 만들고 배포 할수 있다면 많은것을 할수 있을꺼 같습니다.

 

백엔드 개발팀 팀장으로서 저희 팀원들에게 Front-End를 쉽게 만들고 컨셉 형 혹은 프로토타입형 앱과 데스크탑 및 테블릿 앱을

만들수 있다면 엄청 많은 걸 해낼수 있을꺼 같아서 공부를 시작했는데...

 

오~ 일단은 Flutter 멋진거 같습니다.

 

이건 한번 깊이 있게 공부 해볼만 한거 같습니다.  일단  다양한 테스트 앱을 카피 프로젝트 형태로 만들어 보면 어느정도의 Dart언어와 Flutter가  새로운 변화를 가져올수 있는지 정도를 감안할수 있을듯 합니다. 

 

열심히 실제 존재 하는 앱들을 카피 프로젝트를 Flutter로 구현 해보겠습니다. ^^ 홧팅. 

내일 일할려면 잠자러 가야하는데... 이공 벌써 1시 22분 이네요. 빨리 자야겠다. 내일도 채용에 신입 20명 실내 팀에 업무 배정에 

조직 변경에 올해 실행할 프로젝트 계획 수립에 현업과 예산 검토에 올해 실전체와 팀 인력 계약에 할일 많은데.. 또 너무 새로운 기술에 빠져서 시간 가는줄 몰랐네요.

 

역시 프로그램만짜면... 걍 주구 장장 앉아서 재미있게 놀수 있는거 같습니다. 프로그램이나 짜면서 평생 잼나게 지내면 좋을꺼 같다는 생각이 다시 드네요~

 

나만의 프로그램들을 만들어 보는 미니 프로젝트를 계속 해보면서 즐거움을 찾아 나아가야겠습니다. ~~

새로운거 또 해보니 기분좋다~ ^^

 

  

같이 보면 좋은 글들입니다. 

 

반응형