우리 집 '평면도' 위에 센서와 조명 띄우기: Lovelace 'Floorplan' 카드 완벽 정복

1. 왜 '평면도 대시보드'가 '궁극'인가?

우리가 16편에서 만든 대시보드는 '기능 목록'입니다. 하지만 평면도 대시보드는 '공간' 그 자체입니다.

• 압도적인 직관성 (Intuition): "거실 소파 위 램프"를 켜고 싶을 때, 텍스트 목록에서 light.living_room_sofa_lamp를 찾는 것과, 평면도 속 '소파' 그림 옆의 '램프' 아이콘을 누르는 것. 어떤 것이 더 빠를까요? 평면도는 3살 아이도, IT를 전혀 모르는 부모님도 '보는 즉시' 사용할 수 있는 가장 직관적인 인터페이스입니다.
• 궁극의 정보 밀도 (Information Density): 단 하나의 화면, 즉 평면도 한 장에 집안의 '모든' 상태가 표시됩니다. 거실 조명은 켜져 있고, 안방 온도는 23도이며, 현관문은 닫혀있고, 23편의 Frigate가 마당에서 '사람'을 감지했으며, 24편의 mmWave가 서재에 '사람 있음'을 보고하는 이 모든 상황이 지도 위에 동시에 펼쳐집니다.
• 미적 완성 (Aesthetics): 16편의 월패드에 이 평면도 대시보드가 띄워져 있는 모습. 그것이 바로 우리가 1편부터 26편까지 달려온 이 거대한 프로젝트의 '이유'이자, 모든 방문객에게 "와..." 소리를 듣게 만들 '화룡점정'입니다.

 

2. 1단계: '평면도' 이미지 준비하기 (가장 중요!)

이 프로젝트의 성공 90%는 HA가 아닌, '평면도 이미지' 준비에 달려있습니다. 코딩보다 중요한 단계입니다.

• 옵션 1 (가장 추천): Sweet Home 3D 무료 3D 인테리어 프로그램입니다. 우리 집과 똑같이 벽을 세우고, 3D로 가구를 배치한 뒤, '2D 평면도' 보기로 전환하여 '상단에서 본 모습'을 스크린샷(또는 PNG)으로 저장합니다. 가구 없는 깔끔한 2D 뷰가 가장 좋습니다.
• 옵션 2 (운이 좋은 경우): 아파트 도면 입주 시 받은 아파트 평면도 스캔본이 있다면 최고입니다. 단, 너무 복잡한 치수선이나 글자는 그림판 등에서 지워 '깔끔한' 이미지로 만드는 것이 좋습니다.
• 옵션 3 (단순함의 미학): 파워포인트 / draw.io 꼭 예쁠 필요는 없습니다. 파워포인트나 draw.io(무료 웹 다이어그램 툴)로 '거실', '안방', '주방'이라고 적힌 네모 상자를 그리고, 이를 하나의 PNG 이미지로 저장해도 됩니다. '기능'은 100% 동일하게 작동합니다.
• 핵심 팁: 너무 화려할 필요 없습니다. 중요한 것은 '배경'일 뿐입니다. 깨끗한 흰색 배경에 검은색 선으로 '구역'만 나뉜 이미지가 가장 좋습니다.

 

3. 2단계: 이미지 업로드 및 '그림 요소' 카드 추가

이제 HA가 이 이미지를 '읽을' 수 있게 해야 합니다.

1. 이미지 업로드: HA에 [File Editor] 또는 [Samba] 애드온이 설치되어 있다고 가정합니다. HA의 /config 폴더 안에, www라는 폴더를 만듭니다. (이미 있다면 건너뜁니다.) 이 /config/www/ 폴더 안에, 방금 만든 평면도 이미지(예: my_floorplan.png)를 업로드합니다.
   • 이유: www 폴더는 HA가 웹으로 '공개'하는 유일한 폴더입니다. 이 폴더 안의 파일은 http://HA주소:8123/local/my_floorplan.png 라는 주소로 접근할 수 있습니다. (/local/ = /config/www/)
2. 새 대시보드 뷰 생성: 16편에서 만든 월패드 대시보드로 이동합니다. [대시보드 편집] > [새 뷰 추가]를 클릭합니다.
   • 뷰 이름: 평면도
   • 뷰 유형: 패널 (1 카드) - 이 뷰는 오직 평면도 카드 '하나'로 꽉 채울 것입니다.
3. '그림 요소' 카드 추가: 방금 만든 '평면도' 뷰에 [카드 추가]를 누르고, 카드 목록에서 '그림 요소 (Picture Elements)' 카드를 선택합니다.

 

4. 3단계: 평면도에 '생명' 불어넣기 (YAML/UI 설정)

'그림 요소' 카드 편집기에 진입하면, '이미지 경로'와 '요소'를 추가하는 창이 뜹니다.

1. 배경 이미지 설정:

• '이미지 경로'에 우리가 2단계에서 만든 주소, 즉 /local/my_floorplan.png를 입력합니다.
• 하단에 우리의 평면도 이미지가 나타나면 성공입니다.

2. 요소(Elements) 추가하기: '요소'는 평면도 위에 겹쳐질 '아이콘', '텍스트', '버튼'입니다. 우리는 [요소 추가] 버튼을 눌러 UI로 추가하거나, 하단의 [YAML 편집기]로 코드를 직접 수정할 수 있습니다. (UI로 대충 위치를 잡고, YAML로 세부 조정하는 것을 추천합니다.)

핵심은 style:의 top:(Y축)과 left:(X축) 좌표를 이용해 위치를 지정하는 것입니다.

---

예제 1: 조명 켜기/끄기 (state-icon)

거실 조명(light.living_room)을 평면도 위 '거실' 구역에 배치해 봅시다.

YAML

 

type: picture-elements
image: /local/my_floorplan.png
elements:
  - type: state-icon
    entity: light.living_room
    # 위치: 위에서 30%, 왼쪽에서 40%
    style:
      top: 30%
      left: 40%
    # (선택) 켜졌을 때 노란색, 꺼졌을 때 회색
    state_color: true 
    # (선택) 탭하면 '토글' (기본값)
    tap_action:
      action: toggle

• 결과: 평면도의 (30, 40) 위치에 조명 아이콘이 생깁니다. 이 아이콘은 조명이 켜지면 노란색이 되고, 탭하면 조명이 켜졌다 꺼집니다.

---

예제 2: 온도/습도 표시하기 (state-label)

15편의 ESPHome 센서(sensor.living_room_temperature) 값을 배치해 봅시다.

YAML

 

elements:
  # (위의 state-icon 요소 아래에 추가)
  - type: state-label
    entity: sensor.living_room_temperature
    prefix: "온도: "
    suffix: " °C"
    style:
      top: 35% # 조명 아이콘 바로 아래
      left: 40%
      font-size: 12px # 폰트 크기 조절

• 결과: 평면도에 "온도: 23.5 °C"라는 텍스트가 실시간으로 표시됩니다.

---

예제 3: Frigate 카메라/사람 위치 표시 (image)

23편의 Frigate가 감지한 '사람' 스냅샷을 현관문 위치에 띄워봅시다.

YAML

 

elements:
  - type: image
    # Frigate가 만든 카메라 개체
    entity: camera.front_door_person
    image_mode: aspect_fit
    camera_image: camera.front_door_person
    style:
      top: 10%
      left: 10%
      width: 15% # 이미지 크기 조절

• 결과: 현관문에 '사람'이 감지되면, 그 사람의 스냅샷 이미지가 평면도 위에 나타납니다. (만약 entity:를 person.me로 바꾸면, 내 프로필 사진이 내 위치를 따라 평면도 위를 돌아다니게 됩니다!)

---

예제 4: '시네마 모드' 스크립트 실행 (service-button)

7편에서 만든 '시네마 모드' 버튼을 TV 위치에 배치해 봅시다.

YAML

 

elements:
  - type: service-button
    title: " " # 텍스트는 없이 아이콘만
    icon: mdi:movie
    service: script.cinema_mode # 7편에서 만든 스크립트 호출
    style:
      top: 50%
      left: 50%
      color: blue # 아이콘 색상

• 결과: 평면도의 (50, 50) 위치에 '영화' 아이콘이 생기고, 이를 탭하면 '시네마 모드' 스크립트가 실행됩니다.

 

5. 가장 중요한 팁: 'px' 대신 '%'를 사용하세요

위치(top, left)를 잡는 것은 지루한 '노가다'입니다. UI 편집기로 대충 끌어다 놓고, YAML 편집기에서 숫자를 1%씩 바꿔가며 완벽한 위치를 잡아야 합니다.

이때, 절대로 px 단위를 쓰지 마세요.

• left: 300px (나쁨): 16편의 월패드(태블릿)에서는 맞지만, 내 스마트폰에서는 화면 밖으로 튕겨나갑니다.
• left: 40% (좋음): '화면 왼쪽에서 40% 지점'이라는 상대적인 위치입니다. 월패드에서 보든, 폰에서 보든 항상 '그 자리'에 있습니다. 이것이 '반응형' 평면도를 만드는 핵심입니다.

 

결론: 비로소 '지도'를 완성하다

축하합니다! 여러분은 이제 수백 개의 텍스트 목록이 아닌, 한눈에 들어오는 '우리 집 지도'를 보며 집을 제어하게 되었습니다.

HA라는 '뇌'에, Zigbee, ESPHome, Frigate, mmWave라는 '감각'을 이식했고, 오늘 드디어 그 모든 것을 한눈에 볼 수 있는 '시각(평면도)'까지 완성했습니다.

이제 이 평면도 대시보드는 16편의 월패드 태블릿에 띄워져, 가족 모두가 사용하는 '우리 집 관제탑'이 될 것입니다.

우리는 이제 소프트웨어로 만들 수 있는 '시각화'는 정점을 찍었습니다. 하지만 이 월패드는 '전기'가 연결되어야 하고, 화면이 항상 켜져 있어 신경 쓰입니다.

다음 28편에서는, 15편의 ESPHome을 다시 한번 응용하여, '소프트웨어'가 아닌 '물리적'인 대시보드, 즉 '배터리 하나로 1년'을 버티는 **'E-Ink(전자잉크) 디스플레이'**를 이용해, 전원 연결 없이도 날씨와 캘린더를 항상 보여주는 '저전력 정보 액자'를 DIY하는 방법을 알아보겠습니다.