집을 그린 인터랙티브 일러스트 대시보드 로 기기 상태를 보여주고 제어할 수 있게 만들어, 기존 Home Assistant 앱을 쓰려 하지 않던 가족들도 사용하게 됨
기기마다 꺼진 상태의 정지 이미지와 켜진 상태의 애니메이션 WebP 를 겹쳐 표시하며, 기본 picture-elements
카드와 브라우저만으로 애니메이션을 재생함
제작의 가장 큰 부분은 코딩보다 그림 의뢰와 기술 요구사항 정리 였으며, 모든 이미지를 같은 크기와 좌표의 공통 캔버스로 받는 것이 배치 작업을 크게 줄임
층별 화면과 집 전체 화면은 YAML 파일 재사용 으로 기기 설정을 공유함. 대신 시각적 편집기를 포기하고, 전체 화면 배치에는 추가 플러그인을 사용함
HDMI로 연결한 TV는 집 전체 상태를 보는 화면 , 휴대폰 앱과 컴퓨터는 조작 수단으로 자리 잡음. TV 리모컨으로는 조작할 수 없지만, 가족들이 직접 앱을 설치하거나 대시보드를 북마크하는 계기가 됨
자동화만으로 해결되지 않은 가족의 사용 문제
Home Assistant 로 약 1년간 집을 자동화해, 모두 외출하면 에어컨을 끄고 날씨에 따라 정원 스프링클러 가동 시간을 조절함
더운 날에는 물을 더 오래 주고, 비가 오면 작동을 건너뜀
정원 조명처럼 사람의 조작이 필요한 기기 는 여전히 남아 있었음
조명은 제조사 앱이나 Home Assistant에서만 켤 수 있었고, 일정 시간이 지나면 자동으로 꺼지도록 설정함
종료 직전에는 조명이 깜빡여 앱에서 시간을 연장할 기회를 주지만, 다른 가족들은 기존 앱과 대시보드를 쓰려 하지 않았음
물리 스위치를 설치해도 타이머 연장 문제 는 해결되지 않으며, 스프링클러처럼 본체 버튼을 누른 뒤 물을 피해 달아나는 것보다 앱 조작이 편한 기기도 있음
가족이 스스로 쓰고 싶어 할 화면을 만들기 위해 집의 실제 모습과 상태를 반영하는 평면도형 대시보드 를 선택함
살펴본 3D 사례 대부분은 정적인 집 이미지 위에 인터랙티브 아이콘을 얹는 방식이었음
픽셀 아트 평면도 는 매력적이었지만, 직접 그리거나 그래픽 편집기에서 라이브러리 스프라이트를 하나씩 배치해야 했음
이는 2026년 5월 조사 당시 살펴본 자료의 상황임. 당시에도 Reddit에는 인상적인 사례가 있었으며, 이후 AI 도구에 작업 대부분을 맡기는 방식을 포함해 3D 및 3D 스타일 대시보드 자료가 더 많아짐
일러스트 의뢰와 파일 요구사항
적합한 일러스트레이터 섭외 에는 전문 분야, 화풍, 일정뿐 아니라 대시보드의 기술 요구사항을 이해하는지도 중요했음
인기 작가는 수개월 뒤까지 예약이 차 있을 수 있고, 실제 그림 제작에도 수주에서 수개월이 걸릴 수 있음
추천받은 공간 일러스트레이터의 화풍이 더 마음에 들어 픽셀 아트 계획 대신 손으로 그린 공간 일러스트를 택함
의뢰 자료는 공간 참고자료와 기술 명세 를 함께 준비함
가구 위치를 직접 표시한 간단한 건축 평면도와 실제 방 사진을 전달함
스타일과 색상 참고용 온라인 일러스트, 최종 용도를 보여줄 다른 대시보드 사례를 포함함
요구사항, 필요한 파일과 형식, 각 참고자료의 용도를 적은 짧은 기술 명세를 작성함
이전 리모델링 때 사용한 페인트 색상 코드도 제공했지만, 사진으로 색을 맞출 수 있어 필수는 아니었음
이미지 납품 기준은 투명 PNG와 애니메이션 WebP , 그리고 모든 파일의 공통 캔버스임
층마다 낮과 밤 버전을 만들고, 기기마다 별도 레이어에 꺼진 상태의 정지 이미지와 켜진 상태의 짧은 반복 애니메이션을 준비함
기기 이미지도 낮과 밤 조명에 맞춰 각각 필요하며, 애니메이션은 8프레임 으로 충분했음
모든 파일은 같은 크기의 캔버스에서 실제 집 안 위치를 유지한 채 내보내야 함. 개별 물체 크기로 잘라내지 않는 것만으로 나중의 정렬 작업을 며칠 줄일 수 있음
정원은 낮, 밤, 조명이 켜진 밤 의 세 버전으로 제작함
처음에는 PNG 스프라이트 시트로 애니메이션을 받아 직접 WebP로 변환했으므로, 처음부터 WebP 를 요청하는 편이 나음
프로젝트 작업의 대부분은 작가 섭외, 요구사항 결정, 문서 준비 에 들어간 것으로 봄
그림과 애니메이션이 화면과 상태 표현을 맡고 UI는 몇 가지 아이콘과 센서 수치로 줄어들어, 별도로 설계하거나 코딩할 부분은 많지 않았음
기본 카드로 그림에 상태와 조작 연결하기
기본 picture-elements
카드 의 image:
에 배경 일러스트를 지정하고, 변하는 기기와 상태 표시를 elements:
에 배치함
지원하는 요소 유형 중 기기에는 image
, 상태 표시에는 icon
과 state-label
을 주로 사용함
상태에 따라 요소를 보이거나 숨길 때는 conditional
을 사용함
state_image
로 기기 상태에 따라 이미지를 바꿈
에어컨이 꺼져 있으면 정지 이미지, 켜져 있으면 애니메이션 WebP를 표시함
애니메이션은 브라우저가 재생하므로 별도 사용자 코드가 필요하지 않음
낮과 밤은 헬퍼와 일출/일몰 자동화 로 전환함
테스트할 때는 헬퍼를 수동으로 바꿀 수 있음
낮 일러스트 위에 밤 일러스트를 conditional
요소로 겹치고, 각 기기도 같은 방식으로 낮과 밤 버전을 전환함
기기를 누르면 tap_action: more-info
로 Home Assistant의 기본 제어 대화상자를 엶
정원 관개는 하나의 아이콘 뒤에 여러 독립 밸브와 타이머가 있어, 전체를 제어할 단일 기본 대화상자가 없었음
이 예외에는 HACS에서 설치한 Browser Mod 를 사용해 사용자 정의 팝업을 만듦
이미지의 image
속성에는 URL이나 로컬 경로 를 지정할 수 있으며, 이 구성에서는 Home Assistant 장치 자체에서 파일을 제공함
/config/www
가 없다면 폴더를 만들고 Home Assistant를 재시작함
/config/www/floorplan/ground/ac_living_off.webp
에 놓은 파일은 /local/floorplan/ground/ac_living_off.webp
로 참조함
TV 브라우저 대신 HDMI 키오스크 선택
처음에는 LG webOS TV의 내장 브라우저 에서 대시보드를 실행하려 했음
WebP를 지원하지 않는다는 정보를 접했지만, 테스트 이미지로 확인한 결과 브라우저에서는 작동했음
지원하지 않는다는 정보는 내장 사진 뷰어에서 비롯됐을 가능성이 있어, TV 호환성은 직접 시험해 볼 필요가 있음
실제 장애물은 대시보드에 접근하는 조작 단계 였음
webOS에서는 웹페이지를 화면 보호기로 지정하거나 브라우저 시작 시 특정 페이지를 열도록 설정할 수 없어, 매번 리모컨을 여러 번 눌러야 했음
TV 옆의 Home Assistant 장치에 HAOS Kiosk Display 애드온을 설치하고 HDMI 입력 에 연결함
대시보드가 항상 올바른 페이지를 연 상태로 유지되며, TV 입력만 전환하면 볼 수 있게 됨
층별 화면과 집 전체 화면의 설정 재사용
두 층과 정원을 한 번에 보는 “Full” 화면 과, 각 층 및 정원의 개별 화면을 만듦
TV에서는 집 전체를 보고, 특정 층만 필요할 때는 개별 화면을 사용함
공통 마스터 캔버스 덕분에 잘라낸 각 화면의 원래 위치만 기억하면 전체 화면에서 다시 맞출 수 있었음
정원은 집 아래쪽 레이어에 배치함
위층은 아래층보다 조금 들어 올려, 두 층 내부가 모두 보이는 분해도 같은 형태로 구성함
Home Assistant UI 편집기는 카드 간 요소 공유를 지원하지 않아 YAML 모드 로 전환함
층별 요소를 각각 별도 파일에 두고, 층별 화면과 전체 화면에서 같은 파일을 포함함
한 번 수정하면 두 화면에 모두 반영되며, 대시보드를 등록하기 위한 최초 재시작 이후에는 파일 수정 후 브라우저 새로고침만 하면 됨
대신 시각적 편집기를 사용할 수 없지만, 전환 시점에는 층별 작업 대부분이 끝나 있어 큰 문제가 아니었음
picture-elements
는 다른 카드를 담을 수 없으므로, 전체 화면은 vertical-stack
으로 층별 카드를 쌓아 구성함
HACS 플러그인 card-mod
의 CSS 스타일링으로 각 카드의 위치를 조정함
가족이 실제로 사용하게 된 방식
처음 TV에 띄웠을 때 가족들은 그림과 실제 방을 비교 하고, 기기를 켜고 끄며 그림이 어떻게 반응하는지 확인함
현재 대시보드는 아침과 저녁에 몇 시간씩 TV에 표시됨
Home Assistant에서 TV를 제어할 수 있어, 아무도 시청 중이지 않을 때만 일정에 따라 대시보드 입력으로 전환함
HACS의 Kiosk Mode 로 Home Assistant 메뉴를 숨겨 대시보드만 보이게 함
HDMI 연결에서는 TV 리모컨으로 대시보드를 조작할 수 없어, TV는 보기 전용 화면 으로 사용함
오히려 가족들이 직접 조작하려고 휴대폰에 앱을 설치하거나 컴퓨터에 대시보드를 북마크하게 됨
층별 화면은 휴대폰에서 잘 작동하지만, 전체 화면에는 최소 노트북 크기의 화면이 필요함
최종 사용 방식은 TV에서 집 전체 상태를 한눈에 확인 하고, 변경은 앱에서 수행 하는 것으로 자리 잡음
댓글과 토론