# Show HN: QR 코드에 담긴 Doom 스타일 게임 제작

> Clean Markdown view of GeekNews topic #20418. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=20418](https://news.hada.io/topic?id=20418)
- GeekNews Markdown: [https://news.hada.io/topic/20418.md](https://news.hada.io/topic/20418.md)
- Type: GN+
- Author: [neo](https://news.hada.io/@neo)
- Published: 2025-04-19T09:47:19+09:00
- Updated: 2025-04-19T09:47:19+09:00
- Original source: [github.com/Kuberwastaken](https://github.com/Kuberwastaken/backdooms)
- Points: 1
- Comments: 1

## Topic Body

- **The Backdooms**는 QR 코드에서 직접 실행할 수 있는 HTML 게임으로, DOOM 1993과 The Backrooms에서 영감을 받아 개발됨
- 이 프로젝트는 QR 코드 저장 및 압축의 한계를 시험하고, QR 코드 내에서 경량 웹 애플리케이션을 호스팅하는 혁신적인 방법을 보여주기 위해 설계됨
- 게임은 인터넷 연결 없이 QR 코드를 스캔하여 플레이할 수 있으며, 극도로 압축된 형태로 제공됨
- **DecompressionStream** API를 사용하여 브라우저 내에서 동적으로 게임을 실행할 수 있음
- 현대 모바일 브라우저에서 호환 가능하며, Python과 QR 코드 라이브러리를 사용하여 QR 코드를 생성할 수 있음

---

### 프로젝트 개요

- **The Backdooms**는 QR 코드에서 직접 실행할 수 있는 HTML 게임으로, DOOM 1993과 The Backrooms에서 영감을 받아 개발됨
- QR 코드 저장 및 압축의 한계를 시험하고, QR 코드 내에서 경량 웹 애플리케이션을 호스팅하는 혁신적인 방법을 보여주기 위해 설계됨

### 기능

- **완전 오프라인:** QR 코드를 스캔한 후 인터넷 연결 없이 게임을 플레이할 수 있음
- **극한의 압축:** Zlib 압축과 Gzip 디컴프레션 스트림, base64 인코딩을 사용하여 최종 결과를 극도로 압축함
- **자체 추출 웹페이지:** `DecompressionStream` API를 사용하여 브라우저 내에서 동적으로 게임을 실행함
- **모바일 호환:** Decompressionstream API를 지원하는 최신 모바일 브라우저에서 작동함 (Edge, Yandex, Opera)

### 설치 및 종속성

- 기술적으로는 최신 웹 브라우저만 필요하지만, 약 2.5kb 게임의 QR 코드를 생성하려면 Python 3.7+, `qrcode` 라이브러리, `pillow`가 필요함

### 사용법

##### 1️⃣ 게임을 QR 코드로 변환

- 스크립트를 다음 명령어로 실행: `python3 QRGEN.py <your-game.html> <output-qrcode.png>`

##### 2️⃣ QR 코드 스캔

- 스마트폰이나 QR 스캐너를 사용하여 게임을 웹 브라우저에서 직접 열 수 있음

##### 3️⃣ 즉시 플레이 🎮

- 다운로드나 설치 없이 **The Backdooms**를 즐길 수 있음

### 기술적 분석

##### 압축 워크플로우

- **입력 HTML 읽기:** 파일이나 입력 소스에서 주어진 HTML 콘텐츠를 읽음
- **Zlib 압축 + GZip 디컴프레션:** HTML을 Zlib으로 압축하고 GZip의 Decompressionstream을 사용하여 최상의 압축을 구현함
- **Base64 인코딩:** 압축된 데이터를 Base64로 인코딩하여 텍스트 기반으로 유지하고 HTML 파일에 안전하게 포함할 수 있도록 함
- **HTML 래퍼에 포함:** JavaScript 기반의 자체 추출 HTML 래퍼가 생성됨. 이 래퍼는 브라우저에서 열릴 때 콘텐츠를 자동으로 디컴프레션하는 DecompressionStream API 함수를 포함함
- **데이터 URI 변환:** 전체 HTML을 `data:text/html;base64,...` 형식으로 변환하여 물리적 파일 없이 쉽게 저장하고 공유할 수 있도록 함

##### QR 코드 생성 논리

- 시스템은 먼저 `qr.make(fit=True)`를 사용하여 콘텐츠 길이에 따라 QR 크기를 동적으로 조정하여 가능한 가장 작은 QR 버전을 생성하려고 시도함
- 필요한 버전이 40을 초과하면 (QR 코드 표준 한계), `fit=False`로 버전 40을 강제함
- 최대 데이터 용량을 허용하는 가장 낮은 오류 수정 수준 L을 사용하여 가능한 한 많은 데이터를 맞추려고 함
- 데이터가 여전히 QR v40 수준 L에 맞지 않으면 프로세스가 실패하고 데이터가 QR 코드에 인코딩하기에 너무 크다는 오류 메시지가 반환됨

### 결과

- 성공하면 QR 코드가 생성되고 표시됨
- 실패하면 데이터가 QR 코드에 인코딩하기에 너무 크다는 오류 메시지와 함께 프로세스가 종료됨

### 라이선스

- 이 프로젝트는 **MIT 라이선스** 하에 공개되어 있으며, 자유롭게 사용, 수정, 공유할 수 있음

### 크레딧

- DOOM을 개발한 id Software
- 5년 전 이 아이디어를 제안한 matttkc
- Undertale의 놀라운 음악을 만든 Toby Fox, 이 게임의 GitHub 호스팅 버전은 Bonetrousle의 8비트 버전을 사용함
- **Kuber Mehta**에 의해 개발됨

## Comments



### Comment 37328

- Author: neo
- Created: 2025-04-19T09:47:19+09:00
- Points: 1

###### [Hacker News 의견](https://news.ycombinator.com/item?id=43729683) 
- 나는 가끔 무작위 프로젝트를 시작하는데, 이번에도 그런 경우였음. 올해 초 일주일 동안 만든 프로젝트였지만 공유하지 않았고, 이번에 공유하기로 했음
  - Doom과 The Backrooms에서 영감을 받아 The Backdooms라는 게임을 만들었음. 이 게임은 최소화된 HTML로 2.4kb 이하로 제작되었음
  - GZip을 Zlib 헤더와 함께 사용하는 비인기 방법을 사용했으며, 이를 위해 직접 스크립트를 작성하여 압축했음. 이 과정은 Decompressionstream API를 사용하여 브라우저에서 작동하는 40 크기의 QR 코드로 변환되었음
  - 이 설명은 매우 단순화된 것이며, DOOM에서 사용된 많은 기술을 사용하면서도 무한 시드 기반의 맵 생성과 결합하여 2.4kb로 만드는 것은 매우 어려웠음
  - 더 읽고 싶다면 다음 링크를 참고할 수 있음
    - 저장소 링크 (MIT 라이선스): [GitHub 링크]
    - The Backdooms의 호스팅된 (약간 개선된) 버전: [GitHub Pages 링크]
    - 게임 트레일러: [YouTube 링크]
    - LinkedIn 게시물: [LinkedIn 링크]
  - (참고: 이 게임을 플레이하려면 [QR 스캐너 링크]와 같은 큰 QR 코드를 스캔하고 텍스트 데이터를 브라우저에 넣어야 함)
  - 개발 과정과 개발을 자세히 기록한 블로그
    - [블로그 링크 1]
    - [블로그 링크 2]

- 다음 프로젝트: LLM을 QR 코드로 만들기
  - 관련 링크: [Reddit 링크]

- 정말 멋진 프로젝트임. 'data:' URL에 대해 알게 되었음. 'data:' URI 스킴을 알고 있었지만, 전체 URL로 사용할 수 있다는 것을 몰랐음. QR 코드에 전체 게임을 넣을 수 있을까 생각했지만, HTTP(s) 링크가 필요하다고 잘못 생각해서 보류했었음. 이 작업에 크게 영감을 받았음: QR 코드에 전체 게임을 넣을 수 있을까? [YouTube 링크]

- 저장소에 몇 가지 스크린샷을 추가해주길 바람. 나는 휴대폰으로 보고 있는데, 이유는 모르겠지만 3개의 버튼과 검은 화면만 보였음
  - 수정: GIF를 추가하면 YouTube에 의존하지 않아도 됨

- iPhone의 기본 QR 코드 스캐너로 스캔했는데 "사용 가능한 데이터가 없음"이라고 나왔음

- 캔버스의 CSS를 `image-rendering: pixelated`로 업데이트하여 이미지가 흐릿하지 않고 선명하게 보이도록 해야 함

- 계속 멋진 것을 만들어주길 바람, kuberwastaken

- 대단한 프로젝트임. "자체 포함 QR 코드"가 canitrundoom에 추가되기를 기다리고 있음 (기술적으로 승인될 수 있을지는 모르겠음)
  - 하지만 이제 그 게임 때문에 QR 코드를 스캔하기 전에 두 번 생각하게 될 것 같음 ^^

- 이 프로젝트는 Snow Crash와 가까워지고 있는 느낌임. QR 코드를 보고 내 뇌가 변형되고 있는지 궁금했음 :-D 놀라운 작업임

- 매우 멋짐. 작은 지적이지만: DOOM은 레이캐스팅을 사용하지 않았음. 이 프로젝트는 Wolfenstein 3D와 유사하며, Wolf3D는 레이캐스팅을 사용했음