[Blazor, C#] 원격 조종 프레젠테이션/ Remote Controllable Presentation

 

 

---

2019년 코엑스 IT 기술관련 박람회에 방문한 적이 있었다. 박람회에서 흥미롭게 보았던 기술들이 몇개 있었는데, 그 중 가장 기억에 남았던 기술은 지하철이나 길거리에서 흔히 볼 수 있는 광고판 또는 전광판에 QR코드가 표시되어 있고, 해당 QR코드를 스캔하면 특정 웹 페이지로 이동하여 해당 디스플레이를 조종할 수 있는 어플리케이션이었다.

그림[1] 조종 가능한 광고판

처음에는 그림[1]이 안드로이드 어플리케이션인 줄 알았는데 알고 보니 브라우저였다. 좀 작은 규모의 SI계 회사였는데, 회사 개발자에게 이것저것 물어보았더니 개발 기간도 꽤 걸리고, 어떤 원리로 작동하는지 대강 설명해주었다. 흥미로운 기술이었으나 좋은 아이디어는 아니라고 생각하였고, 이걸 응용해서 무언가 만들 수 있지 않을까 싶었다.

커다란 디스플레이를 제어할만한 상황을 생각해보던 중 빔 프로젝터, 대형 디스플레이가 사용되는 발표가 생각났고, 발표를 하며 동적으로 움직여야 하는 프레젠테이션을 제어하면 실용성도 좋을 것이라 생각하여 위 그림[1] 기술을 각색하고 최신 기술인 웹 어셈블리를 더해 성능까지 높이는 것을 목적으로 하였다.

 

Blazor는 2018년에 첫 릴리즈되었는데, 따끈따끈한 새로운 프레임워크에 도전해보고 싶었다.

---

위에 동영상을 보면 알겠지만, 화면은 다음과 같다.

Presentation

하단의 QR코드를 찍어서, 위 Presentation을 컨트롤하면 된다.

Controller

컨트롤러 화면은 이러하다.

 

---

본 프로젝트의 장점은 다음과 같다.

 

- 브라우저가 설치된 디바이스라는 모두 사용 가능.

빔 프로젝터나 인터넷이 가능한 TV 또한 제어가 가능하다.

 

- 크로스 브라우징이 우수함.

사파리에서 크롬, 파이어폭스에서 사파리. Presentation과 Controller는 흔히 아는 메이저 브라우저 간 영향을 받지 않는다.

 

- Server의 부담이 적음.

서버는 그저 메시지 전달역할만 수행할 뿐이다.

 

---

제어되는 과정

Controller와 Presentation은 랜덤 해시값으로 식별한다. Presentation이 생성되었을 때, 서버에서 랜덤 해시값을 발급해주고, QR코드에 녹여낸다. 그 QR코드를 접속하게 되면 매칭된 Controller 페이지에 접속하게 되는 원리이다. 만약, 식별 해시가 없다면 Remote가 명령을 내리면 모든 Presentation이 반응하게 될테니, 난감할 것이다.

명령은 모두에게 전달되며, 식별을 통하여 자신에게 해당되는 명령인지 식별하여 처리한다.

 

git : github.com/kiJu2/RemoteContrallablePresentation

kiJu2/RemoteContrallablePresentation

 

꼭 만들고 싶은 프로젝트였다. 항상 구상만 했었는데, 실제로 만들고 잘 되는 모습을 보니 참 뿌듯하다.

 

 

keyword : Blazor, C#, Remote, Presentation