[App] IoT Hybrid App

소개

IoT 기기의 상태를 확인하고 제어하는 사용자 앱입니다. 스마트폰과 태블릿에서 쓰던 스마트홈 경험을 TV 화면까지 끌어오는 것이 목표였습니다.

하이브리드 앱은 화면은 웹 기술로 만들고, 껍데기만 네이티브 앱으로 감싼 형태입니다. 앱 안에 브라우저 창(웹뷰)을 하나 띄워 두고 그 안에 웹 페이지를 그리는 방식이라고 보면 됩니다.

세 가지 방식을 비교하면 자리가 분명해집니다.

방식	화면 만드는 법	장점	약점
네이티브	플랫폼별로 각각	가장 빠르고 매끄러움	플랫폼 수만큼 다시 만들어야 함
하이브리드	웹으로 한 번	한 벌로 여러 곳에 올림	복잡한 애니메이션은 불리
웹	웹으로 한 번	설치가 없음	기기 기능 접근이 제한적

띄워야 할 화면이 스마트폰, 태블릿, 그리고 TV 였기 때문입니다.

셋톱박스는 안드로이드 폰과도 다르고 iOS 와도 다릅니다. 여기에 맞춰 네이티브를 각각 만들면 같은 "조명 켜기" 화면을 세 벌 유지해야 합니다. 기능이 하나 늘 때마다 세 곳을 고쳐야 하고, 그러다 보면 어느 하나는 반드시 뒤처집니다.

반면 화면을 웹으로 만들어 두면 서버에서 UI 를 내려주고 각 기기는 그걸 띄우기만 하면 됩니다. IoT 제어 화면은 목록과 버튼, 상태 표시가 대부분이라 웹으로 만들어도 아쉬울 게 적었습니다. 게임처럼 부드러운 움직임이 필요한 종류가 아니었던 점도 컸습니다.

실제로 클라우드 쪽에 HTML UI 를 내려주는 서버를 따로 둔 것도 같은 이유입니다.

사용자 앱과 별개로, 공유기(AP 모뎀) 자체를 설정하는 관리 페이지도 함께 작업했습니다.

이런 장비의 설정 화면은 일반적인 웹 서비스와 사정이 다릅니다. 장비 안에 큰 서버를 올릴 수 없어서, 아주 가벼운 웹 서버가 CGI 라는 방식으로 동작합니다. 요청이 오면 장비 안의 작은 프로그램을 실행해 그 결과를 그대로 화면에 돌려주는 구조입니다.

그래서 화면 쪽에서는 "어떤 값을 어떤 이름으로 보내야 장비가 알아듣는가"를 장비 규격에 맞춰야 했습니다. 브라우저에서 흔히 쓰는 방식 그대로 가져다 쓸 수 없는 부분이 여기였습니다.

"어디에 올릴 것인가"가 여러 개면 화면 기술의 선택지가 먼저 좁아진다는 걸 배운 프로젝트였습니다. 성능이 조금 손해더라도 한 벌로 유지되는 쪽이 결과적으로 더 오래 살아남는 경우가 있는 것 같습니다.

한 코드베이스로 여러 웹 앱을 굴리는 이야기는 하나의 코드베이스로 여러 웹 앱 만들기에 이어서 적어 두었습니다.