이미지 버튼과 adblock 이미지 차단 문제

개요

프로젝트 진행 중 로그인 페이지를 구현 했고, 팀원이 로그인 버튼이 안보인다는 문제가 있었다. 그 팀원을 제외하고 다른 팀원들에게서는 정상적으로 버튼이 잘 보여서 어떤 것이 문제인지 확인이 어려웠다, 나중에 알아보니 adblock 때문에 image가 차단 돼서 버튼이 안 보였던 문제였다.

문제

adblock으로 인해서 이미지 버튼의 이미지 부분이 차단되고 로그인을 하려고 했던 유저는 더 이상 진행을 못하게 된다. 그리고 사용자 입장에서는 로그인 버튼이 당연히 있어야 하는
없어서 혼란스러울 것이다.

버튼 부분의 구현 코드이다.

//next.js

<Link href="로그인 페이지url">
	<Image src="카카오 로그인 이미지" />
</Link>

해결 방법

이 문제에 대해서 생각했던 해결법들입니다.

1. 광고가 차단되는 기준, 필터링 기준을 우회하도록 만든다.

   웹사이트가 광고를 불러올 때 광고 서버와 소통을 해야 한다. 이때 소통을 위해 호출하는 서버 주소 URL이 코드 안에 포함되어 있는데, 애드블록은 이 광고 서버의 URL을 탐색한다. URL이 확인되면 애드블록 서버에 저장된 광고 서버 URL 목록과 비교해보고, 목록에 해당 URL이 있으면 광고라고 판단하는 것이다.
   출처 : [ 요즘IT ] 애드블록의 광고 차단 원리는 무엇일까?

2. 이미지가 없는 형태의 버튼을 만든다.

3. 이미지가 차단돼도 유저가 이용할 수 있도록 안내, 기능 유지

실제 적용

프로젝트에 적용한 방식은 3번 방식으로 문제를 해결했다. 처음에는 차단 기준을 우회해서 이미지가 나오도록 하려고 했지만 adblock 프로그렘에 사용자 커스텀 필터링으로 인해서 이미지가 안나오는 경우도 있어서 이 부분은 이미지가 차단이 되도 사용하는데 지장이 없도록 개선을 했다.

//next.js
<Link href="로그인 페이지url">
	<Image src="카카오 로그인 이미지" />
  	<div >
    	<span>카카오 로그인</span>
   		<span>버튼이 안보이시면 광고차단을 꺼주세요</span>
   	</div>
</Link>

이전에 Link 태그 안에 이미지만 있던 부분을 텍스트도 추가를 해주고 Image의 position을 absolute로 설정해서 평상시에는 텍스트를 덮어서 보여 주었다. 그리고 이미지 차단시에는 텍스트를 통해서 현재 문제 상황을 안내도 해주고 링크도 사용할 수 있도록 했다.

adblock으로 이미지가 차단된 상태지만 텍스트가 나온다.

이제 유저는 adblock으로 로그인 버튼의 이미지가 없어져도 로그인을 할 수 있게 되었다!!🎉🎉