삽화가에게 집을 그려 달라고 했습니다 — 이제 Home Assistant 대시보드가 됐습니다

AI 요약

Home Assistant로 집을 자동화하던 글쓴이는 정원 조명처럼 사람이 직접 조작해야 하는 기기를 가족도 쉽게 쓰게 만들고 싶었습니다. 기존 대시보드는 가족이 외면했고, 물리 스위치만으로는 조명 타이머를 연장하거나 정원 스프링클러를 제어하기 어려웠습니다. 그래서 실제 집을 닮은 삽화를 대시보드로 만들기로 합니다.

그림을 대시보드용으로 준비하기

글쓴이는 여러 대시보드를 살펴본 뒤 평면도를 활용하는 방식에 끌렸지만, 정적인 3D 이미지 위에 아이콘을 얹는 구성은 마음에 들지 않았습니다. 픽셀 아트도 고려했지만 직접 그리거나 스프라이트를 하나씩 배치해야 했습니다. 결국 실내 공간 삽화 경험이 있는 작가 Owen Yeconiel에게 의뢰합니다.

작가에게는 가구를 표시한 건축 평면도, 방 사진, 색상·스타일 참고 자료, 기존 대시보드 예시와 기술 요구사항을 전달했습니다. 요구사항에서 중요한 점은 파일을 모두 같은 크기의 캔버스에 내보내는 것입니다. 각 레이어를 잘라내지 않고 집 안의 정확한 위치에 놓으면 나중에 이미지 정렬에 드는 시간을 줄입니다.

파일은 투명 배경 PNG로 받고, 애니메이션에는 WebP를 쓰도록 안내했습니다. 층마다 낮과 밤 버전을 만들고, 기기별로 꺼진 상태의 정지 이미지와 켜진 상태의 짧은 애니메이션을 준비합니다. 애니메이션 프레임은 여덟 장이면 충분했습니다. 정원은 낮, 밤, 조명이 켜진 밤까지 세 가지 그림이 필요했습니다. 처음에는 PNG 스프라이트 시트를 요청했지만 직접 프레임을 WebP로 변환했기 때문에, 처음부터 애니메이션 WebP를 요청하는 편이 낫다고 설명합니다.

picture-elements로 상태 표시하기

Home Assistant의 기본 picture-elements 카드를 사용합니다. 집 그림을 배경으로 놓고, 기기 이미지와 상태 표시를 요소로 배치합니다. image 요소는 기기 상태에 따라 이미지를 바꾸는 state_image를 지원합니다. 에어컨이 꺼졌을 때는 정지 이미지를, 작동할 때는 애니메이션 WebP를 표시합니다. 브라우저가 애니메이션을 재생하므로 별도 코드를 작성하지 않아도 됩니다.

낮·밤 전환에는 helper를 만들고 일출과 일몰에 맞춰 값을 바꾸는 자동화를 설정했습니다. 밤 그림은 조건부 요소로 낮 그림 위에 얹으며, 기기도 낮·밤 이미지를 따로 연결합니다. 기기를 누르면 tap_action의 more-info로 Home Assistant 기본 제어 창을 엽니다. 여러 밸브와 타이머가 얽힌 정원 관수 장치에는 한 번에 열 수 있는 기본 창이 없어, HACS에서 설치하는 Browser Mod로 팝업을 만들었습니다.

그림 파일은 Home Assistant 기기의 /config/www에 저장하고 /local 경로로 불러옵니다. 예를 들어 /config/www/floorplan/ground/ac_living_off.webp 파일은 /local/floorplan/ground/ac_living_off.webp로 참조합니다.

여러 화면을 재사용하고 TV에 띄우기

TV에는 1층, 2층, 정원을 한눈에 보여주는 전체 화면을 띄우고, 각 공간을 따로 보는 화면도 만들었습니다. 같은 크기의 캔버스에 그림을 배치해 둔 덕분에 전체 화면에서 각 층을 원래 위치에 맞춰 쉽게 정렬했습니다. 정원은 집 아래쪽에 두고 1층을 약간 들어 올려 두 층이 함께 보이도록 했습니다.

Home Assistant 시각 편집기에서는 카드 요소를 여러 화면에서 공유할 수 없어 대시보드를 YAML 모드로 바꿨습니다. 층별 요소를 각자 파일에 저장하고 층별 화면과 전체 화면에서 함께 불러옵니다. 방 하나를 수정하면 연결된 화면에도 반영됩니다. 대시보드를 한 번 등록한 뒤에는 파일을 바꿔도 브라우저만 새로고침하면 됩니다. 대신 시각 편집기는 쓸 수 없습니다. 전체 화면은 picture-elements 카드 안에 다른 카드를 넣을 수 없는 제약을 피하려고 vertical-stack으로 카드들을 쌓고, HACS 플러그인 card-mod로 위치를 조정했습니다.

LG webOS 브라우저의 WebP 지원 여부도 실제 이미지로 시험해 확인했습니다. 대시보드를 TV 화면 보호기나 기본 시작 페이지로 설정할 수 없는 문제가 남았습니다. 글쓴이는 TV 옆 Home Assistant 기기에 HAOS Kiosk Display 애드온을 설치해 HDMI 입력으로 연결했습니다. Kiosk Mode도 추가해 TV 화면에서 Home Assistant 메뉴를 숨겼습니다. TV가 시청 중이 아닐 때 아침과 저녁에 대시보드를 표시하도록 예약했습니다.

TV 리모컨으로는 HDMI에 연결된 대시보드를 조작할 수 없어 TV 화면은 확인용으로 쓰고, 실제 조작은 휴대전화 앱이나 컴퓨터에서 합니다. 가족은 TV에서 대시보드를 본 뒤 각자 앱을 설치하거나 브라우저에 화면을 저장했습니다. 층별 화면은 휴대전화에서도 쓸 만하지만, 전체 화면은 노트북 정도 크기의 화면이 필요합니다.

Hacker News 반응

• @nharziro — 정말 멋집니다! 마음에 듭니다.
  • @phs318u — ‘멋지다’는 표현은 적절하지 않을지도 모릅니다. 집 안 온도가 기록된 걸 보셨나요? 24도이고 사무실은 26도입니다. 제 취향에는 조금 덥습니다.
  • @stavros — 여름에 찍은 사진이라면 오히려 꽤 시원한 편입니다.
• @dzhiurgis — 아름답습니다. floor796이 떠오릅니다. 저는 AI로 그리게 해 봤습니다. 이미 갖고 있던 평면도를 주고 ‘갈색 식탁은 여기에, 냉장고는 여기에’라고 표시하는 방식은 효과가 있었습니다. 사진을 잔뜩 주고 알아서 파악하라고 하니 잘 안 됐습니다. AI가 파악한 부분은 괜찮았지만 실수가 너무 많았습니다. 표나 목록에서 토글을 여러 개 건드리지 않고 조명 스위치와 난방기를 지도에서 조작하려는 게 목적이었습니다. Home Assistant 대시보드용 대형 전자종이 화면이 있으면 좋겠습니다.
• @zerolunier — 어디에 계시고, 얼마를 지불하셨나요?
  • @srik — 작가의 의뢰 안내 페이지 링크를 여기에 올렸습니다.
• @_virtu — 유용한 팁입니다. 삽화가가 꼭 필요한 건 아닙니다. 사람에게 의뢰하는 것도 권하지만, LiDAR가 있는 휴대전화로 PolyCam을 쓰고 결과물을 Claude와 Blender에 넘기면 됩니다.
  • @tiagod — 유용한 팁이라기보다, 글의 요점은 삽화가가 직접 작업했다는 점이고 그 때문에 Hacker News 첫 화면에 올라온 겁니다.
  • @vntok — 단순히 멋진 아이디어라서일 수도 있습니다. 보통 이런 프로젝트는 홈랩 사용자 대부분은 물론 일반 사용자에게도 비용 대비 효율이 지나치게 낮습니다. 이제 AI 덕분에 원하는 사람이라면 더 저렴하게 비슷한 품질의 결과를 얻을 만해졌습니다.
  • @orphea — 말씀을 잘 이해하지 못하겠습니다. 제 해석이 맞는지 확인해 주세요. 삽화가에게 의뢰하는 건 홈랩 사용자 99%에게 경제성이 없고, AI가 같은 수준의 품질로 만들 수 있다는 뜻인가요?
  • @KZerda — 이런 그림을 의뢰하는 비용은 많아도 수백 달러입니다. 포트폴리오를 채우려는 젊은 작가도 많고 생활비가 훨씬 낮은 지역의 작가도 있습니다. 수천 달러가 드는 일도 아니고 상위 1%만 할 수 있는 일도 아닙니다.
• @Legend2440 — 멋지지만, 조명과 온도 조절기용 맞춤 대시보드를 만들 삽화가를 고용할 형편이라면 분명 상위 1%겠네요.
  • @sho_hn — Krita 웹 포럼의 구인 게시판을 통해 그림을 의뢰한 적이 있습니다. 포트폴리오를 쌓으려는 재능 있는 젊은 작가와 학생이 많고, 합리적인 가격으로 좋은 작업을 합니다. 후원하려고 상위 1%일 필요는 없습니다.
  • @krisbolton — 자유롭게 쓸 돈이 있다는 것과 상위 1%라는 건 전혀 다른 이야기입니다.
  • @AuthAuth — 많아야 100달러입니다. 대다수가 감당할 수 있는 금액입니다.
  • @ChickeNES — 900달러입니다. 평균적인 사람은 맞춤 그림에 900달러를 쓸 형편이 안 됩니다. 더 정확히 말하면 수백 달러를 내고 싶어 하지 않을 겁니다. 온라인에서 AI 그림이 쏟아지는 걸 보고도 평균적인 사람은 거의 무료로 같은 결과를 얻는 쪽을 원한다는 점을 모르겠나요?
• @ideasphere — 이 삽화가는 Owen Yeconiel입니다. 실제 사람에게 의뢰한 점은 좋지만, 작업이 마음에 들어 글 전체를 썼다면 작가를 훨씬 눈에 띄게 소개했으면 좋았겠습니다.
  • @jasongill — 때로는 대가를 바라지 않고 다른 사람에게 좋은 일을 해도 괜찮습니다.
• @palmotea — 1. 사람 삽화가에게 의뢰한 건 잘한 일이고 칭찬하고 싶습니다. 2. AI 때문에 이런 화풍을 보는 감각이 망가졌습니다. 처음 보자마자 AI 특유의 어색한 부분부터 찾기 시작했는데 안타깝습니다.
  • @beachy — 더 안타까운 점은 많은 사람이 페이지를 캡처해 올리고 ‘이 스타일로 Home Assistant 대시보드를 만들어 달라’고 요청할 것이라는 점입니다.
• @gerdesj — 훌륭한 작업이고 설명도 잘 읽었습니다. 효과적인 애니메이션을 위해 레이어를 제대로 받는 요령이 특히 유용합니다. 감사합니다.
• @topham — ‘집을 비우면 에어컨을 모두 끈다’는 건 원하는 온도를 유지하거나 목표 온도를 조금 조정하는 것보다 에너지 효율이 크게 떨어지는 경우가 많습니다.
  • @ellisv — 왜 그렇게 생각하시는지 궁금합니다. 일반적으로 온도를 크게 낮추면 집을 계속 냉방하는 데 드는 에너지를 아끼고, 나중에 원하는 설정 온도로 되돌리는 비용보다 절약 효과가 큽니다.
  • @micromacrofoot — 외출 시간과 온도 차이에 따라 다릅니다.

원문: Substack / 번역·요약: Trawling