피드로 돌아가기
Dev.toFrontend
원문 읽기
Canvas 배제한 DOM 기반 게임 엔진으로 배포 마찰 제거 및 60초 내 환경 구축
I Built a Browser Game Engine Inside WordPress Without Canvas or WebGL. Here's Why
AI 요약
Context
기존 Canvas 및 WebGL 기반 게임은 별도 호스팅과 iframe 임베딩이 필수적인 배포 제약 존재. 게임 콘텐츠와 웹페이지가 분리된 구조로 인해 사용자 접근성 및 공유 효율성이 저하되는 한계 직면.
Technical Solution
- DOM 기반 렌더링 구조 채택을 통한 웹페이지 자체의 게임화 및 URL 기반 즉시 실행 환경 구현
- WordPress Custom Post Types를 활용하여 캐릭터, 아이템, 맵 데이터를 DB 스키마로 정의한 데이터 모델링
- DOM Node의 Data Attribute를 통한 객체 위치 및 상태 관리와 JS 기반 Collision Detection 로직 구현
- WordPress REST API 및 Multisite 인프라를 활용한 사용자 인증 및 호스팅 자동화 체계 구축
- 게임 내 좌표 캡처 및 폼 전송 방식을 통한 실시간 Front-end Builder 인터페이스 설계
- JSON 직렬화를 통한 전체 게임 데이터의 Export/Import 및 이미지 URL 자동 리라이팅 기능 구현
실천 포인트
1. 렌더링 성능보다 배포 편의성과 접근성이 우선인 서비스인지 검토
2. 기존 CMS의 데이터 모델과 API를 활용해 백엔드 인프라 구축 비용을 절감할 수 있는지 분석
3. DOM Layout Recalculation 비용이 임계치를 넘지 않는 수준의 객체 수인지 확인
4. 표준 HTML/CSS 기능을 활용해 접근성(Accessibility)을 확보해야 하는 요구사항이 있는지 판단