요즘 플러터(Flutter:구글에서 개발한 앱,웹개발 크로스 플랫폼)가 개발자들 사이에서 화제다. 앱에서 UI디자인을 동적이고 세련되게 구현하기 좋도록 되어있고 처리능력 또한 빨라 많은 개발자들에게 관심을 받고 있다. 아직 타 플랫폼에 비해 커뮤니티가 적다는 단점이 있음에도 난 상당히 매력을 느끼게 되어 시작한다. 그러다 바로 설치에서 부터 문제가 있어 그 점을 찾아내어 기록한다.
Flutter 설치
우선 플러터 홈페이지로 가서 설치파일을 다운받아 진행해보자. 아래는 플러터 홈페이지 링크이다. (플러터, 플루터 등 아직 부르는명칭이 다양하다.)
메인화면 상단 오른쪽에 Get started를 클릭해준다.
다음으로 인스톨 창에서 자신의 컴퓨터에 맞는 OS를 선택해준다. 오늘은 윈도우즈에 설치한다.
중앙에 ZIP파일 설치파일을 클릭하여 다운받고 풀어준다.
나는 C드라이브에 Develope라는 폴더를 하나 만들어두었고 거기에 압축을 풀어주었다.
거기서 flutter_console.bat파일을 클릭해보면 콘솔이 뜬다. 윈도우에서 제공하는 Command콘솔을 활용해도 되고 아님 이걸로 활용하면 된다. 몇가지 확인할것이 있어 사용해야한다.
콘솔에flutter doctor를 치고 엔터를 처보자.
위와같은 메세지가 나오는데 플루터를 사용하기 위해 준비되어야 할것들을 체크해준다.
현재 3개의 이슈를 찾았고 읽어보면 아직 SDK위치 설정이 안되었고 안드로이드 스튜디오가 설치되어 있지 않다, 그리고 기기에 연결되어 있지 않다는건데....마지막 기기(Device)는 에뮬레이터가 아닌 실제 모바일 기기 연결에 대한 내용인거 같은데 패스해도 무방하니 위 두가지를 처리해보자.
Android Studio 설치
안드로이드 스튜디오는 다른 개발툴과 다른게 앱개발에 특화된 개발툴로 사용이 편리하다.
아래 링크는 설치 파일을 다운로드할 수 있는 안드로이드 스튜디오 페이지 링크이다.
https://developer.android.com/studio?hl=ko
빨간 표시를 해둔 버튼을 눌러 주자.
약관 동의 절차가 이뤄지고 체크후 다운로드를 클릭해준다.
다운로드 받은 파일을 실행하면 설치를 진행한다.
기존에 사용하던 세팅이 있어 그대로 사용하려는거 아니면 그냥 위에 체크해둔데로 진행하면 된다.
본격적으로 설치 진행이다. 특별히 손델건 없고 넥스트를 클릭해준다.
특별히 수정할 내용이 없으면 스탠다드 모드로 설치 진행해주는게 무난하다.
에뮬레이터까지 설치 되었다고는 하나 막상 들어가보면 실제 에뮬레이터 기기 파일까지는 설치되어 있지 않으니 다음 단계로 넘어간다. Finish!
설치가 완료되고 안드로이드스튜디오를 실행하면 나타나는 첫화면이다. 우선 Start a new Android Studio project를 눌러 시작하자.
그리고 에뮬레이터를 하나 설치해주자. ( 설치하는 방법은 따로 `안드로이드 스튜디오 AVD manager'로 검색해보면 알 수 있다.)
사실상 여기까지만 해도 플러터 사용에 있어 안드로이드 스튜디오 관련 준비는 끝이다.
여기서 추가로 안드로이드 스튜디오가 아닌 에뮬레이터 없는 개발툴 (ex: VS code)에서 바로 에뮬레이터를 실행해보기 위해 준비할 과정을 기록해둔다.
에뮬레이터를 환경변수에 적용
에뮬레이터가 설치된 폴더위치를 환경변수(사용자 변수가 아닌 시스템 환경변수) path에 추가해주자.
안드로이드 스튜디오에서 에뮬레이터를 설치하게되면 보통 사용자 폴더에 AppData라는 폴더 안에 설치되는데 이게 숨긴파일로 설정되어 있다. 숨긴항목 보이기 체크해주고 찾아들어가자.
위와같은 위치에 설치되어 있고 이 위치를 복사해두자.
시스템속성창을 열어주는데 이렇게 윈도우즈10기준 검색창에 환경으로 검색해서 바로 들어갈 수도 있다.
시스템속성 창이 뜨면 환경변수를 클릭!
시스템변수에 path를 클릭 그리고 편집을 누르고 창이 뜨면 새로 만들기를 눌러 복사해둔 경로를 붙여넣어주고 확인을 눌러 저장해주면 끝이다.
에뮬레이터를 쉽게 불러올 수 있게 이름을 간단하게 변경해주자.
위와같이 명령어를 처보자.
안드로이드 스튜디오를 안열어도 잘 작동한다. 단 아직 이걸 개발툴에서 어찌 연동하는지는 아직 안해봐서 의문을 가지고 있다. 추후에 해보고 기록하도록 하겠다.
Android Studio 설치
자 이제 설치는 완료가 되었고 몇가지 세팅이 추가로 이루어 져야한다. 안드로이드 스튜디오에 플루터와 다트(플러터에서 사용할 개발언어)를 세팅해주고 플러터를 환경변수에 적용해주는것이다.
안드로이드 스튜디오를 다시 실행하여 플러그인으로 가서 플러터를 설치해야하는데 아래와같은 창이 뜨질 않고 자꾸 그냥 이전 작업하던 파일을 그냥 열어버린다. 물론 내부에서도 플러그인 설치를 진행할 수도 있겠지만 불편하니 항상 아래와 같이 창이 뜨도록 설정을 할 수 있다.
대분류 메뉴에서 File > Setting > System Setting 로 가 Reopen last project on startup을 체크해제 해주면 된다.
그리고 시작해보면 위 창이 뜨는데 아래에 Configure을 누르면 창이 추가로 뜨고 거기서 Plugins를 클릭해주자.
마켙플레이스 탭에서 Flutter를 검색해주면 위와같이 인스톨 메뉴가 뜬다, 인스톨해주자. 그리고 재 시작을 해주어야한다. 그전에....
Flutter설치 폴더 안에 Bin폴더를 환경변수에 넣어주어야하니 위와같이 경로를 복사해두자.
그리고 앞서 에뮬레이터를 넣어준곳과 동일하게 시스템변수에 path에 추가해준다.
그리고 안드로이드 스튜디오를 다시 실행해보면 위와같이 플러터 프로젝트를 생성할 수 있는 메뉴가 떠 있는걸 볼 수 있다. 눌러서 시작해준다.
위와같은 창이 뜨면 체크해둔 Flutter Application을 그대로 두고 넥스트를 눌러준다. 기본형이다.
시작하면 우선 빌드를 한다. 이 상태에서 그냥 진행하지 말자, 아직 여러 세팅이 덜 이루어 져 있다. 빌드가 완료된걸 보고 이걸 에뮬레이터로 실행을 해보자, 잘 준비가 되었는지 확인해봐야한다.
그러면 한참을 에뮬레이터에서 반응을 하지 않을것이다. 플러터가 또 유명한게 수정된거에 에뮬레이터에서 즉각즉각 빠르게 반응한다는 점이 있다. 그런데 이상하게 한참을 기다려도 반응을 안할것이다. 이는 아직 안드로이드 스튜디오가 준비가 안되어서이다. 처음만 그러한데 기다리다보면 위와같이 많은 세팅을 하는걸 볼 수 있다.
그나만 내 컴퓨터가 사양이 좋아 빠르게 진행 완료되고 위와같이 잘 작동되는걸 확인 할 수 있었다.
이제 시작이다. 오픈된 화려한 UI소스들을 접목도 시켜보고 하며 생각해둔 프로젝트를 플러터롤 구현해 나갈것이다. `플장'은 플러터장인을 줄여보고 만들었다. 물론 플러터만 하지 않을것이다. 첫업이 디자이너였던 나에게 플러터는 상당히 매력적으로 다가왔고 이를 활용해 멋진걸 만들어 낼 것이다.
'앱개발' 카테고리의 다른 글
| 웹페이지 Network API 분석을 Postman으로 Har파일 복잡해서 GPT에게 안 읽혀지는거 읽을 수 있도록 해주는 방법 (0) | 2025.04.11 |
|---|---|
| vscode에서 한글 작성 시 끝에 글자 반복되는거 해결하는 방법 (0) | 2025.03.25 |
| Cursor AI에 composer창에 대해 / chat창과 composer창의 차이 (0) | 2024.12.03 |
