페이지 삽입형 퀴즈
콘텐츠 페이지 중간에 들어가는 5문항 퀴즈와 결과 화면.
웹사이트 삽입형 웹게임 제작은 실행 환경부터 확인합니다
이 페이지는 메인 서비스가 아니라 맞춤형 웹게임 제작 중 특정 페이지나 앱 웹뷰 안에 게임을 넣어야 할 때 확인하는 보조 기준입니다. 삽입 환경, 결과 전달, 부모 서비스와의 연결 방식을 먼저 봅니다.
삽입형으로 만드는 상황
- 웹페이지 안에 Canvas/JavaScript 미니게임을 넣어야 합니다.
- 학습 콘텐츠 중간에 짧은 상호작용이 필요합니다.
- 서비스 가입·튜토리얼을 돕는 게임형 흐름을 넣습니다.
- 결과 점수만 외부 시스템에 넘깁니다.
- 기존 디자인 시스템 안에 인터랙티브 콘텐츠를 올립니다.
- 앱 웹뷰에서 실행되는 반응형 미니게임이 필요합니다.
삽입 환경별 확인 사항
| 환경 | 확인 내용 | 주의 |
|---|---|---|
| 일반 웹사이트 | HTML 구조, CSS 충돌, 배포 경로 | 전역 스타일과 스크립트 충돌 방지 |
| React/Vue | 컴포넌트 방식, 라우팅, 빌드 파이프라인 | 기존 상태관리와 이벤트 전달 방식 |
| CMS/LMS | 삽입 권한, iframe 가능 여부, 스크립트 제한 | 보안 정책과 파일 업로드 제한 |
| 앱 웹뷰 | 뷰포트, 터치, 브릿지 API, 기기 테스트 | iOS/Android 웹뷰 차이 |
작은 범위로 시작하는 조건
- 화면 수가 1~3개로 제한되어 있습니다.
- 문항, 이미지, 사운드, 디자인 리소스가 제공됩니다.
- 관리자와 개인정보 저장이 없습니다.
- 외부 API 연동은 결과값 전달 수준으로 제한됩니다.
- 검수 브라우저와 기기 범위를 미리 정합니다.
산출물 예시
튜토리얼 미션
서비스 기능을 따라 하며 완료 체크를 쌓는 인터랙션.
점수형 Canvas 게임
짧은 조작 게임 후 점수를 부모 서비스로 전달하는 웹게임.
FAQ
기존 웹사이트 안에 넣을 수 있나요?
일반 HTML, CMS, React/Vue, 앱 웹뷰 등 삽입 환경을 확인한 뒤 iframe, 컴포넌트, 정적 번들, 별도 호스팅 중 적합한 방식을 정합니다.
100만 원 미만도 가능한가요?
단일 화면, 템플릿형 퀴즈, 기존 디자인 기반의 작은 작업처럼 범위가 아주 좁을 때만 봅니다. 서버 저장과 관리자 기능은 제외됩니다.
점수 저장도 가능한가요?
점수 저장이 필요하면 API/DB/사용자 식별 범위가 붙습니다. 단순 결과값 전달인지, 실제 DB 저장인지 먼저 구분합니다.
관련 기준
