카카오 지도와 드래깅 이벤트와 관련해서...

카카오 지도와 드래깅 이벤트와 관련해서...

QA

카카오 지도와 드래깅 이벤트와 관련해서...

본문

안녕하세요.

카카오 지도 api로 그누보드 내용관리(컨텐트) 스킨을 만들어 잘 사용하고 있는데요.

모바일 웹인 경우에는 지도에서 마우스로 위 아래로 드래그 해도 되는데....

 

그 웹을 통째로 씌워서  앱으로 만들어 구현하면...

모바일에서 손가락으로 그 앱상의 지도를 아래로 드래깅 하면....

 

그 페이지 refresh가 됩니다.

아래로 드래깅했을 때 refresh되는건

모바일 앱의 표준 이벤트인 것 같은데....

 

앱에서...

지도페이지인 경우 

아래로 드래깅했을 때 카카오 맵 인터페이스가 그대로 유지될 수 있게 하는 방법이 없나요?

 

이 질문에 댓글 쓰기 :

답변 3

모바일은 원 터치고 피씨는 클릭입니다 하여 둘관계는 성립이않됩니다.

이게 무슨뜻이냐 하면은 메뉴에2차메뉴가 있어야한다면 피시에 기능을그대로 모바일에서는 2차메뉴를 열어볼수가 없다는뜻이라는거죠 즉 1차메뉴에서 터치로 실행이되버리닌깐요 그래서 1차는 터치를  죽이고  실행을 해줘야하겟죠. 이는 스크립트로 처리가 가능합니다.

하지만 api일경우에는 다릅니다.

그렇면 맵또한 같습니다. 하여 모바일에서는 모바일 api,를 적용해주셔야하구요 피시는피시api를 사용해주셔야합니다. 이를 허용 결정은 api 맵을가지고잇는 카카오에 잇습니다. 둘다 허용이되어잇는지 확인해주시바랍니다.

자문자답)

카카오개발자 커뮤니티 답변입니다.

-------------------------------------------------------------------------------------------------------

웹뷰에서 스크롤을 당길 때 reload가 되는 건 SwiperRefreshLayout 같은 레이아웃이 설정되어 있는 것 같아요.
해당 레이아웃이나 코드가 적용되어 있는지 확인해서 reload를 막아주셔야 할 것 같습니다.

--------------------------------------------------------------------------------------------------------

웹뷰란 무엇일까?

? 네이티브 앱 vs 하이브리드 앱

앱(App)은 크게 네이티브 앱과 하이브리드 앱으로 나눌 수 있다.

보통 앱(App)이라고 하면 운영체제 혹은 플랫폼에서 제공하는 SDK(Software Development Kit)를 기반으로 개발된 애플리케이션으로 일반적으로 네이티브 앱을 지칭한다.

그렇다면 하이브리드 앱이란?
네이티브 + 웹앱의 기술을 함께 사용하는 앱으로서 콘텐츠 영역은 HTML 기반의 웹 앱으로 개발을 하되 패키징 처리만 각 아이폰, 안드로이드 플랫폼 안에서 함으로써 앱 배포를 가능하게 한다.

예를 들어, 네이버 앱 같은 경우, 첫 화면은 검색창이 띄워져있고, 웹으로 네이버에 접속했을 때와 큰 차이가 있진 않다.
하지만 음성 인식, QR코드 등 앱에서만 지원되는 기능들이 있는데 이러한 형태를 하이브리드 앱이라고 한다.

대표적으로 React Native, Flutter, PhoneGap, Cordova, Ionic 등이 있다.

당연히 네이티브 앱과 하이브리드 앱은 각각 장단점이 존재한다.
 

그리고 하이브리드 앱에는 WebView라는 것이 존재한다.

? 웹뷰(WebView)란?

간단하게 말하면 웹 콘텐츠를 앱에서 표시하는 것!
즉, 앱 화면에서 띄우고 싶은 웹 페이지를 보여주는(띄워주는) 프레임을 말한다.

익스플로러, 크롬과 같이 HTML로 작성된 홈페이지를 표시할 수 있다.
웹에서 정보를 계속 받아와야 하기 때문에 네이티브 앱 보다는 반응이 느리지만 수정 등의 개발 효율성이 좋다는 장점이 있다.

특히, 웹뷰는 반응형 웹사이트를 안드로이드 디바이스에서 띄워줄 때 유용하다.


 

? 웹뷰(WebView) 사용법

? 권한 설정

AndroidManifest.xml 에 인터넷 허용 권한 추가

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

 

사실 인터넷 권한 설정까지만 해도 상관없지만
웹을 렌더링하는 과정에서 속도, 성능을 조금이라도 높일 수 있도록 아래 권한도 함께 추가해주면 좋다.

<application
android:hardwareAccelerated="true">

 

? Http 사용법

안드로이드는 9버전부터 Https만 지원한다. (Http 지원 X)
따라서 Http를 사용하면 에러가 발생하게 되는데, HTTP를 사용하고 싶다면 아래 사항을 따라하면 된다.

step 1. network_security_config.xml 파일 생성

먼저 Android/res 폴더에 xml 폴더를 생성해준다.

step 2. network_security_config.xml 파일을 생성.

step 3. 파일에 아래 내용을 넣는다.

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <base-config cleartextTrafficPermitted="true">
        <trust-anchors>
            <certificates src="system" />
        </trust-anchors>
    </base-config>
</network-security-config>

step 4. Android Manifast.xml에 아래 내용을 추가.

<application android:networkSecurityConfig="@xml/network_security_config">

 

? 웹뷰 세팅 관련 코드 모음

// 웹뷰 xml 연결
    mWebView = (WebView) findViewById(R.id.webView);
 
 // 웹뷰 소스
   .getSettings(); //세부 세팅 등록
   .setJavaScriptEnabled(true); // 웹페이지 자바스클비트 허용 여부
   .setSupportMultipleWindows(false); // 새창 띄우기 허용 여부
   .setDatabaseEnabled(true); // 데이터베이스 접근 허용 여부
   .setWebViewClient(new WebViewClient()); // 클릭시 새창 안뜨게 (알림 및 요청 관련 설정)
   .setDomStorageEnabled(true); // 로컬저장소 허용 여부
   .getSettings().setDefaultTextEncodingName("UTF-8"); // encoding 설정
   .webSettings.setDisplayZoomControls(true); // 돋보기 없애기
   .setJavaScriptCanOpenWindowsAutomatically(false); // 자바스크립트 새창 띄우기(멀티뷰) 허용 여부
   .setLoadWithOverviewMode(true); // 메타태그 허용 여부
	// 컨텐츠가 웹뷰보다 클 경우 스크린 크기에 맞게 조정
   .getSettings().setLoadWithOverviewMode(true);
   .setSupportZoom(false); // 화면 줌 허용 여부
   .getSettings().setAllowFileAccessFromFileURLs(true); // 파일 URL로부터 파일 접근 허용
   .getSettings().setAllowContentAccess(true); // 컨텐츠 접근 허용
   .setBuiltInZoomControls(false); // 화면 확대 축소 허용 여부
   .getSettings().setAllowFileAccess(true); // 파일 접근 허용 여부

   .setCacheMode(WebSettings.LOAD_NO_CACHE); // 브라우저 캐시 허용 여부
 
   .loadUrl("http://m.naver.com"); // 웹뷰에 표시할 웹사이트 주소, 웹뷰 시작

위의 마지막 줄 코드에 .loadUrl 함수를 통해 웹뷰 객체를 얻어와서 url을 로딩할 수 있다.


 

? WebView 기본 사용법

위의 내용을 이해했다면 웹뷰에 웹 페이지를 띄우는 정도의 코딩은 단 몇 줄의 코드만으로도 가능하다.
 

먼저 위에서 언급했던 인터넷 허용 권한을 추가하고,
레이아웃 XML 파일 내에 WebView 화면을 설정해준다. (id값 필요)

<xml 예시>

<WebView
    android:id="@+id/myWebview"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>
<mainActivity 자바 코드 예시>

// xml에 id로 선언한 WebView와 연결
 WebView webView = findViewById(R.id.myWebview);

// onCreate() 부분에 WebView 세팅
  WebSettings settings = webView.getSettings();
  settings.setJavaScriptEnabled(true);
  webView.loadUrl("http://m.naver.com");

위의 xml과 mainActivity 예시 코드를 사용하면 괄호 안 웹 페이지가 웹뷰 화면이 뜨는 것을 볼 수 있다.

loadUrl함수를 사용하여 괄호 안 URL에 해당하는 웹 주소에 요청-응답으로 웹뷰 화면에 띄워주는 것.

 

※ 만약 URL이 아니라 내부 html파일을 표시하고 싶다면?

일단 앱 내부에 assets 폴더가 필요하다.
아래 이미지 사진과 같이 assets 폴더 안에 html 파일이 있어야 한다.
images%2Fryalya%2Fpost%2F407c7702-3b25-41a7-b9c5-99bd0d1c25f0%2Fimage.png

만드는 방법도 어렵지 않다.
app을 우클릭하여 new → folder → Assets Folder를 클릭하면 생성된다.

해당 test.html을 불러오기 위해서는 아래와 같이 경로를 적고, loadUrl함수로 매핑해주면 된다.

webView.loadUrl("file:///android_asset/test.html");

 


Reference

webView

답변을 작성하시기 전에 로그인 해주세요.
전체 22
QA 내용 검색
filter #웹 ×

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT