홈 어시스턴트 UI 때문에 눈물 나서 간단한 스마트 홈 대시보드를 만들었다
Source: Dev.to
한계점
저는 Home Assistant를 정말 사랑합니다. 정말요. 엄청나게 강력하고, 무한히 커스터마이징 가능하며, 커뮤니티도 훌륭합니다.
하지만 대시보드 상황에 대해서 잠시 이야기해볼까요?
제가 원했던 건 벽에 걸어 놓은 태블릿 하나에 집 온도와 켜진 조명을 보여주는 간단한 화면뿐이었습니다. 그게 전부였죠. 그런데 저는 주말 내내 YAML, 커스텀 카드, card-mod CSS 오버라이드, 그리고 재채기만 해도 깨지는 Lovelace 레이아웃과 씨름하느라 보냈습니다.
새벽 2시쯤, 태블릿에서 아직도 제대로 보이지 않는 대시보드를 바라보며 저는 생각했습니다. “나는 웹 개발자다. 이걸 설정하는 데 쓴 시간보다 더 빨리 내가 원하는 걸 만들 수 있다.”
그래서 만들었습니다.
HomeDash 소개
HomeDash는 한눈에 들어오는 스마트 홈 대시보드입니다. 큰 숫자, 깔끔한 디자인, 잡다함 제로. 바로 HA의 기본 대시보드가 이렇게 되었으면 하는 바람이었습니다.
주요 기능
- 🌡️ 센서 위젯 – 온도, 습도, 조명, 움직임. 방 전체에서 눈에 띄게 읽을 수 있는 큰 숫자.
- 🏡 방 기반 레이아웃 – 거실, 침실, 주방. 집을 여러분이 생각하는 방식대로 정리합니다.
- 📊 24 시간 스파크라인 차트 – 온도 추세를 보여주는 작은 인라인 차트. 설정 없이 바로 작동합니다.
- 🌗 다크 & 라이트 테마 – 자동 전환 또는 수동 토글. 낮과 밤 모두 멋집니다.
- 📱 완전 반응형 – 휴대폰, 태블릿, 데스크톱, 벽면 디스플레이. 어디서든 동작합니다.
- 🔗 Home Assistant 연동 – HA URL과 장기 액세스 토큰으로 연결하거나, HA 없이 위젯을 수동으로 추가할 수 있습니다.
제가 가장 자랑스러워하는 부분
의존성 제로. 전체 30 KB 정도.
React도, Vue도 없습니다. 빌드 단계도 없습니다. 작은 나라만큼 큰 node_modules 폴더도 없습니다.
세 파일뿐입니다:
index.html
style.css
app.jsindex.html을 브라우저에서 열면 전체 배포가 바로 준비됩니다.
프레임워크에 반대하는 것은 아닙니다—직장에서 매일 사용합니다. 하지만 저렴한 태블릿에서 즉시 로드되고 그 자리에 데이터를 보여줘야 하는 대시보드라면, 순수 JavaScript가 딱 맞았습니다.
작동 원리
앱은 장기 액세스 토큰을 사용해 Home Assistant의 REST API에 연결합니다. 엔티티를 폴링하고, HA의 영역 할당을 이용해 방별로 그룹화한 뒤 깔끔한 위젯 카드로 렌더링합니다.
스파크라인 차트는 순수 코드(약 40줄)로 그립니다. 24시간 동안의 측정값을 localStorage에 저장하고 간단한 선을 그립니다. 별도의 차트 라이브러리가 필요 없습니다.
Home Assistant를 사용하지 않는 경우, 설정 패널에서 위젯을 수동으로 구성할 수 있습니다. 모든 데이터가 localStorage에 저장되므로 서버 구성 요소가 전혀 없습니다.
대상 사용자
- Home Assistant를 사용하지만 벽면 태블릿용 더 간단한 대시보드를 원하시는 분.
- HA 앱을 열지 않고도 집 전체를 빠르게 파악하고 싶으신 분.
- Lovelace와 씨름하는 데 지치고 기본적으로 보기 좋은 무언가를 원하시는 분.
- 세 파일만 배포하는 아름다움을 이해하는 개발자.
사용해 보세요 / 가져가세요 / 개선하세요
완전 오픈 소스입니다. 포크하고, 해킹하고, 여러분만의 것으로 만들세요.
진심으로 피드백을 받고 싶습니다 — 부족한 점은? 여러분 환경에 유용하게 만들려면 무엇이 필요할까요? 댓글을 남기거나 GitHub에 이슈를 열어 주세요.
좌절감, 카페인, 그리고 순수 JavaScript로 만든 작품입니다.