브라우저 창 576개로 만든 스네이크 게임? 웹 윈도우 컨트롤, 생각보다 훨씬 강력합니다!
2026. 7. 26.
브라우저 창 576개로 만든 스네이크 게임? 웹 윈도우 컨트롤, 생각보다 훨씬 강력합니다!
요즘 좀 조용했죠? 잠시 숨 고르는 시간을 가졌는데, 그렇다고 제가 여러분이 좋아하는 황당하고 기발한 웹 아이디어들을 잊어버린 건 절대 아닙니다! 오히려 더 강력한(?) 것을 들고 왔습니다.
이 아이디어는 동료와 "한 브라우저 창에서 다른 창을 제어할 수 있다는 거 알고 있어?"라고 이야기하다가 문득 떠올랐어요. 물론 그 대화의 시작은 '망가진 링크를 확인하고, iFrame이 일으킬 수 있는 문제 없이 순차적으로 검증하는' 같은 꽤나 생산적인 방향이었죠. (실제로 이 글 후반부에 그 실용적인 데모도 준비되어 있습니다!) 그런데 말입니다. 저는 그 순간 깨달았죠. '아, 이 브라우저 윈도우 컨트롤은 내가 아직 제대로 가지고 놀지 못한 몇 안 되는 웹 기술 중 하나였구나!' 하고요.
처음엔 컨트롤 창 하나, 게임 플레이 창 하나, 이렇게 두 개로 작은 게임을 만들어볼까 했는데... 왜 굳이 두 개로 제한해야 할까요? 그 생각이 바로 이 끔찍하고도 놀라운 결과물을 낳았습니다!
브라우저 윈도우로 렌더링한 스네이크 게임!
어쩌면 여러분은 잘 모르실 수도 있지만, 사용자의 최소한의 상호작용(user interaction)과 팝업 허용만 있다면, 브라우저 윈도우에 대해 생각보다 훨씬 많은 제어 권한을 가질 수 있습니다. 창의 크기(최소 크기 제약은 있지만), 위치 등을 자유롭게 정의할 수 있죠. 심지어 각 창에 이름을 붙여 코드에서 항상 참조할 수 있기 때문에, 여러 창을 원하는 위치로 마음껏 움직일 수 있어요! 제가 실무에서 이 부분을 테스트해 봤을 때, 팝업 차단 설정이나 브라우저별 호환성 때문에 초기에는 좀 헤맸지만, 일단 원리를 파악하니 정말 다양한 응용이 가능하겠더라고요. 이런 두 가지 강력한 기능만으로도 우리는 엄청난 혼돈을 만들어낼 기회를 얻게 됩니다!
대혼란 속으로!
게임 조작은 키보드 화살표 키로 합니다. "Start Game"을 누른 후 URL 바에서 팝업을 허용해야 합니다. 이때 "항상 허용"을 선택해 주시는 게 좋아요.
주의사항:
- Windows 환경의 Chrome에서만 테스트되었습니다. 다른 브라우저나 OS 조합에서는 행운을 빌어요!
- 아무것도 클릭하지 마세요! 오직 화살표 키만 사용해야 합니다.
- 게임이 끝나면 상단 스코어 창에 있는 "clear all windows" 버튼을 꼭 누르세요. 그렇지 않으면 수많은 랜덤 창들을 일일이 닫느라 한참을 고생할 수 있습니다! 하하.
게임 후 여러분의 최고 점수와 플레이 화면을 스크린샷으로 찍어 댓글로 공유해주세요!
혹시 플레이가 어렵거나 모바일 환경이라면
지금 당장 직접 시도하기 어렵거나 모바일 기기라면, 아래 스크린샷으로 대략 어떤 모습인지 확인해보세요.
그래, 재밌게 놀았으니 이제 진지하게 가봅시다
방금 본 스네이크 게임은 정말 말도 안 되는 아이디어였지만, 사실 이 기술로 매우 유용한 일들을 할 수 있습니다. 서론에서 말씀드렸듯이, 저희 회사에서도 이와 비슷한 활용 사례가 있습니다. 이 경험이 여러분에게도 좋은 영감을 줄 수 있기를 바랍니다.
우리는 서드파티 웹사이트의 깨진 링크를 확인해야 하는 과제를 안고 있었습니다. 문제는 몇몇 콘텐츠가 SPA(Single Page Application)로 되어 있어 깨진 페이지인데도 HTTP 응답 헤더가 200으로 반환되거나, 페이월(paywall) 뒤에 숨겨져 있어 페이지 존재 여부는 확인할 수 있지만, 페이월 뒤의 실제 콘텐츠가 여전히 유효한지는 보장할 수 없다는 점이었죠.
그래서 우리는 확인할 항목들의 대기열(queue)을 만들고, 대기열의 항목을 클릭하면 해당 타겟 페이지를 열어서 수동으로 확인하고 로그인하는 등의 작업을 수행하려 했습니다. 이를 단일 브라우저 창에서 시도했다면 iFrame을 사용해야 했을 텐데요. 여러분도 아시다시피, 일부 웹사이트는 보안상의 이유로 iFrame 내에서 자신의 사이트가 표시되는 것을 차단할 수 있습니다. 저도 회사에서 이와 비슷한 문제에 직면했을 때, 처음엔 iFrame을 고민했지만, 보안 정책 때문에 막히는 경우가 많아 다른 대안을 찾다가 이런 멀티 윈도우 접근법을 고려한 적이 있습니다.
그래서 더 견고한 솔루션을 위해 우리는 브라우저 윈도우 컨트롤에 주목했습니다. 화면 왼쪽에 작은 창 하나를 띄워 확인할 페이지 목록을 보여주고, 화면 오른쪽에 다른 창을 띄워 왼쪽 창에서 클릭하는 내용에 따라 URL을 제어하는 방식입니다. 왼쪽 창의 항목을 클릭하면 오른쪽 창의 URL이 업데이트되는 거죠. iFrame의 복잡한 마법 없이도 말이죠!
게다가 더 좋은 점은, 이 두 창의 크기를 조절해 화면을 가득 채우면 마치 하나의 애플리케이션처럼 작동하게 만들 수도 있다는 겁니다!
더 실용적인 데모
왼쪽 창에서 항목을 클릭해보세요. 오른쪽 창의 URL이 변경될 겁니다. 왼쪽 패널에서 작동하는 페이지와 작동하지 않는 페이지를 적절하게 표시해보세요!
여러분은 무엇을 만들어 보시겠어요?
이 아이디어가 여러분에게 어떤 새로운 영감을 주었나요? 에디터 내의 도구마다 창을 하나씩 할당하는 것은 어떨까요? 혹은 다중 화면 애플리케이션(사용자의 모니터 수를 감지하고 두 번째, 세 번째 화면에 창을 배치할 수도 있습니다!)을 구상해 볼 수도 있겠네요.
a) 스네이크 게임에서 몇 점을 얻었는지(만약 작동한다면!)와 b) 이 글이 여러분에게 어떤 아이디어를 주었는지 댓글로 알려주세요! 여러분의 상상력이 궁금합니다!
원문: https://dev.to/grahamthedev/snake-rendered-with-576-browser-windows-warning-this-will-hurt-your-eyesand-pc-3p7i 수집일: 2026-07-26 01:25:39