아 오랜만에 포스팅... 이네요.


그동안 iOS 개발을 계속해오고 있어서, iOS에 대한 기초 내용을 작성하려고 했으나, 저보다 훨씬 더 잘하시는 분들이


잘 정리해두시고 계시더라구요. 그래서 저는 방향을 바꿔서 ;; 


iOS 기반 앱 개발에서 제가 사용했던 유용한 라이브러리들을 정리하는게 차별화되지 않을까 싶어서 ㅎ 


iOS 앱에 다음(daum) 모바일 지도를 연결하는 방법에 대해서 작성해보려고 합니다! ㅋ


물론 daum에서 자세하게 작성한 것이 있는데요. 거기다가 조금 더 해보는 정도입니다. 



1. Daum 모바일 지도 라이브러리 다운로드 


다운로드 제공 페이지는 요기 !!   : http://dna.daum.net/apis/mmaps


아래 Fig. 1을 보면서 설명드리죠 !! 


Fig. 1. 다음 DNA 개발자네트워크 - 모바일앱용 지도 API 정보제공 페이지 스크린샷(http://dna.daum.net/apis/mmaps)


먼저 다운로드 부터 하세영. 제일 하단에 있는 빨간박스가 다운로드....


이것도 Open API 중에 하나죠? 그럼 사용하기 위해서는 Key가 필요합니다 !! ㅋ 


Key가 왜 필요한지는... 머 여러가지 이유인데요. Daum 쪽에서는 제공되는 서비스를 관리하는데 사용하겠죠. 제한이라던지, 확인이라던지.. 


암튼 그렇습니다. 그럼 Key는 어디서 받는지... 2에서 계속할께요.




2. Daum Daum 모바일 지도 Key 받기. 


위 Fig.1 에서 제일 상단 오른쪽 (Upper Left ㅋ) 빨간 박스를 누르시면 Key를 생성할 수 있습니다.


Daum 아이디로 로그인하셔야 하구요. 없으시다면 가입하셔야죠 ~ ^ ^


그럼 Key 만드는 페이지가 Fig. 2와 같이 나타납니다. 


Fig. 2. Daum 나의 API 관리 페이지 스크린샷 (http://dna.daum.net/myapi)


그래요. 우리는 지도 API를 사용하고 싶으니깐 빨간박스로 체크한 것을 클릭하세용.


처음 만드시는 분이라면 0 으로 표시되고 있겠죠.


암튼 클릭하시면 Fig. 3과 같은 화면을 볼 수 있죠.


Fig. 3. 지도형 API 관리 페이지 스크린샷(http://dna.daum.net/myapi/mapsapi/list)


정보 보호를 위해서 몇 가지 정보는 지웠어요 ㅋ 너무 대충 지운듯... 


암튼 여러분은 빨간 박스를 클릭하셔서 새로운 API 키를 등록하시길 바랍니다.


Fig. 4와 같이 말이죠.


Fig. 4. 지도형 API신청 페이지 스크린샷(http://dna.daum.net/myapi/mapsapi/new)


역시 Fig 4에서도 빨간색 박스가 중요한데요. 먼저 상단의 빨간 박스는 모바일용을 선택하시구요.


저희는 iOS 기반에서 동작할 것이니깐 동작환경을 iOS로 선택하시구요. 디폴트에요 ㅋ :)


제일 중요한 것은요 모바일 앱 ID 입니다. 저기 적혀있죠. iOS의 경우 Buddle ID를 의미한다구요. 근데!!! 오타네요 다음 관계자 여러분


혹시 이 글을 보신다면 ㅋ Bundle ID로 수정하시면 더 좋을 것 같아요. 참고로 buddle은 명사, 타동사로 (광산)세광조 라고 네이버에서 알려주네요. ㅎ


암튼 buddle - > bundle 입니다. ㅋㅋ 


bundle 아이디는 어디서 얻느냐 !!! 여러분들 다 아실 테지만 간단하게 적어보면 일단 요 내용을 테스트하기 위해서 프로젝트를 하나 만들자나요.


그럼 Fig. 5와 같이 확인하실 수 있어요.



Fig. 5. Bundle ID 확인 방법.


빨간박스에 있는게 번들아이디에요. 


가장 왼쪽에서 프로젝트를 선택하시고 Summary 부분을 보시면 된답니다. 암튼 이걸 잘 복사하시면 검은색 부분만 복사가데요. 그래서 회색부분은 직접


다음 API KEY 만드시는 부분에 추가로 적어넣으시고, Key를 후딱 생성합니다. 


아 ... 포스팅 길다. ㅠ 


자 KEY를 받으셨나여? 그럼 3으로 이동.



3. 다음 지도를 띄워보자. iOS에서....


일단은 1에서 받은 iOS 관련 파일을 맥에서 적당한 위치에 압축을 풀어주세영.


Fig. 6과 같이 말이죠.




Fig. 6. 다운로드 한 파일을 압축풀면 이래요.

압축을 푼 폴더가 [iOS]DaumMapOpenAPI_release.... 이거구요.


빨간색 박스는 우리가 필요한 폴더에요. 즉 나머지 파일들은 Daum에서 제공하고 있는 예제와 관련된 것이구요.


우리가 사용할 폴더는 빨간색 폴더이니... 복사하셔서 프로젝트 폴더로 가져가시는 것이 좋겠지요? 


자.. 그럼 이제 마지막으로 갑니다. 


새로운 iOS 프로젝트를 하나 생성하시구요. 다음 내용을 작성하려고 하니깐... 


Daum에서 너무 잘 정리해두었네여 ㅋㅋㅋㅋㅋ 


아 머지 이 포스팅은 망함.


http://dna.daum.net/apis/mmaps/ios 참고하세여 ㅋㅋㅋ 



4. 음... 다른게 띄워보자.


다음에서 제공해주시는 좋은 문서를 참고하시면, 화면 전체에 맵을 띄우실 수 있을 거에영.


그럼 응용으로 테이블 뷰에다가 해볼까영? ㅋㅋㅋㅋ 망한 포스팅을 살려보고자.


막 정보를 테이블 뷰로 제공하는데, 지도가 들어가 있는 형식을 상상해보자구요. ㅎ


그럼 일단 프로젝트를 셋팅해보죠.


저는 Storyboard를 사용하는데요.


기본 Single View Application을 생성하면 다음과 같은 스토리보드를 보실 수 있는데요.


Fig. 7. 기본 Single View Application - StoryBoard.


우리는 테이블 뷰로 할꺼니깐 삭제. ㅋ Fig. 8과 같은 화면이 나오겠져?


Fig. 8. View controller 삭제한 화면 - StoryBoard.


Fig. 9. 그담에 Table View Controller 가져다 둔 화면 - StoryBoard.



머 다이나믹 Table로 할 필요 있나영. Static으로 변경해주시고.. 


기존 Single View Application 때문에 생성된 ViewController.h , m 파일은 삭제하는게 깔끔하겠죠.


음 그담에는 Table View의 Cell 하나를 적당한 크기로 키우시고, View을 가져다 둡니다. 


Fig. 10. 적당한 View를 추가해둠 - StoryBoard.


그 다음에는 Table View를 컨트롤해야 하니깐... 새로운 클래스를 만들어주세영.


Fig. 11. 새로운 클래스를 만들어주세영.


Fig. 12. 불필요한 함수들은 지워주시구요 우린 Static Table 이니깐영.


클래스 만드셨으면 StoryBoard가셔서 만들어둔 TableViewController에 클래스 지정해주시고, 


만들어둔 View를 적당한 이름으로 클래스에 연결해주세영.  (스샷이 날라가서... ㅠ)




아 그리고 Daum 지도 API 프레임워크를 추가하시는 것은 아까 알려드린 사이트에서 확인하시고 똑같이 따라하시구요.


그럼 이제 마지막으로 가볼까영.




5. 진짜 마지막. 좀 띄워보자 다음 맵.


진짜 마지막 ㅋㅋㅋ 더 이상은 시간이.. 


저는 Daum 맵을 띄우기 위해서 만들어둔 View 이름을 mapView라고 했어영 ㅎ 


아래 그림을 참고하시면 됩니다.


mapView는 위에서 말씀드렸고, daumMap이라는 변수는 컨트롤하기 쉽게 설정한 것이구요.


실제 맵은 daumMap으로 생성되고 mapView에 addSubView되는 방식입니다.


그림을 클릭하면 커지니깐여. 확인하시면 될 것같아요.


Fig. 13. header file.


Fig. 14. model file.


소스 사진으로만 있으면 화내실꺼니깐.


    daumMap = [[MTMapView alloc] initWithFrame:CGRectMake(0, 0, 300, 200)];

    [daumMap setDaumMapApiKey:@"----------------------------------------------"];

    daumMap.delegate = self;

    daumMap.baseMapType = MTMapTypeHybrid;   

    [daumMap setMapCenterPoint:[MTMapPoint mapPointWithGeoCoord:MTMapPointGeoMake(36.467579, 127.137254)] zoomLevel:11 animated:YES];

    [mapView addSubview:daumMap];

Fig. 15. 작동화면.



+ Recent posts