메인 콘텐츠로 이동
Massively Fun 기발하고 즐거운 게임을 만드는 소규모 인디 스튜디오입니다. 게임 제작의 모든 과정을 투명하게 공유합니다.

이 사이트의 일부 링크는 제휴 링크입니다. 해당 링크를 통해 구매하실 경우 추가 비용 없이 소정의 수수료를 받을 수 있으며, 이는 추천 내용에 영향을 주지 않습니다. 자세한 내용은 제휴 공개 정책을 확인하세요. 제휴 마케팅 공개.

시애틀 게임 개발 JS: 되돌아보기와 앞으로 나아가기.

작성자: Massively Fun Learning Team ·

올해 1월, 저희 HTML5 게임 개발 그룹이 창립 1주년을 맞이했습니다. (정말 빨리 자라네요!) 이 이정표를 기념하며, 저희의 모든 회원과 후원자, 그리고 저희 모임을 지식으로 가득 찬 멋진 시간으로 만드는 데 도움을 주신 모든 분께 진심으로 감사하다는 말씀을 전하고 싶습니다!

올해는 작년보다 훨씬 더 기대됩니다. 시작부터 정전이 있었지만, Double Down 모바일 팀이 (전기가 없는 상황에서도!) HTML5 최적화에 대해 놀라운 복구 능력과 함께 프레젠테이션을 선보이며 멋지게 출발했습니다. 정말 한순간도 지루할 틈이 없었죠!

지난해 저희 그룹은 회원 수가 0명에서 380명으로 늘어나는 엄청난 성과를 거두었습니다! Game Dev JS 크루는 개발자, 아티스트, 게이머, 프로그램 매니저, 네트워크 관리자, 그리고 온갖 종류의 JS 애호가들로 구성된 다양성 넘치는 커뮤니티입니다. 가장 어린 개발자 회원은 겨우 13살입니다! 항상 신선한 콘텐츠를 유지하고, 연사들의 활기찬 강연과 회원들의 참여를 이끌어냄으로써 저희는 탄탄한 커뮤니티를 구축할 수 있었습니다. 여러분 없이는 불가능했을 일입니다!

JS에 관심이 있다면, 밋업은 즐거운 시간을 보내고, 새로운 것을 배우고, 자신이 아는 것을 공유하며, 매우 흥미로운 사람들을 만날 수 있는 좋은 기회입니다.

주요 내용

  • Seattle Game Dev JS는 강연, 라이트닝 데모, 해피아워의 조합을 통해 첫 해에 회원 수가 0명에서 380명으로 성장했습니다.
  • 그룹의 2012년 라인업은 렌더링, 캔버스 트릭, 오디오, 네이티브 래퍼, Windows 8, node.js 서버 아키텍처 등 HTML5 스택 전체를 아울렀습니다.
  • 이러한 커뮤니티가 작동하는 이유는 개발자, 아티스트, PM, 네트워크 관리자가 모두 한자리에 모이는 의도적인 다학제적(cross-disciplinary) 성격을 유지하기 때문입니다.
  • 밋업에서 가치를 얻는 가장 좋은 방법은 참석하여 질문하고, 결국에는 직접 무언가를 발표하는 것입니다.
  • 2013년 계획이 열려 있습니다. 여러분의 주제 아이디어, 장소 제안, 연사 지원을 기다립니다.

JavaScript 게임 개발 그룹이 중요한 이유

저희가 이 그룹을 시작했을 때, “HTML5 게임 개발”이라는 말은 여전히 많은 사람이 의구심을 갖고 쳐다보던 문구였습니다. <canvas> 요소는 초기 단계였고, 브라우저 성능은 일관되지 않았으며, JavaScript로 (기술 데모가 아닌) 실제 게임을 출시할 수 있다는 생각은 플랫폼이라기보다 일종의 신기한 구경거리로 취급되었습니다.

1년이 지난 지금, 그 대화는 완전히 바뀌었습니다. 이런 분야에서 지역 밋업이 중요한 이유는 문서화 속도가 현실을 따라가지 못하기 때문입니다. 블로그 게시물은 6개월 전에 유효했던 방법을 설명하고, 컨퍼런스 강연은 너무 다듬어져 추상적으로 변해버립니다. 실제로 개발자를 성장시키는 것은 지난주에 정확히 똑같은 문제를 해결한 사람 옆에 앉아 있는 것입니다. 특정 기기에서 버벅거리는 캔버스, 모바일에서 잠금 해제되지 않는 오디오 요소, 대규모 에셋 번들에서 멈춰버리는 빌드 파이프라인 같은 문제들 말이죠.

관련 항목: — Unity 프로젝트에 바로 적용할 수 있는 기성 아트, 도구 및 템플릿.

그것이 바로 Game Dev JS가 채워주는 간극입니다. 이곳은 강의 시리즈가 아닙니다. 모두가 문제 해결 과정 중에 있으며, 서로의 노트를 비교하는 사람들로 가득 찬 공간입니다.

2012년에 다룬 내용

지난 한 해 동안 다룬 내용은 다음과 같습니다.

  • Javascript Game Development: an Overview – Grant Goodale, Massively Fun
  • Retained Mode Graphics Libraries – Kevin Moore, Pixel Lab
  • Stupid Canvas Tricks – Dean Hudson, Massively Fun
  • HTML5 port of Zepto Labs’ Cut the Rope – Joel Fillmore, Pixel Lab
  • Challenges of building a native UIWebView application around an HTML5 webapp – Jeff Close, Adam Hardtke, Sean Stringer, and Nate Vaughn, DDI
  • Native wrapper technology: CocoonJS – Iker Jamardo, Ludei
  • HTML5 game development for Windows 8 – Giorgio Sardo, Microsoft
  • Game engine design around node.js and express.js – Dean Hudson and Mason Browne, Massively Fun
  • Co+Pilot: a tool built using Javascript and a JQuery like syntax to allow users to make native apps – Myron Millin and David Whitlark
  • Effective HTML5 Game Audio – Chris Khoo, Wappworks Studios

이 모든 주제와 더불어 그룹 회원들의 수많은 라이트닝 토크와 데모가 한 해 동안 진행되었습니다. 그리고 물론, 가끔씩 해피아워를 위해 모이기도 했죠!

쇼핑하는 경우: — 웹, 모바일 및 데스크탑으로 내보내는 브라우저 기반의 코드 없는 HTML5 엔진.

장소를 제공해 주신 Double Down Interactive, Big Fish Games, GameHouse, 그리고 The Makers Space에 특별히 감사드립니다!

강연 뒤에 숨겨진 테마

목록을 되돌아보면 몇 가지 명확한 흐름이 보입니다. 이는 모든 HTML5 개발자가 내려야 하는 결정들과 거의 정확히 일치하기 때문에 짚어볼 가치가 있습니다.

렌더링과 리테인드 모드(retained-mode) 문제. 리테인드 모드 그래픽 라이브러리에 대한 Kevin Moore의 강연과 Dean Hudson의 “Stupid Canvas Tricks”는 실제 아키텍처 선택지의 양 끝단에 위치합니다. 즉시 모드(Immediate-mode) 캔버스 그리기는 완전한 제어권과 최소한의 오버헤드를 제공하지만, 모든 다시 그리기를 직접 관리해야 합니다. 리테인드 모드 라이브러리(CreateJS, PixiJS, 그리고 이후의 Phaser 같은 프레임워크로 이어지는 계보)는 GPU와 사용자 사이에 추상화 계층을 두는 대신, 씬 그래프(scene graph), 히트 테스트(hit testing), 트위닝(tweening)을 기본으로 제공합니다. 어느 쪽이 “정답”인 것은 아닙니다. 정답은 여러분의 게임이 몇 개의 스프라이트로 구성되는지, 아니면 복잡한 상태를 가진 세계인지에 따라 달라집니다.

래퍼(wrapper) 문제. DDI의 UIWebView 세션, Iker Jamardo의 CocoonJS 프레젠테이션, 그리고 Co+Pilot까지 세 개의 개별 강연은 모두 동일한 질문을 다루었습니다. 바로 “웹 앱을 어떻게 앱 스토어에 올릴 것인가?”였습니다. 2012년 당시의 선택지는 대략 다음과 같았습니다.

접근 방식장점트레이드오프
일반 웹 앱마찰 제로, 즉각적인 업데이트스토어 입점 불가, 제한적인 기기 API
네이티브 WebView 래퍼스토어 배포 가능, 일부 네이티브 훅 활용성능 상한선, 네이티브 크롬(UI)과의 불일치
가속 래퍼 (예: CocoonJS)GPU 가속 캔버스, 네이티브에 가까운 속도벤더 종속성, 플랫폼별 특이 사항

특정 도구들은 발전했지만, 이 표는 오늘날에도 결정 내리는 방식을 생각하는 데 여전히 유용합니다.

오디오. 효과적인 HTML5 게임 오디오에 관한 Chris Khoo의 강연은 이 분야에서 가장 과소평가된 주제 중 하나였으며, 지금도 마찬가지입니다. 오디오는 웹 게임에서 가장 자주 문제가 발생하는 지점입니다. 자동 재생 정책, 코덱 지원 차이, 그리고 사용자 제스처와 실제 사운드 출력 사이의 지연 시간 등이 그것입니다. 지금 게임을 만들고 있다면 오디오에 충분한 시간을 할당하세요. 단순히 “파일 하나 넣으면 끝나는” 문제가 아닙니다.

관련 항목: — 게임 프로그래밍 서적, 기계식 키보드, 모니터 및 개발 데스크 하드웨어.

서버 측 JavaScript. node.js와 express.js를 활용한 게임 엔진 설계에 관한 Dean Hudson과 Mason Browne의 강연은 서버와 클라이언트가 언어를 공유할 수 있다는 초기 신호였습니다. 이는 생각보다 훨씬 중요합니다. 게임 상태 검증을 위한 코드 공유, 데이터 형식 공유, 그리고 스택 전체에 걸쳐 하나의 멘탈 모델을 유지할 수 있기 때문입니다.

모임을 최대한 활용하는 방법

이런 종류의 모임이 처음이시거나, 그동안 눈팅만 하다가 아직 참여하지 않으신 분들을 위해 실용적인 조언을 드립니다.

  • 구체적인 문제 하나를 가지고 오세요. “제 게임이 느려요”라고 하면 동정표를 얻겠지만, “스프라이트를 수백 개 이상 그릴 때 캔버스 프레임 드랍이 발생해요”라고 하면 답을 얻을 수 있습니다.
  • 발표자뿐만 아니라 옆에 있는 사람과도 대화하세요. 강연은 구실일 뿐이며, 진짜 가치는 복도에서 나누는 대화에 있습니다.
  • 라이트닝 토크를 해보세요. 자신이 배운 점에 대해 5분간 발표하는 것이 그룹 내에서 빠르게 이름을 알리는 가장 빠른 방법입니다. 전문가일 필요는 없습니다. 단 한 가지 문제라도 해결해 본 경험만 있으면 됩니다.
  • 후속 조치를 하세요. 연락처를 교환하고, 약속했던 링크나 코드 스니펫을 실제로 보내주세요.
  • 비개발자의 관점을 가져오세요. 아티스트, PM, 네트워크 관리자분들은 개발자가 잊어버리기 쉬운 질문을 던지며, 그런 질문들이 종종 그 자리에서 가장 유용한 질문이 됩니다.

지속 가능한 커뮤니티 구축하기

1년 만에 회원 수를 0명에서 380명으로 늘린 것은 겉보기 지표(vanity metric)처럼 들릴 수 있지만, 실제로 중요한 숫자는 유지율, 즉 얼마나 많은 사람이 다시 돌아왔느냐 하는 것입니다. 기술 커뮤니티를 활성화하며 배운 몇 가지 교훈은 다음과 같습니다.

우리의 선택: — Unity, Unreal, C++, C# 및 셰이더 프로그래밍을 다루는 주문형 과정.

  • 콘텐츠를 순환시키세요. 모든 모임이 초보자용 캔버스 튜토리얼뿐이라면 숙련된 멤버들이 오지 않게 됩니다. 반대로 모든 모임이 심층적인 GPU 최적화만 다룬다면 신입 멤버들을 잃게 됩니다. 개요, 심층 분석, 데모를 적절히 섞으세요.
  • 발표 장벽을 낮게 유지하세요. 라이트닝 토크와 멤버 데모는 부담을 낮춰주어, 정식 세션에는 절대 자원하지 않았을 사람들을 발굴해 줍니다.
  • 말 그대로, 먹을 것을 제공하세요. 해피아워와 함께 나누는 식사는 그 어떤 세밀한 일정 계획보다 커뮤니티 결속력에 더 큰 도움이 됩니다.
  • 호스트에게 공개적으로 감사하세요. Double Down Interactive, Big Fish Games, GameHouse, 그리고 The Makers Space는 우리에게 장소를 제공해 주었습니다. 장소 제공은 다른 모든 활동을 위한 화려하지 않지만 필수적인 전제 조건입니다.
  • 모든 연령과 배경에 열린 공간을 만드세요. 우리 그룹의 최연소 멤버는 13세입니다. 이는 단순히 신기한 일이 아니라, 이 분야의 진입 장벽이 이례적으로 낮다는 점을 상기시켜 주며, 그룹 또한 이를 반영해야 함을 의미합니다.

2013년을 기대하며

멋지지 않나요? 2013년에는 우리가 어떤 주제로 이야기하길 원하시나요? 어디서 만나고 싶으신가요?

저희가 궁금해하며 여러분의 의견을 기다리는 몇 가지 방향은 다음과 같습니다.

  • 모바일 성능 및 프로파일링 — 브라우저 개발자 도구와 기기 테스트를 통해 프레임 드랍 위치를 실제로 측정하는 방법.
  • 멀티플레이어 및 네트워킹 — WebSockets, 지연 시간 보상, 그리고 실시간 동기화의 까다로운 현실.
  • 툴링 및 워크플로 — 빌드 시스템, 에셋 파이프라인, 그리고 전담 툴 엔지니어 없이 소규모 팀이 제품을 출시하는 방법.
  • 물리 및 충돌 — 라이브러리를 사용할 때와 직접 구현해야 할 때.
  • 접근성 및 입력 — 키보드, 터치, 모션 컨트롤 플랫폼, 그리고 작업량을 두 배로 늘리지 않고 여러 플랫폼을 지원하는 방법.

아래에 아이디어를 답글로 남기거나 #GameDevJS 해시태그와 함께 @massivelyfun으로 트윗해 주세요. 곧 뵙겠습니다!

자주 묻는 질문

Seattle Game Dev JS란 무엇인가요?

JavaScript 및 HTML5 게임 개발에 관심 있는 분들을 위한 시애틀 지역 모임 그룹입니다. 개발자, 아티스트, 디자이너, 프로그램 매니저, 네트워크 관리자 및 일반 JS 애호가들이 모여 강연, 라이트닝 데모, 소셜 이벤트를 함께 합니다.

참석하려면 숙련된 개발자여야 하나요?

아니요. 이 그룹은 의도적으로 개요 강연과 심층 기술 분석을 섞어서 진행하며, 멤버 구성 또한 13세 취미 개발자부터 유명 스튜디오의 전문 엔지니어까지 다양합니다. JS 게임 개발에 관심이 있다면 누구나 환영합니다.

강연을 제안하거나 주제를 추천하려면 어떻게 해야 하나요?

이 포스트의 댓글로 남기시거나 #GameDevJS 해시태그와 함께 @massivelyfun으로 트윗해 주세요. 2013년을 위한 주제 아이디어, 장소 추천, 연사 지원을 적극적으로 기다리고 있습니다.

그룹에서는 어떤 주제를 다루나요?

지금까지는 렌더링 및 캔버스 기술, 그래픽 라이브러리, 네이티브 래퍼 및 앱 스토어 배포, HTML5 오디오, Windows 8 개발, node.js/express.js 서버 아키텍처 등을 다루었습니다. 앞으로는 모바일 프로파일링, 멀티플레이어 네트워킹, 툴링, 물리, 접근성 분야로 확장하고자 합니다.

모임 주최는 누가 하나요?

저희는 Double Down Interactive, Big Fish Games, GameHouse, 그리고 The Makers Space의 후원을 받았으며, 이들 모두에게 감사드립니다. 만약 귀하의 회사에 공간이 있고 지역 개발자 커뮤니티를 지원하고 싶으시다면, 언제든 연락해 주시기 바랍니다.

이 그룹은 게임만 다루는 그룹인가요?

중점은 게임에 있지만, 관련 기술은 일반적인 웹 및 앱 개발과 크게 겹칩니다. 캔버스 렌더링, 오디오 처리, 네이티브 래퍼(native wrappers), 그리고 node.js 아키텍처는 모두 게임 외의 분야에도 잘 적용됩니다. 저희 회원 중 많은 분이 게임이 아닌 프로젝트를 진행하고 있습니다.

공유하기: Twitter Facebook Google Pinterest Reddit

추가 읽을거리

Frequently asked questions

What is Seattle Game Dev JS?

It's a Seattle-area meetup group for people interested in JavaScript and HTML5 game development. It brings together developers, artists, designers, program managers, network admins, and general JS enthusiasts for talks, lightning demos, and social events.

Do I need to be an experienced developer to attend?

No. The group deliberately mixes overview talks with deep technical dives, and members range from a 13-year-old hobbyist to professional engineers at established studios. If you're curious about JS game development, you belong in the room.

How can I propose a talk or suggest a topic?

Reply in the comments on this post, or tweet @massivelyfun using the GameDevJS hashtag. We're actively looking for topic ideas, venue suggestions, and speaker pitches for 2013.

What kinds of topics does the group cover?

Historically: rendering and canvas techniques, graphics libraries, native wrappers and app-store distribution, HTML5 audio, Windows 8 development, and node.js/express.js server architecture. We're interested in expanding into mobile profiling, multiplayer networking, tooling, physics, and accessibility.

Who hosts the meetings?

We've been hosted by Double Down Interactive, Big Fish Games, GameHouse, and The Makers Space, and we're grateful to all of them. If your company has space and wants to support the local dev community, we'd love to hear from you.

Is this group only about games?

The focus is games, but the skills overlap heavily with general web and app development — canvas rendering, audio handling, native wrappers, and node.js architecture all apply well beyond games. Plenty of our members work on non-game projects. Share this: Twitter Facebook Google Pinterest Reddit <!-- citations:start --> Further reading - [HTML5](https://en.wikipedia.org/wiki/HTML5) — Wikipedia - [Canvas element](https://en.wikipedia.org/wiki/Canvas_element) — Wikipedia - [Node.js](https://en.wikipedia.org/wiki/Node.js) — Wikipedia - [Meetup (service)](https://en.wikipedia.org/wiki/Meetup_(serv

자신의 일정에 맞춰 게임 개발을 배워보세요

Unity, Unreal, C++, C# 및 셰이더 프로그래밍을 다루는 주문형 과정