일러스트 대시보드로 스마트홈을 제어하는 홈어시스턴트

핵심 요약

• 홈어시스턴트 오픈소스 플랫폼으로 집을 자동화하며 정원 조명, 에어컨, 스프링클러 등을 제어했으나, 가족 누구도 기존 대시보드를 쓰려 하지 않아 새로운 접근 필요했다.
• 인터랙티브 플로어플랜 대시보드를 구축하기로 결정했고, 3D나 픽셀아트 대신 전문 환경 일러스트레이터를 고용해 손그린 주택 그림으로 대시보드를 구현했다.
• 일러스트레이터에게 투명 PNG(애니메이션은 WebP), 낮/밤 버전, 개별 기기별 레이어, 고정 캔버스 크기에 정렬된 파일 등의 기술 사양을 전달해 전체 작업 기간 중 대부분을 준비 과정에 소비했다.
• 홈어시스턴트의 picture-elements 카드를 사용해 일러스트를 배경으로, 기기의 상태를 state_image로 애니메이션 변환(off는 정적 이미지, on은 8프레임 루프)해 시각적으로 표현했다.
• 낮/밤 모드는 자동화로 일몰·일출 시 전환되며, 기기 터치 시 홈어시스턴트 제어 창이 열리거나(에어컨) Browser Mod로 별도 팝업을 표시(관개 시스템)했다.
• 이미지는 홈어시스턴트 박스에서 자체 호스팅했으며, LG webOS TV 브라우저가 WebP를 지원하지 않을 거라는 우려는 실제로는 사진 뷰어 제약이었으므로, HAOS Kiosk Display 애드온을 설치해 TV의 HDMI 입력으로 연결했다.
• 전체 집과 정원을 한 화면에 보려면 공유 캔버스 기반으로 각 층을 원래 위치에 맞춰 겹쳐 표시했고, YAML 설정 파일로 기기를 한 번만 정의해 여러 뷰에서 재사용했다.
• picture-elements 카드가 다른 카드를 포함할 수 없어 vertical-stack과 card-mod(CSS 스타일)로 전체 뷰를 구성했으며, Kiosk Mode 플러그인으로 TV의 홈어시스턴트 메뉴를 숨겼다.
• 대시보드는 아침·저녁 몇 시간씩 표시되고 TV 스케줄 자동화로 제어되며, TV 리모콘은 HDMI 신호로 대시보드를 조작할 수 없어(터치 불가) 가족들이 휴대폰 앱이나 컴퓨터 브라우저를 사용하게 되었다.
• 결과적으로 TV에는 전체 집의 한눈 보기, 휴대폰·컴퓨터에는 각 층별 뷰 또는 전체 뷰로 기기를 제어하는 구조가 정착했다.