[이세계 MBTI 테스트] 웹페이지에 광고 붙이기 : 카카오 애드핏 + 커스텀 훅 + React script 태그

광고 붙이기

현재 80% 정도 완성된 이세계 MBTI 테스트에 광고를 붙여보려고 한다.

어차피 큰 수익은 기대하지 않고 있어서 붙여도 많아야 몇백원 벌겠지만 한 번 해보고 싶었던 작업이었다.

내가 만든 웹페이지에 광고라니! 남이 만든 플랫폼이 아니라 내가 만든 것에 싣는 광고 🥹

광고 만드는 일만 했지 붙이는 건 처음이네 크크크

0. 광고 플랫폼 비교하기

사실 부수입이 그렇게 중요한 건 아닌데다 덕지덕지 붙일 생각은 없어서 제일 간단한 광고 플랫폼을 고르기로 했다.

광고 플랫폼으로는 카카오 애드핏, 구글 애즈, 쿠팡 파트너스 3가지가 제일 흔한데 나는 카카오 애드핏을 선택했다.

(광고비나 수익성이 아닌 매우 주관적인 기준)

 

애드핏

장점: 간단하다. 원하는 페이지에 붙일 수 있다.

단점: 바로 광고가 실리진 않고 승인이 필요하다.

 

구글 애즈

장점: 내 경우엔 상관 없지만 수익성이 좋다고 한다.

단점: 계좌도 따로 파야하고 승인 심사가 매우 엄격하다.

 

쿠팡 파트너스

장점: 수익성이 좋다고 한다2. 광고 종류가 다양하고 바로 붙일 수 있다.

단점: 원하는 페이지에 1개만 붙일 순 없다. 뭔가 광고가 지저분해보인다...

1. 회원가입 및 로그인

https://adfit.kakao.com/dashboard

카카오 애드핏에 가입하고 로그인을 하면 된다.

까먹고 있었는데 티스토리 광고 플랫폼도 카카오 애드핏이었다...

2. 광고 관리 > 매체 등록

매체명과 매체 유형을 설정한다.

나는 웹페이지이므로 Web을 선택해 URL을 입력하고 확인 버튼을 눌렀다.

바로 아래의 매체 카테고리에 해당 매체가 어떤 것인지 표시해주면 되는데 승인 심사를 받아야 하니 유관한 것을 하는 게 좋겠다.

3. 광고단위 설정

광고단위 생성 후 상품을 선택한다.

광고 상품으로 배너만 있어서 배너를 선택했다.

이런 식으로 광고 단위명을 입력하고 광고 유형을 선택하면 된다.

나는 모바일 퍼스트로 개발을 했기 때문에 모바일에 맞게 320*100으로 골랐다.

원래는 전체 결과 페이지로 넘어갈 때 광고를 붙이려 한 건데 그건 다른 플랫폼이라 지원이 안됐다.

아무튼 소재 새로고침이나 광고영역 테두리 여부 등등 옵션도 설정할 수 있다.

4. 스크립트/SDK 적용

마지막으로 광고를 노출 시킬 위치에 스크립트를 붙여 넣어준다.

깃허브에 광고 스크립트 방법이 더 자세하게 나와 있다. (애드핏 깃허브)

<ins class="kakao_ad_area" style="display:none;"
data-ad-unit = "DAN-SGjklGCZThRETP4c"
data-ad-width = "320"
data-ad-height = "100"></ins>
<script type="text/javascript" src="//t1.daumcdn.net/kas/static/ba.min.js" async></script>

 

광고 붙이고 재배포 후 매체 심사를 신청하면 된다!

나는 바보같이 수정은 해놓고 배포를 안 한 상태로 심사를 넣어서 반려 당했다 ㅋㅋ

---

💡 스크립트 동적 생성 & 커스텀 훅 (+트러블 슈팅⚽️)

처음엔 저기에 <div>로 감싸 jsx에 바로 사용했는데, 결과 페이지와 결과 모음 페이지 2군데에 코드가 중복으로 사용되는 것 같아 커스텀 훅을 만들어보기로 했다. 그런데 그 과정에서 jsx에 script 태그를 사용할 수 없다는 글들을 보게 되는데... 😱

그 이유를 구글링 + 오픈 카톡방 질문을 통해서 알아봤다.

 

1. 보안 문제

jsx는 JS 확장 문법으로, 바벨같은 도구로 트랜스파일링 해 사용하는데 JS 안에서 html을 직접 사용하는 것은 보안상 문제가 있다. 

특히 <script> 태그가 위험한 태그 중 하나인데, React에서는 내부적으로 이런 위험한 태그들을 걸러준다고 한다.

2. 사이드 이펙트

<script> 태그가 브라우저에 의해 파싱되는 시점 === 브라우저가 html(jsx)를 파싱하는 과정 중에 있는데, 이때 script 태그에서 html을 조작한다면 React의 가상 돔과 충돌이 발생할 수 있다.

 

그럼 어떻게 해야 하느냐......

여러 가지 방법이 있는데 내가 참고한 포스팅에서는 useEffect로 동적으로 script 태그를 mount 해줬다. (참고: 베꺼님 티스토리)

const Adfit = ({ unit, width, height }) => {
  const scriptElement = useRef(null);

  useEffect(() => {
    const script = document.createElement('script');
    script.setAttribute('src', 'https://t1.daumcdn.net/kas/static/ba.min.js');
    script.setAttribute('charset', 'utf-8');
    scriptElement.current?.appendChild(script);

    return () => {
      const globalAdfit = window.adfit;
      if (globalAdfit) globalAdfit.destroy(unit);
    };
  }, []);

  return (
    <div ref={scriptElement}>
      <ins
        className="kakao_ad_area"
        style={{ display: 'none' }}
        data-ad-unit={unit}
        data-ad-width={width}
        data-ad-height={height}
      ></ins>
    </div>
  );
};

광고가 없는 페이지로 갔다가 원래의 페이지로 돌아오면 광고가 표시되지 않는다.

광고가 갱신되지 않는 것으로 추정되는데, 애드핏 스크립트가 로딩되면 global에 adfit이라는 인스턴스가 생성된다.

디버거로 이를 확인하면 이 인스턴스에 destroy라는 메소드가 존재하는 걸 알 수 있다.

포스팅을 참고하고 직접 디버거로 확인해보았는데 진짜 있었다!

컴포넌트가 unmount 될 때 이 녀석을 destroy 해준다.

그런데 여기서도 2가지 이슈가 있었다.

 

⚽️ Adfit 컴포넌트에서 unit, width, height prop 부분에서 에러가 발생했다.

'...' is missing in props validation 이라는 문구가 떴다. 

이전에 강의에서 prop의 타입을 적는 부분이 있긴 했는데, 실제로 혼자 개발하면서 이런 에러는 처음이었다.

그럼 타입을 지정해주면 되지 😀

yarn add prop-types
npm install prop-types

prop-types를 설치하고 import PropTypes from 'prop-types'를 해준다.

항상 이 대문자 소문자가 매우 헷갈리고 이로 인해 에러가 나기 때문에 주의해야 한다.

 

이 prop-types는 원래 React에서 지원하는 패키지였는데, React 15 이후 별도의 패키지로 분리돼 따로 설치를 해줘야 한다.

이렇게 보면 내가 빨리 TS를 배우는 것이 더 속 편할지도

Adfit.propTypes = {
  unit: PropTypes.string.isRequired,
  width: PropTypes.number.isRequired,
  height: PropTypes.number.isRequired,
};

이렇게 Adfit 컴포넌트에 들어오는 3가지 prop의 타입을 명시해주었다.

prop의 타입은 공식 문서에서도 확인할 수 있다. (React 공식 문서)

 

❓ useEffect로 script를 추가하는데 이거 안전한 거 맞아?

내가 참고한 모든 애드핏 관련 포스팅은 useEffect로 script를 추가했다.

그래서 나도 그렇게 했다.

 

하지만 오픈 카톡방에서 script를 동적으로 추가했을 뿐이지(jsx에 쓸 수 없으니), 결론적으로 위에서 말한 '보안'의 관점에서는 이 역시 안전하지 않다는 의견을 받았다. 즉 내가 동적으로 추가한 것은 하나의 방법일 뿐이지 이 역시 권장하는 방향은 아니었던 것이다.

 

처음에는 이게 무슨 말인지 이해를 못 했는데, useEffect를 사용해 동적으로 script를 추가하든, dangerouslySetInnerHTML를 써서 script를 추가하든 동적으로 추가하는 방향은 똑같지만, 둘 다 html 요소를 직접 사용한다는 점에서 안전하지 않다는 것을 알게 됐다.

 

생각해보니까 그렇다... 저게 광고 스크립트인걸 알기 때문에 그냥 복사했지만, XSS 공격에 취약한 부분이 있었다.

 

당장 이것을 어떻게 고쳐야 할지는 감이 오지 않지만, 이에 대한 일종의 해결책을 알게 됐다.

DomPurify 라이브러리 를 사용해보면 어떨까? (참고: 마이구미님의 티스토리)

 

XSS 공격은 사용자 브라우저에서 예상치 못한 JS 코드를 실행해(innerHTML 등) 악의적인 행동을 하는 공격이다. 

React에서는 이 앞에 dangerously까지 붙여놨다... (그만큼 하지말라는거지)

꼭 innerHTML을 써야 한다면 필터링을 해주면되는데 이를 Sanitize라고 하고, 이것을 도와주는 게 저 라이브러리다.

저 라이브러리를 쓰면 XSS 공격에 위험한 것을 살균소독 해서 제거하고 innerHTML을 쓸 수 있게 해준다고 한다.

---

단순히 광고 붙여야지 했는데 이 과정에서 많은 것을 알게 됐다.

prop의 타입을 지정하는 거나, React에 script 태그를 넣으면 안되는 이유와 어떻게 해야 하는지!

그냥 구현하는 게 아니라 원리를 이해해 가는 느낌이라 어렵지만 재미있고 신기하다. 😲