NAVER Map을 이용하여 Android App을 만들어 보려고 합니다.  Google Map을 이용하여 안드로이드 앱을 만들어 보았다면 네이버 맵도 쉽게 만드실 수 있습니다.  네이버도 구글과 비슷한 방법으로 맵 사용 권한을 부여 하고 있습니다.  구글 맵을 이용하여 앱을 만들어 보지 않았다면 사용 권한 키를 받는 과정이 다소 복잡해 보일 수 있습니다.  설명 방법은 그림 위주로 하며 다음 순서대로 진행합니다.

1. 네이버 맵 사용 등록

2. Client ID 생성(맵 사용 키)

3. 안드로이드 스튜디오에서 NAVER Map을 이용한 앱 생성

 

이용 신청을 위해 아래 주소를 이용하여 네이버 맵 사이트 접속합니다.

https://www.ncloud.com/product/applicationService/maps

 

[이용 신청 하기] 버튼을 클릭 합니다

 

 

[회원가입] 화면에서 개인 회원 또는 사업자를 클릭 합니다. 저는 [개인 회원]을 선택하고 [다음] 버튼을 클릭 하였습니다.

 

 

약관에 동의를 합니다광고를 받고 싶으면 광고 정보 수신을 꼭 선택하세요.

 

 

회원 정보를 입력합니다.   아이디는 메일 주소로 입력해야 하고 인증을 위해 전송 버튼을 클릭하여 발송된 메일을 클릭 해야 하니 정확히 입력해야 합니다.  메일 인증을 위해 입력한 아이디의 메일을 확인해 봅니다.

 

 

위 사진은 아이디로 입력한 메일로 수신된 인증 메일입니다. [메일 인증] 버튼을 클릭 해 줍니다.

 

 

나머지 주소 및 회원 정보도 입력을 하고 휴대폰 번호도 인증을 한 후 [다음] 버튼을 클릭합니다.

 

 

무조건 결제수단을 등록해야 하는데 특정 사용량을 넘겨야 하기 때문에 과금은 이루어지지 않는다고 생각하면 됩니다.

 

 

[휴대폰 인증하기]로 결제카드를 등록 합니다.

 

 

본인 확인을 위한 전화 인증을 진행 합니다.

 

 

 

카드정보를 입력하고 [등록하기] 버튼을 클릭 합니다.

 

 

결제 카드 등록이 완료 되었습니다.

 

 

 

10만원 상당의 크레딧을 제공한다고 하는데 필요하면 신청을 합니다단 유효 기간은 3개월 입니다.

 

 

회원가입을 완료하고 로그인 후 다시 처음 화면으로 왔습니다.  [이용 신청 하기] 버튼을 클릭 합니다.

 

 

여러 API들이 소개 되고 있는데 현재는 선택하는 게 아니므로 하단으로 이동합니다.

 

 

본인이 만든 프로그램을 등록하는 화면인데 개인적으로는 순서가 바뀌지 않았나 하는 생각이 듭니다.  어째든 [Application 등록] 버튼을 클릭합니다.

 

 

약관 동의를 하고 [확인] 버튼을 클릭 합니다.

 

 

이제 사용하려는 애플리케이션을 선택하고 등록할 수 있습니다이번에도 스크롤을 하단으로 이동합니다.  물론 네이버 맵이 아니라면 다른걸 선택하면 되겠죠.

 

 

모바일 맵을 사용 하기한 등록을 시작 합니다.  [Mobile Dynamic Map]을 체크하고 안드로이드 앱 패키지 이름도 등록합니다등록시 [추가] 버튼을 클릭해야 등록 됩니다.  패키지를 입력했으면 [등록] 버튼을 클릭합니다.

 

 

드디어 얻으려는 인증 정보 단계에 도착했습니다.  키 모양 아이콘이 있는 [인증 정보] 버튼을 클릭 합니다.

 

 

인증 정보 팝업에서 [Client ID]를 복사해 잘 보관 합니다.  ID가 있어야 앱에서 네이버 맵을 불러올 수 있습니다.

 

 

Client ID를 생성 하였으니 네이버 맵을 이용한 앱을 하나 만들어 봅니다.

 

템플릿을 하나 선택 하고

 

 

Package name Naver에 입력한 것으로 적어줍니다. 네이버 지도 SDK는 안드로이드 OS 버전 4.0.3(API 레벨 15) 이상에서 사용할 수 있으니 Minimum SDK도 확인하고 [Finish] 버튼을 클릭해 줍니다.

 

프로젝트가 생성되면 추가적인 설정값을 입력해 줍니다.

 

build.gradle(Project)

allprojects {
   
repositories {
       
google()
        jcenter()
        maven {
            url
'https://naver.jfrog.io/artifactory/maven/'
       
}
    }
}

 

build.gradle(Module)

 

dependencies {
    implementation 'com.naver.maps:map-sdk:3.10.2'
}

 

그리고 Manifast에 복사해 놓은 Client_ID를 추가해주고 android.permission.INTERNET도 추가 합니다.

 

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    
package="copycoding.tistory.navermap">
    <
uses-permission android:name="android.permission.INTERNET" />
    <
application
        
android:allowBackup="true"
        
android:icon="@mipmap/ic_launcher"
        
android:label="@string/app_name"
        
android:roundIcon="@mipmap/ic_launcher_round"
        
android:supportsRtl="true"
        
android:theme="@style/Theme.NaverMap">
        <
activity android:name=".MainActivity">
            <
intent-filter>
                <
action android:name="android.intent.action.MAIN" />

                <
category android:name="android.intent.category.LAUNCHER" />
            </
intent-filter>
        </
activity>
        <
meta-data
            android:name="com.naver.maps.map.CLIENT_ID"
            android:value="Client_ID입력" 
/>
    </
application>

</
manifest>

 

Layout에 맵용 fragment를 추가해 줍니다.

 

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    
xmlns:app="http://schemas.android.com/apk/res-auto"
    
xmlns:tools="http://schemas.android.com/tools"
    
android:layout_width="match_parent"
    
android:layout_height="match_parent"
    
tools:context=".MainActivity">

    <
fragment android:layout_width="match_parent"
        
android:layout_height="match_parent"
        
android:id="@+id/map"
        
android:name="com.naver.maps.map.MapFragment" 
/>

</
androidx.constraintlayout.widget.ConstraintLayout>

 

프로그램은 이것으로 끝이고 실행해 볼까요?

 

 

기본적인 지도를 볼 수 있습니다.  Client ID를 얻는 과정이 프로그램보다 더 힘이 드는군요.

 

- copy coding -


한글 이름을 영문변환 할 때 가끔 어떤 알파벳이 맞는지 한참 고심을 해야 하는 경우에 참고하면 좋고 꼭 사람 이름이 아니어도 영문 변환이 필요할 때 사용할 수 있습니다네이버 검색 창에 [영문이름변환] 또는 정식 명칭인 [한글 이름 로마자 표기]로 검색을 합니다.


name transfer english


확인버튼을 클릭하면 바로 영문으로 변환이 됩니다.


name transfer english


영문이 마음에 들지 않는다면 더 보기를 클릭 하여 새 탭으로 나타나는 다른 철자로 만든 영문 표기와 사용 빈도를 이용해 선택 할 수 있습니다.


name transfer english


영문이름 철자는 여권과 신용카드등에 사용 하는 경우 동일 해야 하므로 신중하게 선택해서 사용 해야 합니다.

 

사람 이름이 아닌 경우에 검색을 하면 안나오는데 이런 경우에는 사람의 성을 앞에 쓰고 다음에 변환하려는 단어를 입력해서 조회를 하면 됩니다.


name transfer english


이런 식으로 해서 사용 하세요.



 

간단하게 사용할 수 있는 web editor를 하나 추가할 일이 있어서 naver에서 만들었으니 믿을만 하겠지 하고 설치를 하기로 하였습니다그런데 그냥 설치 하는 방법은 매뉴얼만 보면서 하면 되는데 요즘에는 화면 그리는 툴들을 많이 사용하고 있어서 javascript function 안에서 구현을 해야 하는 상황이 발생하여 다음에 또 써야할 일이 발생하면 사용하려고 작성 합니다예전에 HTML Tag만 가지고 구현하느라 1주일 걸린적이 있는데 그 소스는 어디 갔는지 모르겠네요.

 

순서

1. Source 다운로드

2. 일반적인 설치 방법

3. javascript 내에서 설치 방법

 

 

1. Source 다운로드


기존에 사용하던 개발자 url에서는 다운로드가 되지 않고 github에서 다운로드를 해야 합니다.

https://github.com/naver/smarteditor2

그리고 smartEditor 3.x 버전은 공개를 하지 않는다고 하네요저는 2.x 버전 만으로도 충분.


naver_smarteditor2


Clone or download를 클릭해서 확장된 메뉴 중 Download ZIP을 선택하면 압축된 형태로 다운로드가 진행 됩니다다운로드가 완료 되면 파일이 있는 디렉토리로 이동하여 압축풀기를 해줍니다디렉토리 구조를 보면 dist workspace 두개가 있는데 이중에 dist를 이용하여 작업을 진행 합니다.


naver_smarteditor2



2. 일반적인 설치 방법

 

그냥 html, jsp, php등에 설치 하는 방법은 네이버 매뉴얼에 잘 설명이 되어 있습니다.

http://naver.github.io/smarteditor2/user_guide/

 

간단하게 요약해서 설명 하면


2.1 압축을 푼 파일을 적당한 곳에 복사


dist 아래에 있는 파일들을 웹 서버에 복사를 하는데 웹에서 path를 잡을 수 있는 곳이면 아무 곳이나 가능하지만 너무 깊이 숨겨 놓으면 안되겠죠.

 

2.2 js 추가


smartEditor의 기본이 되는 javascript 파일을 작업하려는 파일 상단에 추가 합니다.


 <script type="text/javascript" src="상위경로/js/service/HuskyEZCreator.js" charset="utf-8"></script>


2.3 Textarea 추가

 

웹 에디터를 사용할 textarea를 작업 파일에 추가 합니다.  id는 나중에 사용해야 하므로 적당한 명칭을 부여 합니다.


<textarea name="weditor" id="weditor" rows="10" cols="100"></textarea>


2.4 editor 생성 javascript

 

2.3에서 생성한 textarea에 웹 에디터를 추가하기 위한 javascript를 작성 합니다매뉴얼에서 복사해서 사용하면 됩니다.

elPlaceHolder에 위에서 작성한 id를 입력 합니다.

sSkinURI에는 복사한 path를 잘 맞추어 기입합니다.


<script type="text/javascript">

 

var oEditors = [];

nhn.husky.EZCreator.createInIFrame({

    oAppRef: oEditors,

    elPlaceHolder: "weditor",

    sSkinURI: "경로/SmartEditor2Skin.html",

    fCreator: "createSEditor2"

});

 

</script> 



2.5 결과



naver_smarteditor2


2.6 전체 소스


좀 허접하지만 2.5에 있는 모양을 만들기 위해 제가 만든 test.html 전체 소스입니다.


webeditor

  

<script type="text/javascript" src="./dist/js/service/HuskyEZCreator.js" charset="utf-8"></script>

 

<textarea name="weditor" id="weditor" rows="10" cols="90"></textarea>

 

<script type="text/javascript">

 

var oEditors = [];

nhn.husky.EZCreator.createInIFrame({

    oAppRef: oEditors,

    elPlaceHolder: "weditor",

    sSkinURI: "./dist/SmartEditor2Skin.html",

    fCreator: "createSEditor2"

});

 

</script> 


좀 허접이 아니고 진짜 허접하네요.  dist에 있는 파일을 바로 메인에 복사해서 사용했습니다.

 

 

3. javascript 내에서 설치 방법

 

일반적인 방법으로 설치를 해보았다면 이것도 별거 없습니다그냥 function 안에서 구현을 한것 이외에는 나머지 스크립트는 동일 합니다.

 

3.1 구현 방법


$.getScript() jQuery를 이용하여 javascript 내에서 javascript를 불러옵니다그리고 불러온 js를 이용한 코드를 내부에 기입하면 됩니다.

 

textareabutton을 화면에 표시되고 HTML Tag를 적용시킬 수 있는 부분에 설정을 해줍니다툴에 따라 component, element, division등등이 될 수 있겠죠버튼도 이벤트를 직접 호출 할 수 없는 경우에는 가상으로 만들어서 사용하면 됩니다.

 

textarea를 먼저 정의하지 않으면 id를 찾을 수 없어 Cannot read property 'parentNode' of null / HuskyEZCreator.js 오류가 발생 할 수 있습니다.


naver_smarteditor2


 

3.2 전체 소스

 

화면 초기화가 완료되는 함수에 넣어서 구현한 내용입니다.


function onLoadedFunction()

{

           this.eleTxt.setHtml(‘<textarea name="ir1" id="ir1" rows="10" cols="100"></textarea>’);

this.eleBtn.setHtml(‘<button class=”saveBtn”>저장</button>’);

 

           $.getScript("./dist/js/service/HuskyEZCreator.js", function() {

                     var oEditors = [];

                     nhn.husky.EZCreator.createInIFrame({

                                oAppRef: oEditors,

                                elPlaceHolder: "ir1",

                                sSkinURI: "./dist/SmartEditor2Skin.html",

                                fCreator: "createSEditor2"

                     });

                      $(document).on('click', '.saveBtn', function () {

                    

                                var val2 = oEditors.getById["ir1"].exec("UPDATE_CONTENTS_FIELD", []);

                                this.contents = $('#ir1').val();

                                alert(this.contents);

                                this.onSubmitBtnClick();

                     });

           });

          

};


3.3 결과 화면

 

위의 코드를 실행하면 나오는 결과 화면 입니다.


naver_smarteditor2



4. size 조절

 

화면에 따라 에디터의 사이즈를 조절해야 하는 경우가 발생 합니다.  그런데 html을 아무리 찾아보고 비슷한걸 수정해도 사이즈는 변경이 안되는데 사이트 변경은 js 파일에서 관리 합니다.

 

/dist/js/service에 가면 SE2BasicCreator.js 파일이 있습니다.  위치는 버전에 따라 하나 윗단계인 js에 들어 있기도 합니다. SE2BasicCreator.js 파일을 열고 아래와 같은 내용을 찾아서 수정 합니다.


 

            var htDimension = {

                     nMinHeight:205,

                     nMinWidth:parseInt(elIRField.style.minWidth, 10)||570,

                     nHeight:elIRField.style.height||elIRField.offsetHeight,

                     nWidth:elIRField.style.width||elIRField.offsetWidth

           };


 

높이 : nMinHeight:205

가로 : nMinWidth:parseInt(elIRField.style.minWidth, 10)||570,

 

화면에 따라 사이즈가 여러개 필요하다고요?

그럼 SmartEditor2xxx.html 파일과 SE2BasicCreator.js 파일을 여러개 복사해서 이름을 변경하고 각 html 파일에서 다른 js 파일을 불러오면 됩니다.



 

검색 엔진에 자신의 site를 등록 하는건 주소만 등록이 된 것 이고 root 하위에 있는 많은 파일들도 등록을 해야 하는데

이러한 사이트 내부의 파일들을 등록하는 단계를 sitemap 등록이라고 합니다.

 

사이트 맵은 xml 형태로 작성이 되는데 수작업으로 해도 되지만 자동으로 생성을 해주는 사이트가 있으니

편안하게 주소만 적어주고 기다리기만 하면 됩니다.

 

꼭 수작업으로 작성하고 싶으신 분들은 다음과 같은 형식으로 작성을 합니다.


<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9 http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">
<!-- Generated by Web-Site-Map.com -->
<url><loc>http://copycoding.tistory.com/</loc><changefreq>daily</changefreq><priority>1.00</priority></url>
<url><loc>http://copycoding.tistory.com/category</loc><changefreq>daily</changefreq><priority>0.85</priority></url>
<url><loc>http://copycoding.tistory.com/category/Android</loc><changefreq>daily</changefreq><priority>0.85</priority></url>
<url><loc>http://copycoding.tistory.com/category/Android/Device</loc><changefreq>daily</changefreq><priority>0.85</priority></url>
<url><loc>http://copycoding.tistory.com/category/nodejs</loc><changefreq>daily</changefreq><priority>0.85</priority></url>
<url><loc>http://copycoding.tistory.com/category/Angular</loc><changefreq>daily</changefreq><priority>0.85</priority></url>
<url><loc>http://copycoding.tistory.com/category/Setting</loc><changefreq>daily</changefreq><priority>0.85</priority></url>
<url><loc>http://copycoding.tistory.com/category/MFC</loc><changefreq>daily</changefreq><priority>0.85</priority></url>
<url><loc>http://copycoding.tistory.com/tag</loc><changefreq>daily</changefreq><priority>0.85</priority></url>
<url><loc>http://copycoding.tistory.com/media</loc><changefreq>daily</changefreq><priority>0.85</priority></url>
<url><loc>http://copycoding.tistory.com/location</loc><changefreq>daily</changefreq><priority>0.85</priority></url>
<url><loc>http://copycoding.tistory.com/guestbook</loc><changefreq>daily</changefreq><priority>0.85</priority></url>
<url><loc>http://copycoding.tistory.com/26</loc><changefreq>daily</changefreq><priority>0.85</priority></url>
<url><loc>http://copycoding.tistory.com/tag/Express</loc><changefreq>daily</changefreq><priority>0.85</priority></url>
<url><loc>http://copycoding.tistory.com/tag/Project</loc><changefreq>daily</changefreq><priority>0.85</priority></url>
<url><loc>http://copycoding.tistory.com/tag/%EA%B5%AC%EC%A1%B0</loc><changefreq>daily</changefreq><priority>0.85</priority></url>
<url><loc>http://copycoding.tistory.com/tag/%EB%94%94%EB%A0%89%ED%86%A0%EB%A6%AC</loc><changefreq>daily</changefreq><priority>0.85</priority></url>
<url><loc>http://copycoding.tistory.com/25?category=1019376</loc><changefreq>daily</changefreq><priority>0.85</priority></url>
<url><loc>http://copycoding.tistory.com/24?category=1019376</loc><changefreq>daily</changefreq><priority>0.85</priority></url>
<url><loc>http://copycoding.tistory.com/21?category=1019376</loc><changefreq>daily</changefreq><priority>0.85</priority></url>
<url><loc>http://copycoding.tistory.com/16?category=1019376</loc><changefreq>daily</changefreq><priority>0.85</priority></url>
<url><loc>http://copycoding.tistory.com/15?category=1019376</loc><changefreq>daily</changefreq><priority>0.85</priority></url>
<url><loc>http://copycoding.tistory.com/?page=2</loc><changefreq>daily</changefreq><priority>0.85</priority></url>
<url><loc>http://copycoding.tistory.com/?page=3</loc><changefreq>daily</changefreq><priority>0.85</priority></url>


1. sitemap  생성


자동으로 생성 하실 분들은 인터넷에서 sitemap 생성 등으로 검색을 하면 여러 개의 검색 결과를

얻으실 수 있고 그 중에 하나를 선택 하여 사이트 맵을 작성하면 됩니다.


여기서는 아래 주소 사이트를 이용 합니다.

http://www.web-site-map.com


메인 페이지가 아래와 같은 형태로 구성 되어 있고 우측의 입력란에 본인의 사이트 주소를 기입 합니다



그리고 하단의 노란색 [Get Free XML Sitemap] 버튼을 클릭 합니다.


그러면 다음 페이지로 이동을 하고 상세 설정을 진행 합니다.



1번에서 사이트 주소가 정확한지 확인해 주고


2번에서 그림에 있는 글씨를 적어주고


나머지는 그냥 두어도 됩니다.


아래로 내려오면 하단에 역시 노란색 [Create free XML Sitemap] 버튼을 선택 합니다.



한참을 Status에서 진행을 합니다.

그리고 sitemap 완성이 되면 3번과 같이 다운로드를 받으라고 합니다.



download your sitemap 클릭하면 화면이 이동되고 파일에 대한 간략한 정보가 나옵니다.



 

download 클릭하여 파일을 다운받습니다.

 

이제 다운로드 받은 sitemap.xml 파일을 검색 사이트에 등록하는 방법은 두가지가 있습니다.

 

하나는 sitemap.xml 파일을 본인의 홈페이지에 ftp등으로 업로드 하고 주소를 가지고 등록하는 방법이있고

여기서는 게시글에 첨부파일로 업로드 하여 참조하는 방식으로 등록 합니다.

두가지 방법 편한방법을 이용 하시면 됩니다.



2. 붙여 넣기 용 Sitemap.xml 주소 만들기



먼저 내용이 없으니 비공개로 글쓰기를 합니다.

다른 사람에게 파일만 공개하려면 공개로 하셔도 무방합니다.

 

그리고 파일을 첨부 합니다.



첨부가 되었군요.  우측 HTML 체크박스를 체크 합니다.



sitemap.xml 파일에 대해 어떤 값으로 참조되는지 알 수 있습니다.



 

대충 이런식으로 나옵니다. 일부분을 ‘x’로 처리 했습니다.

<p>sitemap.xml</p>

<p><br /></p>

 

그럼 이중에 일부분을 떼어서 다음처럼 url을 만듭니다.

http://copycoding.tistory.com/attachment/cfilex.xx@99XXXXXXXXXXXXXXXX5AB.xml|filename=sitemap.xml


이게 붙여넣기를 해야 하는 최종 모습 입니다.



3. google search console에 등록


 

먼저 구글에 등록을 해보겠습니다.

로그인을 하고 google search console에 가면 좌측에 sitemap 메뉴가 있습니다.

 


 

준비 해놓은 주소를 복사하고 [submit] 버튼을 클릭 합니다.

주소나 파일에 이상이 없으면 하단에 success 로 표시됩니다.



그럼 끝.



4. Naver 웹마스터 도구


이번에는 Naver 웹마스터 도구에 sitemap을 등록 하겠습니다.

 

여기서도 로그인을 하고 좌측 메뉴에서 사이트맵 제출을 선택 합니다.

그리고 주소를 복사하고 [확인]버튼을 클릭 합니다.

 

naver google sitemap


 

네이버도 오류가 없으면 하단에 리스트로 나타납니다.



이제 완료가 되었습니다.


- copy coding -


12

+ Recent posts