AD Inserter 장치 감지는 고정 크기 애드센스를 사용할 때 한 번쯤 필요해지는 기능이었습니다. 처음에는 광고 코드만 넣으면 끝이라고 생각했는데, 실제로 모바일에서 확인해 보니 광고 영역이 화면을 넘어가거나 큰 공백이 생기는 문제가 있었습니다.
특히 워드프레스에서 상단 광고를 고정 크기로 넣은 경우에는 모바일 화면에서 레이아웃이 깨지는 상황이 자주 발생했습니다. 저 같은 경우도 데스크톱에서는 정상적으로 보였지만 모바일에서는 광고 폭이 맞지 않아서 본문 흐름이 어색하게 보였습니다.
처음에는 애드센스 크기를 줄여볼까 고민했지만 그렇게 하면 데스크톱에서는 광고가 너무 작게 보였습니다. 결국 AD Inserter 장치 감지 기능을 사용해서 모바일과 태블릿에서는 광고를 숨기고 데스크톱에서만 노출하는 방식으로 정리하게 되었습니다.
목차
AD Inserter 장치 감지 설정 위치부터 확인했습니다
AD Inserter 장치 감지는 광고 코드 입력 화면 안에서 바로 설정할 수 있었습니다. 광고 위치와 정렬까지 먼저 지정한 뒤 Devices 메뉴로 들어가면 장치별 노출 옵션을 볼 수 있습니다.
처음에는 단순히 광고 위치만 설정하면 끝나는 줄 알았는데 Devices 메뉴 안에 들어가 보니 장치별로 광고를 다르게 노출할 수 있는 옵션이 따로 있었습니다.
워드프레스에서 데스크톱과 모바일 화면 구조가 크게 다를 경우에는 이 기능이 꽤 도움이 되었습니다. 특히 OpenLiteSpeed와 LiteSpeed Cache를 사용하는 환경에서는 광고 위치 캐시까지 함께 영향을 받을 수 있기 때문에 장치별 노출 설정이 생각보다 중요했습니다.
모바일 공백 문제 원인이 고정 크기 광고였습니다
AD Inserter 장치 감지를 사용하게 된 가장 큰 이유는 모바일 공백 문제 때문이었습니다. 데스크톱에서는 840px 고정 광고가 정상적으로 보였지만 모바일에서는 광고 크기가 화면보다 커지면서 빈 공간이 생기거나 가로 스크롤이 나타나는 경우가 있었습니다.
특히 워드프레스 테마에 따라서는 본문 전체 폭이 밀리면서 CLS처럼 보이는 움직임이 발생하기도 했습니다. 처음에는 테마 문제라고 생각했지만 실제로는 고정 크기 애드센스가 원인이었습니다.
광고를 반응형으로 바꾸는 방법도 있지만 데스크톱 광고 크기를 유지하고 싶었기 때문에 결국 AD Inserter 장치 감지 기능으로 방향을 바꾸게 되었습니다.
AD Inserter 장치 감지 옵션은 두 가지 방식이 있었습니다
Devices 메뉴로 들어가면 두 가지 감지 방식이 표시됩니다. 하나는 브라우저 기준으로 감지하는 Client-side device detection이고, 다른 하나는 서버 기준으로 처리하는 Server-side device detection입니다.
처음에는 어떤 차이가 있는지 헷갈렸는데 실제로 사용해 보니 단순 광고 노출 정도는 Client-side detection만 사용해도 충분했습니다. 여기서 체크 박스를 활성화한 뒤 데스크톱만 선택하면 모바일과 태블릿에서는 광고가 숨겨지게 됩니다.
저는 상단 광고를 데스크톱 전용으로 바꾸고 모바일에서는 다른 반응형 광고를 따로 넣는 방식으로 정리했습니다. 이후에는 모바일 공백 문제도 거의 사라졌고 화면이 훨씬 안정적으로 보였습니다.
캐시를 같이 지워야 정상적으로 반영됐습니다
AD Inserter 장치 감지 설정을 변경한 뒤 바로 결과가 바뀌지 않는 경우도 있었습니다. 특히 LiteSpeed Cache를 사용하는 경우에는 기존 캐시가 남아 있어서 모바일에서도 이전 광고가 계속 보이는 상황이 있었습니다.
그래서 설정을 바꾼 뒤에는 워드프레스 캐시와 브라우저 캐시를 함께 지우는 편이 좋았습니다. QUIC.cloud CDN을 사용하는 경우에도 캐시 반영 시간이 조금 걸릴 수 있기 때문에 바로 결과가 안 보인다고 설정이 실패한 것은 아니었습니다.
OpenLiteSpeed 환경에서는 광고 코드 캐시까지 함께 남아 있는 경우도 있기 때문에 모바일 테스트를 할 때는 시크릿 모드로 확인하는 편이 정확했습니다.
설정 후 페이지 흐름이 훨씬 안정적으로 보였습니다
AD Inserter 장치 감지 기능을 적용한 뒤 가장 크게 달라진 부분은 모바일 화면이었습니다. 이전에는 광고 때문에 본문 폭이 밀리거나 위쪽에 큰 공백이 생겼는데 설정 이후에는 화면 흐름이 자연스럽게 유지됐습니다.
데스크톱에서는 기존 광고 크기를 그대로 유지할 수 있었고 모바일에서는 반응형 광고만 남기면서 레이아웃이 훨씬 안정적으로 보였습니다. 워드프레스는 광고 위치 하나만 바뀌어도 체감이 꽤 크게 달라지기 때문에 모바일과 데스크톱을 따로 관리하는 편이 훨씬 안정적이었습니다.
FAQ
AD Inserter 장치 감지 설정은 어디서 하나요?
광고 코드 설정 화면 안에 있는 Devices 메뉴에서 설정할 수 있습니다.
AD Inserter 장치 감지 후에도 모바일 광고가 보입니다
LiteSpeed Cache나 CDN 캐시가 남아 있는 경우가 많았습니다. 워드프레스 캐시와 브라우저 캐시를 같이 지우는 편이 좋았습니다.
Client-side와 Server-side 중 어떤 것을 사용하면 되나요?
일반적인 애드센스 노출 제어는 Client-side detection만으로도 충분했습니다. 특별한 서버 조건이 없다면 기본 방식으로도 문제 없었습니다.
