[kotlin] Build Your First Android App in Kotlin 무작정 따라하기 - 2

 

Build Your First Android App in Kotlin  |  Android Developers

이전 글에서는 위 링크의 1, 2번 단계를 정리해두었다. 이 글에서는 3번을 정리하도록 하겠다.

흥미로운 것을 발견했는데, 번호는 1번부터 시작하지만 링크 뒤에 붙는 번호는 0번부터 시작해서 3번째 단계의 링크에는 뒤에 #3이 아니라 #2가 붙는다.

 

3. Task: Create your first project

이 단계에서는 안드로이드 스튜디오로 앱을 만드는 기초적인 방법에 대해서 설명해주는데, 좀 더 구체적으로는

- Android Studio에서 프로젝트를 만드는 방법,

- emulated Android device를 만드는 방법(아마 컴퓨터로 안드로이드 기기 환경인 양 테스트 해보는 걸 의미하는듯),

- emulator로 앱을 돌리는 방법,

- 실제 기기를 가지고 있으면 거기에서 앱을 돌려보는 방법

을 설명한다고 한다.

 

나는 실제 기기에 테스트 해보는 것은 생략해보도록 하겠다.

 

Step 1: Create a new project

우선, 앞서 설치한 안드로이드 스튜디오를 켜서 새 프로젝트를 만들어보자.

나는 다크 모드로 설치해서 첫 화면이 이렇다. 여기서 New Project를 누르면

 

이렇게 생긴 창이 뜨는데, 처음에는 디폴트로 'Empty Activity'가 선택되어 있는데 이거 말고 'Basic Activity'를 선택한 다음 next 버튼을 누르도록 하자.

 

그러면 이런 창이 뜨는데, 이 캡쳐는 next 누르자마자 바로 뜬 거고 여기에서 튜토리얼에서 하라는 대로 Name을 MyFirstApp으로 바꿔주고 Language가 Kotlin으로 되어있는지 확인하고 Finish를 누르도록 하자.

 

여기까지 하고 나면,

- AndroidStudioProject 경로에 방금 새로 만든 프로젝트가 생기고(Save location에 써있던 경로를 말한다)

- 안드로이드 스튜디오가 Gradle을 써서 프로젝트를 빌드해준다고 한다. Gradle이 뭔지 처음 들어보는데, 일단 음 그렇군 하고 넘어가보도록 하겠다.

- 빌드가 끝나면 코드 에디터가 열린다.

 

Step 2: Get your screen set up

이게... 뭐시여... 튜토리얼 페이지에는 깔끔한 화면이 있는데 나한테는 뭔가 복잡해보이는 것이 나왔다. 일단 튜토리얼에서 하라는 대로 gradle 윈도우를 최소화 시키도록 하겠다. 이 캡쳐에서 오른쪽에 있는 탭들(Gradle, Assistant라고 써있는 것들)에서 Gradle 아이콘 바로 옆에 있는 - 버튼을 누르면 되는듯.

 

뭔가 화면이 넓어졌다. 그리고 캡쳐 뜨고 글 쓰고 있던 사이에 빌드가 끝났는지 아래 상태표시줄 쪽에 뭔가 로드하고 있던 것이 사라지고 'daemon started successfully' 라는 문구가 나왔다.

 

튜토 화면과 조금 다른 것 같지만... 일단은 그대로 진행해보도록 하겠다.

 

Step 3: Explore the project structure and layout

튜토 페이지에서는

1. app을 누르면 프로젝트 파일들의 구조를 볼 수 있고,

2. project를 누르면 지금 화면에 있던 프로젝트 구조를 숨길 수 있고,

3. 현 project 탭에 보이는 것은 project > Android라고 써있는데, 내 화면에서도 색만 다르지 저기에 써있는 것 그대로 나와서 그냥 음... 그렇구나 하고 넘어갈 수 있었다.

 

그 뒤로는 저 폴더 구조 각각에 뭐가 들어있는지 설명이 이어지는데, 한 번쯤 읽고 가면 좋은것 같다.

1. manifests 폴더에는 AndroidManifest.xml 파일이 있는데, 앱 실행하는 중에 런타임 시스템이 쓴다... 고 되어있지만 지금은 중요해보이지 않으니 넘어가자.

2. java 폴더 아래에 kotlin 파일들이 다 들어있다. 위 캡쳐에 나와있는 com.example.myfirstapp에 코틀린 소스코드가 들어있고, 그 아래 닫혀있는 두 폴더에는 유닛 테스트 뼈대 코드들이 들어있다고 한다.

3. res 폴더에는 images, layout files, strings, icons, and styling 등의 앱에 필요한 리소스들이 들어있다고 한다(resource의 앞 세 글자를 따서 res인가보다.). 이 폴더 아래에 있는 서브 폴더들은

- drawable: 앱에 필요한 이미지들이 여기에 들어간다.
- layout: UI 레이아웃 파일들이 들어간다. 아직 무슨 말인지는 잘 모르겠지만 넘어간다.
- menu: 이 앱에 들어가는 메뉴의 xml 파일이 들어간다. 아직 무슨 말인지는 잘 모르겠지만 넘어간다.
- mipmap: 앱 실행할때 누르는 아이콘 이미지가 여기에 들어간다.

- navigation: navigation graph가 들어있다는데 이것도 아직 잘 모르겠다.
- values: 앱에 쓰일 string, color 등의 정보가 여기에 들어간다.

 

Step 4: Create a virtual device (emulator)

여기서는 Android Virtual Device (AVD) manager라는 걸 사용한다고 하는데, 뭔지 모르겠으니 일단 하라는 대로 해보자.

 

상단 메뉴에서 Tool > AVD Manager를 찾는다. 그러면 다음 화면이 뜨는데,

여기서 가운데 있는 버튼을 클릭해보자.

기기들이 잔뜩 뜬다. 디폴트로 Pixel 2가 뜨는데, 일단 이걸로 가보기로 하겠다.

시스템 이미지가 또 몇 가지 뜨는데, 하나라도 다운로드 해서 들고 있어야 다음으로 넘어갈 수 있나보다. 맨 위에 있는 걸 다운로드 받았더니 1.1GB나 잡아먹는다. 그래서 튜토리얼에 필요한 것만 다운받으라고 써있는 거구나.

 

그러고 몇 번 finish랑 next 누르니까 이번엔 또 avd 옵션 넣어서 뭘 만들어야 한다. 그냥 next 버튼이 비활성화 되어있어서 뭘 더 입력해야 하나보다 하고 뒤적거렸는데, 다시 보니까 Finish 버튼이 끝에 있어서... 그냥 finish를 눌러서 끝냈다.

 

그러면 virtusal device가 새로 생긴다! 위에 x를 눌러서 창을 닫아주자.

 

Step 5: Run your app on your new emulator

밖으로 나오면 이제 저 위에 방금 만든 가상 디바이스가 들어가있는 것을 볼 수 있다. 딱 봐도 run일것 같아보이는 저 재생버튼을 눌러보자. 그러면 아래 상태표시줄에 뭔가 진행되기 시작하고, 새로운 창이 하나 슬쩍 생긴 것을 알 수 있다.

 

핸드폰 화면이 나타났다...! 언제 생겼는지 모르겠는데 윈도우 작업표시줄에 새 아이콘이 있길래 클릭했더니 저런게 나타났다.

오오... 기다렸더니 폰 화면이 나타났다. 아직 빌드가 끝나지 않은것 같으니 좀 더 기다린다.

 

딴짓하다 와보니 어느새 앱이 실행되어 있다. 아래 Launch succeeded 메세지가 떠있고, Gradle 빌드에 시간이  얼마나 걸렸는지도 나온다. 노트북으로 작업하고 있는데 심히 힘들어하는것 같다. 핸드폰 화면의 next를 누르면 다음 화면으로 넘어간다.

 

튜토리얼 페이지에 나온 설명에 따르면,

- 한 번 에뮬레이터를 켰으면 테스트 끝날 때까지 끄지 않는 것이 좋다고 한다. 이거 한 번 끄고 켤때마다 들어가는 시간 생각하면 무슨 말인지 바로 이해가 되는듯.

- 메모리 사용을 줄이기 위해 한 번에 둘 이상의 에뮬레이터를 켜두지 말라고 한다. 이 얘기 보고 바로 작업관리자 들어가봤더니 안드로이드 스튜디오 혼자서 메모리를 거의 900MB를 먹고 있네... 아까 재생 버튼 있었던 곳 가보니까 중지 버튼 보이길래 바로 눌렀으나, 이거 누르는 것만으로는 에뮬레이터가 꺼지지는 않고 앱만 꺼지는것 같다.

 

그래서 에뮬레이터 옆에 있는 전원 버튼 눌렀더니 폰 화면에 전원 끄겠냐는 화면이 떠서 그거까지 클릭했더니 에뮬레이터가 종료되었다.

 

Step 6: Run your app on a device (if you have one)

...는 별 관심 없으니 생략하고,

 

Step 7: Explore the app template

아이고... 앞에서  에뮬레이터 껐더니 여기서 저 앱 화면 가지고 노는 것이 나온다. 에뮬레이터 다시 실행하는 것이 너무 귀찮으니 간단히 내용만 읽어보고 넘어가도록 하겠다.

 

- 화면에서 오른쪽 아래의 민트색 메일 버튼을 누르면 앱 하단에 어떤 메세지가 뜬다고 한다. 이 영역을 snack bar라고 부른다고.

- 화면에서 오른쪽 위의 점 세개 버튼을 누르면 쭈르륵 탭이 뜰 수 있게 되어있는데, 저 예제에서는 'Settings' 탭 하나만 있고, 그걸 누르면 아무 일도 일어나지 않는다고 한다.

- 혼자서 해본 건데, 화면 가운데에 next 버튼을 누르면 다른 화면으로 넘어간다.