Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

4

Share

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

Related Books

Free with a 30 day trial from Scribd

See all

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

  1. 1. 데브캣 스튜디오 낫게임팀 윤석주 인하우스 웹 프레임워크 Jul8 제작기 게임 운영툴에 정말 좋습니다
  2. 2. 발표자 소개 • 윤석주 ( @noricube ) • 9년차 서버 프로그래머 • 데브캣 스튜디오 낫게임팀 • 2012:서울, 퍼즐 주주 제작
  3. 3. 이야기 하려는 경험 • 데브캣 스튜디오 서버엔진팀 소속일때 • 기존에 있던 인하우스 웹 프레임워크 Jul7을 만든 이유와 • Jul8로 개선한 이야기
  4. 4. 시작하기 전에 • 웹 프레임워크 어떤 거 쓰세요? • 웹 개발을 처음 시작한다고 하면? • 아마 React, Angular, Vue.js
  5. 5. 툴을 만든다면? • 게임 운영툴 • 게임 제작에 필요한 도구들 • 게임 내부 페이지 • 아마 대부분 앞에 말한 React, Angular, Vue.js 중에 고를 것
  6. 6. 기존 웹 프레임워크 사용 이유 • 프레임워크 제작 시간이 필요 • 만들었다고 좋다는 보장 없음 • 그러니까 있는 것 쓰자
  7. 7. 저희는 직접 만들었습니다
  8. 8. 목차 • 왜 인하우스 웹 프레임워크를 직접 만들었나? • 직접 만들어보니 어땠는가? • 만든 프레임워크를 실제로 사용해보니 어땠는가?
  9. 9. 왜 인하우스 웹 프레임워크를 만들었나
  10. 10. 크게 두가지 이유 • 모던 웹 프레임워크를 썼을때 단점 • 직접 만들었을때 장점
  11. 11. 모던 웹 프레임워크를 썼을때 • 환경 구축이 어렵다 • 기술이 빠르게 변한다 • 러닝 커브가 길다
  12. 12. 환경 구축이 어렵다 • 기본 적인 환경 구축에 노하우가 필요함 • Webpack • 사용하는 라이브러리를 묶어줌 • Babel • 다른 언어를 변환 • 대부분 브라우저에서 사용 가능하게 ES6->ES5 변환
  13. 13. 구축한다고 끝이 아님 • Gulp, Browserify, Webpack • 환경도 대세가 빠르게 바뀜 • Webpack • 1년 마다 major version up • 대세가 된지 2년 정도
  14. 14. 기술이 빠르게 변한다 • 지금 핫 한 프레임워크? Vue.js, React • 5년전? AngularJS • React는 5년전에 • Vue.js는 4년전에 출시됨
  15. 15. 반면 게임 개발은? • 온라인 게임 • 바람의 나라 21년(!) • 마비노기 14년
  16. 16. 모바일은? • 모바일 게임 • 애니팡 6년 • 모두의 마블 5년
  17. 17. 5년 전에 툴을 만들었으면 • Angular v1으로 개발한 툴 • 지금 쓰는 사람도 상대적으로 적고 • 개발하려면 마이그레이션에 큰 비용 소요
  18. 18. 5년 뒤를 가정하면 • 우리가 선택하는 프레임워크 사용자가 없거나 • 있더라도 메이저 버전업을 16번 정도 했거나 • React v0.1 -> v16까지 5년!
  19. 19. 실제 사례 참고로 React 0.12는 2014년 10월에 출시 됨 @disjukr님 트위터 인용 ( https://twitter.com/disjukr/status/961615682419830784 )
  20. 20. 러닝 커브가 길다 • 모던 웹 프레임워크는 맥가이버 칼 같음 • 범용적으로 모든 상황에 사용 가능 • 웹 개발의 어려운 점을 많이 해결함
  21. 21. 기능이 많다 • 데이터 바인딩 • Virtual DOM으로 변경된 것만 추적 • 변수 watch • 그 외 많은 편의 기능들
  22. 22. 반대로 말하면 • 그만큼 알아야 하는 것도 많다 • 프레임워크에서 정해진 룰에 의존성이 큼
  23. 23. 이런 느낌
  24. 24. 직접 만들었을때 장점 • 필요한 기능만 넣을 수 있다 • 오랜 유지보수가 가능하도록 만들 수 있음 • 러닝 커브를 짧게 유지가능
  25. 25. 필요한 기능만 넣을 수 있다 • 필요한 최소한의 기능 구현 • HTML에 이벤트 바인딩 • 요소 객체화 • 리스트 객체 • 텍스트 템플릿 엔진
  26. 26. 오랜 유지보수 가능 • 오래 살아남은 라이브러리만 취사 선택 가능 • jQuery • 출시한지 12년 되었으며 • 경쟁자들(ProtoType, Jindo, …)에게서 살아남음
  27. 27. 러닝 커브를 짧게 유지 • 필요한 기능을 최소한으로 구현하고 • 알아보기 쉬운 문법으로 구현해서 • 누구나 1-2시간이면 코딩 할 수 있도록 제작
  28. 28. 가능하면 심플하게
  29. 29. 이렇게 만들었습니다
  30. 30. 개발 목표 • 템플릿 파일은 독립적으로 실행 되도록 • 작업도중 템플릿 파일만 열어서 확인 가능하도록 • 디자이너가 템플릿 파일만 수정해도 되도록
  31. 31. 개발 목표 • MFC 같은 프레임워크 • 논리적인 요소 정의 • 정의한 요소를 생성 • 이벤트를 바인딩 해서 사용
  32. 32. 논리적인 요소 정의
  33. 33. 논리적인 요소 정의 • data-templateId • 템플릿 요소를 정의 • data-controlId • 템플릿 요소에 속한 요소들을 정의
  34. 34. 생성 + 바인딩 템플릿 생성 초기화
  35. 35. 생성 + 바인딩 이벤트 바인딩
  36. 36. 예를들어 NYPC 사이트를 만든다면
  37. 37. 이런 형태가 될것
  38. 38. Jul7 • 템플릿 파일이 따로 분리 되어 있고 • 템플릿 요소를 생성해서 • 조립해서 웹 페이지를 쌓아 올리는 형태
  39. 39. Jul7을 만들어보니
  40. 40. 뭔가 아쉬움 • 코딩할때 템플릿 요소 이름을 알아야 되서 불편함 • 자동 완성이 됐으면 좋겠다 • 템플릿 파일 파싱해서 codegen 하면? • 객체를 생성하면 html요소도 자동 생성되도록 매핑
  41. 41. 그래서 Jul8을 만듬 • 위와 같은 템플릿을
  42. 42. Codegen으로 생성 • 위와 같은 템플릿을
  43. 43. 사용법도 간단해짐
  44. 44. 사용법도 간단해짐 객체 생성 + HTML 요소 생성
  45. 45. 해보니까 • 생산성 비약적으로 상승 • 더 이상 정의 찾으러 HTML을 볼 필요가 없다 • 템플릿 요소 생성도 new만 하면 됨!
  46. 46. 만들어 보니 어땠나?
  47. 47. 앞에 언급한 장점 극대화 • 러닝 커브가 짧아짐 • 웹을 처음 접하는 프로그래머도 15분만에 코딩 시작! • 디자이너, 퍼블리셔도 바로 이해하고 사용 • 오히려 vue.js보다 이게 훨씬 편하다고…
  48. 48. 앞에 언급한 장점 극대화 • 환경 셋팅도 단순함 • 파서 돌리고 컴파일 하는 것이 끝이라서 • 배치파일만 복사하면 설정 완료!
  49. 49. Jul8로 만들어보니
  50. 50. 3가지를 제작 • 운영툴 • NYPC 대회 사이트 • 비공개 프로젝트 프로토타입
  51. 51. 운영툴 • 웹을 처음 접해보는 게임 개발자도 예제만 보고 기능 추가 • 툴 기능에만 집중 할 수 있었음 • 일관성 있는 환경 제공이 강점
  52. 52. NYPC 대회 사이트
  53. 53. NYPC 대회 사이트 • NYPC 대회 진행시 문제 결과를 제출과 채점을 하는 사이트 • 실버바인서버 엔진과 결합하여 쉽게 사용(RPC) • 템플릿과 구현이 완전히 분리되어 있는 Jul8 덕을 많이 봄 • 디자이너는 다른 팀 소속, 비동기로 작업
  54. 54. 비공개 프로젝트 프로토타입 • Jul8로 만든 사이트 중에 제일 큰 규모였는데 • 두 달 동안 빠르게 프로토타이핑을 진행 가능했음 • 결과물도 만족스러웠고 신입 프로그래머도 교육 없이 바로 투입 • 모던 웹 프레임워크 기능이 필요한 부분이 있어 vue.js로 교체
  55. 55. 정리
  56. 56. 정리 • 직접 만든 프레임워크를 사용해서 • 러닝 커브를 짧게 유지하고 • 오래 유지보수 가능한 환경을 만들고 • 도구를 사용하여 개발환경을 개선하는 • 이런 환경에서 개발하는 것도 꽤 괜찮은 선택
  57. 57. 추가로
  58. 58. Jul8은 오픈소스입니다. • https://github.com/devcat-studio/Jul8 • 예제 코드와 파서 코드가 전부 공개되어 있습니다.
  59. 59. 감사합니다.
  • hcJung

    Oct. 21, 2018
  • juney1110

    Aug. 14, 2018
  • ssuser61ea31

    May. 22, 2018
  • ssuser7f5f2b

    May. 10, 2018

Views

Total views

3,116

On Slideshare

0

From embeds

0

Number of embeds

175

Actions

Downloads

0

Shares

0

Comments

0

Likes

4

×