유니티 SDK 2.4.7 에서 Firebase 연동 안되는 문제

이 글의 성격은 무엇인가요?

질문 / 문제 해결

내용을 설명해주세요

이전 글을 올렸는데, 확인 여부를 몰라서 다시 올립니다.
이전글 : 유니티 SDK Firebase 연동 - uks 님의 게시물 #6

내용 설명을 다시 하면 이렇습니다.
오늘 정오쯤에 유니티 SDK 2.4.7 버전으로 업데이트 받아서 파이어베이스와 연동할려고 했습니다. 유니티 SDK 설치 후 빌드하면 생기는 webgl 폴더안에 index.html 파일에 스크립트를 추가하는 방식입니다.
빌드 커스터마이징 문서를 보면 index.html 파일의 <USER_HEAD_START> 와 <USER_HEAD_END> 사이에 스크립트를 추가하면 된다고 나옵니다.

그런데 유니티 에디터에서 AIT - Build Package 메뉴로 빌드를 하다보면 index.html 파일이 새로 만들어지더라구요.

매번 빌드할 때마다 index.html 파일이 처음 빌드하는 것처럼 리셋되어 제가 추가한 firebase 연동 코드가 사라집니다.
그래서 빌드완료한 파일을 QR 테스트 하면 fireabase is not defined 에러가 발생합니다. 이런 상황이라 firebase 와 연동이 안돼서 테스트를 할 수가 없습니다.

이 문제 확인 좀 해주세요.

안녕하세요 :slight_smile:
확인해보겠습니다.

안녕하세요. 늦게 답신드리게 되어 죄송합니다.

지난번 문의주신 글을 보고 재현 테스트를 진행하고 있습니다.

혹시 아래 2가지를 확인 부탁드리고자 합니다.

  1. 수정하신 index.html 파일이 어느 폴더에 있는 것인지 확인 부탁드립니다.

    SDK 빌드 파이프라인은 2단계로 구성되어 있어서, 빌드 과정에서 다음 두 위치에 index.html이 생성됩니다.

    • webgl/index.html
      → Unity WebGL 빌드의 1단계 중간 산출물입니다. 매 빌드마다 Unity가 새로 생성하므로
      이 파일을 직접 수정하시면 다음 빌드 때 사라지며, 최종 패키지(ait-build/dist/)에도
      반영되지 않습니다.

    • Assets/WebGLTemplates/AITTemplate/index.html
      → SDK가 사용자 커스터마이징 소스로 인식하는 진짜 수정 대상 파일입니다.
      이 파일의 <!-- USER_HEAD_START --> ~ <!-- USER_HEAD_END --> 마커 사이에
      작성된 내용이 빌드 시 보존되어 최종 산출물에 반영됩니다.

    혹시 webgl/index.html을 수정하신 것이라면, 동일한 firebase 스크립트를
    Assets/WebGLTemplates/AITTemplate/index.html 의 USER_HEAD 마커 사이에 옮겨주신 뒤
    다시 빌드해주시면 사라지지 않습니다.

  2. firebase 초기화 시점을 페이지 로드 이후로 옮겨서 한 번 시도해주실 수 있을까요?

    “firebase is not defined” 에러는 firebase 스크립트가 평가되기 전에 사용자 코드가
    먼저 실행되어 firebase 전역이 아직 만들어지지 않았을 때 발생하는 패턴입니다.
    Firebase 공식 문서(JavaScript 프로젝트에 Firebase를 추가하는 다른 방법  |  Firebase for web platforms)에서도 SDK 로드를
    페이지 전체 로드 후로 지연시키는 방식을 옵션으로 안내하고 있습니다.

    진단 차원에서, initializeApp 호출을 다음과 같이 load 이벤트 핸들러로 감싸 한 번
    빌드/QR 테스트해주시고 결과 공유 부탁드립니다.

    <!-- USER_HEAD_START -->
    <script src="https://www.gstatic.com/firebasejs/10.7.0/firebase-app-compat.js"></script>
    <script src="https://www.gstatic.com/firebasejs/10.7.0/firebase-analytics-compat.js"></script>
    <script>
      window.addEventListener('load', function () {
        firebase.initializeApp({
          apiKey: '...',
          projectId: '...',
          appId: '...',
          measurementId: '...',
        });
      });
    </script>
    <!-- USER_HEAD_END -->
    

    이 방식으로도 동일하게 "firebase is not defined"가 뜬다면 SDK 스크립트 자체가
    로드되지 않은 상태이므로, 그때는 빌드 산출물(ait-build/index.html)에 위 두 줄의
    <script src="...firebasejs/..."> 태그가 실제로 들어가 있는지 함께 확인해보겠습니다.

    참고로, CDN 직접 로드 대신 Firebase Modular SDK를 npm 번들로 추가하는 방식이 빌드
    재현성·트리셰이킹 측면에서 더 권장됩니다. SDK의 빌드 커스터마이징 문서
    튜토리얼 #2: Firebase Analytics 연동
    섹션에 절차가 정리되어 있으니 함께 참고 부탁드립니다.

확인 후 답변 부탁드립니다. :man_bowing:

webgl/index.html 파일을 수정했습니다. 이전 SDK 버전 2.4.1 에서도 이 파일을 수정해서 빌드를 했었구요. 이 파일이 소스를 수정하면 리셋이 됐었습니다. 그 후 다시 한번 소스수정없이 index.html 파일을 수정하면 리셋이 안돼서 매번 2번씩 빌드를 해서 ait 파일을 뽑았습니다.

그러면 알려주신대로 Assets/WebGLTemplates/AITTemplate/index.html 파일을 수정해서 테스트 해보겠습니다.

Assets/WebGLTemplates/AITTemplate/index.html
이 파일을 수정하니 잘 되네요.

확인 감사합니다. :person_bowing: 제가 엊그제부터 재현 테스트를 하면서 재현이 안되어서 고민이었는데, 잘 해결 되셔서 다행입니다.

관련해서 가이드 문서의 개선이 필요해보여, 이를 후속으로 진행하고 있습니다.

앞으로도 원할한 앱인토스 앱 개발 되시기 바랍니다.

감사합니다.