광고 및 지도 로딩 생명주기 문제
문제 분석
발견된 주요 문제들:
-
광고가 페이지 이동 시 로드되지 않음
사용자가 홈, 커뮤니티, 청약 리스트 페이지 등에서 다른 페이지로 이동할 경우 광고가 정상적으로 표시되지 않음. 광고 영역은 비어 있고, 새로고침을 해야만 나타나는 문제가 빈번하게 발생함. -
지도가 안정적으로 로드되지 않음
카카오 지도 컴포넌트가 간헐적으로 렌더링에 실패하며, 페이지 간 이동 시 지도 데이터가 비어 있거나 콘솔 오류가 발생함. -
문제가 발생한 광고 위치
- 홈 화면: 지도와 함께 노출되는 광고
- 청약 리스트 페이지: 카드형 UI 안에 포함된 광고
- 커뮤니티 게시글 리스트: 게시글 목록 중간에 삽입되는 광고
근본 원인
광고 로딩 문제:
-
스크립트 중복 로딩
페이지마다<Script>또는adsbygoogle.js를 중복해서 불러오는 방식으로 구현되어, 동일한 스크립트가 여러 번 삽입되면서 충돌 또는 무효화됨. -
전역 상태 오염 (
hasPushedAd)
광고 로딩 여부를 체크하는 전역 변수(hasPushedAd)가 페이지 이동 후에도 유지되어, 새로 광고를 삽입하려 할 때 무시되거나 중복 호출됨. -
레이스 컨디션
광고 컴포넌트가 마운트될 때 스크립트가 아직 로드되지 않아adsbygoogle.push()호출 시 오류 발생. 이로 인해 광고가 뜨지 않음. -
초기화 방식 불일치
각 페이지에서adsbygoogle.push()를 호출하는 방식이 달라 예외처리나 에러 복구 로직이 부족함. -
메모리 누수
광고 슬롯이 언마운트될 때 적절한 정리(cleanup)를 하지 않아 메모리가 낭비되고, 다음 페이지에서 충돌 가능성 증가.
지도 로딩 문제:
-
SDK 의존성 문제
Kakao Maps SDK는<script>로 로드되며, 페이지 이동 시 이를 보장할 수 없음. SDK가 완전히 로드되기 전에 지도 렌더링을 시도하면 오류 발생. -
로딩 상태 부재
SDK 또는 주소 좌표 데이터가 준비되지 않았음에도Map컴포넌트가 렌더링되어 빈 화면 또는 깨진 UI 발생. -
에러 핸들링 부재
지도 렌더링 실패 시 사용자에게 아무런 피드백 없이 실패한 상태로 멈춤. -
지오코딩 타이밍 문제
주소 → 좌표 변환이 Kakao SDK 로딩 전에 실행되며, API 응답이 없는 경우 빈 좌표 또는 에러 발생.
적용된 해결책
중앙 집중형 React 훅 제작:
useGoogleAds.ts – 광고 생명주기 전담 훅
- 광고 스크립트가 실제로 로딩 완료되었는지 확인 (
ready상태 감지) - 각 광고 슬롯별로 개별 추적 가능
- 페이지 언마운트 시 자동으로 광고 제거 처리 (메모리 누수 방지)
- 에러 발생 시 fallback 메시지 또는 재시도 기능
- 로딩 중인 광고를 위한 상태 플래그 제공
useKakaoMap.ts – 안정적인 지도 로딩 전담 훅
- Kakao SDK의 로딩 여부를 주기적으로 확인 (최대 타임아웃 포함)
- 주소 검색 및 좌표 변환 로직을 별도 서비스화하여 재사용성 강화
- 로딩/에러 상태를 UI에 전달하여 사용자에게 명확한 피드백 제공
- 지도 렌더링 실패 시에도 화면이 무너지지 않도록 처리 (우아한 강제 종료)
GoogleAd.tsx – 재사용 가능한 광고 컴포넌트
- 광고 UI 및 스크립트 삽입 방식 표준화
- 로딩 중 애니메이션 또는 플레이스홀더 삽입
- 광고 위치마다 구성 변경 가능 (
slot,format등 인자화) - 광고 로딩 실패 시 자동 복구 시도 (최대 재시도 횟수 설정 가능)
광고 구현부 전면 개편
-
홈 페이지
지도와 광고가 동시에 로딩되도록 개선. 지도가 준비될 때까지 로딩 표시 후 광고 삽입. -
커뮤니티 게시글 리스트
게시글 목록 사이사이에 광고 컴포넌트를 삽입하며, UI 흐름을 해치지 않도록 padding 및 position 조정. -
청약 리스트 페이지
카드 그리드 안에 광고를 자연스럽게 포함시킴. 2개마다 1개씩 삽입하는 등 그리드 흐름 고려. -
청약 계산기 페이지
하단 고정형 배너 광고로 설계. 사용자 스크롤과 겹치지 않도록 z-index 및 fixed 위치 조정. -
청약 상세 페이지
지도와 광고를 나란히 배치하고, 지도가 정상 로드되기 전까지는 광고만 노출.
핵심 개선점
-
스크립트 중복 제거
AdSense 스크립트를 전역에서 단 한 번만 로드하도록 설정. 초기 페이지 로딩 시 1회만 삽입됨. -
생명주기 관리 강화
페이지 이동 시마다 광고 인스턴스 및 상태 정리. 메모리 누수 방지. -
로딩 상태 표시
광고 및 지도 로딩 중 사용자에게 명확한 안내 제공. -
에러 복구 기능
광고 또는 지도 로딩 실패 시 대체 콘텐츠 출력 또는 자동 재시도 기능 적용. -
컴포넌트 통합 관리
광고 구현을 모두GoogleAd컴포넌트로 통일하여 유지 보수성과 확장성 향상.
수정된 파일
신규 생성:
/src/hooks/useGoogleAds.ts– 광고 로딩 및 생명주기 훅/src/hooks/useKakaoMap.ts– 지도 로딩 및 에러 처리 훅/src/components/ui/google-ad.tsx– 광고 재사용 컴포넌트
업데이트된 기존 컴포넌트:
- 홈 페이지 광고
- 커뮤니티 게시글 목록 광고
- 청약 리스트 페이지 광고 카드
- 계산기 페이지 하단 배너
- 지도 컴포넌트에 로딩/에러 상태 추가
기대 효과
- 처음 방문했을 때부터 광고가 안정적으로 표시됨
- 지도도 로딩 상태와 함께 안정적으로 렌더링됨
- 사용자 입장에서 로딩이 명확하게 표현되어 UX 향상
- 스크립트 충돌 방지 및 메모리 사용 최적화
- 광고 로직이 컴포넌트로 통합되어 유지보수 용이성 대폭 개선
