MakeMeDemo
다운로드

사이트에 삽입하기

업로드한 데모는 스토리지의 폴더 하나입니다. 보여 주는 방법은 네 가지이니, 하나를 골라 코드를 복사하세요. 예시 주소는 본인 주소로 바꾸세요. 앱의 업로드 결과에 실제 주소와 바로 복사할 수 있는 코드가 있습니다.

네 가지 사용법

공유 링크

누구에게나 보낼 수 있습니다. 데모, 설명, 단계 목록이 있는 전체 페이지가 열립니다.

https://your-site.com/demos/my-demo/index.html

임베드 플레이어

기존 페이지 안에 플레이어를 넣습니다.

<iframe
  src="https://your-site.com/demos/my-demo/player.html"
  width="100%"
  style="aspect-ratio: 16 / 10; border: 0; border-radius: 12px"
  loading="lazy" allowfullscreen>
</iframe>

표지 먼저, 클릭 후 재생

먼저 표지와 재생 버튼을 보여 주고 클릭해야 데모를 불러오므로 페이지가 느려지지 않습니다.

<div id="mmd-demo" style="position:relative;max-width:960px;aspect-ratio:16 / 10;
  border-radius:12px;overflow:hidden;cursor:pointer">
  <img src="https://your-site.com/demos/my-demo/poster.jpg" alt=""
    style="width:100%;height:100%;object-fit:cover;display:block">
  <span style="position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
    width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.95);
    box-shadow:0 4px 20px rgba(0,0,0,.2)"></span>
</div>
<script>
document.getElementById('mmd-demo').addEventListener('click', function () {
  this.innerHTML = '<iframe src="https://your-site.com/demos/my-demo/player.html" allowfullscreen' +
    ' style="width:100%;height:100%;border:0"></iframe>';
}, { once: true });
</script>

팝업 버튼

스크립트 한 줄로 모서리에 “View demo” 버튼이 생기고, 누르면 페이지 위에 데모가 열립니다.

<script src="https://your-site.com/demos/my-demo/embed.js" defer></script>

폴더 구성

index.html
전체 페이지 — 공유 링크가 여는 페이지
player.html
플레이어만, 넣은 영역에 맞춰 표시 — iframe용
poster.jpg
데모의 첫 프레임, 표지나 링크 미리보기용
demo.json
데모 본체: 단계, 텍스트, 설정
player.js
플레이어 코드, 위 두 페이지가 사용
assets/
스크린샷, 동영상 클립, 음성 해설
embed.js
팝업 버튼 스크립트

AI에게 맡기기

사이트를 AI 도우미(Claude, Cursor, ChatGPT 등)로 만들었다면 이 내용을 복사해 빈칸을 채워 전달하세요.

내 웹사이트에 인터랙티브 제품 데모를 넣어 주세요.

사이트 제작 도구: ____ (예: Next.js, WordPress, Webflow)
넣을 위치: ____ (예: 홈페이지 히어로 아래)

데모는 MakeMeDemo로 만든, 이미 호스팅된 폴더입니다. 먼저 poster.jpg와 재생 버튼을 보여 주고, 클릭했을 때만 player.html의 iframe(너비 100%, 비율 16:10, 테두리 없음, 전체 화면 허용)으로 바꿔서 페이지를 열 때 데모를 미리 불러오지 않게 해 주세요. 파일은 현재 위치로 링크하고 프로젝트에 복사하지 마세요. 폴더:

https://your-site.com/demos/my-demo/
  index.html   전체 페이지 — 공유 링크가 여는 페이지
  player.html  플레이어만, 넣은 영역에 맞춰 표시 — iframe용
  poster.jpg   데모의 첫 프레임, 표지나 링크 미리보기용
  demo.json    데모 본체: 단계, 텍스트, 설정
  player.js    플레이어 코드, 위 두 페이지가 사용
  assets/      스크린샷, 동영상 클립, 음성 해설
  embed.js     팝업 버튼 스크립트