DIYables WebApps 라이브러리 완전한 아두이노 웹 애플리케이션 프레임워크
DIYables WebApps 라이브러리
포괄적인 Arduino 라이브러리로 Arduino Uno R4 WiFi 및 DIYables STEM V4 IoT에서 WebSocket 기반의 웹 애플리케이션을 만들 수 있습니다. 이 라이브러리는 현대적인 웹 인터페이스를 통해 Arduino 프로젝트를 모니터링하고 제어하며 상호 작용할 수 있는 다수의 즉시 사용 가능한 웹 애플리케이션을 제공합니다. DIYables STEM V4 IoT 교육 플랫폼에 특별히 최적화된 이 라이브러리는 향상된 IoT 기능과 내장 센서를 갖추고 있습니다.
이 라이브러리를 사용하면 스마트폰이나 PC의 웹 브라우저를 통해 Arduino와 상호 작용할 수 있습니다. 아래의 두 가지 방법 중 하나를 통해:
- 제공된 11개의 애플리케이션 중에서 아무런 웹 프로그래밍 지식 없이 미리 구축된 웹 앱을 사용하세요.
- 미리 구축된 웹 앱을 사용자 정의하여 특정 프로젝트 요구사항에 맞추세요.
- 유연한 프레임워크 아키텍처를 사용하여 자신만의 웹 앱을 구축하고 추가하세요.

🚀 주요 기능
- 모듈형 아키텍처: 필요한 웹 앱만 추가하여 메모리 사용을 최적화하세요.
- 메모리 효율성: 각 웹 앱은 독립적으로 활성화/비활성화될 수 있습니다.
- 메모리 최적화: HTML, JavaScript 및 CSS 코드는 UI와 기능을 유지하면서 코드 크기를 줄이기 위해 축소됩니다. 참고 및 커스터마이징을 위해 원래의 압축되지 않은 소스 코드는 라이브러리에 포함되어 있습니다.
- 11개의 사전 구축된 웹 애플리케이션: 웹 프로그래밍 지식이 필요 없이 Arduino를 완전히 제어할 수 있습니다.
- 홈 페이지: 모든 웹 애플리케이션으로의 링크가 있는 중앙 허브
- 웹 모니터: 브라우저에서 WebSocket을 통해 실시간 직렬 모니터
- 웹 채팅: 아두이노와 함께하는 대화형 채팅 인터페이스
- 웹 디지털 핀들: 웹 인터페이스로 모든 디지털 핀을 제어하고 모니터링합니다
- 웹 슬라이더: 아날로그/PWM 출력용 이중 슬라이더 컨트롤
- 웹 조이스틱: 로봇 및 차량 제어를 위한 인터랙티브 조이스틱
- 웹 아날로그 게이지: 센서 모니터링을 위한 원형 게이지 디스플레이
- 웹 로테이터: 연속/제한 모드를 갖춘 회전 가능한 디스크 컨트롤
- 웹 온도: 구성 가능한 범위의 온도계 시각화
- Web RTC: 시간 동기화 및 타임존 처리를 갖춘 실시간 시계
- 웹 표: 실시간 업데이트가 이루어지는 두 열 속성-값 표
- 웹 플로터: 실시간 데이터 시각화 및 그래프 작성
- 맞춤형 웹 앱 템플릿: 실시간 WebSocket 통신으로 나만의 웹 애플리케이션을 만들기 위한 완전한 템플릿
- 반응형 디자인: 데스크탑과 모바일 기기에서 작동
- 실시간 통신: 실시간 업데이트를 위한 WebSocket 기반
- 간편한 통합: 콜백 기반의 간단한 API
- 다중 앱 지원: 동시에 여러 개의 웹 앱을 추가할 수 있는 지원
- 자동 홈 페이지 통합: 추가된 웹 앱이 자동으로 홈 페이지에 링크로 표시됩니다
- 플랫폼 확장성: 현재 아두이노 우노 R4 WiFi에 대해 구현되었지만, 다른 하드웨어 플랫폼으로도 확장 가능합니다. 자세한 내용은 DIYables_WebApps_ESP32를 참조하십시오.
📦 설치 - Arduino IDE 라이브러리 매니저
- 아두이노 IDE를 엽니다.
- 아두이노 IDE의 왼쪽 바에 있는 Libraries 아이콘으로 이동합니다.
- "DIYables WebApps"를 검색한 다음, DIYables가 만든 DIYables WebApps 라이브러리를 찾으십시오.
- 라이브러리를 설치하려면 Install 버튼을 클릭합니다.

- 다른 라이브러리 의존성 설치를 요청받게 됩니다.
- Install All 버튼을 클릭하여 모든 라이브러리 의존성을 설치합니다.

🔧 의존성
이 라이브러리는 다음이 필요합니다:
- UnoR4WiFi_WebServer 라이브러리 (웹소켓 지원용)
🎯 빠른 시작
자세한 설치 지침 및 코드 예제는 아래를 참조하십시오:
- DIYables WebApps 라이브러리 API 레퍼런스 - 전체 문서 - 전체 API 문서
- 예제 튜토리얼 - 각 웹 애플리케이션에 대한 포괄적인 가이드:
- 아두이노 웹챗 예제 - 대화형 채팅 인터페이스 튜토리얼 - 아두이노와 함께하는 대화형 채팅 인터페이스
- 아두이노 WebMonitor 예제 - 웹 기반 시리얼 모니터 튜토리얼 - 웹 브라우저를 통한 실시간 시리얼 모니터
- 아두이노 WebPlotter 예제 - 실시간 데이터 시각화 튜토리얼 - 실시간 데이터 시각화 및 플로팅
- 아두이노 웹 디지털 핀 예제 - 디지털 핀 제어 인터페이스 튜토리얼 - 디지털 핀 제어 및 모니터링
- 아두이노 WebSlider 예제 - 듀얼 슬라이더 제어 인터페이스 튜토리얼 - 아날로그/PWM 출력용 이중 슬라이더 컨트롤
- 아두이노 WebJoystick 예제 - 가상 조이스틱 제어 튜토리얼 - 방향 제어를 위한 가상 조이스틱
- 아두이노 WebAnalogGauge 예제 - 고급 게이지 인터페이스 튜토리얼 - 센서 모니터링용 전문 원형 게이지
- 아두이노 WebRotator 예제 - 대화형 회전 제어 튜토리얼 - 서보/스테퍼 모터용 대화형 회전 원반 제어
- 아두이노 WebTemperature 예제 - 시각적 온도계 인터페이스 튜토리얼 - 온도 모니터링을 위한 시각적 온도계 표시
- 아두이노 WebRTC 예제 - 실시간 시계 인터페이스 튜토리얼 - 웹 기반 시간 동기화 및 타임존 처리 기능이 있는 실시간 시계
- 아두이노 WebTable 예제 - 데이터 테이블 인터페이스 튜토리얼 - 실시간 속성-값 업데이트가 있는 두 열 데이터 표
- 아두이노 맞춤형 웹앱 예제 - 초보자를 위한 간단한 웹 인터페이스 튜토리얼 - 자신만의 맞춤형 웹 애플리케이션을 구축하기 위한 완전한 템플릿
- 아두이노 MultipleWebApps 예제 - 완전한 IoT 대시보드 튜토리얼 - 모든 기능을 포함한 완전한 통합 가이드
📱 웹 애플리케이션
1. 홈 페이지 (`/`)
- 중앙 네비게이션 허브
- 모든 웹 애플리케이션에 대한 링크
- 활성화되었거나 추가된 앱만 홈 페이지에 표시됩니다
- 연결 상태 표시
- 반응형 디자인
2. 웹 모니터링 (`/web-monitor`)
- 웹 기반 시리얼 모니터
- 실시간 양방향 통신
- 메시지 타임스탬프 부여 및 개수 세기
- 명령 입력 이력 포함
3. 웹 플로터 (`/web-plotter`)
- 실시간 데이터 시각화 및 차트 그리기
- 다중 데이터 시리즈 지원(최대 8개 선)
- Y축 자동 스케일링 또는 고정 범위
- 차트 제목 및 축 레이블을 사용자 지정 가능
- 지연 시간을 최소화하기 위한 WebSocket 스트리밍
- 센서 모니터링 및 디버깅에 적합
4. 웹 채팅 (`/chat`)
- 대화형 채팅 인터페이스
- 자연어 응답
- 채팅 명령으로 LED 제어
- 재미있고 교육적인 상호작용
5. 웹 디지털 핀 (`/web-digital-pins`)
- 개별 핀 제어(핀 0~13)
- 각 핀은 INPUT 또는 OUTPUT 모드로 설정할 수 있습니다
- 활성화된 핀만 웹 UI에 표시됩니다
- 입력 및 출력 핀 모니터링
- 일괄 조작(전체 켜기/끄기, 토글)
- 실시간 핀 상태 피드백
6. 웹 슬라이더 (`/web-slider`)
- 이중 범위 슬라이더(0-255)
- PWM 출력 제어
- 프리셋 값 버튼들
- 동기화된 제어 옵션
7. 웹 조이스틱 (`/web-joystick`)
- 터치 및 마우스 지원이 포함된 인터랙티브 조이스틱 제어
- X/Y 좌표 값(-100에서 +100)
- 실시간 위치 피드백
- 자동 중앙 복귀 기능은 Arduino 코드로 활성화/비활성화할 수 있습니다
- 로봇 및 차량 제어에 적합합니다
8. 웹 아날로그 게이지 (`/web-gauge`)
- 실시간 센서 모니터링을 위한 전문 원형 게이지 디스플레이
- 구성 가능한 값 범위, 단위 및 정밀도
- 시각적 피드백이 있는 부드러운 바늘 애니메이션
- 상태 표시를 위한 색상 구역(초록, 노란색, 빨간색)
- 자동 구성 처리 - 생성자에서 한 번만 범위를 설정
- 압력 센서, 전압 모니터링 및 아날로그 측정에 적합
9. 웹 로테이터 (`/web-rotator`)
- 시각적 피드백이 있는 인터랙티브한 회전 가능한 원판 컨트롤
- 두 가지 작동 모드: 연속(0-360°) 및 제한(사용자 정의 범위)
- 매끄러운 회전과 함께 제공되는 실시간 각도 피드백
- 데스크탑과 모바일에서의 터치 및 마우스 지원
- 위치 표시기가 있는 전문적인 원뿔형 그라디언트 디자인
- 서보 모터, 스텝 모터 및 회전 제어에 적합
10. 웹 온도 (`/web-temperature`)
- 실시간 온도 모니터링이 가능한 시각적 온도계 디스플레이
- 구성 가능한 온도 범위 및 단위(°C, °F, K)
- 수은 스타일 애니메이션이 적용된 대화형 온도계 시각화
- 자동 구성 처리 - 생성자에서 한 번만 범위를 설정
- WebSocket을 통한 실시간 값 업데이트
- 온도 센서 및 환경 모니터링에 적합
11. 웹 RTC (`/web-rtc`)
- 실시간 시계 표시로 Arduino RTC와 클라이언트 디바이스 시간 모두를 표시
- 원클릭 시간 동기화가 웹 브라우저에서 Arduino RTC로 수행됩니다
- 시각적 시간 차이 표시기로 분 단위 동기화 정확도를 표시합니다
- 두 줄 시간 형식으로 12시간 표기(AM/PM)와 전체 날짜를 표시합니다
- WebSocket 기반의 실시간 업데이트를 통해 즉시 시간 동기화를 제공합니다
- 모던한 그라데이션 UI와 반응형 카드 스타일 레이아웃
- 로컬 디바이스 시간 사용으로 타임존 인식 동기화
- Arduino Uno R4 WiFi 전용 내장 RTC 지원
- 연결 상태 모니터링을 위한 시각적 WebSocket 표시기로
- 페이지 로드 시 자동 시간 요청으로 즉시 표시
- 타임스탬프, 데이터 로깅, 스케줄링 및 시간 기반 자동화에 적합합니다
12. 웹 표 (`/web-table`)
- 두 열 데이터 표를 정리된 데이터 표시를 위한 속성-값 쌍을 제공합니다
- 실시간 값 업데이트 WebSocket을 통해 즉시 데이터 새로고침을 제공합니다
- 구성 가능한 표 구조 Arduino setup() 함수에서 한 번 설정됩니다
- 동적 값 업데이트 페이지 새로고침 없이 런타임 중에 수행됩니다
- 현대적인 반응형 디자인 호버 효과 및 시각적 피드백이 포함됩니다
- 연결 상태 모니터링 시각적 WebSocket 표시기로 연결 상태를 모니터링합니다
- 빈 상태 처리 데이터가 없을 때 사용자 친화적인 메시지를 제공합니다
- 수동 새로고침 기능 전용 새로고침 버튼이 제공됩니다
- 유연한 데이터 유형 문자열, 숫자 및 형식화된 값을 지원합니다
- 메모리 효율적인 저장 구성 가능한 최대 행 수(기본값: 20)로 제한합니다
- 자동 데이터 요청 페이지 로드 시 즉시 표를 채우기 위해 자동으로 데이터 요청을 수행합니다
- 센서 모니터링, 시스템 상태, 구성 표시 및 실시간 대시보드에 적합합니다
13. CustomWebApp 템플릿 (`/custom`)
- 자신만의 맞춤형 웹 애플리케이션을 만들기 위한 완전한 템플릿
- 자동 메시지 필터링이 적용된 실시간 WebSocket 통신
- 캡슐화된 APP_IDENTIFIER 시스템을 갖춘 전문적인 클래스 기반 설계
- 웹과 Arduino 간의 간단한 텍스트 메시징을 제공하는 초보자 친화적 템플릿
- 신뢰할 수 있는 WebSocket 연결을 위한 자동 재연결 기능
- 휴대폰, 태블릿 및 컴퓨터에서 작동하는 반응형 디자인
- 다중 맞춤 앱 개발을 위한 충돌 예방 가이드
- HTML, Arduino 로직, 라이브러리 통합이 분리된 모듈식 파일 구조
- 확장 가능한 프레임워크 - 템플릿을 수정하여 정교한 애플리케이션을 만들어 보세요
- 통합 준비 완료 - 다른 DIYables WebApps와 원활하게 작동합니다
- 맞춤형 IoT 인터페이스, 센서 대시보드, 장치 제어 패널 및 교육용 프로젝트에 안성맞춤
🧩 모듈식 아키텍처
메모리 최적화: DIYables WebApps 라이브러리는 필요한 웹 애플리케이션만 포함할 수 있도록 모듈식 설계를 제공하여 Arduino의 메모리 사용량을 크게 줄여줍니다.
핵심 혜택:
- 선택적 통합: 프로젝트에 필요한 웹 앱만 추가하세요
- 메모리 효율성: 각 웹 앱은 독립적이며 선택적으로 사용할 수 있습니다
- 확장 가능: 작게 시작하고 필요에 따라 더 많은 기능을 추가하세요
- 성능 최적화: 활성 앱 수가 적을수록 성능이 더 좋습니다
작동 원리:
런타임 유연성:
- 동적 관리: 실행 중에 addApp() 및 removeApp()를 사용하여 앱을 추가하거나 제거합니다.
- 조건부 로딩: 하드웨어나 구성에 따라 앱을 로드합니다.
- 커스텀 앱: DIYablesWebAppPageBase를 상속하여 커스텀 웹 애플리케이션을 만듭니다.
- 재컴파일 없이: 빌드하지 않고 사용 가능한 앱을 변경합니다.
📋 예시
라이브러리에는 포괄적인 예제 튜토리얼이 포함되어 있습니다:
- 아두이노 웹챗 예제 - 대화형 채팅 인터페이스 튜토리얼 - Arduino와의 대화형 채팅 인터페이스
- 아두이노 WebMonitor 예제 - 웹 기반 시리얼 모니터 튜토리얼 - 웹 브라우저를 통한 실시간 시리얼 모니터
- 아두이노 WebPlotter 예제 - 실시간 데이터 시각화 튜토리얼 - 실시간 데이터 시각화 및 그래프 그리기
- 아두이노 웹 디지털 핀 예제 - 디지털 핀 제어 인터페이스 튜토리얼 - 디지털 핀 제어 및 모니터링
- 아두이노 WebSlider 예제 - 듀얼 슬라이더 제어 인터페이스 튜토리얼 - 아날로그/PWM 출력용 이중 슬라이더 컨트롤
- 아두이노 WebJoystick 예제 - 가상 조이스틱 제어 튜토리얼 - 방향 제어용 가상 조이스틱
- 아두이노 WebAnalogGauge 예제 - 고급 게이지 인터페이스 튜토리얼 - 센서 모니터링용 전문 원형 게이지
- 아두이노 WebRotator 예제 - 대화형 회전 제어 튜토리얼 - 서보/스텝모터용 인터랙티브 회전 디스크 컨트롤
- 아두이노 WebTemperature 예제 - 시각적 온도계 인터페이스 튜토리얼 - 온도 모니터링용 시각적 온도계 디스플레이
- 아두이노 WebRTC 예제 - 실시간 시계 인터페이스 튜토리얼 - 웹 기반 시간 동기화 및 시간대 처리가 가능한 실시간 시계
- 아두이노 WebTable 예제 - 데이터 테이블 인터페이스 튜토리얼 - 실시간 속성-값 업데이트가 있는 2열 데이터 표
- 아두이노 맞춤형 웹앱 예제 - 초보자를 위한 간단한 웹 인터페이스 튜토리얼 - 맞춤형 웹 애플리케이션을 구축하기 위한 완전한 템플릿
- 아두이노 MultipleWebApps 예제 - 완전한 IoT 대시보드 튜토리얼 - 모든 기능을 결합한 완전한 통합 가이드
각 예제 튜토리얼에는 다음이 포함됩니다:
- 단계별 설치 지침
- 하드웨어 연결 다이어그램
- 전체 코드 예제들
- 문제 해결 가이드들
- 프로젝트 아이디어 및 통합 팁
🌐 웹 인터페이스 URL들
WiFi에 연결되면 아래의 애플리케이션에 접속하십시오:
- 홈: http://[IP_ADDRESS]/
- 웹 채팅: http://[IP_ADDRESS]/chat
- 웹 모니터: http://[IP_ADDRESS]/web-monitor
- 웹 플로터: http://[IP_ADDRESS]/web-plotter
- 웹 디지털 핀: http://[IP_ADDRESS]/web-digital-pins
- 웹 슬라이더: http://[IP_ADDRESS]/web-slider
- 웹 조이스틱: http://[IP_ADDRESS]/web-joystick
- 웹 아날로그 게이지: http://[IP_ADDRESS]/web-gauge
- 웹 로테이터: http://[IP_ADDRESS]/web-rotator
- 웹 온도계: http://[IP_ADDRESS]/web-temperature
- 웹 RTC: http://[IP_ADDRESS]/web-rtc
- 웹 테이블: http://[IP_ADDRESS]/web-table
- 맞춤형 앱: http://[IP_ADDRESS]/custom (CustomWebApp 템플릿을 사용할 때)
🔧 하드웨어 설정
DIYables STEM V4 IoT (권장 플랫폼)
- 최적화된 안테나 설계가 적용된 내장 WiFi 기능
- 박스에서 바로 사용할 수 있는 온보드 LED 및 센서
- 추가 연결성을 갖춘 확장 I/O 옵션
- IoT 개발 학습에 최적화된 교육 중심 설계
- 신뢰할 수 있는 프로토타이핑을 위한 전문급 부품
- 브레드보드 사용에 최적화된 포괄적인 핀 배치
- 안정적인 작동을 위한 향상된 전원 관리
- STEM 교육 및 IoT 프로젝트 개발에 최적화되어 있습니다
아두이노 우노 R4 와이파이
- 기본 기능에 추가 하드웨어가 필요하지 않습니다
- LED를 시각적 피드백을 위해 디지털 핀에 연결하세요
- 모니터링을 위해 센서를 아날로그 핀에 연결하세요
- 표준 Arduino 호환성
💡 사용 팁
- 메모리 최적화: 메모리를 절약하기 위해 필요한 웹 앱만 추가하는 모듈식 아키텍처를 사용하십시오
- 와이파이 연결: 안정적인 웹소켓 통신을 위해 강한 와이파이 신호를 보장하십시오
- 핀 안전성: 외부 장치를 연결하기 전에 핀 기능을 항상 확인하십시오
- 전원 공급: 연결된 장치에 충분한 전원을 공급하십시오
- 브라우저 호환성: 최신 브라우저에서 가장 잘 작동합니다 (Chrome, Firefox, Safari, Edge)
- 모바일 친화성: 모든 인터페이스가 반응형이며 모바일 기기에서 작동합니다
- 시작은 작게: 초기에는 1~2개의 웹 앱으로 시작하고 프로젝트가 성장하면 더 많은 기능을 추가하십시오
🔍 문제 해결
와이파이 연결 문제
- SSID 및 비밀번호 확인
- 와이파이 신호 강도 확인
- 2.4GHz 네트워크 사용 확인 (5GHz는 지원되지 않음)
웹소켓 연결 문제
- 방화벽 설정 확인
- 브라우저에서 IP 주소 확인
- 웹 페이지를 새로고침 시도
- 시리얼 모니터에서 오류 메시지 확인
성능 문제
- 메모리 최적화: 사용하지 않는 웹 앱을 제거하여 램과 플래시 메모리를 확보합니다
- 선택적 로딩: 필요한 기능만 포함되도록 모듈형 아키텍처를 사용합니다
- 고주파 데이터의 업데이트 빈도를 제한합니다
- Loop()에서 적절한 지연을 사용합니다
- 장시간 실행되는 애플리케이션의 메모리 사용량을 모니터링합니다
📚 고급 사용법
동적 앱 관리
라이브러리는 런타임 중 웹 애플리케이션의 추가 및 제거를 지원합니다:
맞춤형 웹 애플리케이션
DIYablesWebAppPageBase를 상속받아 나만의 웹 앱을 만들어 보세요:
사용자 정의 HTML 페이지
src/html/ 디렉토리에 있는 HTML 파일을 수정하여 웹 인터페이스의 모양과 기능을 사용자 정의할 수 있습니다.
다중 WebSocket 클라이언트
이 라이브러리는 여러 개의 동시 WebSocket 연결을 지원하여 여러 사용자가 같은 아두이노를 제어할 수 있습니다.
다른 라이브러리와의 통합
센서 라이브러리, 서보 제어, 모터 드라이버 및 기타 아두이노 라이브러리와 쉽게 통합할 수 있습니다.
📄 라이선스
이 라이브러리는 MIT 라이선스 하에 배포됩니다. 자세한 내용은 LICENSE 파일을 참조하십시오.
🔗 링크
- DIYables WebApps 라이브러리 API 레퍼런스 - 전체 문서 - 전체 API 문서
- 튜토리얼 - 단계별 튜토리얼
- DIYables STEM V4 IoT - 권장 개발 보드를 받으세요
- DIYables Products - 전체 IoT 및 STEM 교육 라인업을 둘러보세요
- Arduino Uno R4 WiFi: Arduino 공식 페이지
---
DIYables WebApps 라이브러리와 함께하는 즐거운 코딩! 🎉