1. 데브캣 스튜디오 낫게임팀
윤석주
인하우스 웹 프레임워크 Jul8 제작기
게임 운영툴에 정말 좋습니다

2. 발표자 소개
• 윤석주 ( @noricube )
• 9년차 서버 프로그래머
• 데브캣 스튜디오 낫게임팀
• 2012:서울, 퍼즐 주주 제작

3. 이야기 하려는 경험
• 데브캣 스튜디오 서버엔진팀 소속일때
• 기존에 있던 인하우스 웹 프레임워크 Jul7을 만든 이유와
• Jul8로 개선한 이야기

4. 시작하기 전에
• 웹 프레임워크 어떤 거 쓰세요?
• 웹 개발을 처음 시작한다고 하면?
• 아마 React, Angular, Vue.js

5. 툴을 만든다면?
• 게임 운영툴
• 게임 제작에 필요한 도구들
• 게임 내부 페이지
• 아마 대부분 앞에 말한 React, Angular, Vue.js 중에 고를 것

6. 기존 웹 프레임워크 사용 이유
• 프레임워크 제작 시간이 필요
• 만들었다고 좋다는 보장 없음
• 그러니까 있는 것 쓰자

7. 저희는 직접 만들었습니다

8. 목차
• 왜 인하우스 웹 프레임워크를 직접 만들었나?
• 직접 만들어보니 어땠는가?
• 만든 프레임워크를 실제로 사용해보니 어땠는가?

9. 왜 인하우스 웹 프레임워크를
만들었나

10. 크게 두가지 이유
• 모던 웹 프레임워크를 썼을때 단점
• 직접 만들었을때 장점

11. 모던 웹 프레임워크를 썼을때
• 환경 구축이 어렵다
• 기술이 빠르게 변한다
• 러닝 커브가 길다

12. 환경 구축이 어렵다
• 기본 적인 환경 구축에 노하우가 필요함
• Webpack
• 사용하는 라이브러리를 묶어줌
• Babel
• 다른 언어를 변환
• 대부분 브라우저에서 사용 가능하게 ES6->ES5 변환

13. 구축한다고 끝이 아님
• Gulp, Browserify, Webpack
• 환경도 대세가 빠르게 바뀜
• Webpack
• 1년 마다 major version up
• 대세가 된지 2년 정도

14. 기술이 빠르게 변한다
• 지금 핫 한 프레임워크? Vue.js, React
• 5년전? AngularJS
• React는 5년전에
• Vue.js는 4년전에 출시됨

15. 반면 게임 개발은?
• 온라인 게임
• 바람의 나라 21년(!)
• 마비노기 14년

16. 모바일은?
• 모바일 게임
• 애니팡 6년
• 모두의 마블 5년

17. 5년 전에 툴을 만들었으면
• Angular v1으로 개발한 툴
• 지금 쓰는 사람도 상대적으로 적고
• 개발하려면 마이그레이션에 큰 비용 소요

18. 5년 뒤를 가정하면
• 우리가 선택하는 프레임워크 사용자가 없거나
• 있더라도 메이저 버전업을 16번 정도 했거나
• React v0.1 -> v16까지 5년!

19. 실제 사례
참고로 React 0.12는 2014년 10월에 출시 됨
@disjukr님 트위터 인용
( https://twitter.com/disjukr/status/961615682419830784 )

21. 러닝 커브가 길다
• 모던 웹 프레임워크는 맥가이버 칼 같음
• 범용적으로 모든 상황에 사용 가능
• 웹 개발의 어려운 점을 많이 해결함

22. 기능이 많다
• 데이터 바인딩
• Virtual DOM으로 변경된 것만 추적
• 변수 watch
• 그 외 많은 편의 기능들

23. 반대로 말하면
• 그만큼 알아야 하는 것도 많다
• 프레임워크에서 정해진 룰에 의존성이 큼

24. 이런 느낌

25. 직접 만들었을때 장점
• 필요한 기능만 넣을 수 있다
• 오랜 유지보수가 가능하도록 만들 수 있음
• 러닝 커브를 짧게 유지가능

26. 필요한 기능만 넣을 수 있다
• 필요한 최소한의 기능 구현
• HTML에 이벤트 바인딩
• 요소 객체화
• 리스트 객체
• 텍스트 템플릿 엔진

27. 오랜 유지보수 가능
• 오래 살아남은 라이브러리만 취사 선택 가능
• jQuery
• 출시한지 12년 되었으며
• 경쟁자들(ProtoType, Jindo, …)에게서 살아남음

28. 러닝 커브를 짧게 유지
• 필요한 기능을 최소한으로 구현하고
• 알아보기 쉬운 문법으로 구현해서
• 누구나 1-2시간이면 코딩 할 수 있도록 제작

29. 가능하면 심플하게

30. 이렇게 만들었습니다

31. 개발 목표
• 템플릿 파일은 독립적으로 실행 되도록
• 작업도중 템플릿 파일만 열어서 확인 가능하도록
• 디자이너가 템플릿 파일만 수정해도 되도록

33. 개발 목표
• MFC 같은 프레임워크
• 논리적인 요소 정의
• 정의한 요소를 생성
• 이벤트를 바인딩 해서 사용

34. 논리적인 요소 정의

35. 논리적인 요소 정의
• data-templateId
• 템플릿 요소를 정의
• data-controlId
• 템플릿 요소에 속한 요소들을 정의

36. 생성 + 바인딩
템플릿 생성
초기화

37. 생성 + 바인딩
이벤트 바인딩

38. 예를들어 NYPC 사이트를
만든다면

46. 이런 형태가 될것

47. Jul7
• 템플릿 파일이 따로 분리 되어 있고
• 템플릿 요소를 생성해서
• 조립해서 웹 페이지를 쌓아 올리는 형태

48. Jul7을 만들어보니

49. 뭔가 아쉬움
• 코딩할때 템플릿 요소 이름을 알아야 되서 불편함
• 자동 완성이 됐으면 좋겠다
• 템플릿 파일 파싱해서 codegen 하면?
• 객체를 생성하면 html요소도 자동 생성되도록 매핑

50. 그래서 Jul8을 만듬
• 위와 같은 템플릿을

51. Codegen으로 생성
• 위와 같은 템플릿을

52. 사용법도 간단해짐

53. 사용법도 간단해짐
객체 생성
+ HTML 요소 생성

54. 해보니까
• 생산성 비약적으로 상승
• 더 이상 정의 찾으러 HTML을 볼 필요가 없다
• 템플릿 요소 생성도 new만 하면 됨!

56. 만들어 보니 어땠나?

57. 앞에 언급한 장점 극대화
• 러닝 커브가 짧아짐
• 웹을 처음 접하는 프로그래머도 15분만에 코딩 시작!
• 디자이너, 퍼블리셔도 바로 이해하고 사용
• 오히려 vue.js보다 이게 훨씬 편하다고…

58. 앞에 언급한 장점 극대화
• 환경 셋팅도 단순함
• 파서 돌리고 컴파일 하는 것이 끝이라서
• 배치파일만 복사하면 설정 완료!

59. Jul8로 만들어보니

60. 3가지를 제작
• 운영툴
• NYPC 대회 사이트
• 비공개 프로젝트 프로토타입

61. 운영툴
• 웹을 처음 접해보는 게임 개발자도 예제만 보고 기능 추가
• 툴 기능에만 집중 할 수 있었음
• 일관성 있는 환경 제공이 강점

62. NYPC 대회 사이트

63. NYPC 대회 사이트
• NYPC 대회 진행시 문제 결과를 제출과 채점을 하는 사이트
• 실버바인서버 엔진과 결합하여 쉽게 사용(RPC)
• 템플릿과 구현이 완전히 분리되어 있는 Jul8 덕을 많이 봄
• 디자이너는 다른 팀 소속, 비동기로 작업

64. 비공개 프로젝트 프로토타입
• Jul8로 만든 사이트 중에 제일 큰 규모였는데
• 두 달 동안 빠르게 프로토타이핑을 진행 가능했음
• 결과물도 만족스러웠고 신입 프로그래머도 교육 없이 바로 투입
• 모던 웹 프레임워크 기능이 필요한 부분이 있어 vue.js로 교체

65. 정리

66. 정리
• 직접 만든 프레임워크를 사용해서
• 러닝 커브를 짧게 유지하고
• 오래 유지보수 가능한 환경을 만들고
• 도구를 사용하여 개발환경을 개선하는
• 이런 환경에서 개발하는 것도 꽤 괜찮은 선택

67. 추가로

68. Jul8은 오픈소스입니다.
• https://github.com/devcat-studio/Jul8
• 예제 코드와 파서 코드가 전부 공개되어 있습니다.

69. 감사합니다.