웹사이트에 게임을 추가하는 방법

대부분의 웹사이트는 읽거나 훑어보거나 클릭해서 넘어가도록 설계되어 있습니다. 이는 유용하지만, 때로는 정적인 느낌을 줄 수 있습니다. 간단한 브라우저 게임을 추가하면 방문자에게 앱을 다운로드하거나, 플레이어 계정을 만들거나, 페이지를 떠나도록 요구하지 않고도 즐길 거리를 제공할 수 있습니다.

웹사이트에 게임을 추가하는 가장 쉬운 방법은 일반적으로 게임이나 게임 위젯을 사용하는 것입니다. 페이지에 작은 HTML 코드 조각을 삽입하면 게임이 독립적인 프레임 내에서 실행됩니다. 게임 위젯은 바로 이러한 용도로 제작되었습니다. 블로그, 워드프레스 사이트, 소규모 기업 웹사이트, 커뮤니티 페이지, 학교, 레스토랑, 개발자 프로젝트 등 다양한 환경에 적합한 가벼운 브라우저 게임을 제공합니다.

간단히 말해서, 웹사이트에 게임을 추가하는 방법은 무엇인가요?

웹사이트에 게임을 추가하려면 브라우저 게임을 선택하고, 제공업체의 iframe 또는 게임 위젯 코드를 복사하여 CMS 또는 앱에 붙여넣은 다음, 모바일에서 embed를 테스트하고 게임 주변에 유용한 설명 텍스트를 추가하여 페이지를 게시하세요. GamesIKnow Embed의 경우, iframe는 전용 /embed/{gameSlug}/frame/ URL과 파트너 설정에서 받은 테넌트 ID를 사용합니다.

1. 페이지와 독자층에 맞는 게임을 선택하세요.
2. embed 플랫폼에서 제공하는 iframe 프레임 URL을 사용하십시오.
3. iframe을 WordPress, 웹사이트 빌더 또는 React/Next.js 컴포넌트에 붙여넣으세요.
4. 고정된 높이 설정, 제목 속성 초기화, 지연 로딩 및 전체 화면 지원 기능을 제공합니다.
5. 게시하기 전에 모바일과 데스크톱에서 페이지를 미리 보세요.

웹사이트용 게임 위젯이란 무엇인가요?

웹사이트 게임 위젯은 일반 웹페이지 안에 삽입되는 간단한 브라우저 게임입니다. 대부분의 실제 환경에서 위젯은 iframe 유형입니다. 게임은 제공업체에서 호스팅하고, 사이트는 주변의 기사, 랜딩 페이지, 리소스 페이지 또는 비즈니스 페이지 콘텐츠를 관리합니다.

웹사이트에 게임을 추가해야 하는 이유는 무엇일까요?

게임을 추가한다고 해서 웹사이트가 게임 포털로 바뀔 필요는 없습니다. 많은 웹사이트에서 게임은 더 큰 페이지 안에 작은 인터랙티브 요소를 더하는 데 가장 효과적입니다. 예를 들어 블로그 게시물에 간단한 활동을 넣거나, 레스토랑 QR 코드 페이지에 대기실 게임을 추가하거나, 학교 웹사이트에 수업 활동을 하거나, 커뮤니티 페이지에 재미있는 휴식 시간을 제공하는 것 등이 있습니다.

• 게임은 정적인 페이지를 더욱 흥미롭게 만드는 데 도움이 될 수 있습니다.
• 방문객들은 페이지를 떠나지 않고도 할 일을 찾을 수 있습니다.
• 블로그와 커뮤니티 사이트는 페이지에 간단한 상호작용 요소가 포함될 때 더욱 기억에 남을 수 있습니다.
• 소규모 기업은 맞춤형 앱을 완전히 개발하지 않고도 재미있는 요소를 추가할 수 있습니다.
• 개발자와 에이전시는 작고 독립적인 iframe을 사용하여 대화형 웹사이트 위젯을 추가할 수 있습니다.

웹사이트에 게임을 추가하는 가장 좋은 방법

웹사이트에 게임을 추가하는 방법은 여러 가지가 있습니다. 가장 적합한 방법은 사용하는 플랫폼, 필요한 제어 수준, 그리고 게임을 직접 개발할지 여부에 따라 달라집니다.

iframe 게임 embed 사용

iframe embed 방식이 가장 빠른 경로인 경우가 많습니다. 게임은 제공업체에서 호스팅하고, 페이지는 게임을 위한 공간을 예약합니다. 이렇게 하면 게임 런타임이 페이지 코드와 분리되어 여러 플랫폼에서 코드 조각이 제대로 작동합니다.

게임 위젯을 사용하세요

게임 위젯은 일반적으로 유용한 기본 설정(권장 크기, 명확한 제목, 전체 화면 지원, 그리고 경우에 따라 상위 페이지에서 수신할 수 있는 이벤트 메시지)이 추가된 iframe입니다. 이것이 GamesIKnow Embed의 실질적인 모델입니다.

HTML5 게임을 추가하세요

최신 브라우저 게임은 휴대폰, 태블릿, 노트북, 데스크톱 등 다양한 기기의 브라우저에서 실행되기 때문에 흔히 HTML5 게임이라고 불립니다. 직접 HTML5 게임을 호스팅할 수도 있지만, 대부분의 웹사이트 소유자는 게임 엔진, 에셋, 모바일 레이아웃, 버그 수정 등을 직접 관리할 필요가 없는 HTML5 플랫폼을 선호합니다.

사용자 정의 HTML 블록을 사용하여 WordPress에 게임을 추가하세요

WordPress에서 가장 간단한 방법은 사용자 정의 HTML 블록을 이용하는 것입니다. iframe 코드 조각을 붙여넣고 페이지를 미리 보기한 후 주변 텍스트와 레이아웃을 조정하세요. WordPress 설정에서 iframe 태그가 제거되는 경우 관리자 권한이 필요하거나 allowed-iframe 플러그인을 추가해야 할 수도 있습니다.

React 또는 Next.js에 게임을 추가하세요

React 또는 Next.js에서 iframe을 컴포넌트로 렌더링하고 프레임의 src를 고정하세요. 분석 또는 게임 이벤트를 사용하려면 클라이언트 컴포넌트에서 Games I Know 프레임의 신뢰할 수 있는 postMessage 이벤트를 수신하세요.

처음부터 나만의 게임을 만들어 보세요

맞춤형 게임은 게임 자체가 제품일 때 좋은 선택이 될 수 있습니다. 하지만 일반 블로그, 에이전시 사이트, 학교 페이지 또는 지역 비즈니스 페이지의 경우 embed이 일반적으로 더 빠르고 유지 관리가 쉽습니다.

가장 쉬운 옵션: GamesIKnow Embed 사용

GamesIKnow Embed을 사용하면 웹사이트 소유자는 간단한 iframe을 통해 베타 기간 동안 무료 브라우저 게임을 추가할 수 있습니다. 방문자는 앱 다운로드나 회원가입 없이 브라우저에서 바로 게임을 즐길 수 있습니다. 이 게임들은 가볍고 모바일 친화적이며, 본격적인 게임 플랫폼보다는 간단한 상호작용 블록을 원하는 페이지에 적합하도록 설계되었습니다.

현재 embed에서 사용 가능한 게임으로는 Tic Tac Toe, Four in a Row, Bingo, I Know, 스도쿠, 단어 찾기 등이 있습니다. 이 게임들은 블로그, 학교, 레스토랑, 커뮤니티 웹사이트, 소규모 사업체 페이지, 사내 포털, 개발자 사이트 등 간단한 브라우저 게임 위젯이 필요한 곳에 적합합니다.

예시 embed 코드

Games I Know은 웹사이트 embed에 대해 전용 iframe 프레임 경로를 사용합니다. 공개 페이지 /embed/{gameSlug}/은 사람이 읽을 수 있는 랜딩 페이지입니다. iframe 소스는 파트너 대시보드에서 확인한 테넌트 ID를 사용하여 /embed/{gameSlug}/프레임/을 사용해야 합니다.

<iframe
  src="https://gamesiknow.com/embed/tic-tac-toe/frame/?tenantId=YOUR_TENANT_ID"
  title="Tic Tac Toe by Games I Know"
  width="100%"
  height="640"
  style="border:0;border-radius:16px;max-width:420px;display:block;margin:0 auto;"
  loading="lazy"
  allow="fullscreen"
  allowfullscreen
></iframe>

위의 라이브 데모는 Games I Know 데모 테넌트를 사용합니다. 자체 웹사이트의 경우 파트너 계정을 생성하고 도메인을 등록한 다음 대시보드에서 생성된 테넌트 또는 embed 키 값을 사용하여 프레임이 승인된 사이트에 연결되도록 하십시오.

워드프레스에 게임을 추가하는 방법

1. 게임이 표시될 워드프레스 페이지 또는 게시물을 엽니다.
2. 게임이 실행될 영역 근처에 사용자 지정 HTML 블록을 추가하세요.
3. embed 대시보드에서 Games I Know iframe 스니펫을 붙여넣습니다.
4. 데스크톱과 모바일에서 미리 보고 필요한 경우 주변 섹션의 내용을 조정하세요.
5. 게임 크기, 제목, 레이아웃이 적절해 보이면 페이지를 게시하세요.

React에 게임을 추가하는 방법

React를 사용하는 경우, iframe 컴포넌트는 간결하게 유지하세요. 안정적인 프레임 URL을 전달하고, 접근성을 위해 명확한 제목을 설정하고, 적절한 높이를 확보하고, 앱에서 embed 이벤트가 필요한 경우에만 postMessage 처리를 추가하세요.

const gameSrc = "https://gamesiknow.com/embed/tic-tac-toe/frame/?tenantId=YOUR_TENANT_ID";

export function GameEmbed() {
  return (
    <iframe
      src={gameSrc}
      title="Tic Tac Toe by Games I Know"
      width="100%"
      height={640}
      style={{
        border: 0,
        borderRadius: 16,
        maxWidth: 420,
        display: "block",
        margin: "0 auto",
      }}
      loading="lazy"
      allow="fullscreen"
      allowFullScreen
    />
  );
}

Next.js에 게임을 추가하는 방법

Next.js 페이지에서는 유용한 제목, 본문, 게임 관련 FAQ 콘텐츠 등을 포함하여 페이지 자체가 색인화될 수 있도록 유지해야 합니다. iframe 페이지는 서버 컴포넌트에서 렌더링할 수 있으며, postMessage 리스너는 클라이언트 컴포넌트에 있어야 합니다.

const gameSrc = "https://gamesiknow.com/embed/tic-tac-toe/frame/?tenantId=YOUR_TENANT_ID";

export default function GamesPage() {
  return (
    <main>
      <h1>Play Tic Tac Toe</h1>
      <iframe
        src={gameSrc}
        title="Tic Tac Toe by Games I Know"
        width="100%"
        height={640}
        style={{
          border: 0,
          borderRadius: 16,
          maxWidth: 420,
          display: "block",
          margin: "0 auto",
        }}
        loading="lazy"
        allow="fullscreen"
        allowFullScreen
      />
    </main>
  );
}

웹사이트에 게임을 추가하기에 가장 좋은 곳

• 주제에 맞는 간단한 인터랙티브 휴식 시간이 포함된 블로그 게시물.
• 이미 재방문자를 유치하고 있는 리소스 페이지.
• 커뮤니티 페이지, 클럽 페이지 및 지역 그룹 사이트.
• 학교 활동 페이지 및 교실 자료 모음.
• 레스토랑 대기 페이지, 메뉴 QR 코드 페이지, 이벤트 페이지.
• 간단한 상호작용이 제품이나 서비스를 효과적으로 지원하는 랜딩 페이지.
• 404페이지 또는 유쾌함이 기대되는 재미있는 페이지들.

시작하기 좋은 Games I Know 게임

게임 추가 전 유의사항

• 게임 관련 내용을 각 기사에 억지로 끼워 넣지 말고, 해당 기사의 주제와 연관시켜 설명하세요.
• 게시하기 전에 모바일에서 iframe을 테스트하세요.
• 한 페이지에 너무 많은 활성 embed을 배치하여 과부하를 일으키지 마십시오.
• 첫 번째 뷰포트 아래에 나타나는 iframe 코드 조각에 대해 지연 로딩을 사용하십시오.
• iframe의 높이를 적절하게 유지하여 페이지 이동이 어색하지 않고 게임을 쉽게 플레이할 수 있도록 하세요.
• 보조 기술이 embed된 게임을 설명할 수 있도록 명확한 제목 속성을 사용하십시오.
• 참여도 데이터가 중요하다면 분석 도구를 사용하여 클릭, 시작 또는 완료된 라운드를 추적하세요.

빠른 체크리스트

1. 게임을 선택하고 해당 게임이 페이지의 목적에 부합하는지 확인하십시오.
2. iframe 프레임 내에서 전용 Games I Know 프레임 URL을 사용하십시오.
3. 게임 주변에 유용한 페이지 콘텐츠를 추가하여 페이지의 SEO 가치를 유지하세요.
4. 휴대폰, 태블릿, 데스크톱에서 페이지를 미리 보세요.
5. 위젯을 게시한 후 방문자가 실제로 사용하는지 모니터링하세요.