Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
HTML5/WebSocket으로
Pong 게임 만들기
iFunfactory
민영기
2018 iFunFactory Dev Day
Contents.
01 웹 게임의 과거와 현재
02 Pong
03 Pong 을 위한 네트워킹 기술
04 Pong 을 위한 클라이언트 기술
2018 iFunFactory Dev Day
웹 게임의 과거와 현재
01
2018 iFunFactory Dev Day
2018 iFunFactory Dev Day
옛날 옛적 웹 게임은…
서버 사이드 구현
• 서버 기반 렌더링
• 정적인 컨텐츠 위주
• 제한적인 상호작용
플러그인
OR
2018 iFunFactory Dev Day
출처: http://news.inews24.com/php/news_view.php?g_serial=1083844&g_menu=020500
출처: https://www.hung...
2018iFunFactoryDevDay
2018 iFunFactory Dev Day
•HTTP
• 전이중(full-duplex) 통신 불가
• Server push 불가
•HTML/javascript
• Markup l...
2018iFunFactoryDevDay
2018 iFunFactory Dev Day
•브라우저에서 플레이 가능
•순수 웹 기술만 사용
•유저간 실시간 동기화 지원
•되도록 간단한 게임을 제작
백문이 불여일작(作)
2018 iFunFactory Dev Day
Pong
02
2018iFunFactoryDevDay
2018 iFunFactory Dev Day
2018iFunFactoryDevDay
2018 iFunFactory Dev Day
•1972년 아타리에서 개발
•최초로 상업적으로 성공한 비디오 게임
•탁구와 비슷한 대전 게임
Pong
2018iFunFactoryDevDay
2018 iFunFactory Dev Day
게임 화면
2018iFunFactoryDevDay
2018 iFunFactory Dev Day
•공이 자신의 뒤로 나가면 상대가 점수 획득
•블록을 조작, 공을 상대에게 보내야 함
•지정된 점수를 먼저 얻는 쪽이 승리
규칙
2018iFunFactoryDevDay
2018 iFunFactory Dev Day
•게임의 상태
• 게임 중/종료, 점수, etc…
• 느슨한 동기화 가능.
•블록의 위치
•공의 위치
동기화 대상 후보
2018iFunFactoryDevDay
2018 iFunFactory Dev Day
•블록의 위치
• 일정 주기마다 자신의 블록 위치 전송
•공의 위치
• 기본적으로 동기화하지 않음
• 방향 변경 이벤트만 동기화, 그 ...
2018 iFunFactory Dev Day
Pong 을 위한 네트워크 기술
03 토폴로지
2018iFunFactoryDevDay
2018 iFunFactory Dev Day
네트워크 토폴로지
Browser Browser
P2P
Browser Browser
Sever
Client-Sever
2018iFunFactoryDevDay
2018 iFunFactory Dev Day
•모든 통신은 간접적 형태로 이루어짐
• href(링크), XmlHttpRequest(Ajax), …
• TCP 및 이하 레이어로 접근...
2018 iFunFactory Dev Day
Pong 을 위한 네트워크 기술
03 서버 Push
2018iFunFactoryDevDay
2018 iFunFactory Dev Day
•Req/Resp 가 아닌, Svr push 가 필요
•가능한 가볍고 빨라야 함
•브라우저에서 사용 가능해야 함
Pong 을 위한 네트...
2018iFunFactoryDevDay
2018 iFunFactory Dev Day
•HTTP
• HTTP functions as a request–response protocol in the client–server
...
2018iFunFactoryDevDay
2018 iFunFactory Dev Day
•속도 향상을 목표로 한 신규 HTTP
• 다중 stream
• 헤더 압축
•스펙에 PUSH 가 있으나…
HTTP/2
2018iFunFactoryDevDay
2018 iFunFactory Dev Day
•서버가 원할 때 메세지를 보낼 수 없음
• 브라우저가 요청하지 않은 리소스 전송(O)
• 브라우저 요청 없이 메세지 전송(X)
•브라...
2018iFunFactoryDevDay
2018 iFunFactory Dev Day
•PLUG-IN
• TCP socket 으로, 네이티브 어플리케이션처럼 통신
• 보안 문제등으로 사장되어 가고 있음
웹에서의 Serve...
2018iFunFactoryDevDay
2018 iFunFactory Dev Day
Long Polling
브라우저 서버
1. Push 받기
위해 요청 전송
2. Push할 데이터가
있을 때까지
대기
3. 1의 응답으로...
2018iFunFactoryDevDay
2018 iFunFactory Dev Day
•통신 빈도 증가
• 브라우저는 서버로 보낼 것이 없더라도
푸시를 받기 위해 항상 요청을 보내야 함
•통신 딜레이 증가
• 보낼 것이 ...
2018 iFunFactory Dev Day
Pong 을 위한 네트워크 기술
03 WebSocket & Socket.IO
2018iFunFactoryDevDay
2018 iFunFactory Dev Day
•Web 상에서 full-duplex 통신을 지원하는 규약
•TCP 이용
•HTTP로 통신하지 않음
•TLS 를 이용한 암호화 지원
W...
2018iFunFactoryDevDay
2018 iFunFactory Dev Day
WebSocket Handshake
1. HTTP->WebSocket
업그레이드 요청
2. WebSocket 사용
/사용 불가 알림
브...
2018iFunFactoryDevDay
2018 iFunFactory Dev Day
•TCP / Datagram 기반 프로토콜
•Text/Binary 모두 전송 가능
•각 메세지는프레임으로 나뉘어 전달
•각 프레임마다 ...
2018iFunFactoryDevDay
2018 iFunFactory Dev Day
• 프레임 헤더 크기 외의 overhead 는 없음
• 전송할 데이터의 크기에 따라 헤더 크기가 달라짐
• 크게 신경쓰지 않아도 될 수...
2018iFunFactoryDevDay
2018 iFunFactory Dev Day
•TLS 사용 시 메시지마다 TLS 레코드 생성
•비교적 메세지 사이즈가 작아도 tcp segement 생성
Websocket Over...
2018iFunFactoryDevDay
2018 iFunFactory Dev Day
•생성 및 연결
• var sock = new WebSocket(‘ws://{url}’);
•전송
• sock.send(msg);
•이...
2018iFunFactoryDevDay
2018 iFunFactory Dev Day
•대부분의 브라우저가 지원
Websocket 지원 브라우저
2018iFunFactoryDevDay
2018 iFunFactory Dev Day
•웹상에서 실시간 통신을 지원하는 프레임워크
•다양한 언어로 구현체 존재
• Javascript, Java, C++ 등
•다양한 통신 ...
2018iFunFactoryDevDay
2018 iFunFactory Dev Day
•독자적인 프로토콜을 사용
•단순 Websocket 서버/클라와 호환 불가
•독자적인 url 형식 사용
Socket.IO
2018iFunFactoryDevDay
2018 iFunFactory Dev Day
•WebSocket 사용시에도 overhead 존재
• 별도의 프로토콜(=헤더) 존재
• 별도의 handshake 과정 존재
Socke...
2018 iFunFactory Dev Day
Socket.IO WebSocket
2018iFunFactoryDevDay
2018 iFunFactory Dev Day
•연결 끊김 시 재연결 지원
• 하지만 재전송은 지원하지 않음
•WebSocket 없이도 실시간 통신 가능
• 하지만 대부분의 브라우저...
2018iFunFactoryDevDay
2018 iFunFactory Dev Day
•스트리밍, 문서 협업(동시 편집 등) 기능 지원
• 게임에 필요한 것은 event 전파
•게임에 필수적인 추가기능은 없는 듯?
• 반...
2018iFunFactoryDevDay
2018 iFunFactory Dev Day
PONG 네트워크 토폴로지
Browser Browser
Sever
WebSocket
WebSocketWebSocket
2018 iFunFactory Dev Day
Pong 을 위한 네트워크 기술
03 Server
2018iFunFactoryDevDay
2018 iFunFactory Dev Day
•Websocket 을 지원할 것
•그 외는 다른 게임 서버 요구 사항과 같음
Pong 서버용 기술
2018iFunFactoryDevDay
2018 iFunFactory Dev Day
•대부분의 웹서버 기술에서 Websocket 지원
• 웹 이외의 기술에서도 지원하는 경우 많음
•지원하는 웹 서버
•Apache, II...
2018iFunFactoryDevDay
2018 iFunFactory Dev Day
•Python/Flask/Flask-sockets
•사용 편이성 고려
•HTTP 처럼 Websocket 사용 가능
Pong 서버
2018iFunFactoryDevDay
2018 iFunFactory Dev Day
Pong 네트워크 토폴로지
Browser Browser
Sever(Python, flask)
WebSocket
WebSocket Web...
2018 iFunFactory Dev Day
Pong 을 위한 클라이언트 기술
04 HTML & HTML5
2018iFunFactoryDevDay
2018 iFunFactory Dev Day
•Markup language
• 화면에 어떻게 표시될지는 브라우저 해석대로
•Layout 및 Layering 의 어려움
•Sound ...
2018iFunFactoryDevDay
2018 iFunFactory Dev Day
•<canvas>
• 직접 ‘그릴’ 수 있는 영역
•<audio>
• mp3/ogg 등의 사운드 플레이 지원
•local storage...
2018 iFunFactory Dev Day
그러나
2018 iFunFactory Dev Day
지금이 어느 시대인데…
2018 iFunFactory Dev Day
Pong 을 위한 클라이언트 기술
04 HTML5 Game Engine
2018iFunFactoryDevDay
2018 iFunFactory Dev Day
•Unity Webgl
• 모바일 지원 미비
• https://docs.unity3d.com/Manual/webgl-browsercom...
2018 iFunFactory Dev Day
HTML5 Game Engine
2018iFunFactoryDevDay
2018 iFunFactory Dev Day
•네트워크 기능은 거의 제공하지 않음
•통합 개발 환경 제공하는 엔진도 존재
• 백로 엔진
• https://egret.com/en/
...
2018iFunFactoryDevDay
2018 iFunFactory Dev Day
•Phaser
• 2D 게임 엔진
• 물리엔진, 카메라, scene 관리 등 cocos2d 와 유사한 기능 제공
• 문서화가 잘 되어 ...
2018iFunFactoryDevDay
2018 iFunFactory Dev Day
Browser
Browser
Sever(Python, flask)
WebSocketHTML5
Phaser
WebSocket
Pong 기...
2018iFunFactoryDevDay
2018 iFunFactory Dev Day
PONG 구조
Sever
(Python, flask)
Room
(Game)
Lobby
Browser
HTTP
WebScoket
2018iFunFactoryDevDay
2018 iFunFactory Dev Day
Demo
https://github.com/iFunFactory/pong-webscoket
2018iFunFactoryDevDay
2018 iFunFactory Dev Day
•웹 기술만으로 멀티플레이 게임 동기화 구현 가능
•HTML5로 동적인 게임 제작 가능
•게임 개발 지원 툴도 발전 중
정리
2018iFunFactoryDevDay
2018 iFunFactory Dev Day
•보안
• 브라우저에서 구동하려면 소스 암호화 불가능
• 난독화 필요
• 중요한 로직은 서버에서 구현, 혹은 검증을 통해 공격 방어 필...
Q&A
2018 iFunFactory Dev Day
2018 iFunFactory Dev Day
Thank You!
경기도 성남시 분당구 대왕판교로 660, 유스페이스1 B동 606호 아이펀팩토리
info@ifunfac...
Nächste SlideShare
Wird geladen in …5
×

[아이펀팩토리] 2018 데브데이 서버위더스 _01 HTML5/WebSocket으로 Pong 게임 만들기

793 Aufrufe

Veröffentlicht am

2018 아이펀팩토리 데브데이 서버위더스
(iFunFactory DevDay Server,Withus)

제목 : HTML5 / WebSocket으로 Pong 게임 만들기
발표자 : 민영기 테크니컬 디렉터
일정 : 2018년 03월 28일
개요 : HTML5 / Websocket을 이용하여 브라우저 상에서 동작하는 실시간 대전 게임 'Pong'을 구현해 보며 마주치는 문제점들과 해결책을 알아봅니다

아래링크를 통해 아이펀팩토리의 더 많은 정보를 얻으실 수 있습니다.
*아이펀팩토리 홈페이지 : https://ifunfactory.com/
*아이펀팩토리 기술 블로그 : https://blog.ifunfactory.com/

Veröffentlicht in: Technologie
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier

[아이펀팩토리] 2018 데브데이 서버위더스 _01 HTML5/WebSocket으로 Pong 게임 만들기

  1. 1. HTML5/WebSocket으로 Pong 게임 만들기 iFunfactory 민영기
  2. 2. 2018 iFunFactory Dev Day Contents. 01 웹 게임의 과거와 현재 02 Pong 03 Pong 을 위한 네트워킹 기술 04 Pong 을 위한 클라이언트 기술
  3. 3. 2018 iFunFactory Dev Day 웹 게임의 과거와 현재 01
  4. 4. 2018 iFunFactory Dev Day
  5. 5. 2018 iFunFactory Dev Day 옛날 옛적 웹 게임은… 서버 사이드 구현 • 서버 기반 렌더링 • 정적인 컨텐츠 위주 • 제한적인 상호작용 플러그인 OR
  6. 6. 2018 iFunFactory Dev Day 출처: http://news.inews24.com/php/news_view.php?g_serial=1083844&g_menu=020500 출처: https://www.hungryapp.co.kr/news/news_view.php?bcode=news&catecode=010&pid=60179
  7. 7. 2018iFunFactoryDevDay 2018 iFunFactory Dev Day •HTTP • 전이중(full-duplex) 통신 불가 • Server push 불가 •HTML/javascript • Markup language의 한계 • DOM 조작의 한계 웹에서 멀티플레이 게임을?
  8. 8. 2018iFunFactoryDevDay 2018 iFunFactory Dev Day •브라우저에서 플레이 가능 •순수 웹 기술만 사용 •유저간 실시간 동기화 지원 •되도록 간단한 게임을 제작 백문이 불여일작(作)
  9. 9. 2018 iFunFactory Dev Day Pong 02
  10. 10. 2018iFunFactoryDevDay 2018 iFunFactory Dev Day
  11. 11. 2018iFunFactoryDevDay 2018 iFunFactory Dev Day •1972년 아타리에서 개발 •최초로 상업적으로 성공한 비디오 게임 •탁구와 비슷한 대전 게임 Pong
  12. 12. 2018iFunFactoryDevDay 2018 iFunFactory Dev Day 게임 화면
  13. 13. 2018iFunFactoryDevDay 2018 iFunFactory Dev Day •공이 자신의 뒤로 나가면 상대가 점수 획득 •블록을 조작, 공을 상대에게 보내야 함 •지정된 점수를 먼저 얻는 쪽이 승리 규칙
  14. 14. 2018iFunFactoryDevDay 2018 iFunFactory Dev Day •게임의 상태 • 게임 중/종료, 점수, etc… • 느슨한 동기화 가능. •블록의 위치 •공의 위치 동기화 대상 후보
  15. 15. 2018iFunFactoryDevDay 2018 iFunFactory Dev Day •블록의 위치 • 일정 주기마다 자신의 블록 위치 전송 •공의 위치 • 기본적으로 동기화하지 않음 • 방향 변경 이벤트만 동기화, 그 외는 물리엔진 이용 •블록과 공의 충돌 • 자신의 충돌 시 정보를 상대에 알림 동기화
  16. 16. 2018 iFunFactory Dev Day Pong 을 위한 네트워크 기술 03 토폴로지
  17. 17. 2018iFunFactoryDevDay 2018 iFunFactory Dev Day 네트워크 토폴로지 Browser Browser P2P Browser Browser Sever Client-Sever
  18. 18. 2018iFunFactoryDevDay 2018 iFunFactory Dev Day •모든 통신은 간접적 형태로 이루어짐 • href(링크), XmlHttpRequest(Ajax), … • TCP 및 이하 레이어로 접근 불가 •타 브라우저로의 접근은 허용하지 않음 •Client-Server 모델 사용 • 선택지가 없음 브라우저상의 통신
  19. 19. 2018 iFunFactory Dev Day Pong 을 위한 네트워크 기술 03 서버 Push
  20. 20. 2018iFunFactoryDevDay 2018 iFunFactory Dev Day •Req/Resp 가 아닌, Svr push 가 필요 •가능한 가볍고 빨라야 함 •브라우저에서 사용 가능해야 함 Pong 을 위한 네트워크 프로토콜
  21. 21. 2018iFunFactoryDevDay 2018 iFunFactory Dev Day •HTTP • HTTP functions as a request–response protocol in the client–server computing model • server는 브라우저로부터의 요청 `응답` 만 가능 •스펙 상 Server push 가 불가능 웹에서의 Server Side Push
  22. 22. 2018iFunFactoryDevDay 2018 iFunFactory Dev Day •속도 향상을 목표로 한 신규 HTTP • 다중 stream • 헤더 압축 •스펙에 PUSH 가 있으나… HTTP/2
  23. 23. 2018iFunFactoryDevDay 2018 iFunFactory Dev Day •서버가 원할 때 메세지를 보낼 수 없음 • 브라우저가 요청하지 않은 리소스 전송(O) • 브라우저 요청 없이 메세지 전송(X) •브라우저로부터 요청을 받았을 때 요청받지 않은 것도 보낼 수 있는 기능 HTTP/2 PUSH
  24. 24. 2018iFunFactoryDevDay 2018 iFunFactory Dev Day •PLUG-IN • TCP socket 으로, 네이티브 어플리케이션처럼 통신 • 보안 문제등으로 사장되어 가고 있음 웹에서의 Server Side Push
  25. 25. 2018iFunFactoryDevDay 2018 iFunFactory Dev Day Long Polling 브라우저 서버 1. Push 받기 위해 요청 전송 2. Push할 데이터가 있을 때까지 대기 3. 1의 응답으로 Push 메시지 전송 4. 다음 Push를 받기 위해 요청 발송
  26. 26. 2018iFunFactoryDevDay 2018 iFunFactory Dev Day •통신 빈도 증가 • 브라우저는 서버로 보낼 것이 없더라도 푸시를 받기 위해 항상 요청을 보내야 함 •통신 딜레이 증가 • 보낼 것이 있어도 브라우저로부터의 요청을 기다려야 함 •양방향 통신 불가 • 서버/브라우저가 보내는 채널을 별도로 유지해야 함 Long Polling
  27. 27. 2018 iFunFactory Dev Day Pong 을 위한 네트워크 기술 03 WebSocket & Socket.IO
  28. 28. 2018iFunFactoryDevDay 2018 iFunFactory Dev Day •Web 상에서 full-duplex 통신을 지원하는 규약 •TCP 이용 •HTTP로 통신하지 않음 •TLS 를 이용한 암호화 지원 WebSocket
  29. 29. 2018iFunFactoryDevDay 2018 iFunFactory Dev Day WebSocket Handshake 1. HTTP->WebSocket 업그레이드 요청 2. WebSocket 사용 /사용 불가 알림 브라우저 서버 3. Websocket 통신 HTTP 통신 Websocket 프로토콜 통신
  30. 30. 2018iFunFactoryDevDay 2018 iFunFactory Dev Day •TCP / Datagram 기반 프로토콜 •Text/Binary 모두 전송 가능 •각 메세지는프레임으로 나뉘어 전달 •각 프레임마다 헤더가 추가됨 • opcode, length, … • 이론상 프레임의 최대 길이는 2^63 Byte WebSocket Protocol
  31. 31. 2018iFunFactoryDevDay 2018 iFunFactory Dev Day • 프레임 헤더 크기 외의 overhead 는 없음 • 전송할 데이터의 크기에 따라 헤더 크기가 달라짐 • 크게 신경쓰지 않아도 될 수준 Websocket Overhead 데이터 크기 헤더 크기 (Byte)(C->S) 헤더 크기 (Byte)(S->C) <126 Byte 6 2 <64 KByte 8 4 <2^63 Byte 12 8
  32. 32. 2018iFunFactoryDevDay 2018 iFunFactory Dev Day •TLS 사용 시 메시지마다 TLS 레코드 생성 •비교적 메세지 사이즈가 작아도 tcp segement 생성 Websocket Overhead
  33. 33. 2018iFunFactoryDevDay 2018 iFunFactory Dev Day •생성 및 연결 • var sock = new WebSocket(‘ws://{url}’); •전송 • sock.send(msg); •이벤트 핸들러 • sock.onopen = function(evt) { … } • sock.onmessage = function(evt) { … } • sock.onclose = function(evt) { … } • sock.onerror = function(evt) { … } Websocket API
  34. 34. 2018iFunFactoryDevDay 2018 iFunFactory Dev Day •대부분의 브라우저가 지원 Websocket 지원 브라우저
  35. 35. 2018iFunFactoryDevDay 2018 iFunFactory Dev Day •웹상에서 실시간 통신을 지원하는 프레임워크 •다양한 언어로 구현체 존재 • Javascript, Java, C++ 등 •다양한 통신 수단 이용 • Weboscket, long-polling, iframe, … Socket.IO
  36. 36. 2018iFunFactoryDevDay 2018 iFunFactory Dev Day •독자적인 프로토콜을 사용 •단순 Websocket 서버/클라와 호환 불가 •독자적인 url 형식 사용 Socket.IO
  37. 37. 2018iFunFactoryDevDay 2018 iFunFactory Dev Day •WebSocket 사용시에도 overhead 존재 • 별도의 프로토콜(=헤더) 존재 • 별도의 handshake 과정 존재 Socket.IO
  38. 38. 2018 iFunFactory Dev Day Socket.IO WebSocket
  39. 39. 2018iFunFactoryDevDay 2018 iFunFactory Dev Day •연결 끊김 시 재연결 지원 • 하지만 재전송은 지원하지 않음 •WebSocket 없이도 실시간 통신 가능 • 하지만 대부분의 브라우저가 websocket 지원 Socket.IO
  40. 40. 2018iFunFactoryDevDay 2018 iFunFactory Dev Day •스트리밍, 문서 협업(동시 편집 등) 기능 지원 • 게임에 필요한 것은 event 전파 •게임에 필수적인 추가기능은 없는 듯? • 반면 overhead 는 존재 Socket.IO
  41. 41. 2018iFunFactoryDevDay 2018 iFunFactory Dev Day PONG 네트워크 토폴로지 Browser Browser Sever WebSocket WebSocketWebSocket
  42. 42. 2018 iFunFactory Dev Day Pong 을 위한 네트워크 기술 03 Server
  43. 43. 2018iFunFactoryDevDay 2018 iFunFactory Dev Day •Websocket 을 지원할 것 •그 외는 다른 게임 서버 요구 사항과 같음 Pong 서버용 기술
  44. 44. 2018iFunFactoryDevDay 2018 iFunFactory Dev Day •대부분의 웹서버 기술에서 Websocket 지원 • 웹 이외의 기술에서도 지원하는 경우 많음 •지원하는 웹 서버 •Apache, IIS, Nginx…. •지원하는 서버 프레임워크 • Spring, PHP, flask 등의 웹 프레임워크 • IFunEngine, supersocket 등의 서버 기술 프레임워크 Pong 서버용 기술
  45. 45. 2018iFunFactoryDevDay 2018 iFunFactory Dev Day •Python/Flask/Flask-sockets •사용 편이성 고려 •HTTP 처럼 Websocket 사용 가능 Pong 서버
  46. 46. 2018iFunFactoryDevDay 2018 iFunFactory Dev Day Pong 네트워크 토폴로지 Browser Browser Sever(Python, flask) WebSocket WebSocket WebSocket
  47. 47. 2018 iFunFactory Dev Day Pong 을 위한 클라이언트 기술 04 HTML & HTML5
  48. 48. 2018iFunFactoryDevDay 2018 iFunFactory Dev Day •Markup language • 화면에 어떻게 표시될지는 브라우저 해석대로 •Layout 및 Layering 의 어려움 •Sound 등 멀티미디어 지원 미비 •클라이언트에 데이터 저장 불가 HTML
  49. 49. 2018iFunFactoryDevDay 2018 iFunFactory Dev Day •<canvas> • 직접 ‘그릴’ 수 있는 영역 •<audio> • mp3/ogg 등의 사운드 플레이 지원 •local storage • key/value 쌍을 클라이언트쪽에 저장하는 기능 •WebWorker • Background 작업 수행 가능 HTML5
  50. 50. 2018 iFunFactory Dev Day 그러나
  51. 51. 2018 iFunFactory Dev Day 지금이 어느 시대인데…
  52. 52. 2018 iFunFactory Dev Day Pong 을 위한 클라이언트 기술 04 HTML5 Game Engine
  53. 53. 2018iFunFactoryDevDay 2018 iFunFactory Dev Day •Unity Webgl • 모바일 지원 미비 • https://docs.unity3d.com/Manual/webgl-browsercompatibility.html •Unreal html5 • 아직 실험중(experimental)인 기능 • https://docs.unrealengine.com/en-us/Platforms/HTML5/GettingStarted HTML5 Game Engine
  54. 54. 2018 iFunFactory Dev Day HTML5 Game Engine
  55. 55. 2018iFunFactoryDevDay 2018 iFunFactory Dev Day •네트워크 기능은 거의 제공하지 않음 •통합 개발 환경 제공하는 엔진도 존재 • 백로 엔진 • https://egret.com/en/ • construct • https://www.construct.net/kr HTML5 Game Engine
  56. 56. 2018iFunFactoryDevDay 2018 iFunFactory Dev Day •Phaser • 2D 게임 엔진 • 물리엔진, 카메라, scene 관리 등 cocos2d 와 유사한 기능 제공 • 문서화가 잘 되어 있고 기술자료 풍부 Pong 을 위한 게임 엔진
  57. 57. 2018iFunFactoryDevDay 2018 iFunFactory Dev Day Browser Browser Sever(Python, flask) WebSocketHTML5 Phaser WebSocket Pong 기술 스택
  58. 58. 2018iFunFactoryDevDay 2018 iFunFactory Dev Day PONG 구조 Sever (Python, flask) Room (Game) Lobby Browser HTTP WebScoket
  59. 59. 2018iFunFactoryDevDay 2018 iFunFactory Dev Day Demo https://github.com/iFunFactory/pong-webscoket
  60. 60. 2018iFunFactoryDevDay 2018 iFunFactory Dev Day •웹 기술만으로 멀티플레이 게임 동기화 구현 가능 •HTML5로 동적인 게임 제작 가능 •게임 개발 지원 툴도 발전 중 정리
  61. 61. 2018iFunFactoryDevDay 2018 iFunFactory Dev Day •보안 • 브라우저에서 구동하려면 소스 암호화 불가능 • 난독화 필요 • 중요한 로직은 서버에서 구현, 혹은 검증을 통해 공격 방어 필요 과제
  62. 62. Q&A 2018 iFunFactory Dev Day 2018 iFunFactory Dev Day Thank You! 경기도 성남시 분당구 대왕판교로 660, 유스페이스1 B동 606호 아이펀팩토리 info@ifunfactory.com +82-70-4923-6566 www.ifunfactory.com

×