haos 사이드바 추가방법

Gemini와의 대화

채팅은 Google AI 개선을 위해 검토되고 사용됩니다. 사용자는 위치 정보 등 활동을 관리새 창에서 열기할 수 있습니다. 사용자가 가진 선택권에 관해 자세히 알아보기새 창에서 열기

https://web.esphome.io/

을 사이드바에 추가

Home Assistant의 왼쪽 사이드바에 외부 웹페이지([https://web.esphome.io/](https://web.esphome.io/))를 추가하려면 configuration.yaml 파일에 panel_iframe 설정을 작성하시면 됩니다.

설정 방법

1. configuration.yaml 파일 편집

현재 화면에 표시된 File editor 또는 Studio Code Server를 열고 configuration.yaml 파일에 아래 코드를 추가합니다.

YAML

panel_iframe:

  esphome_web:

    title: "ESPHome Web"

    icon: "mdi:chip"

    url: "https://web.esphome.io/"

title: 사이드바에 표시될 이름입니다.

icon: 사이드바 아이콘입니다. (예: mdi:chip, mdi:microcontroller, mdi:web 등)

url: 연결할 웹페이지 주소입니다.

2. 설정 검사 및 재부팅

개발자 도구 > YAML 탭으로 이동합니다.

설정 확인을 눌러 YAML 구문에 오류가 없는지 체크합니다.

이상이 없으면 Home Assistant를 재부팅합니다.

재부팅 완료 후 왼쪽 사이드바에 ESPHome Web 메뉴가 생성됩니다.

💡 참고 사항 (WebSerial 제한)

web.esphome.io는 USB 시리얼 포트를 이용해 ESP 기기를 플래싱하는 WebSerial API를 사용합니다.

브라우저 보안 정책상 iframe(내부 프레임)으로 불러온 페이지에서는 시리얼 포트 연결이 차단될 수 있으므로, 웹페이지 화면 확인용이 아닌 기기 직접 플래싱 작업 시에는 브라우저 새 탭에서 접속하시는 것을 권장합니다.

최신버전에서 추가방법

Home Assistant 최신 버전(2023.6 이후 ~ 현재 2026년 기준)에서는 configuration.yaml을 직접 수정하지 않고 설정 UI(화면)에서 바로 사이드바 항목(패널)을 추가할 수 있습니다.

1. UI(설정 화면)에서 추가하는 방법 (권장)

왼쪽 사이드바 하단의 [설정] 메뉴로 이동합니다.

[대시보드]를 클릭합니다.

오른쪽 아래의 [대시보드 추가] 버튼을 누릅니다.

대시보드 유형 선택 창이 뜨면 웹페이지 (Webpage)를 선택합니다.

설정값을 입력하고 [생성]을 누릅니다:

제목: ESPHome Web (사이드바에 표시될 이름)

아이콘: mdi:chip 또는 원하는 아이콘

URL: [https://web.esphome.io/](https://web.esphome.io/)

사이드바에 표시: 켜기 (체크)

입력 완료 후 저장하면 즉시 왼쪽 사이드바에 메뉴가 추가됩니다.

2. YAML로 추가하는 방법 (configuration.yaml)

기존처럼 YAML 파일로 관리하고 싶다면 configuration.yaml에 아래와 같이 추가한 뒤 재부팅하시면 됩니다.

YAML

panel_iframe:

  esphome_web:

    title: "ESPHome Web"

    icon: "mdi:chip"

    url: "https://web.esphome.io/"

설정 추가 후 개발자 도구 > YAML > YAML 구성 요소 재로드를 실행하거나 Home Assistant를 재부팅하면 적용됩니다.

💡 참고 (보안 및 기능 제한)

브라우저의 보안 정책(보안 컨텍스트 및 WebSerial 제한)으로 인해 iframe 내부로 불러온 web.esphome.io에서는 USB 직렬 포트를 통한 직접 플래싱 기능이 차단될 수 있습니다. 단순 모니터링/웹 UI 접속용이 아닌 ESP 기기 직접 플래싱 작업 시에는 웹 브라우저의 새 탭으로 해당 주소에 직접 접속하여 진행하시는 것을 권장합니다.

새창으로 추가 방법

Home Assistant에서 클릭 시 새 탭(새 창)으로 외부 웹페이지를 열도록 사이드바에 추가하는 가장 깔끔한 방법은 Custom Sidebar (HACS를 통한 통합) 구성 요소를 사용하거나, Lovelace 카드 및 대시보드 링크를 활용하는 것입니다.

Home Assistant의 기본 panel_iframe이나 기본 웹페이지 대시보드는 보안상 iframe 내부로 페이지를 고정해서 보여주는 방식이기 때문에, 클릭하자마자 새 창을 띄우려면 아래 2가지 방식 중 하나를 사용해야 합니다.

방법 1. Custom Sidebar 사용 (가장 추천)

HACS가 설치되어 있다면 Custom Sidebar 플러그인을 사용하여 사이드바 클릭 시 새 탭에서 URL이 열리도록 설정할 수 있습니다.

1) HACS에서 설치

HACS > Frontend로 이동합니다.

오른쪽 아래 [탐색 및 리포지토리 추가]를 눌러 Custom Sidebar를 검색하여 설치합니다.

브라우저를 새로고침(F5)합니다.

2) 설정 파일 수정

config/www/sidebar-config.yaml 파일(없으면 새로 생성)을 열고 아래와 같이 작성합니다:

YAML

sidebar_editable: true

items:

  - item: ESPHome Web

    title: "ESPHome Web"

    icon: mdi:chip

    href: "https://web.esphome.io/"

    target: "_blank"  # 핵심: 새 탭/새 창으로 열기

방법 2. 대시보드 버튼/웹페이지 링크 카드 활용

별도의 HACS 커스텀 카드를 설치하지 않고 기본 대시보드 내에서 클릭 시 새 창을 띄우는 방법입니다.

기존처럼 [설정] > [대시보드] > [대시보드 추가]에서 [빈 대시보드]를 하나 생성합니다. (제목: ESPHome Web)

생성된 대시보드로 이동한 뒤, 오른쪽 상단 편집 버튼(연필 아이콘)을 누릅니다.

[카드 추가]를 눌러 버튼(Button) 카드 또는 마크다운(Markdown) 카드를 추가합니다.

버튼 카드 설정:

탭 동작 (Tap Action): URL 열기 (Open URL) 선택

URL: [https://web.esphome.io/](https://web.esphome.io/)

마크다운 카드 설정:

Markdown

### [ESPHome Web 바로가기 (새 창)](https://web.esphome.io/){:target="_blank"}

💡 참고

web.esphome.io와 같이 WebSerial API(USB 직렬 포트 연결)를 사용하는 사이트는 iframe 내부 동작 제한이 있으므로, 이처럼 target: "_blank" 또는 새 탭 링크 방식으로 접속하는 것이 정상적인 기기 연결 및 플래싱을 위해 가장 안정적인 방법입니다.

“

개발자 도구 – Home Assistant

” 공유 중

최신 Gemini 결과로 이동