정원 조명이 꺼지기 전에 앱에서 시간을 연장해야 한다. 그런데 가족은 그 앱을 열지 않는다. 안톤 프롤로프가 스마트홈을 만들며 부딪힌 문제다. 2026년 10월 6일 공개한 경험담에서 그는 기존의 기기 목록 화면을 자기 집 그림으로 바꾼 뒤, 가족이 휴대전화에 앱을 설치하거나 컴퓨터에 대시보드를 즐겨찾기했다고 전했다.
그가 쓴 Home Assistant는 여러 스마트홈 기기를 연결하고 자동화하는 오픈소스 플랫폼이다. 집이 비면 에어컨을 끄고, 날씨에 따라 정원 급수 시간을 바꾸는 자동화는 이미 있었다. 남은 일은 사람이 그때그때 결정해야 했다. 프롤로프는 자동화를 더 붙이는 대신, 가족이 아는 방과 기기의 위치를 화면에 옮겼다.
자동으로 꺼지는 조명에도 사람이 누를 화면은 필요하다
정원 조명은 제조사 앱이나 Home Assistant에서 켜야 했다. 프롤로프는 일정 시간이 지나면 조명을 끄는 타이머도 만들었다. 종료가 가까워지면 불빛을 깜박여 시간을 더 늘릴 기회를 주었다. 앱을 사용하지 않는 가족에게는 이 알림을 보고도 조작할 곳을 찾아야 하는 일이 남았다.
기존 대시보드에는 거실과 주방의 온도·습도, 거실 에어컨, 정원 조명과 스프링클러가 구획별로 정리돼 있었다. 센서 확인과 기기 제어에 필요한 기능은 갖췄다. 하지만 방 이름 아래 기기와 상태값을 나열하는 방식이 가족의 사용으로 이어지지는 않았다. 물리 스위치를 달아도 타이머를 다루는 문제는 남고, 급수 장치의 버튼을 직접 누르면 물을 피해 정원 밖으로 뛰어나와야 했다.
집 그림 안의 에어컨과 조명이 실제 상태를 따라간다
새 화면은 실내를 비스듬히 내려다보는 집 그림이다. 벽과 가구가 실제 방을 알아볼 수 있게 그려져 있고, 기기의 작동 상태도 그 자리에 표시된다. 에어컨을 켜면 바람이 나오는 짧은 애니메이션을 재생하고, 벽난로와 정원 조명도 그림 안에서 반응한다. 방별 온도와 습도 같은 센서값은 해당 공간 가까이에 얹었다.
이 그림은 일러스트레이터 오언 예코니엘이 제작했다. 프롤로프는 가구 위치를 표시한 도면과 방 사진, 그림 스타일 참고 자료, 기술 요구사항을 전달했다. 층마다 낮·밤 버전을 준비하고, 각 기기는 꺼졌을 때의 정지 그림과 켜졌을 때의 반복 애니메이션으로 나눴다. 정원에는 낮, 밤, 밤에 조명이 켜진 상태의 세 버전을 썼다.
구현에는 Home Assistant의 기본 picture-elements 카드를 사용했다. 배경 그림 위에 기기 이미지와 센서값을 놓고, state_image로 상태에 맞는 이미지를 바꾼다. 켜짐 상태에 연결한 애니메이션 WebP는 브라우저가 재생한다. 낮·밤을 바꾸는 보조 상태값은 일출·일몰 자동화로 전환하고, 시험할 때는 손으로도 바꿀 수 있게 했다.
기기를 누른 뒤의 세부 조작까지 새로 만들지는 않았다. 에어컨 그림을 누르면 more-info 동작으로 Home Assistant의 기존 제어 창을 연다. 여러 밸브와 타이머를 묶어야 하는 정원 급수만 예외였다. 하나의 기본 창으로 다룰 수 없어 Browser Mod라는 확장 기능으로 별도 팝업을 만들었다.
TV는 집 전체를 보여 주고, 휴대전화는 기기를 조작한다
프롤로프는 처음부터 거실 TV에 화면을 띄우려 했다. LG webOS 브라우저에서 애니메이션 WebP는 작동했지만, 원하는 웹페이지를 기본으로 열거나 화면보호기로 지정하는 일이 막혔다. 대시보드를 볼 때마다 리모컨으로 몇 번씩 이동해야 하면 새 화면의 장점이 줄어든다. 그는 Home Assistant를 돌리는 장치에 HAOS Kiosk Display 애드온을 설치하고 TV의 HDMI 입력에 연결했다.
TV용 전체 화면에는 두 층과 정원을 함께 놓았다. 위층을 조금 띄워 층 사이를 볼 수 있게 하고, 정원을 집 아래쪽 레이어에 배치했다. 휴대전화에서는 층별 화면을 쓴다. 전체 화면은 적어도 노트북 정도의 화면 크기가 필요하다는 것이 저자의 사용 경험이다.
HDMI로 연결한 TV 리모컨은 대시보드를 조작하지 못했다. TV는 상태를 보는 화면이 됐다. 저자는 오히려 이를 계기로 가족이 휴대전화 앱을 설치하거나 컴퓨터에 화면을 즐겨찾기했다고 설명한다. TV에서 그림과 실제 방을 비교하고 기기를 켰을 때의 반응을 본 뒤, 직접 눌러 볼 화면을 찾은 것이다. 현재는 다른 영상을 보고 있지 않을 때 아침과 저녁 일정에 맞춰 TV에 대시보드를 띄운다.
화면을 바꾸려면 그림 파일의 좌표부터 맞춰야 한다
그림을 맡길 때 중요한 요구사항은 모든 파일을 같은 크기의 캔버스에 내보내는 것이다. 기기만 잘라서 저장하지 않고, 집 전체 그림에서 그 기기가 있어야 할 위치를 그대로 유지한다. 투명 배경의 기기 레이어를 겹쳤을 때 위치가 맞아야 낮·밤과 작동 상태를 바꾸어도 에어컨이나 조명이 엉뚱한 곳으로 움직이지 않는다. 프롤로프는 이 규칙을 뒤늦게 배우며 정렬 작업에 시간을 썼다.
층별 화면과 전체 화면에서 같은 기기를 두 번 설정하지 않기 위해 대시보드도 YAML 파일 방식으로 바꿨다. 층마다 기기 요소를 별도 파일에 두고 양쪽 화면이 함께 불러온다. 수정은 한 번으로 끝나지만 화면 편집기는 포기해야 한다. 그림 카드 안에는 다른 카드를 넣을 수 없어 전체 화면의 층별 카드 배치는 vertical-stack과 card-mod 확장 기능으로 처리했다. 그림 제작과 요구사항 정리가 이 프로젝트 작업의 대부분이었다.
이 사례를 제품 설계에 적용한다면, 먼저 자주 수동으로 다루는 기기 하나로 시험해 볼 만하다. 방 이름과 기기명을 목록에서 찾는 대신 실제 위치를 보고 조작 대상을 고를 수 있는지, 그림의 반응으로 켜짐·꺼짐을 구별하는지 관찰하면 된다. 저자의 기록에는 사용 전후의 작업 시간이나 이용률 수치는 없다. PM이나 스마트홈 사용자가 확인할 질문은 같은 집 그림을 얼마나 정교하게 복제하느냐보다, 가족이 조명을 연장하거나 에어컨을 조절할 때 도움을 덜 요청하느냐다.
출처: Anton Frolov, I hired an illustrator to draw my house. Now it's my Home Assistant dashboard. · Home Assistant, Picture elements card