윤석주, 인하우스 웹 프레임워크 Jul8 제작기, NDC2018

윤석주, 인하우스 웹 프레임워크 Jul8 제작기, NDC2018

윤석주, 인하우스 웹 프레임워크 Jul8 제작기, NDC2018 from devCAT Studio, NEXON

윤석주, 인하우스 웹 프레임워크 Jul8 제작기, NDC2018

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 )

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

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

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

23. 이런 느낌

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

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

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

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

28. 가능하면 심플하게

29. 이렇게 만들었습니다

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

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

32. 논리적인 요소 정의

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

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

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

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

37. 이런 형태가 될것

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

39. Jul7을 만들어보니

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

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

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

43. 사용법도 간단해짐

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

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

46. 만들어 보니 어땠나?

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

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

49. Jul8로 만들어보니

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

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

52. NYPC 대회 사이트

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

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

55. 정리

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

57. 추가로

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

59. 감사합니다.