On this page
2026년 7월 3일 itch.io에 쓴 개발기를 다듬어 옮겼습니다.
블로샤퍼는 상용 게임 엔진 대신 HTML, CSS, JavaScript와 TypeScript로 만든 카드 게임입니다. 오랫동안 프런트엔드 개발을 해 왔기 때문에, 게임을 시작할 때도 제가 익숙하게 다룰 수 있는 도구부터 생각했습니다. 머릿속에 있는 화면을 빠르게 만들어 보고 수정하는 데 웹 기술이 잘 맞았습니다.
카드 게임과 웹 인터페이스
블로샤퍼에서는 다음 수를 계산하고, 덱을 구성하고, 카드를 조작하는 일이 플레이의 중심입니다. 화면에 놓인 카드와 정보를 어떻게 보여주고 반응하게 만들지가 중요했습니다.
카드 배치에는 flexbox와 grid를, 움직임과 스킬 연출에는 CSS 애니메이션을 활용했습니다. 웹 인터페이스를 만들 때 쓰던 방법을 게임에도 적용할 수 있었습니다. 제가 익숙한 기술을 선택한 이유이기도 하지만, 카드와 UI의 비중이 큰 게임의 구성에도 맞는 선택이었습니다.
DOM과 CSS로 만든 움직임
웹 기술로 게임을 만들면 성능은 괜찮으냐는 질문을 받곤 했습니다. DOM 요소가 많고 화면에서 계속 움직이면 성능 부담이 생깁니다. 익숙한 도구라고 해서 그 부분을 건너뛸 수는 없었습니다.
카드 애니메이션과 효과를 만들 때는
transform과 opacity를 중심으로 구성하고, 브라우저의 하드웨어 가속을 활용하는 방향으로 작업했습니다. 다만 이 속성을 썼다는 사실만으로 모든 장면에서 일정한 프레임 속도가 보장되는 것은 아닙니다.SVG 필터와 화면 분위기
어둡고 거친 느와르 분위기를 만드는 데는 SVG 필터와 CSS의
backdrop-filter를 사용했습니다. 글리치, 피가 튀는 효과, 화면 흔들림도 Web API와 CSS를 조합해 구현했습니다.카드와 인터페이스를 DOM으로 구성한 상태에서 이런 효과를 더했습니다. 익숙한 웹 화면에 질감과 움직임을 입혀 게임의 분위기를 만드는 과정이었습니다.
TypeScript와 Electron
렌더링 코어는 React나 Vue 없이 TypeScript로 구성했습니다. 기존 웹 프레임워크를 적용하는 대신 게임에 맞는 코어를 만드는 방식을 택했습니다.
데스크톱 배포에는 Electron을 사용했습니다. HTML·CSS·JavaScript로 만든 화면을 독립 실행형 앱으로 묶어 Windows, macOS, 스팀덱에서 실행하는 구성이었습니다.
그렇다고 패키징만 하면 게임에 필요한 일이 모두 끝나지는 않았습니다. 컨트롤러 입력, 저장 데이터 암호화, 오디오 컨텍스트 처리처럼 별도로 해결해야 할 작업도 있었습니다. 이런 부분을 하나씩 붙여 가며 데모를 만들었습니다.
이후의 렌더링 실험
이 글은 블로샤퍼가 처음 어떤 기술로 화면을 구성했는지에 대한 기록입니다. 이후에는 기존 HTML 레이아웃을 유지하면서 렌더링 경로를 바꾸는 HTML-in-Canvas도 시험했습니다. 그 과정에서 확인한 화면 차이와 문제는 블로샤퍼의 HTML-in-Canvas 렌더링 실험에 따로 정리했습니다.