Android Kotlin 기초 01.4: 실습 및 참고 자료

이 Codelab은 Android Kotlin 기초 과정의 일부입니다. Codelab을 순서대로 진행하면 이 과정의 학습 효과를 극대화할 수 있습니다. 모든 과정 Codelab은 Android Kotlin 기본사항 Codelab 방문 페이지에 나열되어 있습니다.

소개

이 Codelab에서는 템플릿, 문서, 동영상, 샘플 앱 등 Kotlin Android 개발자에게 유용한 리소스를 알아봅니다.

기본 요건

  • Android 스튜디오의 기본 워크플로
  • Android 스튜디오에서 Layout Editor를 사용하는 방법

학습할 내용

  • Kotlin 및 Android 개발자 정보와 리소스를 찾을 수 있는 위치
  • 앱에서 런처 아이콘을 변경하는 방법
  • Kotlin을 사용하여 Android 앱을 빌드할 때 도움을 받는 방법

실습할 내용

  • 모든 수준의 Kotlin Android 개발자가 사용할 수 있는 리소스를 살펴보세요.
  • Kotlin Android 샘플 앱을 다운로드하고 살펴봅니다.
  • 앱의 런처 아이콘을 변경합니다.

이 Codelab에서는 Kotlin Android 개발자가 사용할 수 있는 템플릿, 샘플, 문서, 기타 리소스를 알아봅니다.

먼저 Android 스튜디오 템플릿에서 간단한 앱을 만들고 앱을 수정합니다. 그런 다음 Android Sunflower 샘플 앱을 다운로드하고 살펴봅니다. 샘플 앱의 런처 아이콘 (해바라기)을 Android 스튜디오 내에서 사용할 수 있는 클립아트 이미지 애셋 (웃는 얼굴)으로 바꿉니다.

Android 스튜디오에서는 일반적이고 권장되는 앱 및 활동 디자인을 위한 템플릿을 제공합니다. 내장 템플릿을 사용하면 시간을 절약하고 디자인 권장사항을 따를 수 있습니다.

각 템플릿에는 스켈레톤 활동과 사용자 인터페이스가 포함되어 있습니다. 이 과정에서 Empty Activity 템플릿을 이미 사용했습니다. 기본 활동 템플릿에는 더 많은 기능이 있으며 Android 기반 기기의 앱 바에 표시되는 옵션 메뉴와 같은 권장 앱 기능이 통합되어 있습니다.

1단계: 기본 활동 아키텍처 살펴보기

  1. Android 스튜디오에서 프로젝트를 만듭니다.
  2. Choose your project 대화상자에서 Basic Activity 템플릿을 선택하고 Next를 클릭합니다.
  3. 프로젝트 구성 대화상자에서 원하는 대로 앱 이름을 지정합니다. 언어로 Kotlin을 선택하고 Use AndroidX artifacts 체크박스를 선택합니다. 마침을 클릭합니다.
  4. 앱을 빌드하고 에뮬레이터나 Android 기반 기기에서 실행합니다.
  5. 아래 그림과 표에서 라벨이 지정된 부분을 확인하세요. 기기 또는 에뮬레이터 화면에서 이에 상응하는 항목을 찾습니다. 표에 설명된 해당 Kotlin 코드와 XML 파일을 검사합니다.

Kotlin 소스 코드와 XML 파일에 익숙해지면 필요에 따라 기본 활동 템플릿을 확장하고 맞춤설정할 수 있습니다.

기본 활동 템플릿의 아키텍처

#

UI 설명

코드 참조

1

Android 시스템에서 제공하고 제어하는 상태 표시줄

템플릿 코드에는 표시되지 않지만 활동에서 상태 표시줄에 액세스할 수 있습니다. 예를 들어 필요한 경우 MainActivity.kt에 코드를 추가하여 상태 표시줄을 숨길 수 있습니다.

2

앱 바( 작업 모음이라고도 함)는 시각적 구조, 표준화된 시각적 요소, 탐색을 제공합니다.

activity_main.xml에서 툴바를 찾습니다.

AppBarLayout 요소 내에 배치합니다. 하위 호환성을 위해 템플릿의 AppBarLayout은 ActionBar과 동일한 기능을 갖는 Toolbar을 삽입합니다.

앱 바의 모양을 변경하려면 툴바 속성을 변경하세요. 앱 바 튜토리얼은 앱 바 추가를 참고하세요.

3

앱 이름은 처음에는 패키지 이름에서 파생되지만 원하는 대로 변경할 수 있습니다.

AndroidManifest.xml에서 다음을 찾습니다.

android:label="@string/app_name".

strings.xml에서 app_name 문자열을 지정합니다.

4

옵션 메뉴 더보기 버튼은 활동의 메뉴 항목을 보유합니다. 더보기 버튼에는 앱의 검색 및 설정과 같은 전역 메뉴 옵션도 포함됩니다. 앱 메뉴 항목은 이 메뉴로 이동합니다.

MainActivity.kt에서

onOptionsItemSelected() 메서드는 사용자가 메뉴 항목을 선택할 때 발생하는 일을 구현합니다.

옵션 메뉴 항목을 보려면 res/menu/menu_main.xml를 엽니다.

변경할 수 있습니다 이 템플릿에는 설정 메뉴 항목만 지정되어 있습니다.

5

CoordinatorLayout ViewGroup은 UI 요소가 상호작용할 수 있는 메커니즘을 제공하는 레이아웃입니다. 앱의 UI는 이 ViewGroup 내에 포함된 content_main.xml 파일 내에 있습니다.

activity_main.xml에서 include layout 명령어를 찾습니다. 이 레이아웃에는 뷰가 지정되어 있지 않습니다. 대신 앱의 뷰가 지정된 content_main 레이아웃이 포함되어 있습니다. 시스템 뷰는 앱에 고유한 뷰와 별도로 유지됩니다.

6

템플릿은 TextView를 사용하여 'Hello World'를 표시합니다. 이 TextView을 앱의 UI 요소로 바꿉니다.

'Hello World' 텍스트 뷰는 content_main.xml 파일에 있습니다. 앱의 모든 UI 요소는 이 파일에 정의해야 합니다.

7

플로팅 작업 버튼(FAB)

activity_main.xml에서 FloatingActionButton 요소를 찾습니다. FAB는 클립아트 아이콘을 사용하여 UI 요소로 정의됩니다. MainActivity.kt에는 FAB의 onClick() 리스너를 설정하는 onCreate()의 스텁이 포함되어 있습니다.

2단계: 템플릿에서 생성된 앱 맞춤설정하기

기본 활동 템플릿으로 생성된 앱의 모양을 변경합니다. 예를 들어 앱 바의 색상을 상태 표시줄과 일치하도록 변경할 수 있습니다. (일부 기기에서는 상태 표시줄이 앱 바에서 사용하는 것과 동일한 기본 색상의 더 어두운 색조입니다.)

  1. 앱 바에 표시되는 앱의 이름을 변경합니다. 이렇게 하려면 res > values > strings.xml 파일에서 app_name 문자열 리소스를 다음과 같이 변경합니다. 
<string name="app_name">New Application</string>
  1. res > layout > activity_main.xml에서 android:background 속성을 "?attr/colorPrimaryDark"로 변경하여 앱 바 (Toolbar)의 색상을 변경합니다. 이 값은 앱 바 색상을 상태 표시줄과 일치하는 더 어두운 기본 색상으로 설정합니다.
android:background="?attr/colorPrimaryDark"
  1. 앱을 실행합니다. 앱의 새 이름이 상태 표시줄에 표시되고 앱 바의 배경색이 더 어두워져 상태 표시줄의 색상과 일치합니다. FAB를 클릭하면 아래 스크린샷의 1과 같이 스낵바가 표시됩니다.
  2. 스낵바 텍스트를 변경합니다. 이렇게 하려면 MainActivity를 열고 버튼의 onClick() 리스너를 설정하는 onCreate()의 스텁 코드를 찾습니다. "Replace with your own action"을 다른 값으로 변경합니다. 예를 들면 다음과 같습니다.
fab.setOnClickListener { view ->
   Snackbar.make(view, "This FAB needs an action!", Snackbar.LENGTH_LONG)
       .setAction("Action", null).show()
}
  1. FAB는 앱의 강조 색상을 사용하므로 FAB의 색상을 변경하는 한 가지 방법은 강조 색상을 변경하는 것입니다. 강조색을 변경하려면 res > values > colors.xml 파일을 열고 아래와 같이 colorAccent 속성을 변경합니다. 색상 선택에 관한 도움말은 Material Design 색상 시스템을 참고하세요.
<color name="colorAccent">#1DE9B6</color>
  1. 앱을 실행합니다. FAB가 새 색상을 사용하고 스낵바 텍스트가 변경되었습니다.

3단계: 템플릿을 사용하여 활동을 추가하는 방법 알아보기

지금까지 이 과정의 Codelab에서는 Empty Activity 및 Basic Activity 템플릿을 사용하여 새 프로젝트를 시작했습니다. 프로젝트를 만든 후 활동을 만들 때 활동 템플릿을 사용할 수도 있습니다.

  1. 앱 프로젝트를 만들거나 기존 프로젝트를 선택합니다.
  2. Project > Android 창에서 java 폴더를 마우스 오른쪽 버튼으로 클릭합니다.
  3. New > Activity > Gallery를 선택합니다.
  4. Activity 템플릿 중 하나를 선택하여 앱에 활동을 추가합니다. 예를 들어 Navigation Drawer Activity를 선택하여 탐색 창이 있는 Activity를 추가합니다.
  5. 레이아웃 편집기에 활동을 표시하려면 활동의 레이아웃 파일 (예: activity_main2.xml)을 더블클릭합니다. 디자인 탭과 텍스트 탭을 사용하여 활동의 레이아웃 미리보기와 레이아웃 코드 간에 전환합니다.

GitHub의 Google 샘플 저장소에서는 학습하고, 복사하고, 프로젝트에 통합할 수 있는 Kotlin Android 코드 샘플을 제공합니다.

1단계: Kotlin Android 코드 샘플 다운로드 및 실행

  1. 브라우저에서 github.com/googlesamples로 이동합니다.
  2. 언어에서 Kotlin을 선택합니다.
  3. 최근에 수정된 Kotlin Android 샘플 앱을 선택하고 앱의 프로젝트 코드를 다운로드합니다. 이 예에서는 Android Jetpack의 일부 구성요소를 보여주는 android-sunflower 앱의 ZIP 파일을 다운로드합니다.
  4. Android 스튜디오에서 android-sunflower-master 프로젝트를 엽니다.
  5. Android 스튜디오에서 권장하는 업데이트를 수락한 다음 에뮬레이터 또는 Android 기반 기기에서 앱을 실행합니다.

2단계: Kotlin Android 코드 샘플 살펴보기

이제 Android 스튜디오에서 Android Sunflower 샘플 앱을 열었으므로 앱에 대해 알아보고 프로젝트 파일을 살펴봅니다.

  1. 샘플 앱에서 무엇을 보여주는지 알아보려면 GitHub의 앱 README 파일을 참고하세요. 이 예시는 Android Sunflower README를 참고하세요.
  2. Android 스튜디오에서 앱의 Kotlin 활동 파일 중 하나를 엽니다(예: GardenActivity.kt.
    ).
  3. GardenActivity.kt에서 잘 모르는 클래스, 유형 또는 절차를 찾아 Android 개발자 문서에서 조회합니다. 예를 들어 setContentView() 메서드에 관해 자세히 알아보려면 developer.android.com에서 setContentView()를 검색하세요.

3단계: 런처 아이콘 변경

이 단계에서는 Android Sunflower 샘플 앱의 런처 아이콘을 변경합니다. 클립아트 이미지를 추가하고 이를 사용하여 현재 Android Sunflower 런처 아이콘을 대체합니다.

런처 아이콘

Android 스튜디오로 만든 각 앱은 앱을 나타내는 기본 런처 아이콘으로 시작합니다. 런처 아이콘은 앱 아이콘 또는 제품 아이콘이라고도 합니다.

Google Play에 앱을 게시하면 앱의 런처 아이콘이 Google Play 스토어의 앱 등록정보 및 검색 결과에 표시됩니다.

Android 기반 기기에 앱이 설치되면 앱의 런처 아이콘이 기기의 홈 화면과 기기의 다른 위치에 표시됩니다. 예를 들어 Android Sunflower 앱의 런처 아이콘은 아래 스크린샷의 1로 표시된 기기의 앱 검색 창에 표시됩니다. 아래에 2로 표시된 기본 런처 아이콘은 Android 스튜디오에서 만드는 모든 앱 프로젝트에 처음 사용됩니다.

런처 아이콘 변경

런처 아이콘을 변경하는 과정을 통해 Android 스튜디오의 이미지 애셋 기능을 알아볼 수 있습니다.

Android 스튜디오에서 Android Sunflower 앱의 런처 아이콘을 변경하는 방법은 다음과 같습니다.

  1. Project > Android 창에서 res 폴더를 마우스 오른쪽 버튼으로 클릭 (또는 Control+클릭)합니다. New > Image Asset을 선택합니다. 이미지 애셋 구성 대화상자가 표시됩니다.

런처 아이콘의 전경 레이어 탭을 클릭합니다.

  1. Icon Type 필드에서 Launcher Icons (Adaptive & Legacy)를 선택합니다(아직 선택하지 않은 경우). 전경 레이어 탭을 클릭합니다.
  2. Asset Type에서 Clip Art를 선택합니다(아래 스크린샷의 1 참고).

  3. 위 스크린샷에서 2로 표시된 Clip Art 필드의 로봇 아이콘을 클릭합니다. Select Icon 대화상자가 나타나 머티리얼 디자인 아이콘 세트가 표시됩니다.
  4. 아이콘 선택 대화상자를 탐색하거나 이름으로 아이콘을 검색합니다. 기분 아이콘과 같은 아이콘을 선택하여 좋은 기분을 표현합니다. 확인을 클릭합니다.

  1. Configure Image Asset 대화상자에서 Background Layer 탭을 클릭합니다. 애셋 유형에서 색상을 선택합니다. 색상 칩을 클릭하고 아이콘의 배경 레이어로 사용할 색상을 선택합니다.
  2. 레거시 탭을 클릭하고 기본 설정을 검토합니다. 레거시, 원형, Google Play 스토어 아이콘을 생성할 것임을 확인합니다. 다음을 클릭합니다.
  3. Confirm Icon Path 대화상자가 표시되고 아이콘 파일이 추가되고 덮어쓰여지는 위치가 표시됩니다. 마침을 클릭합니다.
  4. AVD 에뮬레이터나 Android 지원 기기에서 앱을 실행합니다.

Android 스튜디오에서는 다양한 화면 밀도별로 mipmap 디렉터리에 런처 이미지를 자동으로 추가합니다. 이제 Android Sunflower 앱은 새 클립아트 아이콘을 실행 아이콘으로 사용합니다.

  1. 앱을 다시 실행합니다. 새 런처 아이콘이 앱 검색 화면에 표시되는지 확인합니다.

1단계: 공식 Android 문서 살펴보기

가장 유용한 Android 문서 사이트를 살펴보고 제공되는 내용을 숙지하세요.

  1. developer.android.com으로 이동합니다. 이 공식 Android 개발자 문서는 Google에서 최신 상태로 유지합니다.
  2. developer.android.com/design/으로 이동합니다. 이 사이트에서는 고품질 Android 앱의 디자인과 기능을 설계하기 위한 가이드라인을 제공합니다.
  3. Material Design에 관한 사이트인 material.io로 이동합니다. Material Design은 Android 앱뿐만 아니라 모든 앱이 모바일 기기에서 어떻게 표시되고 작동해야 하는지를 설명하는 개념적 디자인 철학입니다. 링크를 탐색하여 Material Design에 대해 자세히 알아보세요. 예를 들어 색상 사용에 대해 알아보려면 디자인 탭을 클릭한 다음 색상을 선택합니다.
  4. developer.android.com/docs/로 이동하여 API 정보, 참조 문서, 튜토리얼, 도구 가이드, 코드 샘플을 확인하세요.
  5. developer.android.com/distribute/로 이동하여 Google Play에 앱을 게시하는 방법을 알아보세요. Google Play는 Android SDK로 개발된 앱을 위한 Google의 디지털 배포 시스템입니다. Google Play Console을 사용하여 사용자층을 늘리고 수익을 창출하세요.

2단계: Android팀 및 Google 검색의 콘텐츠 살펴보기

  1. 튜토리얼과 팁을 제공하는 Android 개발자 YouTube 채널을 살펴보세요.
  2. Android팀에서 뉴스와 팁을 게시하는 공식 Android 블로그를 방문하세요.
  3. Google 검색에 질문을 입력하면 Google 검색 엔진이 다양한 리소스에서 관련 결과를 수집합니다. 예를 들어 Google 검색을 사용하여 '인도에서 가장 인기 있는 Android OS 버전은 무엇인가요?'라고 질문합니다. Google 검색에 오류 메시지를 입력할 수도 있습니다.

3단계: Stack Overflow에서 검색하기

Stack Overflow는 서로를 돕는 프로그래머 커뮤니티입니다. 문제가 발생하면 다른 사용자가 이미 답변을 게시했을 가능성이 높습니다.

  1. Stack Overflow로 이동합니다.
  2. 검색창에 'Wi-Fi를 통해 ADB를 설정하고 사용하는 방법'과 같은 질문을 입력합니다. 등록하지 않고도 Stack Overflow에서 검색할 수 있지만, 새로운 질문을 게시하거나 질문에 답변하려면 등록해야 합니다.
  3. 검색창에서 [android]를 입력합니다. [] 괄호는 Android에 관한 태그가 지정된 게시물을 검색하려는 것을 나타냅니다.
  4. 태그와 검색어를 결합하여 검색을 더 구체적으로 만들 수 있습니다. 다음과 같이 검색해 보세요.
  • [android] and [layout]
  • [android] "hello world"

4단계: SDK Manager를 사용하여 오프라인 문서를 설치

Android 스튜디오를 설치하면 Android SDK의 필수 구성요소가 함께 설치됩니다. 사용 가능한 다른 라이브러리와 문서를 설치하려면 SDK Manager를 사용하세요.

SDK Manager를 살펴보고 SDK 문서를 다운로드하려면 다음 단계를 따르세요.

  1. Android 스튜디오에서 Tools > SDK Manager를 선택합니다. SDK Manager가 열립니다.
  2. SDK Manager의 왼쪽 열에서 Android SDK 를 선택합니다(아래 스크린샷의 1).
  3. Android SDK Location 필드 (아래 스크린샷의 2)에서 경로를 확인합니다. 나중에 이 경로를 사용하여 설치한 항목을 찾습니다.
  4. SDK Manager에서 SDK Platforms 탭을 클릭합니다. 여기에서 Android 시스템의 버전을 더 설치할 수 있습니다.
  5. SDK Tools 탭을 클릭합니다. 여기에서 기본적으로 설치되지 않은 SDK 개발자 도구를 설치할 수 있습니다. Android 개발자 문서의 오프라인 버전을 설치할 수도 있습니다.
  6. SDK Update Sites 탭을 클릭합니다. Android 스튜디오는 나열되고 선택된 사이트에서 업데이트를 정기적으로 확인합니다.
  7. SDK Tools 탭으로 돌아가 아직 선택하지 않았다면 Documentation for Android SDK 체크박스를 선택합니다. 적용을 클릭합니다.

    다운로드에 필요한 디스크 공간을 보여주는 확인 대화상자가 열립니다. 확인을 클릭합니다.
  8. 설치가 완료되면 Finish를 클릭합니다.

설치한 문서를 찾으려면 다음 단계를 따르세요.

  1. 컴퓨터에서 Android/sdk/ 디렉터리로 이동합니다. (디렉터리 경로는 위의 스크린샷에서 2로 표시된 Android SDK Location 필드를 참고하세요.)
  2. docs/ 디렉터리를 엽니다.
  3. index.html 파일을 찾아 브라우저에서 엽니다.
  • 공식 Android 개발자 문서는 developer.android.com에 있습니다.
  • Material Design은 휴대기기에서 앱이 어떻게 표시되고 작동해야 하는지 설명하는 개념적 디자인 철학입니다. Material Design은 Android 앱에만 적용되는 것이 아닙니다. Material Design 가이드라인은 material.io에 있습니다.
  • Android 스튜디오에서는 일반적이고 권장되는 앱 및 활동 디자인을 위한 템플릿을 제공합니다. 이러한 템플릿은 일반적인 사용 사례를 위한 작동 코드를 제공합니다.
  • 프로젝트를 만들 때 첫 번째 활동의 템플릿을 선택할 수 있습니다.
  • 앱을 개발하는 동안 내장 템플릿에서 활동과 기타 앱 구성요소를 만들 수 있습니다.
  • Google 샘플에는 프로젝트에서 연구하고, 복사하고, 통합할 수 있는 코드 샘플이 포함되어 있습니다.

Udacity 과정:

Android 스튜디오 문서:

Android 개발자 문서:

코드 샘플:

동영상:

기타 자료:

다음 강의 시작: 2.1: Layout Editor를 사용한 선형 레이아웃

이 과정의 다른 Codelab 링크는 Android Kotlin 기초 Codelab 방문 페이지를 참고하세요.