광고 스크립트 조건 분기가 전 페이지 빈 화면을 일으킨 이유

광고 스크립트 조건 분기 하나가 빈 화면 장애를 만들었다. 진단부터 수정까지 짧은 변경이었지만, "왜 이게 됐었지?"를 팀 전체가 짚어볼 필요가 있었던 케이스다.

배경 — 조건부 로드가 왜 위험한가

Base.astro는 프로젝트 전체 레이아웃의 루트다. 모든 페이지가 이 레이아웃을 통해 렌더링된다는 뜻이기도 하고, 반대로 여기서 뭔가 잘못되면 전 페이지가 동시에 망가진다는 뜻이기도 하다.

문제의 핵심은 HawkEyesMaker.js를 로드하는 코드가 env 변수 mobonScriptCode 값의 존재 여부에 따라 조건부로 실행되고 있었다는 점이다. 언뜻 보면 합리적인 패턴처럼 보인다. "값이 있을 때만 광고 스크립트를 로드하자" — 환경별 분리, 불필요한 스크립트 억제, 그럴싸한 의도다.

그런데 이 mobonScriptCode 값이 특정 환경에서 비어 있거나 undefined로 평가되는 순간, 스크립트 자체가 로드되지 않았고, HawkEyesMaker.js 내부의 초기화 로직이 실행되지 않으면서 화면이 빈 채로 멈추는 증상이 발생했다. 스크립트 로드 실패가 렌더링 블로킹으로 이어진 것이다.

수정 내용 — 조건 제거, 무조건 로드

// Before: env 값이 있을 때만 로드
{mobonScriptCode && (
  <script src="/HawkEyesMaker.js" />
)}

// After: 조건 제거, 항상 로드
<script src="/HawkEyesMaker.js" />

변경 자체는 간단하다. Base.astro에서 mobonScriptCode 조건 분기를 걷어내고, HawkEyesMaker.js를 무조건 로드하도록 수정했다. 라인 수 변경은 크지 않지만, 영향 범위는 전체 페이지다.

회고 — "환경 변수로 분기"의 함정

이런 패턴은 팀에서 꽤 자주 보인다. CI/CD 파이프라인에서 환경 변수를 주입하는 구조에서는 특히 그렇다. 로컬 개발 환경, 스테이징, 프로덕션 각각에서 값이 다르게 세팅될 수 있고, 그 차이를 코드 레벨에서 핸들링하려다 보면 자연스럽게 if (env.XXX) 류의 분기가 늘어난다.

문제는 그 분기가 스크립트 로드 자체를 막아버릴 때다. 단순히 기능을 켜고 끄는 게 아니라, 없으면 페이지 렌더링이 깨지는 스크립트라면 조건부 로드는 위험하다. 이 경우 HawkEyesMaker.js는 그런 종류의 스크립트였다.

코드 리뷰 시점에서 이 부분을 잡지 못한 것도 솔직히 아쉽다. 조건부 로드는 "의도적으로 넣은 것 같아 보이는" 코드라, 리뷰어 입장에서 그냥 넘기기 쉽다. 특히 광고/트래킹 스크립트는 "환경마다 다르게 동작해야 하는 게 맞는 거 아닌가?" 하는 선입견도 있다.

앞으로 Base 레이아웃처럼 전체 페이지에 영향을 주는 파일에서 env 조건 분기를 쓸 때는 팀 내에서 한 번 더 짚어보는 루틴이 필요할 것 같다. "이 조건이 false가 됐을 때 무슨 일이 생기는가"를 명시적으로 검토하는 것, 생각보다 중요하다.

끝.

🛒 이 글과 어울리는 추천 상품

• 모니터암 쿠팡에서 보기 →
• 기계식키보드 쿠팡에서 보기 →
• 외장SSD 쿠팡에서 보기 →

*위 링크는 쿠팡파트너스 활동의 일환이며, 일정액의 수수료를 제공받을 수 있습니다.