💡 개발 경험 ‘0’이던 내가, 단 3일 만에 JavaScript로 탈출 게임을 만들어낸 현실적인 이야기예요. 어려운 개발 언어보다, 만들고 싶은 열정이 더 컸던 그때의 기록을 공유합니다. 소스코드도 전부 공개할게요 ✨
- 3일 만에 게임을 만들 수 있었던 비결은 ‘완벽함을 포기한 단순한 구조’ 덕분이었어요.
- Javascript 지식이 거의 없는 상태에서도, 브라우저 하나로 시작할 수 있었던 게 핵심이에요.
- ‘재미’에 집중하니 버그도 하나의 이벤트처럼 느껴졌고, 디버깅이 두렵지 않았어요.
- 혼자 하는 건 무섭지만, 작은 기능부터 차근차근 붙이다 보면 어느새 게임이 완성되어 있더라고요.
- 진짜 핵심은, 코드를 잘 쓰는 게 아니라 ‘내가 만들고 싶은 게임이 뭔지’ 확실히 아는 거였어요.
- 이런 과정을 거치면서, 나만의 작은 포트폴리오도 하나 완성되는 셈이죠 😊
- 정말 초보였다면, 제가 쓴 코드 그대로 따라해도 게임 하나는 뚝딱 만들 수 있을 거예요.
🎯 완벽하지 않아도 게임은 된다, 핵심은 ‘동작하는 최소한의 틀’
처음 시작할 때는 진짜 아무것도 몰랐어요. HTML이랑 CSS는 대충 어떤 건지는 알았지만, JavaScript는 console.log밖에 몰랐죠. 그래서 처음엔 그냥 구글에 ‘JavaScript game 만들기’라고 검색부터 했어요. 근데 대부분 너무 복잡하거나, 이미 완성된 예제를 보여주는 것뿐이라 뭘 어떻게 시작해야 할지 막막하더라고요.
그런데 유튜브에서 어떤 해외 개발자가 말한 게 인상 깊었어요. “완성된 걸 만들려고 하지 말고, 움직이는 걸 먼저 만들어라.” 그 말이 정말로 제 머리를 띵 때렸죠. 그래서 일단 1개의 방, 1개의 버튼, 1개의 텍스트로 시작했어요. 그게 끝이에요. 버튼을 누르면 텍스트가 바뀌는 것만 구현해도 이미 기본 틀은 갖춰진 거거든요.
게임의 스토리? 일단 뇌피셜로 썼어요. “깨어나보니 이상한 방 안이다. 문은 잠겨 있다. 주변을 둘러보자.” 뭐 이런 느낌? 😂 근데 그렇게 쓰다 보니까 어느새 ‘방을 탐색’하는 기능, ‘아이템을 줍는’ 기능, 그리고 ‘문을 여는’ 기능이 하나둘씩 떠오르더라고요.
완벽한 게임이 아니라, 재미있는 경험을 만드는 게 목표니까 버그도 그냥 ‘이벤트’처럼 활용했어요. 버튼이 안 눌리면 ‘망가진 버튼입니다!’라고 텍스트를 바꾸거나, 잘못된 선택지를 고르면 ‘그건 아닌 것 같다…’ 같은 문장을 넣는 식으로요. 이게 오히려 몰입감을 살려줬고, 개발에 대한 두려움도 줄여줬죠 😊
🧰 도구는 브라우저 하나면 충분했어요
사실 툴은 하나도 안 썼어요. VS Code 같은 건 나중 문제고, 그냥 크롬 브라우저 + 메모장으로 시작했어요. 브라우저에서 개발자 도구 열어놓고, 바로 console에서 출력되는 거 보면서 하나씩 배웠죠. 특히 document.querySelector랑 addEventListener 이 두 개만 제대로 이해해도 꽤 많은 걸 할 수 있어요.
스크립트를 HTML 안에 직접 작성해서, 별도의 JS 파일 없이도 바로 테스트해봤어요. 그러니까 저장하고 새로고침, 저장하고 새로고침! 진짜 옛날 플래시 게임 만들던 시절 감성처럼요 😆
나중에 코드가 좀 복잡해지고 나서야 JS 파일을 따로 빼게 됐고, CSS도 분리하게 됐죠. 처음부터 구조화하려고 하면 진입 장벽만 높아지니까, 일단 다 때려넣고 나중에 정리하는 방식이 오히려 더 효율적이었어요.
코드 편집도 그냥 메모장++ 같은 걸로 했어요. 그러다 보니 자동완성도 없고, 진짜 하나하나 손으로 써야 했는데… 오히려 그래서 기본기를 자연스럽게 익힐 수 있었던 것 같아요.
😵 버그는 당연히 생기지만, 그게 성장 포인트
게임이 어느 정도 동작하게 되니까 갑자기 이상한 에러가 막 터지는 거예요. 콘솔엔 빨간 줄이 뜨고, 클릭해도 아무 반응이 없고… 처음엔 멘붕 왔죠 😨 근데 이게 오히려 공부의 기회더라고요.
예를 들어, 버튼을 누르면 텍스트가 바뀌어야 하는데 아무 일도 안 일어났어요. 한참 헤매다가 보니까 querySelector로 선택한 ID가 오타였더라고요. ‘#button’이라고 써야 하는데 ‘#buton’이라고 써놓은 거죠. 진짜 사소한 실수인데, 그걸 찾기 위해 콘솔도 들여다보고, console.log도 찍어보고, 다양한 시도를 했어요.
그런 경험이 쌓이면서 ‘버그를 찾는 눈’을 기르게 되더라고요. 단순히 에러를 수정하는 게 아니라, 왜 에러가 났는지, 어떤 흐름에서 꼬였는지 파악하는 능력이 생겼죠.
심지어 의도적으로 버그를 넣고, 친구한테 테스트하게 하기도 했어요. 그랬더니 진짜 게임같이 느껴졌어요. “이 버튼 왜 안 돼?” “거기서 잘못된 선택 했지롱~” 이런 식으로요 😆
🧱 기능은 하나씩 쌓아 올리면 된다, 절대 한 번에 만들 생각 말기!
탈출 게임이라는 게 막상 구조를 보면 되게 단순해요. 방이 있고, 아이템이 있고, 조건에 따라 문이 열리거나 안 열리죠. 근데 처음부터 그걸 다 한 번에 만들려고 하면 진짜 100% 포기합니다… 😓
제가 쓴 방식은, “기능 단위로 쪼개기 → 구현 → 붙이기” 이거였어요. 예를 들어, 첫 번째 기능은 ‘텍스트 변경’. 두 번째 기능은 ‘선택지 클릭 시 조건 분기’. 세 번째는 ‘아이템 줍기’. 이런 식으로요. 하나의 기능을 만들고 나면, 그걸 복사해서 다음 기능에 활용하면 되니까 점점 속도도 붙고, 응용도 쉬워졌어요.
이걸 마치 레고처럼 생각하면 돼요. 하나의 블록을 잘 만들어서 쌓아 올리면, 어느새 건물이 되는 거죠. 코딩도 그런 느낌이었어요. 결국 ‘하나하나 해보다 보면 전체가 된다’는 걸 처음으로 깨달았던 순간이기도 해요.
🕹 내가 만들고 싶은 게임이 뭔지 확실하면, 나머진 자연스럽게 따라온다
많은 사람들이 ‘뭘 만들어야 할지 모르겠다’고 하잖아요. 저도 그랬어요. 그래서 그냥 내가 하고 싶었던 게임을 떠올렸어요. 예전에 플래시로 했던 ‘좀비 방 탈출’ 같은 거. 방을 클릭하면 문이 열리고, 가끔 귀신이 튀어나오고, 그런 거요 😄
그 감정을 떠올리면서, 내가 만들고 싶은 장면을 하나씩 써봤어요. 예를 들어 “서랍을 열면 열쇠가 있다”, “벽에 이상한 문자가 적혀 있다” 이런 걸 메모장에 적어두고, 그걸 코드로 옮기기 시작했죠.
이렇게 되니까 동기부여도 생기고, 목적도 분명해지니까 기능을 더 붙이기도 쉬웠어요. 그냥 기술적으로 이걸 할 수 있다 해서 넣는 게 아니라, ‘이 장면을 구현하고 싶다’는 생각이 먼저였거든요. 이게 정말 중요해요.
📦 실제 소스코드 일부 공개 (단순 버전)
<!-- HTML 구조 -->
<div id="gameText">방 안이 어둡다. 뭔가 눌러보자.</div>
<button id="btn1">문 쪽으로 간다</button>
<button id="btn2">서랍을 연다</button>// JS 코드
document.getElementById('btn1').addEventListener('click', () => {
document.getElementById('gameText').innerText = '문은 잠겨 있다. 열쇠가 필요하다.';
});
document.getElementById('btn2').addEventListener('click', () => {
document.getElementById('gameText').innerText = '서랍 안에서 열쇠를 찾았다!';
});정말 단순하죠? 근데 이렇게만 해도 이미 ‘선택에 따라 상황이 바뀌는 구조’가 완성돼요. 여기에 이미지나 사운드 조금씩 붙이면 게임 같아지는 거예요!
🧭 마무리하며: ‘어설퍼도 되니까, 만들면 된다’는 자신감을 얻었어요
72시간 동안 만든 이 탈출 게임은 사실 디자인도 허술하고, 기능도 많지 않아요. 근데 제가 처음으로 직접 기획하고, 코드로 움직이는 무언가를 만든 경험이라 정말 소중해요. 그 안에서 배운 게 너무 많고, 제일 큰 건 ‘나도 만들 수 있다’는 자신감이에요.
만약 지금 이 글을 보고 있는 분이 개발을 시작하고 싶은데 너무 멀게 느껴진다면, 일단 버튼 하나부터 눌러보세요. ‘누르면 텍스트 바뀌는 거’ 그것부터가 시작이에요.
누구나 처음은 초보고, 버튼 하나로도 게임은 됩니다. 화려한 그래픽이나 멋진 로직보다, ‘무언가를 해냈다’는 경험이 가장 강력한 동기부여거든요 💪
그러니까 너무 고민 말고, 지금 바로 브라우저 열고 메모장 켜서 시작해보세요. 저도 그렇게 시작했거든요 😉🔥