🤯 브라우저 윈도우 576개로 뱀 게임을? 이건 정말 정신 나간 아이디어지만... 더 대단한 가능성이 숨어있습니다!

오랜만에 글을 올리네요. 다들 제가 한동안 조용해서 혹시 저를 잊은 건 아닌지 걱정했을 수도 있겠습니다. 하지만 걱정 마세요! 웹에서 정말 기발하고, 때로는 '이게 돼?' 싶은 황당한 아이디어를 좋아하는 여러분을 절대 잊지 않았습니다.

오늘 가져온 이야기는 한 동료와 대화하던 중 불현듯 떠올랐습니다. "야, 너 브라우저 창 하나로 다른 창을 제어할 수 있다는 거 알아?" 이 한마디가 발단이었죠.

물론, 그 당시에는 깨진 링크를 확인하고 순차적으로 동작을 검증하는 것 같은 훨씬 '상식적인' 아이디어를 구상 중이었습니다. iframe이 유발할 수 있는 골치 아픈 문제들을 피하면서 말이죠. (이 글 후반부에 이에 대한 데모도 나옵니다!) 그런데 문득 깨달았어요. 제가 아직 이 브라우저 창 제어 기능을 '악용'해보지 않았다는 사실을요!

처음엔 컨트롤 창 하나, 게임 플레이 창 하나로 간단한 게임을 만들어볼까 생각했죠. 그러다 문득 이런 생각이 들었습니다. '왜 두 개의 창으로만 한정해야 하지?'

그렇게 해서 탄생한 것이 바로 이 지극히 '끔찍한' 아이디어입니다!

브라우저 윈도우로 렌더링된 스네이크!

아마 모르셨을 수도 있지만, 사용자의 인터랙션이 있고 팝업을 허용하기만 하면, 브라우저 창을 정말 '많이' 제어할 수 있습니다. 상상 이상이죠.

창의 크기(물론 최소 크기 제약은 있습니다), 위치 등을 자유롭게 정의할 수 있고요. 심지어 각 창에 이름을 붙여 코드에서 언제든 참조할 수 있습니다. 이 기능을 활용하면 여러 창을 원하는 위치로 마음대로 이동시키는 게 가능해지죠!

이 두 가지 강력한 기능만으로도 우리는 어마어마한 '카오스'를 만들어낼 기회를 얻게 됩니다!

대혼돈의 시작!

조작은 간단합니다. 방향키만 사용하세요.

"Start Game" 버튼을 누르면 팝업 허용 메시지가 뜰 텐데, 이때 주소 표시줄에서 '항상 허용'을 선택해주셔야 합니다. 그래야 게임이 제대로 시작됩니다!

제가 테스트해본 환경은 Windows 크롬뿐입니다. 다른 브라우저나 운영체제에서는 어떻게 될지... 행운을 빌어요!

게임 중에는 아무것도 클릭하지 마세요! 오직 방향키만 사용해야 합니다.

게임이 끝나면 상단 점수 창에 있는 "clear all windows" 버튼을 꼭 누르세요. 이걸 안 누르면 수많은 무작위 창들을 일일이 닫느라 꽤 오랜 시간을 허비할 수도 있습니다. 하하!

게임 후 여러분의 화면과 최고 점수를 댓글로 스크린샷과 함께 공유해주세요!

{% embed https://codepen.io/editor/GrahamTheDev/pen/019f90a9-1ed9-7d61-927e-31dd5256c79e %}

혹시 게임이 실행되지 않거나 모바일 환경이라면

지금 바로 직접 경험하기 어렵거나 모바일 기기라면, 여기 스크린샷을 준비했습니다. 이걸로라도 간접 경험해보세요!

그래, 그건 좀 황당했지. 이제 진지하게 가보자

방금 보신 스네이크 게임은 정말 기발하고 유쾌한 장난이었지만, 사실 이 기술로 매우 유용하고 실용적인 일들을 해낼 수 있습니다.

서론에서 언급했듯이, 저희 회사에서도 이 기능을 활용하는 실제 사용 사례가 있습니다. 이 아이디어가 여러분에게도 좋은 영감이 되기를 바랍니다.

저희는 서드파티 웹사이트의 깨진 링크를 확인해야 하는 작업을 종종 합니다. 여기서 몇 가지 문제가 발생하죠.

일부 콘텐츠는 SPA(Single Page Application)로 되어 있어, 페이지가 깨졌어도 HTTP 응답 헤더는 200 OK로 돌아오는 경우가 있습니다. 또 다른 문제는 일부 콘텐츠가 유료 구독(Paywall) 뒤에 숨겨져 있다는 겁니다. 이 경우 페이지가 존재한다는 것만 확인할 수 있을 뿐, 결제 장벽 뒤의 콘텐츠가 여전히 유효한지는 보장할 수 없죠.

그래서 저희는 확인할 항목들을 큐(Queue)에 넣어두고, 큐에서 항목을 클릭하면 해당 페이지를 새 창으로 열어서 직접 확인하고, 로그인 등의 추가 작업을 수행할 수 있도록 하고 싶었습니다.

물론 이 모든 작업을 단일 브라우저 창 내에서 iframe을 사용해 시도해볼 수도 있습니다. 하지만, 혹시 모르셨다면, 일부 웹사이트는 iframe을 통한 외부 삽입을 아예 차단할 수 있습니다. 보안상의 이유나 콘텐츠 보호를 위해서 말이죠. 이럴 때는 iframe이 무용지물이 됩니다.

그래서 더 견고하고 안정적인 솔루션을 위해 저희는 '다중 윈도우' 방식에 주목했습니다.

두 개의 브라우저 창을 띄우는 거죠. 하나는 화면 왼쪽에 작게 띄워서 확인할 페이지 목록을 보여주고, 다른 하나는 화면 오른쪽에 크게 띄워서 첫 번째 창에서 클릭하는 내용에 따라 제어하는 겁니다.

왼쪽 창에서 목록 아이템을 클릭하면, 오른쪽 창의 URL이 업데이트되는 식이죠. iframe의 복잡한 마법 없이 아주 깔끔하게요! 이 방법을 실무에 적용했을 때, iframe으로 씨름하던 이전의 고통을 시원하게 해결할 수 있었습니다. 특히 보안 정책 때문에 iframe 로드가 막히는 경우엔 이 방법 외에는 답이 없더군요.

더 좋은 점은, 이 두 창의 크기를 조절해서 마치 하나의 애플리케이션처럼 보이게 할 수도 있다는 겁니다!

더 실용적인 데모

왼쪽 창에 뜨는 항목들을 클릭해보세요. 오른쪽 패널의 URL이 바뀔 겁니다.

왼쪽 패널에서 각 페이지가 '정상 작동'하는지, '작동하지 않는지' 적절히 표시할 수 있습니다!

{% embed https://codepen.io/editor/GrahamTheDev/pen/019f910d-965b-7c08-839f-44ad8fac4c8b %}

여러분은 무엇을 만들 건가요?

이런 아이디어가 여러분에게는 어떤 새로운 영감을 주었나요?

에디터의 각 도구를 개별 창으로 분리하는 방법은 어떨까요?

아니면 멀티 스크린 애플리케이션을 만들 수도 있습니다 (사용자가 몇 개의 모니터를 사용하는지 감지해서 두 번째, 세 번째 화면에 필요한 것들을 배치할 수 있으니까요).

댓글로 다음 두 가지를 알려주세요! a) 스네이크 게임에서 최고 점수는 몇 점이었나요? (물론 제대로 작동했다면요!) b) 이 아이디어를 보고 어떤 새로운 프로젝트 구상이 떠올랐나요?

---

원문: https://dev.to/grahamthedev/snake-rendered-with-576-browser-windows-warning-this-will-hurt-your-eyesand-pc-3p7i 수집일: 2026-07-25 01:22:42