iOS ) 왕초보를 위한 네이버 지도 API 써보기 (1/2)

안녕하세요 :) Zedd입니다! 

Naver 지도 API쓰는 분을 보고..저도 한번 해보고싶다는 생각이 들어서!!

한번 글 써보자!!!!!!!!!라는 다짐을 하게 되었습니다.

정말 예제가 별로 없더라구요...

지금 제가 딱 지도까지만 띄워보고 왔는데, 이 지도 띄우기까지 1시간 정도 삽질 한 것 같습니다..

참고로 네이버 설명이 친절한듯 불친절....해서 ㅎㅎ;

힘들었습니다 ㅠㅠㅠ

그럼 시작해볼까요 ㅎㅎ

왕초보를 위한 네이버 지도 API 써보기 (1/2)

---

● 참고로 현재 네이버 지도 API는 Objective-C로 되어있습니다. 

● 코코아팟으로 설치 이런거 안됩니다. 

● 과정이 조금 복잡하므로 차근차근 설명할 예정입니다. (왕초보 시리즈이기 때문)

● 제 글을 보시기전에 네이버 지도 API 튜토리얼을 보고오시는 것도 좋습니다. 

1. Single View Application 프로젝트를 만들자. 

주의하실 점은, 

저기 Bundle Identifier를 잘 기억해두세요! 나중에 필요합니다 :)

2. Never Map GitHub에 가서 SDK다운로드

여기에 가셔서 

Download ZIP으로 받아주세요.

Download폴더로 들어갈텐데, 편하게 바탕화면으로 옮겨주세요 :)

3. 아까 만든 우리의 프로젝트로 간다.

프로젝트 > Target > General > Embedded Binaries, Linked Frameworks~로 가주세요.

4. Embedded Binaries에 아까 받은 네이버 SDK의 Framworks > ApiGatewayMac.framework를 추가해준다. 

Embedded Binaries의 밑에 보시면 +버튼이 있습니다. 눌러주세요!

Add Other를 눌러줍니다. 

Framworks > ApiGatewayMac.framework를 클릭해주시고 Open을 눌러주세요.

Finish버튼을 누르면,

ApiGatewayMac.framework가 Embedded Binaries와 Linked Framework and Libraries 둘다에 추가된 것을 볼 수 있습니다. 둘다에 추가되는 것이 정상이니 놀라지마세요 :)

5. Linked Framework and Libraries 에 아까 받은 네이버 SDK의 Framworks > NMapViewerSDK.framework를 추가해준다. 

위 과정과 같습니다.

Linked Framework and Libraries밑에 있는 + 버튼을 눌러주시고,

역시나 Add Other을 눌러주세요.

Framworks > NMapViewerSDK.framework를 클릭해주시고 Open을 눌러주세요.

그러면,

이렇게 됩니다. 이까지 잘 따라오셨나요? ㅎㅎ 조금만 힘내요!!

6. Linking > Other Linker Flags에 -ObjC -lxml2 플래그를 추가

제가 살짝 삽질한 부분 첫번째. 저 Linking은 있는데, Other Linker Flags는 어딨는거지..?하고 찾았어요..

PROJECT나 TARGETS의 Build Settings에 가셔서, All을 클릭해주시고, Linking을 찾아주세요. 

처음엔 Basic상태일텐데, 그때는 Linking은 있지만 Other Linker Flags는 안보이실거에요.

다음으로~

 Other Linker Flags의 값?을 넣는 부분을 더블클릭 해주세요.

그리고 +버튼을 누르면 텍스트필드가 활성화되는 것을 볼 수 있습니다. 

Linking > Other Linker Flags에 -ObjC -lxml2 플래그를 추가합니다. 라고 했으니

저 텍스트필드에 -ObjC -lxml2를 넣어주시고 엔터를 쳐주세요!

이렇게 되면 잘하신거에요! ㅎㅎ

7. Search Paths > Framework Search Paths에 NMapViewerSDK, ApiGatewayMac 프레임웍이 있는 폴더가 추가되어 있는지 확인

지금 그 상태에서, 우리 검색했던 그 검색바에 Framework Search Paths만 쳐주세요.

그럼 Framework Search Paths가 나올거에요! System Framework Search Paths가 아닙니다!! 이 Framework Search Paths는 All이든, Basic이든 둘다 나와요.

여기서 조금 헷갈렸던게,

타겟을 선택하고 Framework Search Paths를 보면 뭔가 있고, 프로젝트를 선택하고 Framework Search Paths를 보면 아무것도 없어서 어떻게 해야하지..? 잠깐 고민했었어요.

결론은 아무데나 해도 된다.

우리가 지금 해야할 게, Search Paths > Framework Search Paths에 NMapViewerSDK, ApiGatewayMac 프레임웍이 있는 폴더가 추가되어 있는지 확인하는 작업이죠? 일단, 둘다 보면 위 Framework가 있는 폴더가 추가는 안된것 같아요.

그럼 추가를 해줘야겠죠? 

타겟이나 프로젝트나 아무데서나 해줘도 되는데, 우리 이때까지 타겟에서 작업했으니까 타겟에서 해볼게요. 

역시나 Framework Search Paths의 값?부분을 더블클릭 > +버튼 클릭 > 텍스트필드 활성화까지 해주세요.

그리고 여기에 NMapViewerSDK, ApiGatewayMac 프레임웍이 있는 폴더 추가를 해야겠죠?

절대경로를 적어주면 된답니다.ㅎㅎ 

하지만...절대경로..언제알아 ㅡㅡ

조금 더 쉬운방법이 있답니다. 

이렇게 한 화면에 네이버 SDK폴더와 프로젝트를 같이 놔주시고, 

"프레임워크 폴더"라고 했으니 저 Frameworks폴더를 저 텍스트필드로 드래그 해주시면 된답니다. 

 이렇게요!

최종적으로,

이렇게 되어있으면 잘하신거에요! ㅎㅎ

8. 타겟 > Build Phase > New Run Script Phases 에 strip-frameworks.sh 스크립트를 추가

타겟 > Build Phase > New Run Script Phases를 누르시면, 

이렇게 Run  Script가 생긴 것을 볼 수 있습니다. 

여기에 strip-frameworks.sh 스크립트를 추가하라고 그랬죠?

strip-frameworks.sh 스크립트는 아까 받은 네이버 지도 SDK폴더에 가보시면 있습니다. 

이것도 역시나... 위 폴더와 프로젝트를 한 화면에 놓으신 뒤에, 

스크립트 "파일"을 드래그해서 저기에 넣어주세요. 이번엔 폴더가 아닌 "파일"이라는 것! 주의하세요 :)

9. Info.plist에 아래 설정을 추가합니다.

<key>NSAppTransportSecurity</key>
    <dict>
        <key>NSAllowsArbitraryLoads</key>
        <true/>
    </dict>
    <key>LSApplicationCategoryType</key>
<string>NSLocationWhenInUseUsageDescription</string>

제 블로그에서는 드래그가 안되실거에요. 번거로우시더라도 여기에 가셔서, 6번을 보시면 위 코드를 복사할 수 있습니다. 

복사 다 하셨나요? 그럼 프로젝트로 가서 info.plist로 가봅시다. 

나는..소스코드를 복사한 것 같은데......

당황하지마세요ㅎㅎ..

info.plist우클릭 > Open As > Source Code를 클릭해주세요. 

그럼 소스코드들이 쫙 나올텐데, 가장 밑으로 가셔서

저 마우스 커서가 있는 부분!!에 위에서 복사한 소스코드를 넣어주세요. 

이렇게요!

여기까지 Objective-C이신 분들은 설정이 끝났지만, Swift를 이용하는 경우 추가설정이 필요합니다. 

전..Swift를 쓸 것이므로 ㅎ_ㅎ 추가설정을 더 해줄게요. 

10. Objective-C Bridging Header를 아래 내용으로 생성합니다.

#ifndef Header
#define Header
#import <NMapViewerSDK/NMapView.h>
#import <NMapViewerSDK/NMapLocationManager.h>
#endif

역시나 복사가 안될텐데요.. 여기의 7번스텝으로 가셔서 복사해주세요. 

복사 하셨나요? 그럼 다시 프로젝트로 가줍시다. 

프로젝트에 파일을 하나 추가해주세요. 

템플릿은 Header file로!!! 이름은 아무거나 ~.~

그리고 방금 만든 헤더에 아까 복사한 내용을 붙혀넣어주세요.

잘하셨어요 XD!!

11.  Build Settings > Swift Compiler - General > Objective-C Bridging Header에 위에서 생성한 헤더파일을 추가

마지막단계입니다. 조금만 힘내세요 XD

위 스텝들을 따라해주세요. Swift Compiler에 종류가 많은데, 우리는 General에서 작업할거에요. General을 찾아주세요!

그리고! 아까 만든 헤더파일을 쭉 끌어와서 넣어주세요.

이렇게요!

최종적으로,

이렇게 나오시면 된거에요! ㅎㅎ

자...정말 길고 긴.. 설정이 끝났습니다 XD

이제 뭘해야하냐면..

여기에 가셔서 Open API 등록 신청이라는 것을 해야해요.

그럼 막 인증번호 받는 작업 그런거 하실거에요. (처음이시면!)

처음이 아니면, 

이런화면이 뜰거에요. 애플리케이션 이름은 하고싶은거 해주시고(저는 NaverMap했습니다.)

사용 API에 지도(모바일)을 선택해주세요. 

그리고, 여기에 iOS Bundle ID를 적어주셔야합니다. 아까 1번에서 기억해놓으라고 그랬죠?

아니면,

이렇게 내 Bundle Identifier를 볼 수 있습니다. 복사해서 저기에 넣어줄게요. 

네이버측에서,

라고 했으니 반드시 맞게해주세요. 난 다른거 넣을거야!!는...안해봐서 모르겠지만...그러지맙시다..

입력하시고, 등록하기 버튼을 눌러주세요. 

그러면, 자기 ID와 비밀번호가 나올텐데, 이 ID를 이용해서 네이버 지도를 띄울겁니다 ㅎㅎㅎ 

그리고 여기에 가셔서, 코드를 보면서 하고싶은 일들을 하시면 된답니다. 여긴 Obj-c코드는 물론이고 Swift코드까지 있답니다. 

오늘은 여기까지!!!!!!다음편으로 돌아오겠습니다 ㅎㅎ.. 

: 다음편 <왕초보를 위한 네이버 지도 API써보기(2/2)>보러가기 

세팅만 다 하셨다면, 응용은 금방금방 할 수 있어요!