웹사이트나 블로그에 마작 솔리테어 임베드하기

TheMahjong.com에 새 기능이 추가되었습니다. 이제 여러분의 웹사이트나 블로그에 마작 솔리테어 게임을 직접 임베드할 수 있습니다. 작은 개인 블로그이든, 게임 포털이든, 퍼즐·두뇌훈련 관련 페이지이든 상관없이 방문자들은 이제 여러분의 사이트에서 바로 마작 솔리테어를 즐길 수 있습니다.

이 글에서는 새 임베드 기능이 어떻게 동작하는지, 누구에게 유용한지, 그리고 마작 솔리테어 게임을 사이트에 넣는 방법을 차례대로 설명합니다.

임베드 기능을 추가한 이유

마작 솔리테어는 다양한 유형의 콘텐츠와 자연스럽게 어울립니다. 퍼즐 가이드, 테마별 기사, 기억력·집중력 관련 페이지, 단순한 레이아웃 모음 페이지 등에서 게임이 페이지 안에 바로 들어가 있는 것이 별도 사이트로 링크를 거는 것보다 훨씬 효과적일 때가 많습니다.

임베드 기능을 사용하면 사이트 구조를 바꾸지 않고도 이런 구성을 만들 수 있습니다. 작은 독립형 게임 블록처럼 동작하며, 필요한 위치에서 페이지의 일부가 됩니다. 페이지에는 짧은 코드 스니펫만 추가하면 되고, 나머지는 우리가 처리합니다. 게임은 우리 서버에서 로드되고, 최신 상태로 유지되며, TheMahjong.com에서와 동일한 방식으로 동작합니다.

마작 솔리테어를 임베드하는 두 가지 방법

마작 솔리테어를 페이지에 추가하는 방법은 크게 두 가지입니다.

• 거의 모든 웹사이트에서 동작하는 iframe 방식
• 많은 인기 콘텐츠 관리 시스템(CMS)에서 지원하는 oEmbed 방식

두 옵션 모두 동일한 게임을 보여줍니다. 차이는 페이지에 어떻게 붙이는지만 다릅니다.

옵션 1: 간단한 iframe 임베드

iframe 옵션을 사용하면 페이지에 붙여 넣을 수 있는 짧은 HTML 코드 스니펫을 제공합니다. 사이트의 HTML을 직접 수정할 수 있거나, 에디터에 사용자 정의 코드를 넣는 블록이 있을 때 잘 맞는 방식입니다.

일반적인 iframe 임베드는 다음과 같이 생겼습니다:

<iframe 
  src="https://themahjong.com/shared-game" 
  title="Mahjong game" 
  loading="lazy" 
  allowFullScreen 
  style="width:100%;height:600px;border:none">
</iframe>

다음과 같이 할 수 있습니다.

• 게임이 표시되길 원하는 위치에 이 블록을 배치합니다.
• 게임이 컨테이너 너비에 맞게 반응하도록, width 값을 퍼센트 단위로 조정합니다.
• 페이지 레이아웃에 맞도록, height 값을 픽셀 단위로 조정합니다.

TheMahjong.com을 응원하고 싶다면, 임베드된 게임 근처에 우리 사이트로 연결되는 작은 텍스트 링크를 추가해 주셔도 좋습니다. 필수는 아니지만, 항상 감사히 생각합니다.

옵션 2: CMS 플랫폼을 위한 oEmbed

사이트가 oEmbed를 지원하는 CMS(예: WordPress, Drupal, 적절한 플러그인을 사용한 Joomla 등)로 제작되어 있다면, iframe HTML을 직접 다루지 않고도 임베드 기능을 사용할 수 있습니다.

모든 게임 공유 페이지에는 레이아웃 URL과 oEmbed 코드가 있습니다.

일부 에디터는 레이아웃 URL을 자동으로 임베드된 게임으로 변환해 줍니다. 임베드 가능한 콘텐츠를 지원하는 블록에 URL만 붙여 넣으면 됩니다. 다른 환경에서는 테마나 플러그인이 제공하는 전용 필드나 블록에 oEmbed 코드를 붙여 넣으라고 요구할 수도 있습니다.

CMS에서 게임 대신 보통의 링크만 보인다면, 해당 영역에서 oEmbed가 비활성화되어 있거나 지원되지 않는다는 뜻일 가능성이 높습니다.

임베드가 특히 잘 어울리는 곳

게임이 페이지의 주제를 방해하기보다는 뒷받침해 줄 때 임베드의 효과가 가장 큽니다. 마작 솔리테어 블록이 특히 잘 어울리는 위치를 몇 가지 예로 들면 다음과 같습니다:

• 테마형 블로그 글과 기사. 퍼즐, 힐링 게임, 집중력, 짧은 휴식 시간 등에 대해 글을 쓸 때, 임베드된 마작 솔리테어 레이아웃을 본문 옆에 작은 인터랙티브 예시로 두면 좋습니다. 주제와 느슨하게라도 맞는 레이아웃을 고르면, 게임이 페이지에 뜬금없이 붙어 있는 느낌을 줄이지 않을 수 있습니다.
• 웹사이트의 게임/퍼즐 섹션. 이미 “게임”, “퍼즐” 섹션이 있는 사이트라면, 임베드된 마작 게임을 단순한 링크가 아니라 페이지의 핵심 요소 중 하나로 배치할 수 있습니다. 직접 게임을 만드는 수고 없이 클래식 퍼즐을 하나 더 추가하고 싶은 개인 프로젝트나 대형 포털 모두에 잘 맞는 방식입니다.
• 기억력·집중력·트레이닝 관련 페이지. 집중력, 패턴 인식, 간단한 두뇌 운동 등을 다루는 글에는 실제로 플레이해 볼 수 있는 예시가 있으면 도움이 됩니다. 마작 솔리테어는 설치나 회원가입 없이, 페이지를 떠나지 않고 바로 해볼 수 있는 부담 없는 활동으로 이런 문맥에 잘 어울립니다.
• 시즌·이벤트용 페이지. 가을 테마, 겨울 연휴, 지역 축제 같은 시즌성 콘텐츠에서는 페이지 분위기에 맞는 레이아웃을 임베드할 수 있습니다. 예를 들어, 매일의 별자리 운세 글 옆에 해당 별자리 모양 레이아웃을 둘 수도 있습니다. 본문 근처에 테마 레이아웃이 있으면 페이지가 더 완성도 있어 보이고, 방문자가 조금 더 오래 머물 이유가 생깁니다.
• 커뮤니티 허브와 “잠깐 쉬기” 페이지. 일부 커뮤니티 사이트, 포럼, 팀 내부 사이트에는 “잠깐 쉬기”, “1분만 게임하기” 같은 작은 코너가 있습니다. 임베드된 마작 솔리테어 레이아웃은 회원가입이나 다운로드 없이 즐길 수 있는 작은 독립형 액티비티 블록으로 이런 페이지에 자연스럽게 녹아듭니다.

성능과 로딩

임베드된 게임은 TheMahjong.com에서 HTTPS로 로드됩니다. 메인 사이트와 동일한 코드와 에셋을 사용하므로 성능도 비슷합니다. 한 번 캐시되고 나면, 재방문 시 레이아웃이 비교적 빠르게 로드됩니다.

iframe에 loading="lazy" 속성을 사용해 임베드하면, 대부분의 브라우저는 사용자가 해당 위치 근처까지 스크롤할 때까지 게임을 로드하지 않습니다. 같은 페이지에 임베드를 여러 개 사용할 경우에도 페이지가 보다 반응성 있게 유지되도록 도와줍니다.

이 새로운 임베드 기능이 여러분의 사이트에서도 좋은 자리를 찾길 바랍니다. 한 편의 글에서 사용하든, 게임 섹션의 일부로 사용하든, 여러 레이아웃과 배치를 시도해 보면서 여러분의 콘텐츠에 가장 자연스럽게 어울리는 구성을 찾아보세요.