XENEON EDGE용 사용자 지정 위젯을 만드는 방법

XENEON EDGE는 단순한 보조 디스플레이 그 이상입니다. 이 제품은 여러분이 가장 자주 확인하고 싶은 정보를 표시하는 공간으로 활용할 수 있습니다. iCUE에는 기본 제공되는 위젯 세트가 포함되어 있지만, 직접 위젯을 제작할 수도 있습니다. 맞춤형 시스템 모니터, 날씨 정보 표시창, 혹은 더 특화된 기능을 원하시든, 위젯 제작은 생각보다 훨씬 쉽게 시작할 수 있습니다.

이 가이드에서는 사용자 지정 위젯의 작동 원리, 전체 기술 참조 자료를 확인할 수 있는 곳, 그리고 AI 도구를 활용해 이 과정을 획기적으로 가속화하는 방법을 다룹니다.

사용자 정의 위젯은 HTML, CSS 및 JavaScript로 제작되며, 크로미움 기반 렌더링 엔진(QtWebEngine)에서 실행됩니다.

구조적인 측면에서, 모든 위젯은 다음 두 개의 필수 파일이 포함된 폴더입니다:

• index.html: 위젯의 진입점(마크업, 스타일, 스크립트).
• manifest.json: 위젯에 대한 메타데이터로, 이름, 버전, 지원 기기 및 필수 플러그인 등이 포함됩니다.

선택적 파일에는 추가 CSS 및 자바스크립트, 이미지 자산, 그리고 현지화를 위한 translation.json 파일이 포함됩니다.

여기서 전체 사양을 다시 설명하기보다는, 매니페스트 형식에 대한 완전한 참조 자료와 사용자가 구성할 수 있는 제어 유형(슬라이더, 색상 선택기, 센서 선택기 등), 센서 및 미디어용 플러그인 API, 그리고 iCUE에 연결하기 위한 런타임 후크에 대한 모든 내용은 Elgato 공식 문서에 수록되어 있습니다. 해당 문서는 공식적인 참고 자료이며, 프레임워크가 발전함에 따라 지속적으로 최신 상태로 유지됩니다.

• https://docs.elgato.com/icue/widgets/

CORSAIR는 이 과정을 더 쉽게 진행할 수 있도록 WidgetBuilder 키트를 제공합니다. 이 키트는 두 가지 구성품으로 이루어져 있습니다:

• WidgetBuilder CLI(icuewidget): 새로운 위젯 폴더를 생성하고, 매니페스트와 HTML을 검증하며, 그 결과를 iCUE로 바로 가져올 수 있는 .icuewidget 파일로 패키징하는 명령줄 도구입니다.
• AI 비서를 위한 기술: AI 모델이 유효한 iCUE 위젯을 생성하는 방법을 가르쳐 주는 구조화된 프롬프트.

이들 모두를 합치면 스캐폴딩, 생성, 검증, 패키징이라는 전체 과정을 아우릅니다. 아래에서 WidgetBuilder Kit를 다운로드할 수 있습니다.

사용자 정의 HTML 위젯을 만들 때 웹 개발자일 필요는 없습니다. Claude, ChatGPT 또는 기타 대규모 언어 모델과 같은 AI 도구를 사용하면 평이한 언어로 작성된 설명만으로도 정상 작동하는 위젯 코드를 생성할 수 있습니다.

WidgetBuilder Kit의 스킬을 원하는 AI 어시스턴트에 업로드하세요. Claude, ChatGPT, Gemini 등 파일 업로드를 지원하는 서비스라면 무엇이든 사용할 수 있습니다. 이 스킬은 위젯 사양, XENEON EDGE, 펌프 LCD, 키보드 LCD의 기기 크기와 해상도, 그리고 레이아웃, 매니페스트, 플러그인 사용 규칙에 대해 모델에 사전 정보를 제공합니다.

스킬이 로드되면 원하는 내용을 설명해 주세요. 예를 들면 다음과 같습니다:

"XENEON EDGE용 위젯을 만들어 주세요. 어두운 배경에 CPU와 GPU 온도를 표시하고, 온도에 따라 녹색에서 빨간색으로 변하는 색상 게이지로 표현하며, 설정 패널에서 경고 임계값을 사용자 지정할 수 있도록 해주세요."

AI가 index.html, manifest.json 및 기타 지원 파일을 생성합니다. 이 스킬은 모델이 구조화된 워크플로를 따라 진행하도록 안내합니다. 즉, 명확히 하기 위한 질문을 하고, 레이아웃을 설계하며, 코드를 생성하고, 결과물을 테스트하고 패키징하는 과정을 도와줍니다.

표시하고자 하는 데이터와 그 형식에 대해 구체적으로 명시해 주세요. 대상 기기(XENEON EDGE, 키보드 LCD, 펌프 LCD 또는 이 세 가지 모두)를 언급해 주십시오. 사용자가 직접 설정할 수 있는 기능을 원하신다면, 어떤 항목을 조정할 수 있도록 할지 설명해 주세요. 또한 위젯에 외부 데이터(날씨, 주가, API를 통해 가져오는 모든 정보 등)가 필요한 경우, AI가 데이터 소스 선택을 안내해 드릴 수 있도록 미리 알려 주시기 바랍니다.

AI가 파일을 생성하면 WidgetBuilder CLI를 통해 파일을 실행하여 출력을 검증하고, 결과를 .icuewidget 파일로 패키징하세요. 만약 문제가 있다면 AI에게 수정할 내용을 알려주세요. 이 반복적인 과정을 통해 코딩 경험이 없어도 위젯을 쉽게 만들 수 있습니다.

위젯을 패키징한 후에는 위젯 패널의 “+” 버튼을 클릭하고 파일을 선택하여 iCUE로 가져오세요. 시스템에 있는 .icuewidget 파일을 더블클릭해도 됩니다. iCUE에서 파일을 확인하며, 문제가 없으면 지원되는 모든 기기의 위젯 목록에 해당 위젯이 표시됩니다.

직접 코드를 작성하든 AI를 이용해 위젯을 생성하든 간에 유의해야 할 몇 가지 사항:

한눈에 파악할 수 있게 하세요. 훌륭한 위젯은 가장 중요한 정보를 몇 초 안에 전달합니다. 사용자가 위젯을 자세히 살펴봐야 내용을 파악할 수 있다면, 그것은 너무 복잡한 것입니다. 핵심 데이터를 가장 눈에 잘 띄는 곳에 배치하세요.

다양한 상황을 고려하여 디자인하세요. 위젯이 네트워크 데이터나 센서 측정값에 의존하는 경우, 해당 데이터를 사용할 수 없을 때 어떤 상황이 발생하는지 미리 생각해 보세요. 초기화 중에는 로딩 상태를 표시하고, 문제가 발생하면 명확한 오류 메시지를 표시하며, 화면이 비어 있는 것보다 오프라인 표시기와 함께 마지막으로 확인된 정상 데이터를 계속 보여주는 것이 이상적입니다.

화면 크기를 고려하십시오. XENEON EDGE의 위젯 슬롯 크기는 소형(가로 840x344)부터 초대형(가로 2536x696)까지 다양합니다. 위젯이 여러 크기를 지원하는 경우, 레이아웃을 반응형으로 구성하십시오. 단순히 모든 요소를 확대하지 마십시오. 더 큰 화면에서는 여유 공간을 활용하여 더 많은 정보를 표시하거나 가독성을 높이십시오.

실제 기기에서 테스트해 보세요. 브라우저 미리보기에서는 잘 보이는 것도 XENEON EDGE 기기에서는 다르게 표시될 수 있습니다. 위젯을 가져온 후, 작업을 완료하기 전에 실제 하드웨어에서 확인해 보세요.

자랑스러운 작품을 완성했다면, 이를 다른 사람들에게 보여줄 수 있는 몇 가지 방법이 있습니다. 가장 간단한 방법은 .icuewidget 파일로 내보낸 다음 친구나 커뮤니티 회원들과 직접 공유하는 것입니다.

위젯 제작자들이 무료 및 유료 위젯을 모두 지원하며 Elgato 마켓플레이스에 직접 게시할 수 있도록 해주는 크리에이터 포털이 곧 출시될 예정입니다. 이를 통해 디자이너와 개발자들은 더 넓은 XENEON EDGE 커뮤니티에 효과적으로 다가갈 수 있게 됩니다.