특정 환경에서 MapOptions 초기화 시 projection undefined 오류 발생

[Woori]

안녕하세요. NAVER Maps JavaScript API v3를 사용 중인데 특정 환경에서만 발생하는 오류가 있어 문의드립니다.
Issue와 실제 코드를 기반으로 AI가 작성 후 내용검수를 하였습니다. 어색한 부분이 있으면 양해 부탁드립니다.

[증상]

네이버 지도 초기화 시 TypeError: Cannot read properties of undefined (reading 'projection') 오류가 환경에 따라 간헐적으로 발생합니다.

- macOS Chrome: 처음 발생 후 현재는 정상 동작
- iOS WebView (iOS 26.1): 간헐적 오류 발생
- Staging 환경: 지속적으로 에러 발생
- Production 환경: 동일 기기, 동일 iOS 버전에서 정상 작동
- 재현성: 동일 코드에서도 발생할 때가 있고 안 할 때도 있음 (예측 불가)

[에러 로그]

네이버 지도 초기화 중 오류: TypeError: Cannot read properties of undefined (reading 'projection')
    at new x.MapOptions (maps.js?ncpKeyId=xxxxx&submodules=panorama:11:13158)
    at x.Map._initMapOptions (maps.js?ncpKeyId=xxxxx&submodules=panorama:11:22770)
    at new x.Map (maps.js?ncpKeyId=xxxxx&submodules=panorama:11:15892)
    at initializeMap (naver-map.vue:1856:11)

[환경 정보]

- SDK 버전: NAVER Maps JavaScript API v3
- 스크립트 URL: https://oapi.map.naver.com/openapi/v3/maps.js?ncpKeyId=xxxxx&submodules=panorama
- 프레임워크: Vue 3 + Quasar (TypeScript)
- 문제 발생 환경: iOS 26.1 WebView, macOS Chrome (간헐적)

[관련 코드]

(스크립트 로드)

const createScript = (resolve, reject) => {
  const script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = `https://oapi.map.naver.com/openapi/v3/maps.js?ncpKeyId=${NAVER_MAP_CLIENT_ID}&submodules=panorama`;
  script.async = true;

  script.onload = () => {
    resolve();
  };

  document.head.appendChild(script);
};

(지도 초기화)

const initializeMap = () => {
  try {
    if (!naver || !naver.maps) {
      throw new Error('네이버 지도 API가 로드되지 않았습니다.');
    }

    if (!naverMapRef.value) {
      throw new Error('지도 컨테이너 DOM 요소를 찾을 수 없습니다.');
    }

    const mapOptions = {
      center: base,
      draggable: draggable,
      zoom: zoom,
      minZoom: minZoom,
      maxZoom: maxZoom,
      padding: padding,
      zoomControl: zoomControl,
      zoomControlOptions: {
        style: naver.maps.ZoomControlStyle.LARGE,
        position: naver.maps.Position.RIGHT_CENTER,
      },
      mapTypeId: naver.maps.MapTypeId.NORMAL,
      mapTypeControl: mapTypeControl,
      mapTypeControlOptions: {
        mapTypeIds: ['normal', 'terrain'],
        style: naver.maps.MapTypeControlStyle.DROPDOWN,
        position: naver.maps.Position.TOP_RIGHT,
      },
      mapDataControl: false,
    };

    map = new naver.maps.Map(naverMapRef.value, mapOptions);

  } catch (error) {
    logger.error('네이버 지도 초기화 중 오류:', error);
  }
};

[재현 단계]

1. 지도 컴포넌트 마운트
2. loadNaverMapScript() 호출 → 스크립트 로드 완료
3. initializeMap() 호출 → new naver.maps.Map() 실행
4. SDK 내부 MapOptions 생성 과정에서 projection 속성 접근 시 undefined 오류

[참고: 유사 사례]

[topic/412] map panorama 생성시 오류가 발생합니다
- https://www.ncloud-forums.com/topic/412/
- 동일한 패턴: 간헐적 오류 발생
- "같은 위치라도 에러가 발생할 때도 있고 발생하지 않을 때도 있었습니다"
- 우회 해결: "파노라마 맵을 초기에 로드하여 보이지 않는 상태로 놔둔 후..." 방식

[질문]

1. SDK 내부에서 projection이 undefined가 되는 조건이 있을까요? (예: WebGL 미지원, 특정 iOS 버전 등)

2. iOS WebView 환경에서 권장되는 초기화 방식이 별도로 있을까요?

감사합니다.
 

Edited yesterday at 12:52 오전 by Woori