DEVIEW2015 DAY1. 웹브라우저 감옥에서 살아남기

1. 웹 브라우저 감옥에서
살아남기
심규민
엔트리 교육 연구소

2. contents
1. Entry 소개
2. jQuery, Angular JS 적용 실패 사례
3. 게임 디자인 패턴의 적용
4. 웹소켓으로 구현한 웹과 하드웨어의 연결
5. What’s Next?

3. 1.
Entry 소개

4. 1.1 엔트리 소개
1. 프로그래밍 입문자를 위한 프로그래밍 교육 서비스
2. 텍스트 코딩 대신 비주얼 프로그래밍
3. HTML5 로 제작된 웹 서비스

5. 1.2 엔트리 시연
Entry 시연
(동영상)

6. 1.3 엔트리 구성
Canvas
SVG

7. 1.3 엔트리 구성
Interpreting
실시간 Interpreting
60fps

8. 1.3 엔트리 구성
엔트리 구현 특이 사항
1. 비주얼 프로그래밍 인터페이스로 구현 난이도 증가.
2. Loop 기반 Interpreter. 초당 60회 업데이트로 클라이언트 연산량 높음.
3. 잦은 화면 업데이트, Redraw

9. 2.
jQuery,
Angular JS
적용 실패 사례

10. 2.1 jQuery, Angular JS
Exception
jQuery 나 Angular JS 같은 라이브러리도 쓰면 안될 곳이 있다!

11. 2.1 jQuery
Selector
$(“#id .class”)
jQuery Selector.
jQuery Selector로 Dom 을 조작하는 경우가 많음.
Selector 사용시 jQuery 의 sizzle 라이브러리가 Dom 을 탐색하며 해당하는 Element를
찾게 됨.

12. 2.1 jQuery
극한 상황 – Dom Element 수 증가
document.getElementsByTagName('*').length
1000~1300
Element
1300 ~ 7000
Element

13. 2.1 jQuery
초당 몇 개의 Dom Element 를 찾아야 할까?
(Dom Element 1300 ~ 7000) * (60fps) * (5~20 object) * (1~10 block)
= 390,000 ~ 84,000,000 Dom / sec
∴ Dom 이 복잡하고 업데이트가 잦은 상황에서는 jQuery Selector 를 거의 사용할 수 없다.

14. 2.1 jQuery
결론
$(“#id .class”)
jQuery Selector 로 Dom Element 를 가져오는 행위는 줄이는 것이 좋다.
Dom Element Object를 js 코드가 참조하고 있어야 한다.

15. 2.2 Angular JS
$watch
$watch $apply $digest
Angular 에서는 2-way binding 으로 매우 편리하게 Dom 과 Data 를 연동할 수 있다.
$digest loop 에서는 $watch list 에 있는 모델 변경을 dirty-check 한다.

16. 2.2 Angular JS
극한 상황 – 비대한 모델의 잦은 변화
(60fps) * (5~20 object) * (10 ~ 20 property per object) * (1~10 block)
= 3,000 ~ 240,000 check / sec
모델 변화가 잦고 많은 상황에서 Angular 페이지는 극도로 느려짐.
Angular 의 가장 큰 문제는 이 모든 모델 변화를 Dirty-checking 한다는 점.
또한 Dom 업데이트를 제어할 수 없어 일정 이상의 최적화가 불가능.

17. 2.3 대안
편리함에는 대가가 따른다.
View Class 가 Dom Element 를 항상 property로 가지고 있도록 구현.
Model Object 를 구현하고, getter setter를 만들어 observer 구현.
최대 5~10배까지의 속도 개선을 얻을 수 있었다.
독자 개발

18. 2.3 대안
Model
Observe
Model
Change
Notify View Update
Model
View
Model
View
Model
View
Model
View
Observe Notify
Change

19. 2.3 대안

20. 2.3 대안

21. 2.3 대안
JS Setter & Getter Tip
Javascript getter & setter.
obj.a = 2;
위와 같은 데이터 대입에도 Setter 함수 발동.
Setter 를 통하지 않고 데이터를 수정하는 상황을
미연에 방지.

22. 3.
게임 디자인 패턴을
이용한 웹개발

23. 3.1 개발 난항
Entry 응용 미션
개발 기간 3주
30단계의 미션형 교육 콘텐츠
상호작용이 필요한 요소들

24. 3.1 개발 난항
Issue
1. 새로운 기능을 추가할 때 마다 기존 코드 변경 필요.
2. 점점 더 복잡해져 가는 구조.
3. 출시 전까지 날이면 날마다 변하는 기획.
4. 다가오는 개발 기한.
어떻게 하면 효율적으로 대처할 수 있을까?

25. 3.1 개발 난항
Silver bullet
가장 복잡한 서비스 중 하나인 MMORPG.
수많은 요소들이 존재하는 게임에서는 어떻게 구현하고 있을까?
복잡한 웹 앱에도 게임 디자인 패턴을 사용하면 도움이 되지 않을까?

26. 3.2 Entity Component System
Design Pattern
각각의 Entity(객체) 는 Component(기능) 를 갖는다.
새로운 기능이 생기면 새로운 Component 를 개발하면 된다.
Entity 에 기능을 추가하고 싶다면 Component 를 추가하면 된다.
예 ) 마린은 그래픽, 체력, 공격, 소리, 이동 컴포넌트를 가지고 있다.
메딕은 그래픽, 체력, 치료, 소리, 이동 컴포넌트를 가지고 있다.
바위는 그래픽 컴포넌트를 가지고 있다.

27. 3.2 Entity Component System
Model Controller View
Canvas Object Dom ElementInterpreter Physics Animator
Collision
Detector
Collision
Detector
Space
Ship
Sound
Space
Ship
Crash
Failure
Meteo
Unit
Obstacle
Popup
User
Entity

28. 3.2 Entity Component System
Component
Update
Entity
Update
실행시 Entity 와
Entity 의 Component 를
Update 한다.
Entity 간의 데이터 교환은
메시지 통신을 통해 이루어진다.

29. 3.2 Entity Component System
장점
1. 추가적인 기능 추가가 매우 쉬웠다.
기존 코드를 고려해야 할 필요가 적고 꼭 필요한 부분만 작성하면 된다.
2. 기능들이 명확하게 분리되어 코드가 명확해진다.
프로그램이 비대해져도 일정 이상 복잡해지지 않는다.
코드간의 연관성이 적어져 에러 발생 시 문제의 출처가 명확하다.

30. 3.2 Entity Component System
단점
1. 초기에 들여야 하는 개발 공수가 존재한다.
Entity Component System 구현을 위한 공수가 필요하다.
2. 가장 최적화된 형태의 구현은 아니다.
Update loop 동작 시 모든 Entity 의 Update 를 실행함으로써 비효율이 존재한다.

31. 4.
웹소켓으로 구현한
웹과 하드웨어의 연결

32. 4.1 하드웨어 연결?
Issue
1. 하드웨어 교구를 통한 교육을 위해 하드웨어 장치와 Entry를 연동해야 했다.
2. 하드웨어 교구는 보통 Arduino 같은 마이크로 컴퓨터로, USB를 통한 Serial 통신으로
컴퓨터와 연결된다.
3. 웹 브라우저는 자바스크립트가 USB 같은 시스템 자원에 접근하는 것을 허용하지 않는다.
4. ????????

33. 4.1 하드웨어 연결?
Aleternative
1. 각 OS별 Entry 네이티브 프로그램을 만들어서 하드웨어 장치를 지원?
개발 시간도 오래 걸리고 웹 서비스의 장점을 잃는다.
2. 웹 페이지에서 하드웨어 펌웨어를 코딩한 뒤 사용자가 업로드?
엔트리가 아니게 된다.
3. 브라우저 별 별도 플러그인?
ActiveX? NPAPI? Chrome Extension?
웹 표준이 아닌데다가 구현도 모두 별도로 해야 한다.

34. 4.1 하드웨어 연결?
Hint
1. Javascript 코드가 컴퓨터의 localhost 에 접근할 수 있다.
2. 누군가 하드웨어 장치의 신호를 localhost 어딘가에 접속했을 때 보내준다면?
3. 하드웨어 장치의 신호를 미러링 하는 프로그램을 만들자!

35. 4.2 Entry Hardware Solution
Outline
WebSocket USB Serial
Entry Web App Entry Local Server
(node-webkit)
HW Device
Http polling
(Byte Array)(JSON)

36. 4.1 하드웨어 연결?
Entry Web App
1. localhost:23518 으로 Web Socket Connection 을 연다.
2. 연결 성공시 JSON 형식의 데이터를 주고 받는다.
Input: {
Analog1: 255,
Analog2: 124,
Digital1: true,
…
}
Output: {
portA: 255,
portB: 0,
…
}

37. 4.1 하드웨어 연결?
HW Connect Server
1. 컴퓨터에 연결된 하드웨어 장치를 탐색하고, 연결을 체결한다.
2. 웹소켓 서버를 열고, 엔트리 웹앱의 요청을 받는다.
3. 웹소켓 커넥션이 열리면 하드웨어와 엔트리간의
데이터를 미러링한다.

38. 4.1 하드웨어 연결?
HW Firmware
1. 컴퓨터와의 Serial 통신을 연다.
2. Serial 통신이 열리면 1초에 60번씩 센서값을 읽어 보낸다.
3. Serial 통신을 통해 출력값이 도착하면 하드웨어의 Actuator에
값을 준다.

39. 4.3 엔트리 하드웨어 교구 시연
Entry 시연
(동영상)

40. 4.4 local network 를 통한 플러그인
Result
1. 웹소켓을 통해 성공적으로 하드웨어 디바이스를 연결할 수 있었다.
2. 20ms 내외의 반응 속도로 하드웨어 장치와 통신할 수 있었고, Websocket 이나 Serial
에서 주목할만한 병목은 없었다.
3. 무설치형 연결 프로그램으로 교육 환경에서도 적용가능했다.
4. 로컬 네트워크를 통한 플러그인을 다른 사례에도 적용할 수 있을 것이다.

41. 5.
What’s Next?

42. 5.1 코드 분석
Code Analysis
1. 학생들이 작성한 코드를 분석하여 평가해주는 시스템 제작.
2. 학생들이 만드는 프로젝트의 유형을 분석하여 관심있는 교육 컨텐츠 추천.
3. 전체 서비스의 프로젝트들을 분석하여 교육적으로 의미있는 연구 결과 도출.
Analyze

43. 5.2 실시간 LMS
Real-Time Lecture Management System
1. Google Docs 처럼 실시간으로 프로젝트를 동시 편집 가능하게 개발.
2. 수업 도중에 선생님이 자리를 뜨지 않고 학생들의 학습을 관찰, 도움 가능.
3. 코드 분석 시스템과 결합하여 학생들에게 좀 더 능동적인 교육 제공

44. Q&A

45. Thank You