[Flutter 개발 환경 초기 세팅 3/3] - Android Studio 설치 및 실행

[Flutter 개발 환경 초기 세팅 3/3] - Android Studio 설치 및 실행

 

이전 2개의 포스팅에서, JDK 및 Flutter SDK를 설치하고 환경변수를 세팅하는 과정을 살펴보았습니다.

실제로 Flutter App을 코딩하고 만들기 위해서는 몇 가지 프로그램들을 더 설치하는 과정이 필요합니다. 일단은 Android Studio를 설치하는 과정을 정리해두기로 합니다.

 

 

1. Android Studio와 Emulator 설치 하기

 

아래 경로로 접속합니다.

https://developer.android.com/studio?hl=ko

Android 스튜디오 및 앱 도구 다운로드 - Android 개발자  |  Android Studio  |  Android Developers

 

딱! 봐도 다운로드 버튼 같은 녀석을 바로 클릭해보도록 합니다.

포스팅 작성 시점에서의 안드로이드 스튜디오 버전은 Jellyfish 인가 보군요.

 

이어 나타나는 사용약관 페이지에서 사용동의 체크하고 Keep Going~

다운로드가 완료되면 다운 받은 파일을 실행을 해줍니다.

 

 

 

그리고 주구장창 [Next] 버튼만 클릭해주면 오케이~ 4달라!

 

 

프로그레스 바가 꽉 차면, 다 설치된 거 겠죠? 친절하게도, Start Android Studio에 체크가 되어 있군요.

아무 생각없이, [Finish] 버튼 꾹!

 

 

아래와 같은 창이 뜹니다. 기존에 사용하던 안드로이드 스튜디오 세팅값이 있으면 불러올래? 뭐 그런 의미입니다.

처음 설치하는 것이므로 있을리가 없으므로, 그냥 [OK] 버튼 빡!!

 

 

뭘 또 자꾸 물어보는군요. 사용 통계 정보를 Google에 보낼래? 뭐 이런 질문이죠. 아무래도 저의 사용 통계는 구글에 전혀 도움이 되지 않을 것이라는 험블한 판단으로 '돈 센드'를 저는 선택했습니다. 당연히 저의 코드는 부끄러운 수준입니다.

 

 

뭔가 또 나타납니다. 자세히 보니, Android Studio Setup Wizard.

얼른 마법처럼 알아서 잘 설치해줬으면 하는 마음을 담아, Next 버튼을 클릭.

 

 

저는 타인의 모범이 되는 스탠다드한 사람이므로, Standard로 진행.

 

뜨는 창이 좀 많군요. 이런 것들을 설치할거야, 님 확인?

 

이젠.. 설치하다 지칠 것 같습니다. 마법사라며 뭘 자꾸만 계속 물어옵니다.

처음이면 살짝 어리버리 삽질 할 것만 같은 UI입니다. license 2개를 각각 모두 Accept 해줘야 합니다. 밑줄 쫙!

 

그래야, Finish 버튼이 파랗게 변하고 클리커블하게 변합니다. 끝장을 보자는 느낌으로 빡!

 

이후 컴포넌트 들을 다운로드 받는다고 알려주는데, 뭔가 느릿느릿... 진도가 잘 안나가는 느낌입니다.

진행상황이 궁금하면 눈치껏 [Show Details] 버튼을 클릭해주고 구경을 해보려 합니다만... 그래도 진행이 좀 더디군요.

 

어느 순간 갑자기 열일을 시작합니다. 뭐 잘 되고 있겠죠.

 

 

설치가 끝나고 Finish 버튼을 클릭하면, 드디어 기다려 온 앤~드로이드 스튜디오 시작화면을 볼 수 있게 됩니다.

 

 

 

2. Flutter 작업을 위한 Plugins를 설치해주자

 

플러터 앱을 만들기 위해서니까, 플러터 플러그인들을 설치해줘야합니다. 왼쪽에서 Plugins 메뉴를 클릭.

Marketplace 검색창에 fultter를 타이핑하고 검색결과에서 Flutter를 인스톨 해줍니다.(뭐 VSCode에서 봤던 방식하고 비스무리한 것 같습니다.)

 

 

빨간색으로 Restart IDE라고 표시하니, 왠지 눌러줘야 할 것 같은 느낌적인 느낌대로 Restart 빡!!

 

 

안드로이드 스튜디오가 다시 시작되고 나면, Flutter 플러그인 설치 덕분에 이렇게 변해 있음을 알 수 있습니다.

 

 

 

3. New Flutter Project를 시작해보자

 

새 Flutter 프로젝트를 시작하고, 왼쪽 메뉴에서 Flutter를 클릭해주면, 오른쪽에 Flutter SDK path가 나타나는데 경로가 비어 있습니다. 뭐, 직접 찾아주면 되는거죠.

 

 

오른쪽 쩜3개를 눌러주고, flutter 설치경로를 선택하고 [OK] 버튼 뙇!!

 

 

새 프로젝트에 대한 정보를 세팅하는 창이 나타납니다. 그냥 대충 아래와 같이 기입해보았습니다.

프로젝트 location은 D 드라이브에 stydy_Flutter 폴더를 하나 만들어서 그쪽으로 모아 두고자 합니다.

Platforms에서는 안드로이드, iOS, Web 세 개를 선택해두었습니다. 

드디어 [Create] 라는 버튼이 보이는 단계가 온 것 같습니다! 박력있게 빡! 클릭!

 

 

우쒸... Dart 패키지 네임은 소문자만 써야 하는군요! 다트도 문외한인데, 이참에 하나 배웁니다!!

 

폴더명을 모두 소문자로 변경하고, 다시 Create. 성공!!

 

 

 

4. 무엇에 쓰는 IDE인고? - Android Studio 살펴 보며 기본 세팅하기

 

처음 만나보는 안드로이드 스튜디오의 모습이 뭔가 상당히 복잡 다난해보입니다. 와... 상당히 낯선 모습에 무엇부터 눌어봐야할 지 모를 정도입니다.^^;

 

4-1. 아직은 불필요한 Assistant 창 닫기

 

일단 우측 아이콘 모음 메뉴에서 Assistant 아이콘을 클릭하면 Assistant 창이 사라집니다.

 

화면이, 일단 뭔가 1/3은 간결해진 느낌이 빡~ 듭니다. 역시 빼기가 중요합니다. 다행입니다.

 

 

4-2. 탐색창을 프로젝트로

 

현재는 Flutter를 학습하기 위한 목적이니, 앱구조를 보고 파악하기 위한 목적으로 Android가 디폴트로 선택되어 있던 탐색창을 Project로 바꿔줍니다.

 

 

폴더 구조를 살펴보면 알겠지만, Flutter 프로젝트로 인해 하위로, Android, iOS, web용 앱을 위한 폴더들이 자리잡고 있는 것을 알 수가 있겠습니다.

 

 

4-3. 기본 생성되어 있는 카운터(counter) 앱을 에뮬레이터로 실행해보자

 

Flutter에서는 프로젝트를 생성할 때 마다, 아래와 같은 main.dart로 주석과 함께 작성되어 있는 Counter App.을 만들어줍니다.(물론 프로젝트 세팅에서 그렇지 아니하도록 세팅할 수도 있습니다만.. 아무튼 디폴트 설정이 그렇습니다.)

 

 

어떤 모습으로 돌아가는 앱인지, 작성이 되어 있는 코드를 Emulator로 한번 실행을 해봐야겠습니다.

 

안드로이드 스튜디오 상단에서 <no device selected>를 클릭합니다. 처음 설치를 한 상황이라 그런지, 아무런 Emulator가 보이지 않고 있습니다. 그렇다면, Refresh를 클릭 !

 

 

Refresh된 후 다시 <no device selected>를 클릭해보면, 아래와 같이 Open 어쩌고 하면서 Emulator 항목이 보이게 됩니다.

 

 

자, 그러면 다른 에뮬레이터를 추가로 설치해보도록 해보겠습니다.

우측 아이콘 메뉴에서, Device Manager 아이콘을 클릭 후 플러스[+] 버튼을 누고 Create Virtual Device를 선택해줍니다.

 

 

Select Hardware 창이 나타나고, 디바이스 해상도를 골라잡으라고 물어옵니다.

해상도 확인하고 필요한? 적당한? 항목을 선택하도록 합니다. 일단 저는 Pixel 8 Pro를 선택해보았습니다.

그리고 [Next] 버튼 빡!

 

 

추천한다고 하니, Recommend 탭에서 Tiramisu를 선택하고 다운로드 아이콘을 클릭해서 SDK를 다운로드 받습니다.

티라미슈를 선택한 이유는 딱히 없고, 너무 최신 버전 보다는 적당히 하위에 있는 것들이 Stable 하고, 인터넷에서 강좌 찾기도 수월한 것으로 골라보았습니다.

 

 

티라미슈 SDK 다운로드가 종료되면, Finish 버튼을 빡! 눌러주고, 활성화 된 [Next] 버튼을 클릭해줍니다.

 

 

에뮬레이터는 세로형으로 표시하려고 Portrait을 선택해줬습니다. 그리고 [Finish] 버튼을 클릭해줍니다.

 

 

위 결과로 Pixel 8 Pro Emulator가 추가됨을 확인할 수 있습니다. 필요한 에뮬레이터는 이와 같은 방법으로 그때 그때 추가하면 되는 것이겠군요!

 

자, 이제 다운로드 받은 에뮬레이터로 main.dart 앱을 실행해보도록 합니다.

우측 상단에서 <no device selected>를 클릭 후 Pixel 8 Pro를 선택해줍니다. 어라? 픽셀8 프로가 안 보인다구요?

앞에서 설명했습니다. Refresh 꾹!!

 

 

Pixel 8 Pro를 선택해 준 후, 우측에서 Running Devices 아이콘을 클릭합니다. 드디어, 뭔가 휴대폰 화면 같은 게 나와주는군요!  (만약, 에뮬레이터 로딩과정에서 에러가 발생한다면 안드로이드 스튜디오를 종료했다가 다시 실행해보세요)

 

 

안드로이드 스튜디오 상단에서 초록색 삼각형, 실행 버튼을 클릭합니다.

 

 

추가로 필요한 패치 등을 안드로이드 스튜디오가 진행해주는지... 무슨 일 인지 한참 동안 일어납니다.

그리고 에뮬레이터에, 숫자 카운트를 올릴 수 있는 카운터 앱이 실행되었습니다. [+] 버튼을 클릭해보면 숫자가 하나씩 증가하는 것을 확인할 수 있습니다. 

 

 

 

마치며

 

꽤나 복잡한듯 긴 과정으로 안드로이드 스튜디오 설치 및 에뮬레이터로 실행해보는 프로세스를 정리해보았습니다. 사실 저도 안드로이드 스튜디오는 수 년 전에 수박 겉 핥기 식으로 살펴본 게 다라, 시간이 오래 흐르고 난 뒤 다시 만나게 되니 여러 모로 낯설고 변화도 많아 보입니다.

 

그러면 또 뭐 어떻겠습니까? 차츰 서로 익숙해져 가면 되는 것이죠.

오늘 부터 우리 1일이닷!

 

오늘도 즐거운 코딩 생활, 즐코딩.

KINcoding.com