잠못드는 개발자의밤 디스코드

html5 애드센스 게임 만들기

html5 애드센스 게임 만들기

html5 애드센스 게임 만들기

html5 애드센스 게임 만들기 Making html5 game for adsense

애드센스 코드가 있고 웹프로그래밍을 할 수 있다면 html5와 자바스크립트( javascript )를 이용하여 게임을 만들어 수익을 창출할 수 있을 것이다.

무엇보다 게임은 재미가 있어야 하고 사용자로 하여금 흥미를 유발시켜야 하겠지만 이건 이것대로 고민의 문제이다.

중요한 것은 게임을 많이 만들어보고 경험해 보는 것이 중요하지만, 여기서의 목적은 게임을 만들고 애드센스 배너를 추가하여 수익을 창출할 수 있도록 하는데 있다.

구글에서 제공하고 있는 html5 ( H5 ) 게임만들기 문서를 참고한다.

만들어진 웹페이지의 검색이 잘 되도록 하는 것은 SEO Checker 홈페이지 등을 참고한다.

애드센스로 수익을 창출하기 위한 게임을 만들기 위한 과정은 아래와 같다.

  1. 게임을 실행할 웹페이지의 구조를 파악한다.

  2. 간단하게 게임을 만들어 본다.

  3. 애드센스 코드를 추가한다.

게임을 위한 웹페이지 구조

구글에서 제시하는 html5 게임을 위한 웹페이지의 구조는 3가지로 구성된다.

The hosting URL, The Tag, The Game 부분이다.

구글은 이 3가지를 기준으로 html5 게임을 위한 웹페이지를 구성하고 제작하도록 권고하고 있다.

  • The Hosting URL

    - 사용자가 게임을 하기 위해 방문하는 URL 주소

  • The Tag

    - 애드센스 코드가 들어간 html Tag 부분

  • The Game

    - canvas와 javascript로 구성된 html5게임 로직 부분.

웹페이지 구성 요소

html5로 게임을 위한 웹페이지를 만들고 애드센스를 추가하기 위한 요소를 다시 한번 정리하면 다음과 같다.

  • The Hosting URL

  • The Tag

  • The Game

위의 3가지는 html5로 만들어진 게임 페이지에 애드센스를 위해 구글이 제시한 필요한 규칙이기도 하다.

하나씩 정리해 보면 다음과 같다.

The Hosting URL

사용자가 게임을 하기 위해 접속하는 URL을 의미한다.

웹브라우저의 URL 항목에 입력하는 주소와도 같으며, 서비스를 제공하는 제작자에 따라 URL은 달라질 수 있다.

여기에서는 게임을 위한 웹페이지의 최종 주소를 game으로 임시로 표기한다.

https://도메인/game

The Tag

구글 애드센스에서 승인받은 애드센스 코드를 의미한다.

script 태그로 구성된 것으로 자신이 가지고 있는 애드센스 코드를 head 태그에 추가한다.

<head>
    <script async data-ad-frequency-hint="30s" 
            src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=애드센스코드"
            crossorigin="anonymous">
    </script>
    <script>
        window.adsbygoogle = window.adsbygoogle || [];
        var adBreak = adConfig = function(o) {adsbygoogle.push(o);}
    </script>
</head>

The Game

웹페이지에서 사용자가 사용할 게임을 의미한다.

canvas 태그로 html5 게임의 구성을 표시하고 javascript를 이용하여 게임의 동작을 표현한다.

canvas 태그는 body 태그에 추가하여 구성한다.

<body>
    <canvas id="gameCanvas" style="width:100% height:100%">
    </canvas>
    <script src="gameScript.js">
    </script>
</body>

전체 샘플 코드

애드센스를 위한 html5 웹페이지를 구성해 보도록 한다.

템플릿 형식으로 작성하고, canvas 태그와 게임을 위한 자바스크립트를 구성하도록 하자.

아래의 코드에서 필요한 것은 html5 게임이 실행될 웹페이지와 게임을 동작시킬 자바스크립트 임을 알 수 있다.

  • gamePage.html

    - 사용자에게 html5 게임을 화면에 보여주는 웹페이지

  • gameCanvas Tag

    - 게임이 실행되고 화면에 보여줄 html5 태그

  • gameLogic.js

    - 사용자가 html5 게임을 할 수 있도록 동작을 하도록 하는 자바스크립트.

<!--
    gamePage.html
    애드센스를 추가한 html5 게임 웹페이지 구조
-->
<!DOCTYPE html>
<html lang="ko">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <head>
        <script async data-ad-frequency-hint="30s"
                src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=애드센스코드"
                crossorigin="anonymous">
        </script>
        <script>
            window.adsbygoogle = window.adsbygoogle || [];
            var adBreak = adConfig = function(o) {adsbygoogle.push(o);}
        </script>
    </head>
    <body>
        <canvas id="gameCanvas" style="width:100% height:100%"></canvas>
        <script src="gameScript.js"></script>
    </body>
</html>

게임 만들기

html5의 canvas에 보여줄 게임을 만들어 본다.

먼저 구글에서 제공하는 샘플 파일을 참고해 보도록 한다.

간단한 동전 던지기 게임으로 버튼을 클릭하면 동전이 앞인지 뒤인지 결과를 보여주는 게임이다.

canvas 와 자바스크립트 파일을 같이 제공하기 때문에 코드는 직접 복사하여 붙여넣으면 실행화면을 볼 수 있다.

  • [보기] 구글 동전 던지기 html5 게임 만들기

  • [보기] 동전 던지기 실행화면 보기

애드센스 추가하기


SEO 검사


참고

[보기] HTML5(H5) 게임의 구조

[보기] SEO Checker - Seobility