CEF(Chromium Embedded Framework)

롤을 할 때마다 계속 들었던 의문점이 있다.

렌더링 시스템도 궁금하긴 했지만

클라이언트에 대해서(특히 UI부분이) 궁금했다.

 

"클라이언트하면 게임 자체 말하는거 아닌가?"라고 생각할 수 있지만,

여기서 내가 말한 클라이언트는 League Client라고,

게임 매치 큐를 잡거나, 현질, 계정 관리, 스킨이나 아이콘, 아이템 구매부터 소셜 부분까지 다 담당하는,

한마디로 게임 도중 빼고 모든 부분을 관리할 수 있는 부분이 League Client이다.

 

League Client - 챔피언/룬/스펠 선택 창

GUI 하면 떠오르는게 QT, GTK 등... 이정도만 떠올라서 이도 이렇게 만들지 않았을까 싶었다.

하지만 관심을 크게 가지고, 제대로 알아보니 내가 생각치도 못한 방법으로 만들었다.

(정확히는, 일반적이지만 내가 몰랐던 방법)

 

---

 

https://technology.riotgames.com/news/architecture-league-client-update

The Architecture of the League Client Update

구글링 해보니깐 라이엇(롤 개발 회사)에서 직접 올린 글이라 시선이 더 갔다.

영어라서 읽기 힘들줄 알았는데 생각보다 쉽게 읽어졌다(=> 생각보다 쉬운 영단어로 써져있음).

 

The Architecture of the League Client

League Client의 옛 버전에서 UI부분은 Adobe AIR라는 기술을 이용했는데,

이가 언젠가부터 여러가지 이슈와 문제가 발생하면서 개발자들은 이를 해결하려 했다.

그리고 문제의 원인을 밝혀냄으로써 해결방안을 찾았는데, 이보다 더 좋은 방법을 찾았다.

바로 클라이언트에 자바스크립트를 이용하는 것이었다(이유는 크게 드러나 있지 않음).

 

물론 이는 클라이언트를 엎고 시작해야하기에 부담이 있기는 했으나,

성공하면 얻는 이점이 더 컸나본지, 다 갈아엎었다고 한다.

 

이 때, 자바스크립트와 기존의 클라이언트의 언어인 C++을 연결해주는 것이 CEF(Chromium Embedded Framework)이다.

내가 이해한 바로는 C++과 웹 언어 간의 상호작용을 이어주는 내장형 크롬 인터페이스인 것 같다.

 

---

 

그리고 자바 스크립트와 이 게임의 api 간의 상호작용을 위해 다른 (작은) C++ 라이브러리를 만들었다는데 이 부분은 이해가 잘 되지 않는다.

(CEF는 단방향으로만 작용되나?)

 

어쨌든, SPA(Single Page Application => 말 그대로 페이지가 하나인 앱) 프레임워크를 구현하기 위해

CEF로 환경을 구현하고, ember.js라는 자바스크립트를 사용했다고 한다.

아마 ember.js는 UI쪽에 특화된 것 같다.

 

(+ 데이터 레이어는 ember-orbit이라는 것을 사용했다고 한다. 그냥 참고)

 

---

사실 나는 웹은 그냥 웹에서만 쓰이는 언어라고 생각했고,

웹에 대해서는 큰 관심이 없었기에 지금까지도 아무런 관심이 없었다.

 

하지만, 클라이언트에도 웹 언어가 이렇게(프론트엔드로) 쓰일 수 있다는 것을 알았으니,

이쪽도 관심을 가지고 공부해봐야겠다.