Flutter에서 Kakao Map API 사용법

Ko Gun·2025년 2월 5일

API flutter kakao map

1. 개요

Flutter에서 Kakao Map API를 활용하여 지도 기능을 구현하는 방법을 소개합니다. Kakao Map API는 다양한 지도 기능과 POI(장소) 검색, 경로 안내 등의 기능을 제공합니다.

2. Kakao Map API 키 발급

Kakao Developers에 접속하여 로그인합니다.
애플리케이션을 등록한 후 네이티브 앱 키와 JavaScript 키를 발급받습니다.
플랫폼 설정에서 Android와 iOS를 추가하고, 패키지명을 입력합니다.

3. Flutter 프로젝트 설정

3.1. 플러그인 추가

Flutter에서 Kakao Map을 사용하려면 flutter_inappwebview 또는 WebView 패키지를 이용해야 합니다. pubspec.yaml 파일에 다음 의존성을 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  flutter_inappwebview: ^5.7.2

3.2. Android 설정

android/app/src/main/AndroidManifest.xml 파일을 열고, 인터넷 권한을 추가합니다.

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

Kakao SDK 초기화를 위해 AndroidManifest.xml에 다음 내용을 추가합니다.

<meta-data
    android:name="com.kakao.sdk.AppKey"
    android:value="여기에_네이티브_앱_키_입력"/>

3.3. iOS 설정

ios/Runner/Info.plist 파일을 열고, WebView 관련 설정을 추가합니다.

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
</dict>

4. Kakao Map WebView로 띄우기

Kakao Map API는 기본적으로 웹 기반이므로 WebView를 활용하여 지도를 표시할 수 있습니다.

4.1. WebView를 이용한 지도 표시

Flutter에서 WebView를 이용하여 Kakao Map을 표시하는 예제 코드입니다.

import 'package:flutter/material.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';

class KakaoMapScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Kakao Map")),
      body: InAppWebView(
        initialUrlRequest: URLRequest(
          url: Uri.parse("https://map.kakao.com"),
        ),
      ),
    );
  }
}

5. JavaScript를 활용한 지도 제어

Kakao Map API를 활용하여 Flutter 내에서 JavaScript를 실행할 수도 있습니다. 예를 들어, 특정 위치에 마커를 추가하는 방법은 다음과 같습니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=여기에_Javascript_키_입력"></script>
</head>
<body>
    <div id="map" style="width:100%;height:100vh;"></div>
    <script>
        var mapContainer = document.getElementById('map');
        var mapOption = {
            center: new kakao.maps.LatLng(37.5665, 126.9780),
            level: 3
        };
        var map = new kakao.maps.Map(mapContainer, mapOption);
    </script>
</body>
</html>

6. 결론

Flutter에서 Kakao Map API를 사용하여 지도를 표시하고 제어하는 방법을 알아보았습니다. WebView와 JavaScript를 활용하면 다양한 지도 기능을 구현할 수 있습니다. 추후 Flutter 플러그인으로 개발된 Kakao Map 패키지가 나오면 보다 손쉽게 사용할 수 있을 것입니다.