[KakaoMap 클론] 1. KakaoMap API 세팅하기

  위치 기반 서비스를 클론해보고 싶어, 평소에 가장 많이 쓰는 지도 앱인 KakapMap 클론을 하기로 했다.

 

오늘은 가장 우선이 되는 KakoMap API 세팅에 대해 다룰 것이다.

 

 

1. Kakao Developers에서 API Key 발급받기 & Info plist 세팅

Kakao Developers

 

  하단의 링크로 가서 '내 애플리케이션' 혹은 '시작하기' 버튼을 누르고 키를 발급받으면 된다.

해당 과정은 카카오톡 로그인 구현하기에서 한 과정과 동일하기에 하단의 링크 참고하면 좋을 것 같다!

 

카카오톡 로그인 구현하기

 

 

 

상단의 링크에서 iOS 플랫폼 등록까지 한 후, '네이티브 앱 키' 를 복사해서 info plist에 키와 함께 추가해야한다. (하단 사진 및 코드 참고)

	<key>KAKAO_APP_KEY</key>
	<string>각자 발급받은 네이티브 앱 키값</string>

 

 

 

 

2. Kakao Map SDK 다운받기

https://apis.map.kakao.com/ios/guide/

 

  상단의 링크를 눌러서, SDK 다운받기 버튼을 누르고 다운 받으면 된다.

밑에 있는 내용은 이미 1번에서 했으니.. 패스~

 

 

 

다운로드가 끝났다면, 

다운 받은 파일   >>  'lib' 파일  >>  'DaumMap.embeddedframework' 압축 해제 를 한 후, 프로젝트로 돌아온다.

 

 

 

그리고 자신의 앱 파일 폴더에 압축 해제된 'DaumMap.embeddedframework'를 추가한다.

 

 

 

 

  Target  >>  General  >>  'Frameworks, Libraries, and Embedded Content'에 'DaumMap.Framework'가 추가된 것을 확인 할 수 있을 것이다. (안된다면 추가했던 폴더 지우고 다시 앱 파일 폴더에 압축 해제된 DaumMap.embeddedframework 추가해야함..)

 

 

  자동으로 추가된 DaumMap.Framework를 제외한 하단의 프레임워크들을 모두 앱 타겟에 embedded 시켜야한다. (하단 이미지 참고)

• OpenGLES.framework
• SystemConfigure.framework
• CoreLocation.framework
• QuartzCore.framework
• libc++.tbd
• libxml2.tbd
• libsqlite3.tbd

 

 

 

 

 

3. Header 파일 만들어서 연결하기

  카카오맵은 Swift를 지원하지 않고 Objective-C만 지원하기에... 헤더파일을 만들어서 연결을 해야한다.

 

프로젝트 파일 안에, 헤더파일을 만든다.

 

그리고 해당 파일에

#import <DaumMap/MTMapView.h>

상단 코드를 #define과 #endif 사이에 적는다.

 

 

 

 

Target  >>  Build Settings  >>  Excluded Architectures  에 가서 arm64 를 적어준다

 

(Xcode14.3, 맥북M2프로 기준.. 이거 안적으면 building for iOS Simulator, but linking in object file built for iOS, for architecture arm64 어쩌구 이런 에러가 뜸...)

 

 

 

이제 새로 생성한 헤더파일의 경로를 준비해야한다.

 

Show in Finder  >>  헤더파일 눌린채로 command C (경로 복사됨)  >>  복사 잘 되었나 확인하려면 터미널 가서 command V 해보기

(필자는 터미널에 붙여진 경로를 다시 복사했다. 안그러면 다음 단계에서 파일 이름만 계속 복붙이 되었어서...)

 

 

 

 

  상단의 과정에서 복사해놓은 헤더파일의 경로를

Target  >>  Build Settings  >>  Swift Compiler - General  >>  Objective-C Bridging Header 에 붙여넣어준다.

 

 

 

 그리고 카카오맵 SDK는 ARC를 제공하지 않기에, ARC를 'No'로 변경해야한다.

 

 

 

4. Build 잘 되나 확인하기

  3번까지의 과정 중에 아마 에러메세지가 뜰 수도 있다. 필자도 그것 때문에 삽질을 많이 했다.

헤더파일에 DaumMap/MTMapView가 없다고 에러가 뜨는 경우, 헤더파일 연결은 잘 된 것이다. 연결이 안되었다면 못찾았다고 불평할 수가 없으니...

  그럴 땐, Frameworks 폴더에 'DaumMap'이 잘 들어있나 확인해보는 것을 추천한다.

 

  만약 그래도 안된다면, 추가한 'DaumMap.embeddedframework'가 프로젝트 파일 폴더 안에 잘 들어갔는지 확인 후, 안들어간 경우 다시 추가하는 법도 추천한다.

 

 

 

 

5. ViewController에 지도 띄우기

 

  단순하게, 화면에 꽉 차도록 지도를 세팅할 것이다.

import UIKit

class MainViewController: UIViewController {
    
    // mapView 생성
    private let mapView: MTMapView = {
        let mapView = MTMapView()
        mapView.baseMapType = .standard
        return mapView
    }()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // mapView의 대리자를 VC로 지정
        mapView.delegate = self
        configureUI()
    }
    
    // mapView를 화면에 띄우기 + 오토레이아웃 잡기
    func configureUI() {
        view.addSubview(mapView)
        mapView.setDimensions(height: view.frame.height, width: view.frame.width)
    }
    
}

extension MainViewController: MTMapViewDelegate { }

 

 

 

끝 -