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 스튜디오에서는 일반 및 권장 앱/활동 디자인에 사용되는 템플릿을 제공합니다. 기본 제공 템플릿은 시간을 절약하고 디자인 권장사항을 따르는 데 도움이 됩니다.

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

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

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

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

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

#

UI 설명

코드 참조

1

Android 시스템에서 제공하는 상태 표시줄입니다.

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

2

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

activity_main.xml에서 Toolbar를 찾습니다.

AppBarLayout 요소 내부에 있습니다. 이전 버전과의 호환성을 위해 템플릿의 AppBarLayoutActionBar와 동일한 기능을 가진 Toolbar를 삽입합니다.

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

3

앱 이름은 기본적으로 패키지 이름에서 파생되지만 원하는 이름으로 변경할 수 있습니다.

AndroidManifest.xml에서

android:label="@string/app_name"

strings.xmlapp_name 문자열을 지정합니다.

4

옵션 메뉴 더보기 버튼에는 활동의 메뉴 항목이 있습니다. 더보기 버튼에는 검색설정과 같은 앱의 전체 메뉴 옵션도 표시됩니다. 앱 메뉴 항목은 이 메뉴로 이동합니다.

MainActivity.kt에서

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

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

file. 이 템플릿에서는 설정 메뉴 항목만 지정됩니다.

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.ktonCreate()에 FAB의 onClick() 리스너를 설정하는 스텁을 포함합니다.

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

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

  1. 앱 바가 표시하는 앱의 이름을 변경합니다. 이렇게 하려면 res > values > strings.xml 파일에서 app_name 문자열 리소스를 다음으로 변경합니다.
<string name="app_name">New Application</string>
  1. android:background 속성을 "?attr/colorPrimaryDark"로 변경하여 res > layout > activity_main.xml에서 앱 바 (Toolbar)의 색상을 변경합니다. 이 값은 앱 바 색상을 상태 표시줄과 일치하는 어두운 기본 색상으로 설정합니다.
android:background="?attr/colorPrimaryDark"
  1. 앱을 실행합니다. 앱의 새로운 이름이 상태 표시줄에 표시되고 앱 바의 배경 색상이 어두워지고 상태 표시줄의 색상과 일치합니다. FAB를 클릭하면 아래 스크린샷에 1로 표시된 스낵바가 표시됩니다.
  2. 스낵바 텍스트를 변경합니다. 이렇게 하려면 MainActivity를 열고 onCreate()onClick() 버튼의 리스너를 설정하는 스텁 코드를 찾습니다. "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 속성을 변경합니다. 색상 선택에 대한 도움말은 머티리얼 디자인 색상 시스템을 참고하세요.
<color name="colorAccent">#1DE9B6</color>
  1. 앱을 실행합니다. FAB가 새 색상을 사용하고 스낵바 텍스트가 변경되었습니다.

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

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

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

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로 표시된 기기의 Search Apps 창에 표시됩니다. 아래 그림 2와 같이 기본 런처 아이콘은 Android 스튜디오에서 만드는 모든 앱 프로젝트에 사용됩니다.

런처 아이콘 변경

런처 아이콘을 변경하는 과정을 거치면 Android 스튜디오의 이미지 애셋 기능을 소개합니다.

Android 스튜디오에서 Android Sunflower 앱 런처 아이콘을 변경하는 방법:

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

런처 아이콘의 포그라운드 레이어 탭을 클릭합니다.

  1. 아직 선택하지 않은 경우 Icon Type 필드에서 Launcher Icons (Adaptive & Legacy)를 선택합니다. Foreground Layer 탭을 클릭합니다.
  2. Asset Type의 경우 아래 스크린샷에 1로 표시된 Clip Art를 선택합니다.

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

  1. Configure Image Asset 대화상자에서 Background Layer 탭을 클릭합니다. Asset Type에서 Color를 선택합니다. 색상 칩을 클릭하고 아이콘의 배경 레이어로 사용할 색상을 선택합니다.
  2. 기존 탭을 클릭하고 기본 설정을 검토합니다. 레거시, 원형, Google Play 스토어 아이콘을 생성할 것임을 확인합니다. 다음을 클릭합니다.
  3. Confirm Icon Path 대화상자가 표시되어 아이콘 파일을 추가하고 덮어쓰는 위치를 보여줍니다. Finish를 클릭합니다.
  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.io로 이동합니다. 머티리얼 디자인은 Android 앱뿐만 아니라 모든 앱이 휴대기기에서 어떻게 표시되고 작동해야 하는지를 설명하는 개념 설계 철학입니다. 링크를 탐색하여 머티리얼 디자인에 관해 자세히 알아보세요. 예를 들어 색상 사용에 관해 알아보려면 디자인 탭을 클릭한 다음 색상을 선택합니다.
  4. developer.android.com/docs/로 이동하여 API 정보, 참조 문서, 튜토리얼, 도구 가이드, 코드 샘플을 확인하세요.
  5. google Play에 앱을 게시하는 방법에 관한 정보는 developer.android.com/distribute/를 참조하세요. Google Play는 Android SDK로 개발된 앱을 위한 디지털 배포 시스템입니다. Google Play Console을 통해 사용자층을 확대하고 수익을 창출하세요.
  1. 튜토리얼 및 도움말을 확인할 수 있는 Android 개발자 YouTube 채널을 살펴보세요.
  2. 공식 Android 블로그를 방문하여 Android팀에서 뉴스와 도움말을 게시하세요.
  3. Google 검색에 질문을 입력하면 Google 검색엔진이 다양한 리소스에서 관련 결과를 수집합니다. 예를 들어 Google 검색에 '인도에서 가장 인기 있는 Android OS 버전은 무엇인가요?'라는 질문을 던져 보세요. Google 검색에 오류 메시지를 입력할 수도 있습니다.

3단계: Stack Overflow에서 검색

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

  1. Stack Overflow로 이동하세요.
  2. 검색창에 "How can't set up and ADB over Wi-Fi/+/quot; 등록하지 않고도 Stack Overflow에서 검색할 수 있지만 새로운 질문을 게시하거나 질문에 답변하려면 등록해야 합니다.
  3. 검색창에서 [android]를 입력합니다. [] 대괄호는 Android에 관한 것으로 태그가 지정된 게시물을 검색하려고 함을 나타냅니다.
  4. 태그와 검색어를 조합하여 더욱 구체적으로 검색할 수 있습니다. 다음 검색어를 사용해 보세요.
  • [android] and [layout]
  • [android] "hello world"

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

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에서 확인할 수 있습니다.
  • 머티리얼 디자인은 휴대기기에서 앱이 어떻게 작동해야 하는지를 설명하는 개념 설계 철학입니다. 머티리얼 디자인은 Android 앱만을 위한 것이 아닙니다. 머티리얼 디자인 가이드라인은 material.io에서 확인할 수 있습니다.
  • Android 스튜디오에서는 일반 및 권장 앱/활동 디자인에 사용되는 템플릿을 제공합니다. 이러한 템플릿은 일반적인 사용 사례를 위한 작업 코드를 제공합니다.
  • 프로젝트를 만들 때 첫 번째 활동의 템플릿을 선택할 수 있습니다.
  • 앱을 개발하는 동안 기본 제공 템플릿으로 활동과 기타 앱 구성요소를 만들 수 있습니다.
  • Google 샘플에는 학습, 복사, 프로젝트에 통합할 수 있는 코드 샘플이 포함되어 있습니다.

Udacity 과정:

Android 스튜디오 문서:

Android 개발자 문서:

코드 샘플:

동영상:

기타 리소스:

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

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