약 1시간 만에 Home Assistant 프로젝터 대시보드 만들기

• Projector Pilot이 Home Assistant에 연결되어 있어야 합니다. 설정 가이드에서 로그인하는 방법과 프로젝터 상태 전송을 켜는 방법을 다룹니다. 그 위에 무언가를 만들기 전에 Home Assistant에서 프로젝터가 센서로 보이는지 먼저 확인하세요.
• 최소 한 번은 동기화했어야 합니다. 앱의 블록 복사 내용을 configuration.yaml에 붙여 넣고 Home Assistant를 재시작한 뒤, 설정 › 홈 오토메이션 › Home Assistant › HA와 동기화를 실행하세요. 아래의 모든 컨트롤 버튼이 호출하는 스크립트가 이 과정에서 만들어집니다.
• 대시보드를 만드는 동안 프로젝터를 켜 두세요. 아래의 화질 속성은 대기 상태의 프로젝터에서는 대부분 비어 있습니다.

이 대시보드에는 두 가지 소스가 쓰이며, 아래 모든 단계에서 그 차이가 중요합니다.

네 개 모두 기본 HACS 스토어에 있습니다. Home Assistant에서 HACS › 프런트엔드 › 탐색 & 저장소 다운로드로 이동해 이름을 검색하고 다운로드한 다음 브라우저를 새로 고치세요.

이 페이지의 모든 코드 조각에는 자리 표시자 두 개가 쓰입니다. 내 값을 한 번만 찾아 두면 나머지는 복사해서 붙여 넣기만 하면 됩니다.

• sensor.YOUR_PROJECTOR → Home Assistant의 개발자 도구 › 상태에서 projector_pilot로 필터링하세요. sensor.projector_pilot_epson_qb1000b_qb1000w 같은 항목이 보일 거예요.
• YOURSERIAL → 앱을 열고 설정 › 홈 오토메이션 › Home Assistant로 이동하세요. 시리얼 기반 ID가 바로 그곳에 표시되며, 동기화된 모든 스크립트 이름의 중간 부분이 됩니다. script.projpilot_YOURSERIAL_power_on, script.projpilot_YOURSERIAL_input_hdmi1 등이 그 예입니다.

1단계의 복사 블록 붙여 넣기와 동기화를 마친 뒤 개발자 도구 › 상태를 projpilot로 필터링하면 동기화된 전체 컨트롤 목록을 한 번에 볼 수 있습니다.

1. 설정 › 대시보드 › 대시보드 추가 › 처음부터 새 대시보드. 이름은 Projector Pilot으로 지정하세요.
2. 대시보드를 열고 오른쪽 위의 연필 아이콘을 눌러 편집 모드로 들어가세요.
3. 뷰를 추가하세요. 어떤 레이아웃이든 괜찮습니다. 실제 보드는 카드를 위아래로 쌓는 기본 스택을 사용하며, 이쪽이 붙여 넣기에 가장 간단해요.
4. YAML을 붙여 넣으려면 카드의 점 세 개 메뉴에서 YAML로 편집을 선택하세요. 뷰 전체를 한 번에 붙여 넣으려면 대시보드의 점 세 개 메뉴에서 Raw 구성 편집기를 선택하면 됩니다.

직접 입력하고 싶다면 뷰 자체의 설정은 다음과 같습니다.

title: Projector Pilot
views:
- title: Projector Pilot
  path: projector-pilot
  icon: mdi:projector
  cards: []

명령을 보내는 것보다 먼저 값을 읽기만 하는 것부터 시작해서, 엔티티 ID가 맞는지 확인하세요. 이 타일은 프로젝터 센서가 존재하는 순간부터 실시간으로 작동하며, 복사 블록도 동기화도 필요 없습니다. 카드를 추가하고, YAML로 편집을 선택한 뒤 붙여 넣으세요.

type: custom:mushroom-template-card
primary: Brightness
secondary: '{{ state_attr(''sensor.YOUR_PROJECTOR'',''brightness'') }}'
icon: mdi:brightness-6
icon_color: green
layout: vertical
fill_container: true
card_mod:
  style: 'ha-card { background: rgba(18,26,20,0.60); border: 1px solid rgba(61,220,107,0.20);
    border-radius: 16px; box-shadow: 0 6px 22px rgba(0,0,0,0.32); backdrop-filter: blur(8px);
    min-height: 104px; }'

같은 형식으로 센서가 가진 약 80개의 속성을 모두 읽을 수 있습니다. brightness을 contrast, gamma, color_temp, hdr_pq, lamp_hours 등 타일에 표시하고 싶은 속성으로 바꾸세요.

저장하세요. 실제 숫자나 단어가 나타나면 엔티티 ID가 맞는 것이며 아래의 모든 단계가 작동합니다. 빈칸으로 나오면 2단계로 돌아가세요.

평범한 제목은 낭비되는 공간입니다. 이 헤더는 card-mod의 그라데이션 배경이 적용된 markdown 카드로, 타일 더미를 이름 붙은 섹션으로 바꿔 줍니다. 보드의 모든 섹션은 라벨과 이모지만 다를 뿐 이 헤더로 시작합니다.

type: markdown
content: '🔌    **POWER & SOURCE**'
card_mod:
  style: 'ha-card { background: linear-gradient(135deg, rgba(61,220,107,0.30), rgba(16,120,60,0.30));
    border: 1px solid rgba(61,220,107,0.45); border-radius: 14px; box-shadow: 0 6px 20px rgba(0,0,0,0.3); }
    ha-markdown { padding: 12px 20px !important; } ha-markdown p { margin: 0 !important;
    letter-spacing: 3px; color: #eafff0; font-size: 14px; font-weight: 700; }'

이모지 코드와 라벨 텍스트만 바꾸세요. card-mod 블록은 모든 섹션에서 동일합니다.

이 버튼은 값을 읽는 대신 명령을 보내므로 스크립트가 먼저 존재해야 합니다. script.projpilot_YOURSERIAL_power_on을 호출하는데, 이 스크립트는 앱의 복사 블록을 configuration.yaml에 붙여 넣고, Home Assistant를 재시작하고, HA와 동기화를 탭한 뒤에야 앱이 만들어 줍니다.

type: custom:mushroom-template-card
primary: Power On
icon: mdi:power
icon_color: green
layout: vertical
fill_container: true
tap_action:
  action: call-service
  service: script.projpilot_YOURSERIAL_power_on
card_mod:
  style: 'ha-card { background: linear-gradient(135deg, rgba(61,220,107,0.16), rgba(16,90,46,0.20));
    border: 1px solid rgba(61,220,107,0.34); border-radius: 16px; box-shadow: 0 6px 22px rgba(0,0,0,0.32);
    min-height: 92px; }'

전원 끄기, 화면 차단, HDMI 1, HDMI 2, A/V 음소거, 색상 모드, 렌즈 메모리도 같은 카드를 씁니다. 바뀌는 것은 라벨, 아이콘, service뿐입니다.

보드 맨 위의 히어로는 button-card입니다. 큰 전원 상태, 여러 속성을 조합한 한 줄 요약, 그리고 테두리뿐 아니라 카드 전체에 적용된 그린 글래스 효과로 구성됩니다.

type: custom:button-card
entity: sensor.YOUR_PROJECTOR
name: Epson QB1000
show_state: true
show_label: true
size: 48px
state_display: '[[[ return entity.state==''on'' ? ''Powered on'' : ''Standby''; ]]]'
label: '[[[ var a=entity.attributes; return (a.input||''-'')+''  •  ''+(a.color_mode||''-'')+
  ''  •  ''+(a.video_range||''-'')+''  •  ''+(a.lamp_hours||0)+''  h''; ]]]'
styles:
  card:
  - height: 176px
  - background: linear-gradient(135deg, rgba(61,220,107,0.32), rgba(11,64,34,0.6))
  - border: 1px solid rgba(61,220,107,0.5)
  - border-radius: 22px
  - box-shadow: 0 12px 36px rgba(0,0,0,0.42)
  - padding: 20px
  state:
  - color: '[[[ return entity.state==''on'' ? ''#3ddc6b'' : ''#8a9'' ]]]'

설치마다 달라지는 부분만 남기고 줄인 코드입니다. 전체 카드에는 아이콘, 이름, 라벨 그리드 위치 설정도 포함됩니다. 전체 내용은 10단계의 내려받기를 참고하세요.

더 얇은 띠를 원하나요? mushroom-chips-card은 전원 상태, 입력, 색상 모드, 비디오 범위, 램프 사용 시간을 각각 state_attr('sensor.YOUR_PROJECTOR', ...)를 읽는 템플릿으로 작은 칩 한 줄에 담아 같은 역할을 합니다. 보드 맨 위에는 둘 중 하나만 사용하세요.

앱에 저장한 모든 장면은 동기화하면 script.projpilot_YOURSERIAL_scene_<id>이라는 스크립트가 됩니다. 장면 타일은 6단계의 컨트롤 버튼 카드에 장면 이름과 아이콘만 바꾼 것과 같습니다.

type: custom:mushroom-template-card
primary: Movie Night
icon: mdi:movie-open
icon_color: green
layout: vertical
fill_container: true
tap_action:
  action: call-service
  service: script.projpilot_YOURSERIAL_scene_YOURSCENE1
card_mod:
  style: 'ha-card { background: linear-gradient(135deg, rgba(61,220,107,0.16), rgba(16,90,46,0.20));
    border: 1px solid rgba(61,220,107,0.34); border-radius: 16px; box-shadow: 0 6px 22px rgba(0,0,0,0.32);
    min-height: 92px; }'

YOURSCENE1을 앱의 동기화된 컨트롤 목록에서 해당 장면에 표시된 ID로 바꾸세요. 장면 하나당 타일 하나이며, horizontal-stack 안에 넣습니다.

프로젝터 센서는 다른 센서처럼 Home Assistant가 기록하므로 lamp_hours에는 별다른 설정 없이 기록이 쌓입니다. 추가 센서도, 도우미도, 사전 설정도 필요 없으며, 유지관리 섹션 아래에 둡니다.

type: custom:mini-graph-card
entities:
- entity: sensor.YOUR_PROJECTOR
  attribute: lamp_hours
  name: Laser hours
name: Laser hours
icon: mdi:lightbulb-on-outline
line_color: '#3ddc6b'
line_width: 4
hours_to_show: 336
points_per_hour: 0.5
height: 96
animate: true
card_mod:
  style: 'ha-card { background: rgba(18,26,20,0.60); border: 1px solid rgba(61,220,107,0.20);
    border-radius: 16px; box-shadow: 0 6px 22px rgba(0,0,0,0.32); backdrop-filter: blur(8px); }'

336시간은 2주입니다. 레이저와 램프 사용 시간은 들쭉날쭉하지 않고 꾸준히 늘어나므로, 보통 2주 범위면 그래프가 평평해 보이지 않으면서도 추세를 확인하기에 충분합니다.

이 페이지 맨 위 스크린샷의 모든 섹션과 카드를 담은 완성된 뷰로, 엔티티 IDs 자리에는 자리 표시자가 들어 있습니다.

1. 뷰 YAML 내려받기.
2. 아무 텍스트 편집기에서나 열고, 나오는 모든 곳에서 YOUR_PROJECTOR은 2단계의 프로젝터 센서 엔티티 ID로, YOURSERIAL는 2단계의 시리얼 기반 ID로 바꾸세요.
3. 아래쪽 장면 섹션에서 YOURSCENE1, YOURSCENE2, YOURSCENE3을 내 장면 ID 세 개로 바꾸거나, 실제 장면 수에 맞게 타일을 추가하거나 삭제하세요.
4. Home Assistant에서 대시보드를 열고 연필 아이콘, 점 세 개 메뉴, Raw 구성 편집기 순서로 이동해 뷰로 붙여 넣으세요.