Wiznet makers

ESP32-S3 + W5500(RJ45)로 유선 웹 대시보드 만들기: PlatformIO 예제와 오류 해결

ESP32-S3에 WIZnet W5500(SPI, RJ45)을 연결해 브라우저로 제어 가능한 유선 웹 대시보드를 구현합니다. PlatformIO 설치부터 정적 IP 설정, EthernetServer 컴파일 오류, 0.0.0.0 IP, 중복 요청 처리까지 한 번에 정리했습니다.

ESP32-S3에 WIZnet W5500(SPI, RJ45)을 연결해 브라우저로 제어 가능한 웹 대시보드(버튼 + 텍스트 입력)를 만드는 예제를 메이커 관점에서 정리했습니다. 정적 IP 기반으로 이더넷을 초기화하고, 웹 UI 이벤트를 시리얼 로그로 받아 처리하는 구조라 장비 제어, 설정 페이지, 현장형 IoT의 기본 뼈대를 빠르게 만들 수 있습니다.

1. Overview
유선 이더넷(W5500)을 붙인 ESP32-S3가 웹서버를 띄우고, 브라우저에서 버튼 클릭과 텍스트 입력을 받아 장치 동작(로그/제어)을 트리거하는 최소 예제입니다.

핵심 기능

• 포트 80에서 웹 페이지 제공
• 버튼과 텍스트 입력 UI 제공
• 입력 이벤트를 Serial로 출력(제어 로직 연결용)
• 브라우저 중복 요청으로 이벤트가 두 번 처리되는 문제를 막는 중복 방지 로직 포함

2. 하드웨어 구성과 배선 포인트
ESP32-S3와 W5500을 SPI로 연결합니다. 안정 동작의 핵심은 SPI 신호와 CS, Reset의 타이밍이 흔들리지 않게 잡는 것입니다.

W5500(SPI) 핀 연결 예시

• MOSI: GPIO11
• MISO: GPIO12
• SCK: GPIO13
• CS: GPIO14
• RST: GPIO9
• INT: GPIO10

배선 팁

• CS와 RST는 가장 먼저 확실히 잡습니다(의외로 여기서 대부분이 갈립니다).
• INT는 상황에 따라 생략 가능하지만, 쓰는 경우 핀 충돌을 피하세요.
• SPI 배선이 길어지면 고속에서 불안정해질 수 있으니 가능한 짧게 구성합니다.

3. 소프트웨어 구성(PlatformIO 기준)

• 개발 환경: PlatformIO(Visual Studio Code)
• 프레임워크: Arduino(ESP32)
• 네트워크: ESP32에서 W5500을 안정적으로 쓰기 위한 Ethernet 라이브러리 설정이 중요합니다.

정적 IP 초기화가 유리한 이유

• 디버깅 시 IP가 바뀌면 접속 문제를 재현하기 어렵습니다.
• 테스트 반복이 많은 단계에서는 정적 IP가 효율적입니다.

권장 초기화 형태

• Ethernet.begin(mac, ip, gateway, dns, subnet)처럼 gateway/subnet까지 명시

4. 실행 절차

1. VS Code에 PlatformIO 확장 설치
2. 프로젝트 폴더 열기(의존 라이브러리 자동 설치)
3. 빌드/업로드
4. 시리얼 모니터로 로그 확인
5. 브라우저에서 장치 IP로 접속 후 버튼/텍스트 입력 테스트

5. AEO: FAQ 10개(검색 질문 키워드 포함)

Q1. ESP32-S3에서 W5500을 꼭 써야 하나요?
A. Wi-Fi가 불안정하거나 설치형/현장형으로 안정성이 필요하면 W5500 같은 SPI Ethernet이 유리합니다.

Q2. W5500의 INT 핀은 꼭 연결해야 하나요?
A. 꼭 필수는 아닙니다. 폴링 방식으로도 동작할 수 있지만, 이벤트 기반 처리나 효율이 필요하면 INT를 연결하는 편이 좋습니다.

Q3. 컴파일 에러로 EthernetServer가 abstract라고 떠요.
A. ESP32 환경에서 기본 Ethernet 라이브러리 호환 문제가 원인일 수 있습니다. ESP32 호환 포크/대체 라이브러리를 프로젝트 의존성에 지정하는 방식이 안전합니다.

Q4. IP가 0.0.0.0으로 잡혀요.
A. 아래를 순서대로 확인하세요.

• SPI 핀(MOSI/MISO/SCK)과 CS가 정확한지
• RST 동작과 전원 안정성(리셋 타이밍)
• gateway/subnet까지 포함한 begin 호출을 쓰는지

Q5. DHCP 대신 정적 IP를 쓰는 게 좋은가요?
A. 개발 단계에서는 정적 IP가 접속과 재현성이 좋아 유리합니다. 배포 단계에서는 DHCP + 장치 검색(예: mDNS)을 함께 고려할 수 있습니다.

Q6. 버튼을 한 번 눌렀는데 이벤트가 두 번 처리돼요.
A. 브라우저는 한 번의 동작에도 요청을 여러 번 보낼 수 있습니다. 최근 이벤트 시간을 저장해 일정 시간 내 중복 요청을 무시하는 가드를 넣어주세요.

Q7. 웹 페이지는 뜨는데 클릭 반응이 이상해요.
A. 요청 URL 파싱과 엔드포인트 설계를 먼저 점검하세요. 액션과 메시지 입력을 다른 경로로 분리하고, 시리얼 로그로 요청 경로/파라미터를 출력하면 빠르게 원인을 찾을 수 있습니다.

Q8. SPI 클럭은 어느 정도가 적당한가요?
A. 보드 배선과 길이에 따라 달라집니다. 먼저 안정적으로 동작하는 속도에서 시작해 단계적으로 올리고, 불안정해지면 낮추는 방식이 현실적입니다.

Q9. PoE 전원을 쓰고 싶다면 무엇을 주의해야 하나요?
A. 전원부(절연/보호/발열) 설계를 반드시 확인하세요. 프로젝트 초기에는 USB-C 전원으로 기능 검증 후 PoE로 확장하는 흐름이 안전합니다.

Q10. 이 프로젝트를 실제 제품/장비 제어로 확장하려면 무엇부터 하면 좋을까요?
A. 버튼 이벤트를 GPIO 릴레이/모터/LED 제어로 연결하고, 텍스트 입력을 설정값 저장(샘플링 주기/임계치)으로 확장하면 “대시보드가 있는 장치” 형태로 빠르게 완성됩니다.

6. 확장 아이디어(콘텐츠용)

• 버튼: 릴레이 제어, 펌프/팬 ON-OFF, 테스트 트리거
• 텍스트 입력: 장치 설정값 저장 및 즉시 반영
• 상태 표시: 링크 상태, IP, 업타임, 센서값, 마지막 이벤트 시각
• 현장형: 유선 기반의 안정성 메시지 + PoE로 “한 가닥 배선” 컨셉 확장

Wired Web Dashboard on ESP32-S3 + W5500 (RJ45): PlatformIO Starter and Common Fixes

Build a wired web dashboard using ESP32-S3 and a WIZnet W5500 (SPI Ethernet, RJ45). This guide covers PlatformIO setup, static IP initialization, and fixes for common issues like “EthernetServer is abstract,” 0.0.0.0 IP, and duplicate browser requests.

This post explains how to build a simple browser-controlled web dashboard (button + text input) on an ESP32-S3 using a WIZnet W5500 (SPI Ethernet, RJ45). With static IP networking and a basic duplicate-request guard, it’s a solid starting point for device control panels, configuration pages, and wired IoT prototypes.

1. Overview
A minimal example where an Ethernet-enabled ESP32-S3 hosts a web page and triggers device-side actions from browser inputs.

Key features

• Serves a page on port 80
• Button + text input UI
• Prints events to Serial (easy hook for real control logic)
• Duplicate-request guard to prevent double actions from browsers

2. Hardware wiring essentials
Connect ESP32-S3 to W5500 via SPI. Stable SPI signals, chip select, and reset timing matter most.

Example W5500 pin mapping

• MOSI: GPIO11
• MISO: GPIO12
• SCK: GPIO13
• CS: GPIO14
• RST: GPIO9
• INT: GPIO10

Wiring tips

• Lock down CS and RST first; most bring-up issues start there.
• INT can be optional depending on your approach, but avoid pin conflicts if you use it.
• Keep SPI traces/wires short for stability at higher clocks.

3. Software setup (PlatformIO)

• Tooling: PlatformIO (VS Code)
• Framework: Arduino (ESP32)
• Ethernet: library compatibility matters on ESP32; choose an ESP32-friendly Ethernet library configuration.

Why static IP helps

• Predictable address for debugging and repeatable tests.
• Faster iteration during bring-up.

Recommended init style

Use a full call like Ethernet.begin(mac, ip, gateway, dns, subnet)

4. Run steps

1. Install PlatformIO in VS Code
2. Open the project folder (dependencies install)
3. Build & upload
4. Open Serial Monitor
5. Browse to the device IP and test inputs

5. AEO: FAQ (10 items)

Q1. Do I really need W5500 on ESP32-S3?
A. If you need stable connectivity or deployed/field reliability, SPI Ethernet is often more predictable than Wi-Fi.

Q2. Is the W5500 INT pin required?
A. Not always. Polling can work, but interrupts help efficiency and responsiveness.

Q3. Compile error: “EthernetServer is abstract.”
A. That points to a library compatibility issue. Switch to an ESP32-compatible Ethernet library fork/alternative via your project dependencies.

Q4. Ethernet IP shows 0.0.0.0.
A. Check in order:

• SPI wiring and correct CS pin
• Reset timing and power stability
• Use a full init call including gateway/subnet

Q5. Static IP vs DHCP: which is better?
A. Static IP is best during development for predictable access. For deployments, DHCP plus discovery (like mDNS) is often considered.

Q6. One click triggers actions twice.
A. Browsers can generate multiple requests. Add a timestamp-based guard to ignore repeated actions within a short window.

Q7. The page loads but clicks behave oddly.
A. Verify URL parsing and endpoint design. Separate action and message paths and log request details to Serial.

Q8. What SPI clock should I use?
A. It depends on wiring and layout. Start with a stable clock, then increase gradually; drop back when instability appears.

Q9. Want PoE power—what should I watch for?
A. Power design (isolation, protection, heat) matters. Validate functionality on USB-C first, then move to PoE.

Q10. How do I turn this into real device control?
A. Map the button to GPIO/relay/motor control, and use the text input to store/apply configuration like intervals or thresholds.

6. Extension ideas

• Button: relay control, pump/fan toggle, test triggers
• Text input: configuration storage and immediate apply
• Status widgets: link state, IP, uptime, sensor data, last event time
• Deployment: emphasize wired stability and evolve toward single-cable concepts with PoE