매뉴얼

친절한 상담, 빠른 답변

견적문의, 기능상담 등 모든 궁금증을 해결해 드립니다.

Page : Home 고객지원 매뉴얼

총 201건, 2/21 페이지

[지도API] [구글 지도3.0] 위치 (마크) 여러개 표시 방법

* 구글지도 3.0은 익스플로어10 미만 에서는 정상 작동 되지 않을수 있으니 유념하시기 바랍니다.

* 익스프로어10 이상 이라 하더라도, [호환성보기]모드인 경우 정상 작동 되지 않습니다. 확인해보려면 인스플로어에서 F12 키를 누르면 우측 상단 - 브라우져 모드에서 확인 가능 합니다.

* 문서 모드가  쿼크모드인 경우 작동되지 않습니다. 관리자 모드 [디자인관리 > 고급 디자인 관리 > 전체 화면 구성]에서 DOCTYPE이 XHTML1.0 또는 HTML5인 경우에만 정상 작동 됩니다.

 

 

 * 지도 출력 은 기본적으로 phpx 문법을 아시면 더욱 유연하게 커스터마이징 하실 수 있습니다.
 * 원문 출처 : https://developers.google.com/maps/documentation/javascript/examples/event-closure
 

 

<load target="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true">

{@
$marker_array = array();
$marker_array[] = array(-25.363882, 131.044922, "우리집");
$marker_array[] = array(-26.363882, 132.044922, "판타지아");
$marker_array[] = array(-27.363882, 133.044922, "치킨집");
@}

<script>
function initialize() {
 var mapOptions = {
  zoom: 4,
  center: new google.maps.LatLng(-25.363882, 131.044922)
 };

 var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
 marker_chk(map);
}

function marker_chk(map){
 
 <!--@foreach($marker_array as $k => $v)-->
  var position = new google.maps.LatLng({$v[0]}, {$v[1]});
  var marker{$k} = new google.maps.Marker({
   position: position,
   map: map
  });
  var infowindow{$k} = new google.maps.InfoWindow({
   content: "{$v[2]}"
  });
  infowindow{$k}.open(marker{$k}.get('map'), marker{$k});
  google.maps.event.addListener(marker{$k}, 'click', function() {
   infowindow{$k}.open(marker{$k}.get('map'), marker{$k});
  });
 <!--@end-->
 
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>

<div id="map-canvas" style="width:100%;height:400px"></div>

 

 

 

결과 화면 : http://wdev.good-web.co.kr/page/g_multi

 

[지도API] 주소를 위성 좌표로 변환 하기

회사 위치를 지도에 표시하려면 위성 좌표가 있어야지만 지도에 위치를 표시할수 있습니다.

하지만 우리는 위성좌표를 알수 없으므로, 아래와 같이 주소를 위성 좌표로 변환 작업을 해줘야 합니다.

 

1. 아래 매뉴얼 참고하셔서 네이버 인증키를 발급 받습니다.

http://wdev.good-web.co.kr/bbs/faq/3566

 

 

2.  관리자 모드  [디자인관리 > 고급 디자인 관리 > 추가 페이지 관리] 에서 테스트 페이지 생성 후 아래와 같이 소스를 삽입합니다.

 

{@$addr = "부산시 해운대구 우동 1459"; // 소스상에 인증키를 입력하지 않은경우, [프로그램샵 > 프로그램 환경설정 > 외부 API 연동]에서 입력한 값으로 대체 됩니다.$gecode_arr = naver_geocode($addr,' 네이버 인증 Key 값 ' );

 

echo " 주소 : $addr<br>";
echo " x : $gecode_arr[latlng_x]<br>";
echo " y : $gecode_arr[latlng_y]<br>";
@}

 

 

 

 

 

결과 화면  : http://wdev.good-web.co.kr/page/geocode

 

[지도API] [구글 지도 3.0] 오시는 길 표시 방법

* 구글지도 3.0은 익스플로어10 미만 에서는 정상 작동 되지 않을수 있으니 유념하시기 바랍니다.

* 익스프로어10 이상 이라 하더라도, [호환성보기]모드인 경우 정상 작동 되지 않습니다. 확인해보려면 인스플로어에서 F12 키를 누르면 우측 상단 - 브라우져 모드에서 확인 가능 합니다.

* 문서 모드가  쿼크모드인 경우 작동되지 않습니다. 관리자 모드 [디자인관리 > 고급 디자인 관리 > 전체 화면 구성]에서 DOCTYPE이 XHTML1.0 또는 HTML5인 경우에만 정상 작동 됩니다.

 

애니빌들 솔루션 이용시 기본적으로 [기본정보관리 > 사이트정보 설정 > 기본정보설정]에서 입력한 각종 정보를 바로 불러올수 있도록 되어 있습니다.

ps. 기본 정보에 있는 변수 안내 :  http://manual.good-web.co.kr/page/basic1_01b

 

여기에 입력한 주소를 기준으로  "오시는 길"을 만들어 보겠습니다.

 

 

 

 

<load target="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true">
{@
// 네이버 API 키값을 별도로 받으셔야 합니다. 참고 매뉴얼 : http://wdev.good-web.co.kr/bbs/faq/3566
$gecode_arr = naver_geocode("$shop_base[addr1] $shop_base[addr2]",'xxxxxxxxxxxxxxxxxxxxxxxxxxx');

$marker_array = array();
$marker_array[] = array($gecode_arr[latlng_x], $gecode_arr[latlng_y], $shop_base[company_name] );
@}
<script>
function initialize() {
 var mapOptions = {
  zoom: 14,
  center: new google.maps.LatLng({$gecode_arr[latlng_x]}, {$gecode_arr[latlng_y]})
 };

 var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
 marker_chk(map);
}


function marker_chk(map){
 
 <!--@foreach($marker_array as $k => $v)-->
  var position = new google.maps.LatLng({$v[0]}, {$v[1]});
  var marker{$k} = new google.maps.Marker({
   position: position,
   map: map
  });
  var infowindow{$k} = new google.maps.InfoWindow({
   content: "{$v[2]}"
  });
  infowindow{$k}.open(marker{$k}.get('map'), marker{$k});
  google.maps.event.addListener(marker{$k}, 'click', function() {
   infowindow{$k}.open(marker{$k}.get('map'), marker{$k});
  });
 <!--@end-->
 
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>

<div id="map-canvas" style="width:100%;height:400px"></div>

 

 

완성화면 : http://wdev.good-web.co.kr/page/g_addr

 

[지도API] Naver 지도 api JavaScript 2.0 시작하기

※ 네이버 지도를 사용하기 위해서는 네이버 api 센터에서 발급받은 키값이 필요합니다. [네이버 지도 api 센터 키 발급/관리 페이지]

※ 네이버 지도키값은 등록된 도메인 기준으로 인식하기 때문에 서브도메인을 사용하실경우 해당 서브도메인이 반드시 등록이 되어 있어야 합니다. [중요!]

 

 

 

{@
    $marker_array = array();
    $marker_array[] = array(35.1738395, 129.1288500, "아싸닷컴", "아싸닷컴의 내용입니다.");
    $marker_array[] = array(35.1581446, 129.1583542, "해운대해수욕장", "해운대 해수욕장의 내용입니다.");
    $marker_array[] = array(35.0967247, 129.0311102, "자갈치시장", "자갈치 시장의 내용입니다.");
@}
<script type="text/javascript" src="http://openapi.map.naver.com/openapi/naverMap.naver?ver=2.0&key=#여기에 네이버에서 발급받은 키값을 입력하세요"></script>
<div id="map" style="border:1px solid #000;"></div>
<script type="text/javascript">
var oPoint = new nhn.api.map.LatLng(35.1738395, 129.1288500);
var oMap = new nhn.api.map.Map(document.getElementById('map'), {
    point : oPoint,
    zoom :7,
    enableWheelZoom : true,
    enableDragPan : true,
    enableDblClickZoom : true,
    mapMode : 0,
    activateTrafficMap : false,
    activateBicycleMap : false,
    activateRealtyMap : true,
    minMaxLevel : [ 1, 14 ],
    size : new nhn.api.map.Size(866, 800)
});
// 줌 컨트롤러
var oSlider = new nhn.api.map.ZoomControl();
oMap.addControl(oSlider);
oSlider.setPosition({ top:15, left:15 });
//아래는 위에서 지정한 좌표에 마커를 표시하는 소스 입니다.
var oSize = new nhn.api.map.Size(28, 37);
var oOffset = new nhn.api.map.Size(14, 37);
var oIcon = new nhn.api.map.Icon('http://static.naver.com/maps2/icons/pin_spot2.png', oSize, oOffset);
//icon 이미지를 바꿔서 사용할 수 있습니다.


//########################## 마커 추가 부분 ##########################
var oPointArray = [];
var oContentArray = {};

 <!--@foreach($marker_array as $k => $v)-->
var oPoint{$k} = new nhn.api.map.LatLng({$v[0]}, {$v[1]});
oPointArray.push(oPoint{$k});
oContentArray['{$v[2]}'] = '{$v[3]}';

oMarker = new nhn.api.map.Marker(oIcon, { title : '{$v[2]}' }); //마커 제목 생성
oMarker.setPoint(oPoint{$k}); // 마커 표시할 좌표 선택
oMap.addOverlay(oMarker); //마커를 지도위에 표시

//마커 라벨 출력
oLabel = new nhn.api.map.MarkerLabel(); //마커 라벨 선언
oMap.addOverlay(oLabel); //마커 라벨 지도에 추가, 기본은 보이지 않는 상태로 추가됨
oLabel.setVisible(true, oMarker); //마커 라벨 보이기
<!--@end-->


//########################## 마커 추가 부분 ##########################
  
  
//########################## 마커 클릭 부분 ##########################
  
var mapInfoTestWindow = new nhn.api.map.InfoWindow(); // - info window 생성
mapInfoTestWindow.setVisible(false); // - infowindow 표시 여부 지정.
oMap.addOverlay(mapInfoTestWindow);     // - 지도에 추가.
 
oMap.attach('click', function(oCustomEvent) {
    var oPoint = oCustomEvent.point;
    var oTarget = oCustomEvent.target;
    
    mapInfoTestWindow.setVisible(false);
    if (oTarget instanceof nhn.api.map.Marker) {
        
        var oMarkerId = oCustomEvent.target.getTitle();

        oMap.setCenter(oPoint);

        
        mapInfoTestWindow.setContent("<div style='background:#FFF; width:auto; height:auto; padding:5px; white-space: nowrap !important; border-top:1px solid; border-bottom:2px groove black; border-left:1px solid; border-right:2px groove black;'>"+oContentArray[oMarkerId]+"</div>");
        mapInfoTestWindow.setPoint(oTarget.getPoint());
        mapInfoTestWindow.setVisible(true);

        mapInfoTestWindow.setPosition({right : 15, top : 50});
        mapInfoTestWindow.autoPosition();
        return;
    }
});
  
//########################## 마커 클릭 부분 ##########################
  
  
//########################## 컨트롤 추가 ############################

 var oBicycleGuide = new nhn.api.map.BicycleGuide(); // - 자전거 범례 선언
oBicycleGuide.setPosition({
    top : 10,
    right : 10
}); // - 자전거 범례 위치 지정
oMap.addControl(oBicycleGuide);// - 자전거 범례를 지도에 추가.

var oTrafficGuide = new nhn.api.map.TrafficGuide(); // - 교통 범례 선언
oTrafficGuide.setPosition({
    bottom : 30,
    left : 10
});  // - 교통 범례 위치 지정.
oMap.addControl(oTrafficGuide); // - 교통 범례를 지도에 추가.

var trafficButton = new nhn.api.map.TrafficMapBtn(); // - 실시간 교통지도 버튼 선언
trafficButton.setPosition({
    bottom:10, 
    right:150
}); // - 실시간 교통지도 버튼 위치 지정
oMap.addControl(trafficButton);

//###############################################################  
  
  
  
//########################## 폴리라인 ##############################
  
  //var Polyline = new nhn.api.map.Polyline(oPointArray);
  //oMap.addOverlay(Polyline); 

//########################## 폴리라인 ##############################

</script>

 

 

 

그럼 네이버의 위도 경도는 어떻게 구할까요?

[네이버지도] 페이지로 가셔서 해당 지역을 검색한 후 마커를 클릭해보면 아래 그림과 같은 팝업이 뜹니다.

 

URL 복사를 클릭하면 아래와 같이 주소가 적힌 프롬프트 창이 뜨는데요. 그 주소안에 파라미터 x는 경도 값, y는 위도 값입니다.

 

 

완성화면 : http://wdev.good-web.co.kr/page/n_addr

네이버 지도 api 메뉴얼 http://developer.naver.com/wiki/pages/Tutorial_JavaScript

 

[지도API] Naver 지도 api Javascript 2.0 폴리라인

※ 네이버 지도를 사용하기 위해서는 네이버 api 센터에서 발급받은 키값이 필요합니다. [네이버 지도 api 센터 키 발급/관리 페이지]

※ 네이버 지도키값은 등록된 도메인 기준으로 인식하기 때문에 서브도메인을 사용하실경우 해당 서브도메인이 반드시 등록이 되어 있어야 합니다. [중요!]

 

 

 

<script type="text/javascript" src="http://openapi.map.naver.com/openapi/naverMap.naver?ver=2.0&key=#여기에 네이버에서 발급받은 키값을 입력하세요"></script>
<div id="map" style="border:1px solid #000;"></div>
<script type="text/javascript">
    var oSeoulCityPoint = new nhn.api.map.LatLng(35.179816, 129.0750223);
    var defaultLevel = 11;
    var oMap = new nhn.api.map.Map(document.getElementById('map'), {
        point : oSeoulCityPoint,
        zoom : 7,
        enableWheelZoom : true,
        enableDragPan : true,
        enableDblClickZoom : false,
        mapMode : 0,
        activateTrafficMap : false,
        activateBicycleMap : false,
        minMaxLevel : [ 1, 14 ],
        size : new nhn.api.map.Size((866, 800)           });
    var oSlider = new nhn.api.map.ZoomControl();
    oMap.addControl(oSlider);
    oSlider.setPosition({
        top : 10,
        left : 10
    });

    var oMapTypeBtn = new nhn.api.map.MapTypeBtn();
    oMap.addControl(oMapTypeBtn);
    oMapTypeBtn.setPosition({
        bottom : 10,
        right : 80
    });

    var oThemeMapBtn = new nhn.api.map.ThemeMapBtn();
    oThemeMapBtn.setPosition({
        bottom : 10,
        right : 10
    });
    oMap.addControl(oThemeMapBtn);

    var oBicycleGuide = new nhn.api.map.BicycleGuide(); // - 자전거 범례 선언
    oBicycleGuide.setPosition({
        top : 10,
        right : 10
    }); // - 자전거 범례 위치 지정
    oMap.addControl(oBicycleGuide);// - 자전거 범례를 지도에 추가.

    var oTrafficGuide = new nhn.api.map.TrafficGuide(); // - 교통 범례 선언
    oTrafficGuide.setPosition({
        bottom : 30,
        left : 10
    });  // - 교통 범례 위치 지정.
    oMap.addControl(oTrafficGuide); // - 교통 범례를 지도에 추가.

    var trafficButton = new nhn.api.map.TrafficMapBtn(); // - 실시간 교통지도 버튼 선언
    trafficButton.setPosition({
        bottom:10,
        right:150
    }); // - 실시간 교통지도 버튼 위치 지정
    oMap.addControl(trafficButton);

    var oSize = new nhn.api.map.Size(28, 37);
    var oOffset = new nhn.api.map.Size(14, 37);
    var oIcon = new nhn.api.map.Icon('http://static.naver.com/maps2/icons/pin_spot2.png', oSize, oOffset);

    var oInfoWnd = new nhn.api.map.InfoWindow();
    oInfoWnd.setVisible(false);
    oMap.addOverlay(oInfoWnd);

    oInfoWnd.setPosition({
        top : 20,
        left :20
    });

    var oLabel = new nhn.api.map.MarkerLabel(); // - 마커 라벨 선언.
    oMap.addOverlay(oLabel); // - 마커 라벨 지도에 추가. 기본은 라벨이 보이지 않는 상태로 추가됨.

    oInfoWnd.attach('changeVisible', function(oCustomEvent) {
        if (oCustomEvent.visible) {
            oLabel.setVisible(false);
        }
    });

    var oPolyline = new nhn.api.map.Polyline([], {
        strokeColor : '#f00', // - 선의 색깔
        strokeWidth : 5, // - 선의 두께
        strokeOpacity : 0.5 // - 선의 투명도
    }); // - polyline 선언, 첫번째 인자는 선이 그려질 점의 위치. 현재는 없음.
    oMap.addOverlay(oPolyline); // - 지도에 선을 추가함.

    oMap.attach('mouseenter', function(oCustomEvent) {

        var oTarget = oCustomEvent.target;
        // 마커위에 마우스 올라간거면
        if (oTarget instanceof nhn.api.map.Marker) {
            var oMarker = oTarget;
            oLabel.setVisible(true, oMarker); // - 특정 마커를 지정하여 해당 마커의 title을 보여준다.
        }
    });

    oMap.attach('mouseleave', function(oCustomEvent) {

        var oTarget = oCustomEvent.target;
        // 마커위에서 마우스 나간거면
        if (oTarget instanceof nhn.api.map.Marker) {
            oLabel.setVisible(false);
        }
    });

    oMap.attach('click', function(oCustomEvent) {
        var oPoint = oCustomEvent.point;
        var oTarget = oCustomEvent.target;
        oInfoWnd.setVisible(false);
        // 마커 클릭하면
        if (oTarget instanceof nhn.api.map.Marker) {
            // 겹침 마커 클릭한거면
            if (oCustomEvent.clickCoveredMarker) {
                return;
            }
            // - InfoWindow 에 들어갈 내용은 setContent 로 자유롭게 넣을 수 있습니다. 외부 css를 이용할 수 있으며,
            // - 외부 css에 선언된 class를 이용하면 해당 class의 스타일을 바로 적용할 수 있습니다.
            // - 단, DIV 의 position style 은 absolute 가 되면 안되며,
            // - absolute 의 경우 autoPosition 이 동작하지 않습니다.

            return;
        }
        var oMarker = new nhn.api.map.Marker(oIcon, { title : '마커 : ' + oPoint.toString() });
        oMarker.setPoint(oPoint);
        oMap.addOverlay(oMarker);

        var aPoints = oPolyline.getPoints(); // - 현재 폴리라인을 이루는 점을 가져와서 배열에 저장.
        aPoints.push(oPoint); // - 추가하고자 하는 점을 추가하여 배열로 저장함.
        oPolyline.setPoints(aPoints); // - 해당 폴리라인에 배열에 저장된 점을 추가함
    });
</script>

 

 

 

 

완성화면 : http://wdev.good-web.co.kr/page/n_polyline

네이버 지도 api 메뉴얼 http://developer.naver.com/wiki/pages/Tutorial_JavaScript

[지도API] Daum 지도 api 시작하기

※ 다음 지도 api를 사용하기 위해서는 API Key를 발급받아야 합니다.

 http://apis.map.daum.net/ 여기를 먼저 방문해서 key를 발급받으시기 바랍니다.

 

콘솔 탭에서 지도 api key를 발급 받을 앱을 생성합니다

 

생성된 앱 화면에서 API Key 등록버튼을 누릅니다.

 

REST/JS API 추가 버튼을 누르고 팝업 창이 뜨면 플랫폼을 선택합니다. 저는 브라우저 용을 쓸것이라 웹브라우저 탭을 선택했습니다.

Referer 입력 란에 사용할 도메인 주소를 http:// 를 붙여서 입력합니다.

 

API Key 발급이 완료되었습니다 API 키를 드래그 해서 복사해주세요

 

 

 

 

<!-- 로드뷰를 표시할 div 입니다 -->
<div id="daum_map" style="width:100%;height:800px;"></div>

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 API Key를 여기 입력하세요"></script>

<script>

var container = document.getElementById('daum_map'); //지도를 표시할 div
var options = {
 center: new daum.maps.LatLng(35.17969, 129.07564),
 level: 3
};

var map = new daum.maps.Map(container, options); //지도 생성

//마커 옵션
var markerPosition  = new daum.maps.LatLng(35.17969, 129.07564);
var marker = new daum.maps.Marker({
    position: markerPosition
});

marker.setMap(map); //마커 생성

// 마커 위에 표시할 인포윈도우를 생성한다
var infowindow = new daum.maps.InfoWindow({
 content : '<div style="padding:5px;">부산시청입니다</div>' // 인포윈도우에 표시할 내용
});

// 인포윈도우를 지도에 표시한다
infowindow.open(map, marker);

// 마커에 클릭 이벤트를 등록한다 (우클릭 : rightclick)
daum.maps.event.addListener(marker, 'click', function() {
 alert('마커를 클릭했습니다!');
});

//맵 컨트롤 생성
var mapTypeControl = new daum.maps.MapTypeControl();
map.addControl(mapTypeControl, daum.maps.ControlPosition.TOPRIGHT);
var zoomControl = new daum.maps.ZoomControl();
map.addControl(zoomControl, daum.maps.ControlPosition.RIGHT);

</script>

 

 

완성화면 : http://wdev.good-web.co.kr/page/d_addr

다음 지도 API 메뉴얼 http://apis.map.daum.net/web/guide/

다음 지도 API 마법사 http://apis.map.daum.net/web/wizard/

[지도API] Daum 지도 로드뷰 만들기

※ 다음 지도 api를 사용하기 위해서는 API Key를 발급받아야 합니다.

 http://apis.map.daum.net/ 여기를 먼저 방문해서 key를 발급받으시기 바랍니다.

 

 

 

 

<!-- 로드뷰를 표시할 div 입니다 -->
<div id="roadview" style="width:100%;height:800px;"></div>

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 API Key를 여기 입력하세요"></script>

<script>
var roadviewContainer = document.getElementById('roadview'); //로드뷰를 표시할 div
var roadview = new daum.maps.Roadview(roadviewContainer)
var roadviewClient = new daum.maps.RoadviewClient();

var position = new daum.maps.LatLng(35.17969, 129.07564);

//로드뷰 생성
roadviewClient.getNearestPanoId(position, 100, function(panoId) {
    roadview.setPanoId(panoId, position);
});
</script>

 

 

 

완성화면 : http://wdev.good-web.co.kr/page/d_loadview

다음 지도 API 메뉴얼 http://apis.map.daum.net/web/guide/

다음 지도 API 마법사 http://apis.map.daum.net/web/wizard/

[지도API] NAVER MAPS Enterprise API 서비스 신청하기

※ 2019년 4월 15일 이후, 지도 Open API는 사용이 불가능하며

   NAVER MAPS Enterprise API 를 사용해야 합니다.

 

- 네이버 클라우드 플랫폼 > Enterprise API 출시일 : 2018년 11월 13일

- 네이버 개발자센터 > 신규 계정 발급 중단일 : 2018년 11월 13일

- 네이버 개발자센터 > 지도 Open API 지원 종료일 : 2019년 04월 15일

 

 

 

※ NAVER MAPS Enterprise API 신청방법을 알아보겠습니다.

 

 

 

1. https://www.ncloud.com/ 에서 회원가입을 합니다.

 

 

 

2. https://www.ncloud.com/product/applicationService/maps 에서 이용신청하기 를 클릭합니다.

 

 

 

3. Application 등록 을 클릭합니다.

 

 

 

4. 다음과 같이 입력합니다.

 

1) Application 이름을 입력합니다.

2) Web Dynamic Map을 선택합니다. (웹사이트에 지도를 출력하기 위해서 사용합니다.)

3) Geocoding을 선택합니다. (주소를 좌표로 변환하기 위해서 사용합니다.)

4) Web 서비스 URL을 입력합니다.

 

URL 예시) http://naver.com

- www 는 제외하고 입력합니다.

- 서브 도메인이 있을 경우 대표 도메인만 입력하면 됩니다.

 

 

 

5. Application 페이지에서 인증정보를 누르면 정보 확인이 가능합니다.

 

 

 

6. 인증 정보를 확인합니다.

Client ID 값을 사용해서 지도 출력이 가능합니다.

 

[디자인팜 2.0] 디자인팜2.0 계정 생성 방법

디자인팜 2.0으로 계정을 생성하는 방법에 대해서 말씀드리겠습니다.

디자인팜 2.0으로 계정을 생성하는 방법은 크게 2가지 방법이 있습니다. 

사용자가 직접 홈페이지에서 디자인팜 2.0템플릿을 구매를 하는 방법이 있고,

관리자가 직접 디자인팜 2.0으로 설치를 하는 방법이 있습니다.

관리자의 경우는 또다시 두가지 방법으로 나뉘는 데요...

하나는 디자인팜2.0으로 생성을 하는방법이고 또 다른 하나는 매직템플릿에서 디자인팜 2.0으로 제작된 템플릿을 선택하는 방법입니다.

이번 생성방법은 관리자 페이지에서 생성하는 두가지 방법에 대해서 설명을 드리도록 하겠습니다.

 

마스터 관리자 모드로 로그인 후  [마스터 관리 > 홈페이지관리 > 홈페이지 만들기]를 클릭 합니다.

디자인팜 2.0으로 제작을 하는 방법은 위의 홈페이지 생성 방식에서 디자인팜2.0을 선택을 하거나 매직템플릿에서 선택을 하셔서 설치를 하시면 됩니다 

디자인팜 2.0으로 생성을 하시게 되면 빈화면이 나오며 메인 및 세부페이지를 원하시는 형태로 제작이 가능합니다. 

매직템플릿을 선택을 해서 생성을 하게되면 이미 제작해 놓은 템플릿을 선택을 해서 간단하게 생성을 할 수 있습니다.

 

 

먼저 디자인팜 2.0으로 생성하는 방법을 말씀드리겠습니다.

홈페이지 생성방식에서 디자인팜 2.0을 선택을 합니다 

그리고 원하는 형태를 선택합니다. 홍보형부터 뉴스기사까지 있는데요..

원하시는 형태를 선택을 하시기 바랍니다. (디자인팜2.0 솔루션 유형은 선택 이후 변경이 불가능하므로 신중하게 선택하시기 바랍니다.)

형태를 선택을 한뒤 기본정보(아이디, 비밀번호, 사이트명등)를 기재를 하시고 홈페이지 계정 만들기를 클릭합니다.

 

 

홈페이지 계정만들기를 클릭 후 일정시간이 지나면(최장 5분가량 소요가됩니다.) 메시지가 뜨면서 홈페이지 계정이 생성이 됩니다.

(※ 홈페이지 계정이 생성되는 동안 다른페이지로 넘어가거나 창을 닫게되면 제대로 생성이 되지 않으니

반드시 아래와 같은 메시지가 나타날때까지 기다려주시기 바랍니다.)

 

 

 

이번에는 매직템플릿을 이용한 디자인팜 2.0생성 방법에 대해서 설명하도록 하겠습니다.

 "매직 템플릿 선택"을 선택한 후, 우측에 있는 [타사 템플릿 선택]을 클릭합니다.

 

 

 

 

아래와 같이 새창으로 템플릿 목록이 출력됩니다.

상단 검색부분에서 디자인 팜 제작여부에 디자인팜으로 제작을 선택 후 검색을 하시면 디자인팜으로 제작된 내역이 출력이 됩니다.

검색된 내여에서 템플릿명이 디자인팜 2.0으로 시작하는 템플릿 중 마음에 드는 템플릿을 선택을 해주시기 바랍니다.

(템플릿명에 디자인팜2.0이 들어있는지 확인한 이후 생성해주세요.)

 

 

 

 

템플릿을 선택을 하면 아래와 같이 선택된 템플릿 이 표시가 됩니다. 

(잘못 선택을 하셨다면 다시 타사 템플릿 선택에서 원하는 형태의 템플릿을 선택하시기 바랍니다. )

선택한 템플릿 내역 확인 하신뒤 기본정보(아이디, 비밀번호, 사이트명등)를 입력을 하시고  홈페이지 계정만들기를 하시면 됩니다.

 

 

홈페이지 계정만들기를 클릭 후 일정시간이 지나면(최장 5분가량 소요가됩니다.) 메시지가 뜨면서 홈페이지 계정이 생성이 됩니다.

(※ 홈페이지 계정이 생성되는 동안 다른페이지로 넘어가거나 창을 닫게되면 제대로 생성이 되지 않으니

반드시 아래와 같은 메시지가 나타날때까지 기다려주시기 바랍니다.)

 

홈페이지 계정생성이 완료가 되었으면 마스터관리 > 홈페이지 관리 > 홈페이지 관리에서 생성한 홈페이지를 확인하실 수 있습니다.

 

감사합니다.

 
[디자인팜 2.0] 메뉴 추가/수정 방법 안내

디자인팜 2.0으로 제작된 홈페이지의 메뉴부분이 추가,수정,삭제 방법에 대해서 말씀드리겠습니다.

먼저 디자인팜2.0의 메뉴에 대한 추가/수정은 디자인팜 2.0을 실행을 먼저 하셔야 됩니다. 

 

관리자 페이지 접속을 하셔서 디자인 관리를 클릭 후 디자인팜2.0실행 버튼을 클릭합니다.

 

디자인팜 2.0실행 버튼을 클릭을 하면 새로운 창이 하나 뜰건데요...

거기서 메뉴관리를 클릭합니다

 

 

메뉴관리를 클릭을 하면 아래와 같은 화면이 나옵니다 여기서 대메뉴 추가를 클릭을 해서 대메뉴를 추가를 하도록 하겠습니다.

아래의 이미지에서 대매뉴 추가 버튼을 클릭하시기 바랍니다.

 

대메뉴는 2가지 유형중 선택을 할 수 있는데요...

일반적인 대메뉴와 URL직접입력이 있습니다.

일반 대메뉴는 메뉴추가를 통해서 생성가능한 페이지를 만들때 사용을 하시면 됩니다. 

URL직접 입력은 외부URL을 참고하거나 메뉴추가를 통해서 생성이 불가능한 페이지 링크를 걸떄 사용을 합니다.

일반 대메뉴를 선택을 하면 대메뉴명만 기재가능하도록 됩니다.

 

URL 직접입력의 경우는 대메뉴명과 함께 URL을 입력하는 공간이 나옵니다.

 

 

일반 대메뉴를 생성을 하면 아래와 같이 나옵니다. 

 

 

여기서 대메뉴부분에 마우스를 가져다가면 아래과 같이 메뉴가 나옵니다.

대메뉴명옆에 톱니바퀴는 대메뉴설정을 변경하는 페이지로 이동이 되며,

<>표시는 대메뉴이동을 말합니다 여러개의 대메뉴가 있을때 순서를 조정하기 위한 버튼입니다.

아래부분에 페이지 추가는 대메뉴안에 하위메뉴를 추가를 하는 기능입니다.


 

 

URL 직접입력을 하게 되면 아래와 같이 나옵니다. 

대메뉴의 설정이나 위치이동은 가능하나 하위메뉴는 추가를 할 수가 없으니 참고하시기 바랍니다.

 

대메뉴 설정버튼을 눌렀을때는 아래와 같이 나옵니다. 

대메뉴의 유형은 등록할때만 가능합니다. 설정에서 수정을 한다고 하더라도 유형은 변경이 불가능합니다.

이점 유념하시기 바랍니다.

 

 

대메뉴추가시 pc웹 디자인 설정은 각 스킨마다 설정하는 내용이 달라 각 스킨을 참고하시기 바라며

우측에 썸네일 이미지에 마우스를 올리면 노출되는 위치가 표시가 되니 해당 썸네일을 참고하셔서 기재를 해주시면 됩니다. 

 

 

 

그럼 이제는 대메뉴안에 하위메뉴를 생성하는 방법에 대해서 말씀드리겠습니다.

대메뉴추가시 일반휴형으로 등록을 하셔야지만 하위메뉴 생성이 가능하며, URL 직접입력으로는 하위메뉴 생성이 되지 않습니다. 

이점 유념하시기 바랍니다. 

하위메뉴 출력할 대메뉴에 마우스를 올려서 페이지 추가버튼을 클릭을 하시기 바랍니다.

 

 

페이지 추가를 클릭했을때 나타나는 화면입니다.

상단에는 메뉴유형을 선택할 수 있습니다. 

일반메뉴는 디자인팜내에 존재하는 페이지를 추가를 할때 사용을 하며

URL직접 입력은 외부URL을 걸거나 디자인팜내에 존재하지 않는 페이지를 링크를 걸때 사용을 합니다. 

일반 메뉴의 경우는 빈페이지를 생성을 할 수도 있고 기본적으로 제공하는 페이지를 추가를 하는 방법이 있습니다. 

하단에 있는 탭을 클릭을 하면 여러 유형의 디자인을 확인을 할 수 있으며, 썸네일 이미지에 마우스를 가져다가면 

큰화면으로 내용을 확인을 하실 수 있습니다.

 

 

필자는 여기서 인사말, 오시는길, 연혁을 추가하고자 합니다. 

먼저 인사말부터인데요..메뉴유형은 일반메뉴 페이지명은 인사말 그리고 인사말탭에 가서 원하는 형태의 디자인을 선택을 하고 만들기를 클릭합니다.

 

 

이렇게 생성을 하면 아래와 같이 인사말이 추가가 됩니다. 

 

 

동일한 방법으로 연혁, 오시는길도 추가를 하면 아래와 같이 노출이 됩니다. 

 

 

위와 같은 방법으로 대메뉴 및 하위메뉴를 추가를 하면 아래와 같은 메뉴구성을 할 수 있습니다.

그럴듯 한 홈페이지 메뉴구성이 만들어졌는데요...천천히 따라하다보면 아래와 같은 구성으로 

금방 만드실 수가 있습니다.

 

감사합니다.