Kakao Map API
Client 적용
Kakao 로컬 API를 이용해 위치 정보를 받아오는건 성공했으니, Client에 지도를 표시해보도록 하자!
우선 나는 Flutter를 사용하고 있기에 해당 Map API에서 지원하는 모바일 SDK는 사용할 수 없다...
(출처 : https://apis.map.kakao.com)
다만, https://pub.dev/packages/flutter_kakao_map
이곳에 flutter를 위한 Kakao Map Plugin이 있기에 한번 해보기로 했다.
그리고 결론적으로는 실패했다.(몇 시간동안 삽질을 해서 그 과정은 생각하고 싶지도 않다..ㅠ)
android 에뮬레이터는 해당 화면을 선택하자마자 강제 종료가 되었고, ios 시뮬레이터는 빈 화면만 뜬다.
그래서 어떻게 해야하나 여러 군데를 돌아다닌 뒤 내린 결론은
Flutter WebView를 이용해서 웹페이지를 단말기에 띄우는 방식이었다.
그렇게 시작된 html, JS 와의 사투...(나는 html과 JS, CSS를 하나도 몰라서 kakao 개발자 포럼에 있는 예제 코드를 튜닝하는 정도..ㅎ)
단말기의 종류에 상관없이 작동해야 했기에 반응형으로 튜닝을 시도했다.
Server 측
Flutter 에서 html을 작성해서 자체에서 띄워보려고 했는데, 이상하게 잘 안됐다.
요리조리 시도를 해봤는데, Server측 Controller에 들어가지를 않길래 그냥 SpringBoot 의 resources에 html코드를 두고 해당 화면을 띄우기로 했다.
먼저 html을 띄우기 위해 요청을 받는 Controller를 작성했다.
View를 보여줄 것이기 때문에 @Restcontroller가 아닌 @Controller Annotation을 사용했다.
@Controller
public class UI {
@RequestMapping(value="/show")
public String show(){
return "kakaomap";
}
}여기서 return에 있는 "kakaomap"은 내가 작성한 html 파일의 이름이다.
그럼 html로 작성된 View 화면으로 어떻게 보낼 것인가?
예전에 SpringMVC를 할 때는 JSP를 사용했었는데, 이번에는 Thymeleaf를 사용해보기로 했다.
먼저 dependency를 추가하고..
패키지 구조는 이렇게 되어있다.
View 파일이 resources/static 에 위치해있으므로 application.properties에서 prefix와 suffix를 설정 해주도록 하자.
thymleaf에 관련된 설정을 몇 개 더 추가하긴 했다.
(캐싱을 하지 않는게 개발할 때는 바로바로 새로고침이 되어 편하다고 한다.)
이렇게 작성을 마친 뒤, 브라우저를 통해 출력을 해보면
아주 잘나오쥬~?
그럼 다시 Flutter에서 webview를 통해 해당 화면을 단말기에 받아보자!
다시 Client
class map extends StatelessWidget {
WebViewController _controller;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar:
AppBar(title: Text('지도'),
backgroundColor: Color(0xFF6CD8F0),
),
body: SafeArea(
child: WebView(
initialUrl: ServerProp().map_server+'/show',
javascriptMode: JavascriptMode.unrestricted,
gestureNavigationEnabled: true,
),
),
);
}
}정말 짧고 간단하다!
일단 여기서 WebView의 initialUrl에 있는 ServerProp().map_server는 내가 만든 MapAPI 서버가 떠있는 IP 주소를 받아온다. 그리고 실행을 해보면?
굉장히 허접하지만, 일단 테스트용이니...
그리고 생각했던 것과 다르게 Flutter를 이용해 같은 코드를 작성하였어도, ios와 Android는 결과물에 있어 차이를 보였다.
Android : 글씨 크기가 적절하며 화면 상의 지도를 이동 및 확대가 가능하다.(하지만 축소는 안되더라)
iOS : 글씨가 너무나도 작게 나오며, 화면 상의 지도를 확대, 축소 할 수 없고 이동만 가능하다.
(둘 다 화면이 생성된 처음 그 상태 그대로이다. 안드로이드만 일부러 확대한 거 아님!)
주제와는 상관없지만 이 과정에서 Android Emulator는 로컬에서 띄운 서버와 통신을 할 때, localhost:8080 으로 할 경우 인식을 못한다는 것을 알게 되었다.
ios Simulator는 제대로 인식하지만, Android일 경우에는 자신의 Public IP를 넣어줬더니 제대로 통신이 되었다.
혹시나 해서 아까 출력했던 웹페이지의 크기도 조정해봤는데 확대 정도는 달라지지 않는다
글씨를 충분히 알아볼 수 있다.
동일한 코드인데 결과물이 이렇게 다르게 나오니, Swift나 Kotlin으로 하나의 플랫폼에서 개발해야 하나 싶었다...
일단은 화면에 확대, 축소 버튼을 두어 이걸 통해 제어가 가능한지 좀 더 생각해봐야겠다😩😩
