다양한 이미지 마커 표시하기 관련해서 궁금합니다

cake01 · 2월 17, 2020, 3:04오전

http://apis.map.kakao.com/web/sample/categoryMarker/

이 부분에서 아이콘 클릭시

http://apis.map.kakao.com/web/sample/basicInfoWindow/

해당 부분처럼 인포윈도우를 띄울 방법이 없을까요?

lea.ju · 2월 17, 2020, 4:39오전

marker에 click이벤트를 주어 infowindow를 표시하거나
커스텀 오버레이를 이용할 수 있습니다.

아래 예제도 참고해주세요.
http://apis.map.kakao.com/web/sample/markerWithInfoWindow/
http://apis.map.kakao.com/web/sample/markerWithCustomOverlay/

cake01 · 2월 17, 2020, 8:13오전

예제를 통하여 인포 윈도우를 넣었으나 지도는 뜨지 않고 위에 버튼만 있는 상태입니다. 혹시 1번 링크를 기반으로 하여 인포윈도우를 띄울 방법이 없을까요

lea.ju · 2월 17, 2020, 9:13오전

앞서 답변드린 방법 중 marker에 클릭 이벤트를 등록하여 infowindow를 표시하는 예제로
코드 참고 부탁드립니다.

<div id="map" style="width:100%;height:350px;"></div>
<script>
var mapContainer = document.getElementById('map'), // 지도를 표시할 div 
    mapOption = { 
        center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
        level: 3 // 지도의 확대 레벨
    };

var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다

// 마커가 표시될 위치입니다 
var markerPosition  = new kakao.maps.LatLng(33.450701, 126.570667); 

// 마커를 생성합니다
var marker = new kakao.maps.Marker({
    position: markerPosition
});

// 마커가 지도 위에 표시되도록 설정합니다
marker.setMap(map);
    
var iwContent = '<div style="padding:5px;">Hello World!</div>', // 인포윈도우에 표출될 내용으로 HTML 문자열이나 document element가 가능합니다
    iwRemoveable = true; // removeable 속성을 ture 로 설정하면 인포윈도우를 닫을 수 있는 x버튼이 표시됩니다

// 인포윈도우를 생성합니다
var infowindow = new kakao.maps.InfoWindow({
    content : iwContent,
    removable : iwRemoveable,
    disableAutoPan: true,
    position: new kakao.maps.LatLng(33.45107044888451, 126.57068085670576)
});
    
// 마커 클릭 이벤트입니다.    
kakao.maps.event.addListener(marker, 'click', function() {    
    infowindow.setMap(map); // infowindow가 지도 위에 표시되도록 설정합니다.
});

// 아래 코드는 지도 위의 마커를 제거하는 코드입니다
// marker.setMap(null);    
</script>

cake01 · 2월 17, 2020, 9:27오전

제 코드를 불러오고 싶은데 어떻게 불러와야 할지 모르겠네요…

cake01 · 2월 17, 2020, 11:02오전

이미 해당 코드를 넣어서 해보았고 저의 능력이 부족하여 구현이 안되고 있는 실정입니다. 예제가 없는것을 몰라서 그런 것이 아니라 구현이 안되고 있습니다.

doji.doo · 2월 17, 2020, 11:27오전

먼저 지도가 뜨지 않는 현상을 바로 잡아야 합니다.
로직이 잘못되었다 하더라도 지도가 보이는 상황이어야만 검증할 수 있습니다.

저희도 질문자 분이 예제를 못 찾으신 것 같아서 링크를 드린게 아닙니다.
저 링크에 보이는 코드가 가장 쉽고 기본적인 것이며
실시간이 아닌, 온라인으로 소통하는 특성상, 이 이상은 효과적으로 설명해 드릴 수 없기 때문에 드린겁니다.

애석하지만…
코드를 직접적으로 작성해 드리지는 않습니다.
저희가 코드를 구현해 드리게 되면 당장 그 질문은 깔끔하게 해결되겠지만
크게 봤을 때, 그건 저희와 질문자님 모두에게 좋은 않은 방향이기 때문입니다.

현재 증상이나 안 되는 부분을 구체적으로 적어주세요.
개발자 도구상에서 스크립트 에러는 없는지,
어떤 에러 문구가 나오는지,
네트워킹 실패한 요청은 없는지 등 최대한 상세히 적어주시면 좋으며
화면은 어떻게 나오는지 스크린샷을 찍어 주셔도 좋습니다.

코드도 좋습니다.
원하는 코드를 붙여넣기 한 뒤, 드래그하여 선택하고
에디터 상단의

해당 버튼을 누르면 깔끔하게 첨부가 가능합니다.

cake01 · 2월 17, 2020, 2:42오후

현재 스크립트는 이렇게 짰는데 커피숍, 편의점, 주차장 내용들이 모두 사라진 상태입니다.

var mapContainer = document.getElementById('map'), // 지도를 표시할 div  
    mapOption = { 
        center: new kakao.maps.LatLng(37.498004414546934, 127.02770621963765), // 지도의 중심좌표 
        level: 3 // 지도의 확대 레벨 
    }; 

var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다

// 커피숍 마커가 표시될 좌표 배열입니다
var coffeePositions = [ 
    {
        content: '<div>test1</div>', 
        latlng: new kakao.maps.coffeePositions(37.499590490909185, 127.0263723554437)},
    {
        content: '<div>test2</div>', 
        latlng: new kakao.maps.coffeePositions(37.499427948430814, 127.02794423197847)}               
];

// 편의점 마커가 표시될 좌표 배열입니다
var storePositions = [
    new kakao.maps.LatLng(37.497535461505684, 127.02948149502778),
    new kakao.maps.LatLng(37.49671536281186, 127.03020491448352),
    new kakao.maps.LatLng(37.496201943633714, 127.02959405469642),
    new kakao.maps.LatLng(37.49640072567703, 127.02726459882308),
    new kakao.maps.LatLng(37.49640098874988, 127.02609983175294),
    new kakao.maps.LatLng(37.49932849491523, 127.02935780247945),
    new kakao.maps.LatLng(37.49996818951873, 127.02943721562295)
];

// 주차장 마커가 표시될 좌표 배열입니다
var carparkPositions = [
    new kakao.maps.LatLng(37.49966168796031, 127.03007039430118),
    new kakao.maps.LatLng(37.499463762912974, 127.0288828824399),
    new kakao.maps.LatLng(37.49896834100913, 127.02833986892401),
    new kakao.maps.LatLng(37.49893267508434, 127.02673400572665),
    new kakao.maps.LatLng(37.49872543597439, 127.02676785815386),
    new kakao.maps.LatLng(37.49813096097184, 127.02591949495914),
    new kakao.maps.LatLng(37.497680616783086, 127.02518427952202)                       
];    

var markerImageSrc = 'https://test/img/category.png';  // 마커이미지의 주소입니다. 스프라이트 이미지 입니다
    coffeeMarkers = [], // 커피숍 마커 객체를 가지고 있을 배열입니다
    storeMarkers = [], // 편의점 마커 객체를 가지고 있을 배열입니다
    carparkMarkers = []; // 주차장 마커 객체를 가지고 있을 배열입니다

    
createCoffeeMarkers(); // 커피숍 마커를 생성하고 커피숍 마커 배열에 추가합니다
createStoreMarkers(); // 편의점 마커를 생성하고 편의점 마커 배열에 추가합니다
createCarparkMarkers(); // 주차장 마커를 생성하고 주차장 마커 배열에 추가합니다

changeMarker('coffee'); // 지도에 커피숍 마커가 보이도록 설정합니다    


// 마커이미지의 주소와, 크기, 옵션으로 마커 이미지를 생성하여 리턴하는 함수입니다
function createMarkerImage(src, size, options) {
    var markerImage = new kakao.maps.MarkerImage(src, size, options);
    return markerImage;            
}

// 좌표와 마커이미지를 받아 마커를 생성하여 리턴하는 함수입니다
function createMarker(position, image) {
    var marker = new kakao.maps.Marker({
        position: position,
        image: image
    });
    
    return marker;  
}   
   
// 커피숍 마커를 생성하고 커피숍 마커 배열에 추가하는 함수입니다
function createCoffeeMarkers() {
    
    for (var i = 0; i < coffeePositions.length; i++) {  
        
        var imageSize = new kakao.maps.Size(22, 26),
            imageOptions = {  
                spriteOrigin: new kakao.maps.Point(10, 0),    
                spriteSize: new kakao.maps.Size(36, 98)  
            };     
       
        // 마커이미지와 마커를 생성합니다
        var markerImage = createMarkerImage(markerImageSrc, imageSize, imageOptions),    
            marker = createMarker(coffeePositions[i], markerImage);  
        
        // 생성된 마커를 커피숍 마커 배열에 추가합니다
        coffeeMarkers.push(marker);



        // 마커에 표시할 인포윈도우를 생성합니다 
        var infowindow = new kakao.maps.InfoWindow({
        content: positions[i].content // 인포윈도우에 표시할 내용
    });

    // 마커에 mouseover 이벤트와 mouseout 이벤트를 등록합니다
    // 이벤트 리스너로는 클로저를 만들어 등록합니다 
    // for문에서 클로저를 만들어 주지 않으면 마지막 마커에만 이벤트가 등록됩니다
    kakao.maps.event.addListener(marker, 'click', makeOverListener(map, marker, infowindow));
    kakao.maps.event.addListener(map, 'click', makeOutListener(infowindow));
    }     
}

// 커피숍 마커들의 지도 표시 여부를 설정하는 함수입니다
function setCoffeeMarkers(map) {        
    for (var i = 0; i < coffeeMarkers.length; i++) {  
        coffeeMarkers[i].setMap(map);
    }        
}

// 편의점 마커를 생성하고 편의점 마커 배열에 추가하는 함수입니다
function createStoreMarkers() {
    for (var i = 0; i < storePositions.length; i++) {
        
        var imageSize = new kakao.maps.Size(22, 26),
            imageOptions = {   
                spriteOrigin: new kakao.maps.Point(10, 36),    
                spriteSize: new kakao.maps.Size(36, 98)  
            };       
     
        // 마커이미지와 마커를 생성합니다
        var markerImage = createMarkerImage(markerImageSrc, imageSize, imageOptions),    
            marker = createMarker(storePositions[i], markerImage);  

        // 생성된 마커를 편의점 마커 배열에 추가합니다
        storeMarkers.push(marker);    
    }        
}

// 편의점 마커들의 지도 표시 여부를 설정하는 함수입니다
function setStoreMarkers(map) {        
    for (var i = 0; i < storeMarkers.length; i++) {  
        storeMarkers[i].setMap(map);
    }        
}

// 주차장 마커를 생성하고 주차장 마커 배열에 추가하는 함수입니다
function createCarparkMarkers() {
    for (var i = 0; i < carparkPositions.length; i++) {
        
        var imageSize = new kakao.maps.Size(22, 26),
            imageOptions = {   
                spriteOrigin: new kakao.maps.Point(10, 72),    
                spriteSize: new kakao.maps.Size(36, 98)  
            };       
     
        // 마커이미지와 마커를 생성합니다
        var markerImage = createMarkerImage(markerImageSrc, imageSize, imageOptions),    
            marker = createMarker(carparkPositions[i], markerImage);  

        // 생성된 마커를 주차장 마커 배열에 추가합니다
        carparkMarkers.push(marker);        
    }                
}

// 주차장 마커들의 지도 표시 여부를 설정하는 함수입니다
function setCarparkMarkers(map) {        
    for (var i = 0; i < carparkMarkers.length; i++) {  
        carparkMarkers[i].setMap(map);
    }        
}

// 카테고리를 클릭했을 때 type에 따라 카테고리의 스타일과 지도에 표시되는 마커를 변경합니다
function changeMarker(type){
    
    var coffeeMenu = document.getElementById('coffeeMenu');
    var storeMenu = document.getElementById('storeMenu');
    var carparkMenu = document.getElementById('carparkMenu');
    
    // 커피숍 카테고리가 클릭됐을 때
    if (type === 'coffee') {
    
        // 커피숍 카테고리를 선택된 스타일로 변경하고
        coffeeMenu.className = 'menu_selected';
        
        // 편의점과 주차장 카테고리는 선택되지 않은 스타일로 바꿉니다
        storeMenu.className = '';
        carparkMenu.className = '';
        
        // 커피숍 마커들만 지도에 표시하도록 설정합니다
        setCoffeeMarkers(map);
        setStoreMarkers(null);
        setCarparkMarkers(null);
        
    } else if (type === 'store') { // 편의점 카테고리가 클릭됐을 때
    
        // 편의점 카테고리를 선택된 스타일로 변경하고
        coffeeMenu.className = '';
        storeMenu.className = 'menu_selected';
        carparkMenu.className = '';
        
        // 편의점 마커들만 지도에 표시하도록 설정합니다
        setCoffeeMarkers(null);
        setStoreMarkers(map);
        setCarparkMarkers(null);
        
    } else if (type === 'carpark') { // 주차장 카테고리가 클릭됐을 때
     
        // 주차장 카테고리를 선택된 스타일로 변경하고
        coffeeMenu.className = '';
        storeMenu.className = '';
        carparkMenu.className = 'menu_selected';
        
        // 주차장 마커들만 지도에 표시하도록 설정합니다
        setCoffeeMarkers(null);
        setStoreMarkers(null);
        setCarparkMarkers(map);  
    }    
}

lea.ju · 2월 18, 2020, 1:13오전

먼저 콘솔로 에러를 확인했었다면 좀 더 문제가 빨리 해결되었을 것 같습니다.

저 역시 정의되지 않은 함수와 이미지를 첨부해주셨기 때문에 지도만 뜨고 있는 상황입니다.

아래 오류가 있는 부분 참고하여 수정 부탁드립니다.

1.좌표 객체 생성이 잘못 되었습니다.

new kakao.maps.coffeePositions(37.499590490909185, 127.0263723554437) (X)
new kakao.maps.LatLng(37.499590490909185, 127.0263723554437) (O)

2.object 에 콤마가 빠져있습니다.

{
    content: "test2" , // ','  콤마가 빠져 있습니다. 추가해주세요
	latlng: new kakao.maps.LatLng(37.499427948430814, 127.02794423197847)
}

3.infowindow 생성시 content에 정의한 값이 올바르지 않습니다.

var infowindow = new kakao.maps.InfoWindow({
    // content: positions[i].content (X) // 인포윈도우에 표시할 내용 
    content: coffeePositions[i].content // (O)
});

4.makeOverListener 함수가 정의되어 있지 않습니다.

5.이미지 src 주소 확인해주세요. https://test/img/category.png 요청시 disconnect 오류가 뜹니다.

cake01 · 2월 18, 2020, 1:36오후

말씀해주신것처럼 수정하였는데 지도 확대 축소시 지도가 사라지고 커피숍 버튼 외의 다른 버튼을 눌렀을 경우에는 지도에는 나타나나 좌표값이 뜨지 않습니다.
`var mapContainer = document.getElementById(‘map’), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(37.498004414546934, 127.02770621963765), // 지도의 중심좌표
level: 3 // 지도의 확대 레벨
};

var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다

// 커피숍 마커가 표시될 좌표 배열입니다
var coffeePositions = [
{
content: “test1”,
LatLng: new kakao.maps.LatLng(37.499590490909185, 127.0263723554437)},
{
content: “test2”,
LatLng: new kakao.maps.LatLng(37.499427948430814, 127.02794423197847)}
];

// 편의점 마커가 표시될 좌표 배열입니다
var storePositions = [
new kakao.maps.LatLng(37.497535461505684, 127.02948149502778),
new kakao.maps.LatLng(37.49671536281186, 127.03020491448352),
new kakao.maps.LatLng(37.496201943633714, 127.02959405469642),
new kakao.maps.LatLng(37.49640072567703, 127.02726459882308),
new kakao.maps.LatLng(37.49640098874988, 127.02609983175294),
new kakao.maps.LatLng(37.49932849491523, 127.02935780247945),
new kakao.maps.LatLng(37.49996818951873, 127.02943721562295)
];

// 주차장 마커가 표시될 좌표 배열입니다
var carparkPositions = [
new kakao.maps.LatLng(37.49966168796031, 127.03007039430118),
new kakao.maps.LatLng(37.499463762912974, 127.0288828824399),
new kakao.maps.LatLng(37.49896834100913, 127.02833986892401),
new kakao.maps.LatLng(37.49893267508434, 127.02673400572665),
new kakao.maps.LatLng(37.49872543597439, 127.02676785815386),
new kakao.maps.LatLng(37.49813096097184, 127.02591949495914),
new kakao.maps.LatLng(37.497680616783086, 127.02518427952202)
];

var markerImageSrc = ‘https://testmj12345678.netlify.com/img/category.png’; // 마커이미지의 주소입니다. 스프라이트 이미지 입니다
coffeeMarkers = [], // 커피숍 마커 객체를 가지고 있을 배열입니다
storeMarkers = [], // 편의점 마커 객체를 가지고 있을 배열입니다
carparkMarkers = []; // 주차장 마커 객체를 가지고 있을 배열입니다

createCoffeeMarkers(); // 커피숍 마커를 생성하고 커피숍 마커 배열에 추가합니다
createStoreMarkers(); // 편의점 마커를 생성하고 편의점 마커 배열에 추가합니다
createCarparkMarkers(); // 주차장 마커를 생성하고 주차장 마커 배열에 추가합니다

changeMarker(‘coffee’); // 지도에 커피숍 마커가 보이도록 설정합니다

// 마커이미지의 주소와, 크기, 옵션으로 마커 이미지를 생성하여 리턴하는 함수입니다
function createMarkerImage(src, size, options) {
var markerImage = new kakao.maps.MarkerImage(src, size, options);
return markerImage;
}

// 좌표와 마커이미지를 받아 마커를 생성하여 리턴하는 함수입니다
function createMarker(position, image) {
var marker = new kakao.maps.Marker({
position: position,
image: image
});

return marker;

}

// 커피숍 마커를 생성하고 커피숍 마커 배열에 추가하는 함수입니다
function createCoffeeMarkers() {

for (var i = 0; i < coffeePositions.length; i++) {  
    
    var imageSize = new kakao.maps.Size(22, 26),
        imageOptions = {  
            spriteOrigin: new kakao.maps.Point(10, 0),    
            spriteSize: new kakao.maps.Size(36, 98)  
        };     
   
    // 마커이미지와 마커를 생성합니다
    var markerImage = createMarkerImage(markerImageSrc, imageSize, imageOptions),    
        marker = createMarker(coffeePositions[i], markerImage);  
    
    // 생성된 마커를 커피숍 마커 배열에 추가합니다
    coffeeMarkers.push(marker);



    // 마커에 표시할 인포윈도우를 생성합니다 
    var infowindow = new kakao.maps.InfoWindow({
    content: coffeePositions[i].content // 인포윈도우에 표시할 내용
});

// 마커에 mouseover 이벤트와 mouseout 이벤트를 등록합니다
// 이벤트 리스너로는 클로저를 만들어 등록합니다 
// for문에서 클로저를 만들어 주지 않으면 마지막 마커에만 이벤트가 등록됩니다
kakao.maps.event.addListener(marker, 'click', makeOverListener(map, marker, infowindow));
kakao.maps.event.addListener(map, 'click', makeOutListener(infowindow));
}

}

// 커피숍 마커들의 지도 표시 여부를 설정하는 함수입니다
function setCoffeeMarkers(map) {
for (var i = 0; i < coffeeMarkers.length; i++) {
coffeeMarkers[i].setMap(map);
}
}

// 편의점 마커를 생성하고 편의점 마커 배열에 추가하는 함수입니다
function createStoreMarkers() {
for (var i = 0; i < storePositions.length; i++) {

    var imageSize = new kakao.maps.Size(22, 26),
        imageOptions = {   
            spriteOrigin: new kakao.maps.Point(10, 36),    
            spriteSize: new kakao.maps.Size(36, 98)  
        };       
 
    // 마커이미지와 마커를 생성합니다
    var markerImage = createMarkerImage(markerImageSrc, imageSize, imageOptions),    
        marker = createMarker(storePositions[i], markerImage);  

    // 생성된 마커를 편의점 마커 배열에 추가합니다
    storeMarkers.push(marker);    
}

}

// 편의점 마커들의 지도 표시 여부를 설정하는 함수입니다
function setStoreMarkers(map) {
for (var i = 0; i < storeMarkers.length; i++) {
storeMarkers[i].setMap(map);
}
}

// 주차장 마커를 생성하고 주차장 마커 배열에 추가하는 함수입니다
function createCarparkMarkers() {
for (var i = 0; i < carparkPositions.length; i++) {

    var imageSize = new kakao.maps.Size(22, 26),
        imageOptions = {   
            spriteOrigin: new kakao.maps.Point(10, 72),    
            spriteSize: new kakao.maps.Size(36, 98)  
        };       
 
    // 마커이미지와 마커를 생성합니다
    var markerImage = createMarkerImage(markerImageSrc, imageSize, imageOptions),    
        marker = createMarker(carparkPositions[i], markerImage);  

    // 생성된 마커를 주차장 마커 배열에 추가합니다
    carparkMarkers.push(marker);        
}

}

// 주차장 마커들의 지도 표시 여부를 설정하는 함수입니다
function setCarparkMarkers(map) {
for (var i = 0; i < carparkMarkers.length; i++) {
carparkMarkers[i].setMap(map);
}
}

// 카테고리를 클릭했을 때 type에 따라 카테고리의 스타일과 지도에 표시되는 마커를 변경합니다
function changeMarker(type){

var coffeeMenu = document.getElementById('coffeeMenu');
var storeMenu = document.getElementById('storeMenu');
var carparkMenu = document.getElementById('carparkMenu');

// 커피숍 카테고리가 클릭됐을 때
if (type === 'coffee') {

    // 커피숍 카테고리를 선택된 스타일로 변경하고
    coffeeMenu.className = 'menu_selected';
    
    // 편의점과 주차장 카테고리는 선택되지 않은 스타일로 바꿉니다
    storeMenu.className = '';
    carparkMenu.className = '';
    
    // 커피숍 마커들만 지도에 표시하도록 설정합니다
    setCoffeeMarkers(map);
    setStoreMarkers(null);
    setCarparkMarkers(null);
    
} else if (type === 'store') { // 편의점 카테고리가 클릭됐을 때

    // 편의점 카테고리를 선택된 스타일로 변경하고
    coffeeMenu.className = '';
    storeMenu.className = 'menu_selected';
    carparkMenu.className = '';
    
    // 편의점 마커들만 지도에 표시하도록 설정합니다
    setCoffeeMarkers(null);
    setStoreMarkers(map);
    setCarparkMarkers(null);
    
} else if (type === 'carpark') { // 주차장 카테고리가 클릭됐을 때
 
    // 주차장 카테고리를 선택된 스타일로 변경하고
    coffeeMenu.className = '';
    storeMenu.className = '';
    carparkMenu.className = 'menu_selected';
    
    // 주차장 마커들만 지도에 표시하도록 설정합니다
    setCoffeeMarkers(null);
    setStoreMarkers(null);
    setCarparkMarkers(map);  
}

} `

lea.ju · 2월 19, 2020, 1:00오전

createMarker에서 인자를 position으로 선언했는데 호출하여 넘기는 값은 객체로 넣으셨네요

createMarker(coffeePositions[i], markerImage); (X)
createMarker(coffeePositions[i].LatLng, markerImage); (O)

버튼 구성과 이벤트를 어떻게 정의했는지 모르지만
div에 coffeeMenu,storeMenu,carparkMenu id가 올바른지 확인해주시고
버튼의 클릭 이벤트에 대해서도 확인이 필요해보입니다.
또 여전히 makeOverListener 함수는 정의되어 있지 않습니다.

질문 전 콘솔 로그를 먼저 확인해주세요.
질문 주신 문제는 API의 문제라기보단 선언이 잘못된 경우, 오타가 있는 경우, 정의가 안되어 있는 경우로
제 역시 콘솔 오류를 확인하여 하나씩 고쳐보면서 알려드리고 있습니다.
@cake01님이 구현한 코드인 만큼 저보다 오류를 더 빨리 찾을 수 있을 거라 생각합니다.

cake01 · 2월 19, 2020, 1:48오후

makeOverListener 함수는 어떻게 정의해야 하는지 알 수 있을까요 혼자 하다 보니 모르는 부분이 많습니다

`var mapContainer = document.getElementById('map'), // 지도를 표시할 div  
mapOption = { 
    center: new kakao.maps.LatLng(37.498004414546934, 127.02770621963765), // 지도의 중심좌표 
    level: 3 // 지도의 확대 레벨 
};