코틀린 안드로이드 앱개발 강좌, 구글 지도 앱 만들기

오늘은 안드로이드 앱 개발 중에서 실용적인 예제 중 하나인 ‘구글 지도 앱’을 만드는 방법에 대해 다뤄보려고 합니다. 이 강좌에서는 코틀린을 사용하여 구글 지도를 앱에 통합하고, 다양한 마커를 추가하는 방법을 배울 것입니다. 이 수업을 통해 사용자는 기본적인 구글 지도 API에 대한 이해도를 높이고, 이를 기반으로 더 복잡한 기능을 구현하는 데 필요한 기초를 다질 수 있습니다.

1. 개발 환경 설정

구글 지도 API를 사용하기 위해서는 우선 몇 가지 준비 작업이 필요합니다. 아래의 단계를 따라 주세요.

1.1. 안드로이드 스튜디오 설치

최신 버전의 안드로이드 스튜디오를 설치합니다. 또한, 기본적인 안드로이드 개발 환경이 설정되어야 합니다.

1.2. 새로운 프로젝트 생성

안드로이드 스튜디오를 열고, 새로운 프로젝트를 생성합니다.
프로젝트 템플릿으로 ‘Empty Activity’를 선택합니다.
프로젝트의 이름과 패키지를 입력한 후, ‘Finish’를 클릭하여 프로젝트를 생성합니다.

1.3. Google Maps API 키 생성

구글 지도를 사용하기 위해서는 API 키가 필요합니다. 아래의 과정을 통해 API 키를 생성할 수 있습니다.

Google Cloud Console에 접속합니다.
새로운 프로젝트를 생성합니다.
내비게이션 바에서 ‘API 및 서비스’ > ‘라이브러리’로 이동합니다.
‘Maps SDK for Android’를 찾아 활성화합니다.
‘사용자 인증 정보’로 이동한 후, 새로운 API 키를 생성합니다.
생성된 API 키를 복사하여 안전한 곳에 보관합니다.

2. Gradle 설정

이제 프로젝트에 구글 지도 API를 추가하기 위해 Gradle 설정을 변경해야 합니다.

2.1. build.gradle (Project)

buildscript {
    ext.kotlin_version = '1.5.31'
    repositories {
        google()
        mavenCentral()
    }
    dependencies {
        classpath "com.android.tools.build:gradle:7.0.3"
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
    }
}

2.2. build.gradle (Module)

apply plugin: 'com.android.application'
apply plugin: 'kotlin-android'

android {
    compileSdk 31

    defaultConfig {
        applicationId "com.example.mapapp"
        minSdk 21
        targetSdk 31
        versionCode 1
        versionName "1.0"

        // Add this line to set your API key
        manifestPlaceholders = [googleMapsKey: "YOUR_API_KEY_HERE"]
    }

    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"
    implementation 'com.google.android.gms:play-services-maps:18.1.0'
    implementation 'androidx.appcompat:appcompat:1.3.1'
    implementation 'androidx.core:core-ktx:1.6.0'
}

3. AndroidManifest.xml 설정

프로젝트의 매니페스트 파일에 필요한 권한과 API 키를 추가해야 합니다.

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.mapapp">

    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />

    <application
        android:allowBackup="true"
        android:label="@string/app_name"
        android:icon="@mipmap/ic_launcher">
        <meta-data
            android:name="com.google.android.geo.API_KEY"
            android:value="${googleMapsKey}" />

        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

4. 레이아웃 파일 설정

우리는 지도 뷰를 표시할 수 있는 기본 레이아웃을 설정해야 합니다.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <fragment
        android:id="@+id/map"
        android:name="com.google.android.gms.maps.SupportMapFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    </fragment>

</LinearLayout>

5. 지도 기능 구현

이제 본격적으로 기본적인 지도 기능을 구현해보겠습니다. 아래 코드에서는 기본적인 지도 설정과 마커 추가를 다룹니다.

package com.example.mapapp

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import com.google.android.gms.maps.CameraUpdateFactory
import com.google.android.gms.maps.GoogleMap
import com.google.android.gms.maps.OnMapReadyCallback
import com.google.android.gms.maps.SupportMapFragment
import com.google.android.gms.maps.model.LatLng
import com.google.android.gms.maps.model.MarkerOptions

class MainActivity : AppCompatActivity(), OnMapReadyCallback {

    private lateinit var mMap: GoogleMap

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val mapFragment = supportFragmentManager
            .findFragmentById(R.id.map) as SupportMapFragment
        mapFragment.getMapAsync(this)
    }

    override fun onMapReady(googleMap: GoogleMap) {
        mMap = googleMap

        // 지도에 마커 추가
        val seoul = LatLng(37.5665, 126.978)
        mMap.addMarker(MarkerOptions().position(seoul).title("서울"))
        mMap.moveCamera(CameraUpdateFactory.newLatLng(seoul))
        
        // 초기 줌 설정
        mMap.moveCamera(CameraUpdateFactory.zoomTo(10f))
    }
}

6. 앱 실행하기

모든 설정이 완료되었으므로 이제 앱을 실행해보세요. 안드로이드 디바이스 혹은 에뮬레이터에서 앱을 실행하면, 구글 지도가 표시되고 서울에 마커가 추가된 것을 확인할 수 있습니다.

7. 마무리

이번 강좌에서는 코틀린을 사용하여 구글 지도를 앱에 통합하는 방법을 배웠습니다. 이 기초적인 기능을 바탕으로, 자신만의 지도 기능(예: 위치 추적, 사용자 위치 기반 서비스 등)을 추가하는 데 도전해보세요. 앞으로도 더욱 다양한 안드로이드 앱 개발 강좌를 통해 실력을 쌓아가길 바랍니다.

8. 추가 학습 자료

감사합니다! 질문이 있다면 아래 댓글로 남겨주세요.