고급⏱ 예상 시간: 60분📝 4단계

ESP32 웹 LED 컨트롤러

ESP32의 Wi-Fi 웹서버로 스마트폰 브라우저에서 네오픽셀 LED의 색상과 패턴을 원격 제어합니다.

🧩 필요한 모듈

브레드보드

ESP32

점퍼 와이어

네오픽셀 LED 스트립 (WS2812B)

저항 (220Ω / 10kΩ)

📖 단계별 설명서

📝

1단계준비물 확인

다음 부품들을 준비해주세요:

ESP32 보드 1개
브레드보드 1개
점퍼 와이어 4개
네오픽셀 LED 스트립 (8개 LED) 1개
470Ω 저항 1개

📝

2단계회로 연결하기

네오픽셀의 DIN을 470Ω 저항을 통해 GPIO16에 연결합니다.
네오픽셀의 5V를 ESP32의 VIN에 연결합니다.
네오픽셀의 GND를 ESP32의 GND에 연결합니다.

📐 회로도

회로도 이미지

/images/projects/esp32-remote-led-circuit.png

💡 팁: 네오픽셀과 ESP32는 3.3V/5V 레벨 차이가 있지만, 짧은 스트립에서는 대체로 동작합니다.

📝

3단계코드 작성하기

웹 인터페이스에서 색상 선택, 밝기 조절, 패턴 변경이 가능한 LED 컨트롤러를 만듭니다.

code.ino· 100 lines

#include <WiFi.h>
#include <WebServer.h>
#include <Adafruit_NeoPixel.h>

#define LED_PIN 16
#define LED_COUNT 8

const char* ssid = "YOUR_WIFI_SSID";
const char* password = "YOUR_WIFI_PASSWORD";

Adafruit_NeoPixel strip(LED_COUNT, LED_PIN, NEO_GRB + NEO_KHZ800);
WebServer server(80);

int r = 255, g = 0, b = 0;
int brightness = 128;
int pattern = 0; // 0=solid, 1=rainbow, 2=blink

String getPage() {
  String html = "<!DOCTYPE html><html><head>";
  html += "<meta charset='UTF-8'><meta name='viewport' content='width=device-width,initial-scale=1'>";
  html += "<style>body{font-family:sans-serif;text-align:center;padding:20px;background:#1a1a2e;color:white;}";
  html += ".btn{padding:12px 24px;margin:5px;border:none;border-radius:8px;font-size:16px;cursor:pointer;color:white;}";
  html += "input[type=range]{width:80%;}</style>";
  html += "</head><body>";
  html += "<h1>LED Controller</h1>";
  html += "<p><input type='color' id='c' value='#" + String(r < 16 ? "0" : "") + String(r, HEX) + String(g < 16 ? "0" : "") + String(g, HEX) + String(b < 16 ? "0" : "") + String(b, HEX) + "' onchange='location.href=\"/color?c=\"+this.value.substr(1)'></p>";
  html += "<p>Brightness: <input type='range' min='10' max='255' value='" + String(brightness) + "' onchange='location.href=\"/bright?v=\"+this.value'></p>";
  html += "<p><a class='btn' style='background:#e74c3c' href='/pattern?p=0'>Solid</a>";
  html += "<a class='btn' style='background:#9b59b6' href='/pattern?p=1'>Rainbow</a>";
  html += "<a class='btn' style='background:#f39c12' href='/pattern?p=2'>Blink</a></p>";
  html += "<p><a class='btn' style='background:#2c3e50' href='/off'>OFF</a></p>";
  html += "</body></html>";
  return html;
}

void setup() {
  Serial.begin(115200);
  strip.begin();
  strip.setBrightness(brightness);
  strip.show();
  
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) delay(500);
  Serial.print("IP: ");
  Serial.println(WiFi.localIP());
  
  server.on("/", [](){ server.send(200, "text/html", getPage()); });
  server.on("/color", [](){
    String c = server.arg("c");
    r = strtol(c.substring(0,2).c_str(), NULL, 16);
    g = strtol(c.substring(2,4).c_str(), NULL, 16);
    b = strtol(c.substring(4,6).c_str(), NULL, 16);
    pattern = 0;
    server.send(200, "text/html", getPage());
  });
  server.on("/bright", [](){
    brightness = server.arg("v").toInt();
    strip.setBrightness(brightness);
    server.send(200, "text/html", getPage());
  });
  server.on("/pattern", [](){
    pattern = server.arg("p").toInt();
    server.send(200, "text/html", getPage());
  });
  server.on("/off", [](){
    pattern = -1;
    for(int i=0;i<LED_COUNT;i++) strip.setPixelColor(i,0);
    strip.show();
    server.send(200, "text/html", getPage());
  });
  server.begin();
}

unsigned long lastUpdate = 0;
int blinkState = 0;
uint16_t rainbowHue = 0;

void loop() {
  server.handleClient();
  
  if (millis() - lastUpdate > 50) {
    lastUpdate = millis();
    
    if (pattern == 0) { // Solid
      for(int i=0;i<LED_COUNT;i++) strip.setPixelColor(i, r, g, b);
    } else if (pattern == 1) { // Rainbow
      for(int i=0;i<LED_COUNT;i++) {
        uint16_t h = rainbowHue + (i * 65536L / LED_COUNT);
        strip.setPixelColor(i, strip.gamma32(strip.ColorHSV(h)));
      }
      rainbowHue += 256;
    } else if (pattern == 2) { // Blink
      blinkState = (millis() / 500) % 2;
      for(int i=0;i<LED_COUNT;i++)
        strip.setPixelColor(i, blinkState ? strip.Color(r,g,b) : 0);
    }
    
    if (pattern >= 0) strip.show();
  }
}

+82 줄 더 보기

💡 팁: Wi-Fi 자격 증명을 자신의 네트워크 정보로 변경하세요.

📝

4단계업로드 및 테스트

Adafruit NeoPixel 라이브러리를 설치합니다.
Wi-Fi 정보를 입력하고 업로드합니다.
시리얼 모니터에서 IP 주소를 확인합니다.
스마트폰 브라우저에서 해당 IP로 접속합니다.
컬러 피커로 색상을 변경하고, 슬라이더로 밝기를 조절해보세요!
Rainbow, Blink 등 패턴도 선택할 수 있습니다.

💡 팁: 같은 Wi-Fi에 연결된 어떤 기기에서든 접속 가능합니다.

🎉

축하합니다!

"ESP32 웹 LED 컨트롤러" 프로젝트를 완성했습니다!

다른 프로젝트 보기 내 학습 대시보드