NDC15 김찬웅 그룹웨어에 새 에너지를 - Chromium 엔진을 이용한 웹 기반 기술 도입기

1. 그룹웨어에 새 에너지를
Chromium 엔진을 이용한 웹 기반 기술 도입기
왓 스튜디오 / 넥슨 코리아
김찬웅

2. 저작물 인용
저작권법 제 35조의 3 ‘공정이용’ 조항에 따라 교육과 연구 목적으로 이용하고
있습니다.
강연에만 사용되며, 배포판에선 일부 제외될 수 있습니다.

3. 김찬웅
• @kexplo / Programmer
• cwkim@nexon.co.kr
• https://github.com/kexplo
• http://chanwoong.kim
• 2014.12-현재 <야생의 땅: 듀랑고> / Server Programmer
• 2014 <Project N> / Client Programmer
• 2010-2014.3 <삼한제국기> / CTO

4. 오늘 할 이야기
Chromium (Web)
그룹 웨어 C#

5. Chromium이 내장되어있는 두 가지 도구를 사용한 이야기
• CefSharp
• Electron
Chromium에 대해서는..

6. • 그룹웨어 소개
• 소개
• 특징
• 문화
• 작업 동기
• CefSharp을 이용한 웹 도입
• 과정
• 결과
• Electron을 이용한 웹 도입
• 결론
오늘 할 이야기

7. 그룹웨어 소개

8. NDC 2015
한 그루 한 그루 심지 않아도 돼요.
생태학에 기반한 [야생의 땅: 듀랑고]의 절차적 생성 생태계
- 강임성

9. talkCAT3
:커뮤니케이션 그룹웨어 입사 전부터 존재한
유서 깊은 그룹웨어
..인데 아이콘을 이쁘게 못 그려서 죄송..

10. talkCAT의 역사

11. talkCAT1, 2도
있었다고 합니다…
2006년
talkCAT3 등장!
2013년
What! Studio 신설
2014년
What! Studio, 본인 입사
2015년, 현재
talkCAT의 역사

12. 2006년
talkCAT3 등장!
2013년
What! Studio 신설
2014년
What! Studio, 본인 입사
2015년, 현재
약 10년 정도 사용
talkCAT1, 2도
있었다고 합니다…
talkCAT의 역사

13. 커뮤니케이션 그룹웨어?
팀에서 사용하는 채팅 프로그램

14. talkCAT의 특징

15. 여러 개의 채널 동시 구독
talkCAT의 특징

16. 채널 별로 주제, 역할, 자격을 가짐
talkCAT의 특징

17. 텍스트, 이미지, 링크 등으로 소통
talkCAT의 특징

18. 커밋 로그와 실시간 연계talkCAT의 특징

19. 왜 이런걸 써요?

20. NDC 2013 이은석 – 게임 디렉터가 뭐하는 건가요 中
<비 효율적인 고전 조직의 안 좋은 예>

21. *deskCAT = 문서 그룹웨어
*deskCAT
talkCAT
비밀이 없고, 평등한 의사소통
채팅 문화

22. 실무자 실무자

23. 실무자 실무자
업무진행
실무자들끼리 알아서 의사 소통해서 일을 진행

24. 실무자 실무자
어? 그거 제가
도울 수 있어요.
업무진행
실무자들끼리 알아서 의사 소통해서 일을 진행
관련 있는 사람들의 자발적인 참여, 조언

25. 실무자 실무자
어? 그거 제가 도울 수
있어요.
업무진행
실무자들끼리 알아서 의사 소통해서 일을 진행
관련 있는 사람들의 자발적인 참여, 조언
관리자
필요할 때 개입 혹은
대화로그를 바탕으로 검토 후 조정
승인 단계를 간소화
개발 이터레이션 증가
=> 품질 증가

26. 작업 동기

27. 농담
*움짤 = 움직이는 그림
© 슬램덩크 - 대원씨아이

28. 사실은..
• 데브캣 그룹웨어가 있다는 것을 미리 알고 있었음.
• NDC 2011 – 고양이가 개발한다
• 왓 스튜디오에서도 계승해서 사용하고 있었다.
• 입사 하자 마자 호기심에 뜯어보기 시작.
© 이현민(몰락인생)

29. talkCAT3
• 높은 완성도
• 요즘에 많이 쓰이는 기능들도 이미 들어있음
• @이름 식의 멘션
• 클립보드 이미지 붙여 넣기
• 특히 이건 아직도 지원 안 하는 메신저들도 꽤 된다.
• 가장 좋아하는 기능.
© 정도전

30. 쓰다 보니
• 팀 문화
• 다른 문화 콘텐츠 적극 권장
• 만화, 게임, 영화, …
• 자료 공유가 잦다.
• 웹 페이지 링크
• 이미지
• 동영상 링크
<홍익인간 정신>
널리 세상을 이롭게 하리라…?
© 귀귀

31. 살짝 아쉬움
• 몇 가지 기능이 살짝 아쉬움
• 대표적으로 미디어 공유 기능
• 기존에는 링크에 의존
• 트위터도 GIF, MP4 공유가 되는 시대…
• “움짤(GIF) 기능 넣어도 돼요?”
• “네, 잉여짓 맘대로 해 보세요“
• 마침 교육기간이라 OK!
끼얏호
Reaction Guys

32. Chat Control
• 동적인 콘텐츠가 들어갈 부분.
• 여기만 바꾸면 되지 않을…까?
• C#
• RichTextBox의 마개조 커스터마이징 버전.
• 새 기능 추가가 어려움.
Chat Control
일단, 리서치

33. RichTextBox에 GIF를 넣는다고?
© 김성모
GIF보단 동영상이 더 참담

34. 아… 이게 차라리 웹 페이지면…
웹 페이지면 …
정말 좋은데
© 천호식품

35. 어? 그냥 웹 페이지를 쓰면?
• 콘텐츠 표현도 쉽고
• 게다가 요즘 웹 발전도 빠르고
• 라이브러리도 많고

36. 어떻게?
Chat Control Web
필요한 부분만 교체

37. 웹 브라우저를 마치 일반 컨트롤처럼

38. talkCAT
Core
Web
Frontend
Browser
기존 코드 재활용 ☺
웹 표현 기술 ☺

39. WebBrowser 컨트롤로 프로토타이핑
장점
C# 내장 컨트롤
안정성 보장
단점
End-User의 IE버전을 보장 못함.
웹 표준과 거리가 멀다.
디버깅이 힘들다.
7
8
9
설치된 IE버전에 따라 달라지는 컨트롤

40. 디버깅이 편하고,
웹 표준 지원이 좋고,
임베딩이 가능한 엔진?

41. CEF* 라이브러리 비교 (for C#)
CefGlue1
• CEF1 기반
• 개발 정체
• 커뮤니티 작음
• 메모리릭 버그
• 크롬 구버전
CefGlue3
• CEF3 기반
• 개발 정체
• 커뮤니티 작음
CefSharp3
• CEF3 기반
• 개발 활발
• NuGet 지원
• 커뮤니티 활발
*Chromium Embedded Framework
CefSharp vs CefGlue
(Google Trends)
☺

42. CefSharp을 이용한 웹 도입

43. CefSharp 특징

44. CefSharp 특징
C#
CEF의 C# Wrapper
Nuget
PM> Install-Package CefSharp.WinForms
Nuget Package 지원

45. public class BoundObject
{
public string MyProperty { get; set; }
public void MyMethod()
{
// Do something.
}
}
browser.RegisterJsObject("bound", new BoundObject());
C#
bound.myProperty;
bound.myMethod();
JS
JS Binding

46. Client
Time
CefSharp
Browser-Side
Executing JavaScript Code Asynchronously

47. Client
Time
CefSharp
Browser-Side
To Execute JavaScript Code
Executing JavaScript Code Asynchronously

48. Client
Time
CefSharp
Browser-Side
Executing JavaScript Code Asynchronously

49. Client
Time
CefSharp
Browser-Side
Executing JavaScript Code Asynchronously

50. res://template.html
res://js/jquery.min.js
res://css/template.css
URI Scheme
Handler
template.html
jquery.min.js
template.css
Internal
Storage
Custom URI Scheme Handler

51. res://template.html
res://js/jquery.min.js
res://css/template.css
URI Scheme
Handler
template.html
jquery.min.js
template.css
Internal
Storage
Custom URI Scheme Handler
res://
특정 Scheme으로 원하는 파일을 요청

52. res://template.html
res://js/jquery.min.js
res://css/template.css
URI Scheme
Handler
template.html
jquery.min.js
template.css
Internal
Storage
Custom URI Scheme Handler
미리 등록된 형식이면, 내부 저장소에서 탐색

53. res://template.html
res://js/jquery.min.js
res://css/template.css
URI Scheme
Handler
template.html
jquery.min.js
template.css
Internal
Storage
Custom URI Scheme Handler

54. Custom URI Scheme Handler
<Current Directory>foobartalkcat.js
res://talkcat.js

55. 삶의 질디버깅의 질 향상
Chrome Developer Tools

56. © vat19

57. 멋지기만 한가?
일반 컨트롤처럼 위장(?) 할 때
생기는 문제점 들

58. 크게 2가지의 문제점
• 페이지 이동 문제
• 호환성 문제

60. Click!

61. ?!URL Redirect 문제

62. 링크 드래그

63. ?!

64. 웹 브라우저이기 때문에,
본래의 기능에 충실해서 나타나는 문제.
© 조석

65. 페이지 이동 문제 해결책
• 선별된 링크만 허용
• A Tag의 MouseDown, Click 이벤트를 오버라이드
• 웹 링크일 경우, 외부 브라우저를 통해 실행
• 의도하지 않은 이동을 거부
• window.onDragOver, onDrop 이벤트를 오버라이드 해서 블럭
• BeforeUnload 이벤트를 적용.
CefSharp의 JSDialogHandler를 재 정의 해서 블럭

66. 호환성 문제
• 특정 PC에서 한글이 안 나옴.
• 실제로 표시는 되는 것 같은데, 표현이 안 됨.
• 전부 다 안 나오지 않고 부분적으로 안 나옴.
© daum kakao

67. 호환성 문제 해결책
• 예전에 크롬에서 비슷한 문제가 있었던 것 같은 기억이…
• 찾아보니 DirectWrite API와 관련된 문제.
• 간단하게 꺼 준다.
• disable-direct-write=1

68. talkCAT
Core
Web
Frontend
CefSharp
JS Binding
Executing JS Code Async
JS Binding
Custom URI Scheme Handler
페이지 이동 방지

69. 적용 결과

70. Animated Image

71. JavaScript 활용 (대표적 예 2가지)
호출 알림, 이동
읽지 않은 대화 표시

72. Web Link
OEmbed

73. Syntax Highlight

74. Log HTML
Archiving
로그를 따로 저장 안 하고,
내용을 HTML 파일로 저장하면 훌륭한 로그가 된다.

75. 공개 후 반응
© tom cruise
토..토크에 움짤이 되다니!
© star trek

76. 정리

77. 크롬, 웹, 성공적
• 생산성 증가
• 기존 C#으로 만들었다면 꽤 오래 걸렸을 기능들…
• 웹을 이용해서 빠르게 구현
• 심지어 더 많이 구현
• 두 마리 토끼 잡기
• 단일 웹 페이지 방식으로 웹 기술 도입도 성공적
• 기존 코드 재활용도 성공적
© Warner Brothers, The Dark knight

78. 아쉬운 점들
• 브라우저는 브라우저
• 일반 컨트롤이 아님.
• 링크 예외 처리 등… 깔끔하지 못한 부분이 있다.
• CefSharp의 완성도
• 윈도우 메시지를 전부 잘 처리해 주지 못 한다.
• C# Winform 하고 매끄럽게 연동되지 못 한다.
제일 아쉬웠던 부분

79. 아쉬운걸 그대로 남겨 둘 텐가?
“우린 답을 찾을 것이다. 늘 그랬듯이”

80. 이왕 크롬뽕을 맞은 김에!
© 이말년

81. 웹으로 앱을 만들기?
• 찾아보니 역시 같은 생각을 한 사람들이 있다.
• Chromium + io.js(node.js) 를 이용해서 Hybrid app을 만들려는 시도가 있다.
NW.JS Electron
(Atom-Shell)
Brackets-Shell 이거다!

82. 셋 다 개념은 비슷.
File I/O
Local API
HTML
CSS
JavaScript

83. Apps using NW.JS

84. Apps using Electron (Atom-Shell)

85. Apps using Brackets-Shell

86. NW.JS vs Electron vs Brackets-shell
NW.JS
• (node-webkit)
• Intel 지원 ☺
• 멀티 플렛폼 ☺
• Chromium message
loop를 수정해서 연동 ☹
• index.html이 앱 메인 ☹
Electron
• (Atom-shell)
• Github 지원 ☺
• 멀티 플렛폼 ☺
• Atom을 만들기 위해 시작
• Chromium과 IPC 통신으로
연동 ☺
• main.js가 앱 메인 ☺
Brackets-shell
• Adobe 지원
• 멀티 플렛폼 ☺
• 오직 Brackets만을 위한 ☹
* https://github.com/nwjs/nw.js/wiki/How-node.js-is-integrated-with-chromium
* https://github.com/atom/electron/blob/master/docs/development/atom-shell-vs-node-webkit.md
* https://github.com/adobe/brackets-shell
☺

87. ..그런데 그러면 다 새로 짜는 게 아닌가요?
• 기존의 코드는 C# 이고…
• 저건 Node.js 인데?

88. • C#, Node.js 간 상호 호출 가능
• 멀티 플렛폼
EDGE.JS
* http://tjanczuk.github.io/edge
C# Node.js

89. Electron 호환용 Edge.js
https://github.com/kexplo/electron-edge

90. 더 새로운 talkCAT은 이렇게 만들어지고 있습니다.
talkCAT
Core
Edge.js
호환
레이어 Web
Frontend

91. 기대효과
• Frontend 쪽을 전부 웹으로
• 생산성 증가
• 확장성
• Atom Editor나 VS Code 같은 확장성

92. 마무리

93. • 단일 페이지 기반 앱 방식으로 웹 기술을 성공적으로 도입.
• CefSharp
• 웹앱 기반도 시도.
• Electron
• Edge.js

94. 장점
• Frontend 쪽 생산성을 높일 수 있다.
• HTML5, AngularJS, React, … 등 최신 웹 기술을 바로 도입 해 볼 수 있다.
• Electron
• 멀티 플렛폼
• Win API등을 몰라도 웹 기술 만으로 데스크톱 앱 작성 가능
• 기존 C# 코드의 재활용 가능
• 단일 페이지 방식을 써서 일반 컨트롤 처럼. ( CefSharp )
• 웹앱 기반에 Edge.js를 활용.

95. 단점
• 앞에서 소개한 것들이 만능은 아님
• 기존 코드를 많이 재사용 한다고는 하지만, 배울 것도…
• node.js
• 웹 개발 기술

96. 결론
• 기존 프로그램에도 충분히 웹 기술을 도입할 수 있습니다.
• 웹 기반 앱을 만들어 볼 수도 있고요.
• 웹을 한 번 써 보시는 것은 어떨까요?

97. 감사합니다.
We’re Hiring!