방문자가 모바일 사이트에서 버튼을 클릭하면, 카카오내비 앱이 실행되고, 사용자가 미리 지정한 목적지로 안내되도록 설정할 수 있습니다.

시작에 앞서

이 도움말을 진행하려면 카카오 API키가 필수로 필요합니다. 아래 도움말을 참고해, 카카오 API키를 발급받은 후 사이트에 적용해 주세요. 발급받은 API키는 이 도움말에서 다시 사용하기 위해 메모장에 보관해 둡니다.

카카오 API키 발급 및 적용방법

1단계: 목적지의 위도와 경도 알아내기

카카오맵 API를 사용해 목적지의 위도와 경도를 알아내는 과정입니다.

1. 카카오맵 API(WEB)에 접속합니다.

   

2. 왼쪽 메뉴에서 Sample을 클릭하고, 지도 항목에서 클릭한 위치에 마커 표시하기를 클릭합니다.
3. 오른쪽 지도에서, 마우스 휠 스크롤을 사용해 지도를 확대 또는 축소하고, 마우스 드래그를 통해, 원하는 목적지를 찾은 다음 클릭합니다.

4. 위치를 마우스로 클릭하면, 아래 그림과 같이 지도 아래 목적지의 위도와 경도가 표시됩니다. 이 값들을 복사 후 메모합니다. (메모한 위도와 경도는 아래 3단계에서 목적지 위치 정보 설정 시 사용됩니다.)

   

2단계: 카카오내비 실행 스크립트 복사하기

아래의 카카오내비 실행 스크립트를 마우스로 드래그하여 복사합니다. (단축키: CTRL + C)

<!-- 카카오내비 목적지 설정 및 실행 -->
<script type="text/javascript">
    Kakao.init('API키');
    function myKakaoNavi1() {
        Kakao.Navi.start({
            name:"목적지명",
            x:경도,
            y:위도,
            coordType:'wgs84'
        })
    }
</script>

3단계: 카카오내비 실행 스크립트 삽입하기

위 2단계에서 복사한 카카오내비 실행 스크립트를 페이지에 삽입하고 편집합니다.

1. 디자인 모드에 접속합니다. 접속방법
2. 왼쪽 상단의 메뉴 관리 아이콘을 클릭해, 카카오내비 실행 버튼을 추가할 메뉴로 이동합니다.
3. 왼쪽 상단의 위젯 추가 아이콘을 클릭합니다.
4. 코드 위젯을 클릭합니다.
5. 코드 위젯에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
6. 컨텍스트 메뉴가 나오면 코드 설정을 클릭합니다.

7. 빈 칸에 위 2단계에서 복사한 카카오내비 실행 스크립트를 붙여넣습니다.
   참고: 디자인 모드에 추가된 코드 위젯은 방문자에게 표시 되지 않습니다.

   

4단계: 카카오내비 실행 스크립트 수정하기

1. 붙여넣은 카카오내비 실행 스크립트를 아래 그림과 설명을 참고해 수정합니다.

   

   • API키: 사용자의 카카오 API키를 입력합니다.
   • 목적지명(name): 목적지 이름을 작성합니다. 작성한 목적지 이름은 카카오내비에 그대로 표시됩니다. (예: 아임웹)
   • 경도(x): 위 1단계에서 확인한 경도를 입력합니다. (예: 126.92287320297946)
   • 위도(y): 위 1단계에서 확인한 위도를 입력합니다. (예: 37.55737651736918)
2. 저장 버튼을 클릭해 적용합니다.

5단계: 카카오내비 실행 버튼 추가하기

페이지에서 방문자가 보고 클릭할 수 있는 카카오내비 실행 버튼을 추가합니다.

1. 왼쪽 상단의 위젯 추가 아이콘을 클릭합니다.
2. 버튼 위젯을 클릭합니다.

3. 버튼 위젯을 원하는 위치로 이동합니다.

   중요: 버튼 위젯은, 아래 그림과 같이 위 3단계에서 추가한 코드 위젯과 같은 페이지(메뉴)에 위치해야 합니다.

   

4. 버튼 위젯에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
5. 컨텍스트 메뉴가 나오면 버튼 설정을 클릭합니다.

6. 링크 항목에서 링크 타입을 코드로 변경합니다.

   

7. 코드 항목에 아래의 코드를 복사해 붙여넣습니다.

   javascript:void(0)" onclick="myKakaoNavi1();

8. 버튼명을 작성하고, 디자인 콘셉트에 맞게 버튼 스타일을 수정합니다.

   

9. 버튼 설정 바깥 영역을 클릭해 설정을 완료합니다.

6단계: 게시하기 및 작동 확인하기

모바일에서 버튼이 정상 작동하는지 확인합니다. 카카오내비 앱이 설치되어 있어야 합니다.

1. 디자인 모드 오른쪽 상단의 게시하기 버튼을 클릭합니다.
2. 모바일 기기로 내 사이트에 접속해, 카카오내비 실행 버튼을 누릅니다.
3. 카카오내비 앱이 실행되고, 설정한 목적지로 길안내가 되는지 확인합니다.

두 번째 장소를 추가하는 경우

카카오내비 실행 스크립트와 버튼을 추가해, 두 개 이상의 버튼을 추가할 수 있습니다. 아래 도움말을 참고해 두 번째 장소를 추가해 보세요.

1. 위 1단계를 참고해, 두 번째 장소의 위도와 경도를 확인하고 메모해 둡니다.
2. 위 2단계에서 제공한 카카오내비 실행 스크립트를 복사하고, 위 3단계에서 추가한 코드 위젯에, 복사한 카카오내비 실행 스크립트를 붙여넣습니다.
3. 붙여넣은 카카오내비 실행 스크립트의 목적지명(name), 경도(x), 위도(y)를, 두 번째 장소에 맞게 수정합니다.

4. 각 카카오내비 실행 스크립트의 함수명(function 바로 오른쪽에 위치한 이름)이 중복되지 않도록 수정이 필요합니다. 아래 그림을 예로 들면, 첫 번째 카카오내비 실행 스크립트(아임웹)의 함수명은 myKakaoNavi1() 입니다. 두 번째 카카오내비 실행 스크립트(아임웹캠퍼스)는 함수명이 중복되지 않도록, myKakaoNavi2() 로 작성된 걸 확인할 수 있습니다.

   

5. 위 5단계 과정을 참고해, 두 번째 카카오내비 실행 스크립트를 위한 버튼을 추가하고, 링크 타입을 코드로 변경한 다음 실행 코드를 추가해 줍니다. 단, 실행 코드 마지막의 함수명은 두 번째 실행 스크립트에서 사용한 함수명으로 변경해 주셔야 합니다.

   예시: javascript:void(0)" onclick="myKakaoNavi2();

6. 카카오내비 두 번째 장소 버튼이 추가되었습니다. 이제 사이트를 게시한 다음 모바일로 정상 작동되는지 확인합니다.

텍스트에 링크를 걸고 싶으세요?

버튼 위젯 대신 텍스트 링크를 사용할 수 있습니다.

1. 페이지에 코드 위젯을 추가합니다.
2. 코드 위젯에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.

3. 컨텍스트 메뉴가 나오면 코드 설정을 클릭하고, 아래의 코드를 복사해 붙여넣습니다.

   <p>
     <a href="javascript:void(0)" onclick="myKakaoNavi1();">
       <span style="color: #47b9e4;">텍스트</span>
     </a>
   </p>

4. #47b9e4 를 삭제하고, 원하는 컬러값으로 변경해 주세요. 컬러픽커로 색상 바꾸기
5. 텍스트 를 삭제하고, 원하는 글자를 작성해 주세요.