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

ESP32 Wi-Fi 날씨 스테이션

ESP32로 온습도를 측정하고 OLED 디스플레이에 표시하며, Wi-Fi를 통해 웹 브라우저에서도 확인할 수 있는 IoT 기상 관측소입니다.

🧩 필요한 모듈

브레드보드
ESP32
점퍼 와이어
OLED 디스플레이 (0.96인치 I2C)
온도 센서 (DHT11)

📖 단계별 설명서

📝

1단계준비물 확인

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

  • ESP32 보드 1개
  • 브레드보드 1개
  • 점퍼 와이어 6개
  • DHT11 온습도 센서 1개
  • OLED 디스플레이 (0.96인치 I2C) 1개

💡 팁: ESP32는 Arduino IDE에서 보드 매니저를 통해 설치 후 사용할 수 있습니다.

📝

2단계회로 연결하기

  1. DHT11의 데이터 핀을 GPIO4에 연결합니다.
  2. DHT11의 VCC를 3.3V, GND를 GND에 연결합니다.
  3. OLED의 SDA를 GPIO21, SCL을 GPIO22에 연결합니다.
  4. OLED의 VCC를 3.3V, GND를 GND에 연결합니다.

📐 회로도

회로도 이미지

/images/projects/esp32-weather-station-circuit.png

💡 팁: ESP32는 3.3V 로직이므로 5V 전원이 필요한 부품은 주의하세요.

📝

3단계코드 작성하기

Wi-Fi에 연결하여 웹서버를 실행하고, 온습도 데이터를 OLED와 웹 페이지 모두에 표시합니다.

code.ino
#include <WiFi.h>
#include <WebServer.h>
#include <DHT.h>
#include <Wire.h>
#include <Adafruit_GFX.h>
#include <Adafruit_SSD1306.h>

#define DHTPIN 4
#define DHTTYPE DHT11
#define SCREEN_WIDTH 128
#define SCREEN_HEIGHT 64

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

DHT dht(DHTPIN, DHTTYPE);
Adafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, -1);
WebServer server(80);

float temp = 0, hum = 0;

void handleRoot() {
  String html = "<!DOCTYPE html><html><head>";
  html += "<meta charset='UTF-8'>";
  html += "<meta http-equiv='refresh' content='5'>";
  html += "<style>body{font-family:sans-serif;text-align:center;padding:40px;background:#f0f4f8;}";
  html += ".card{background:white;border-radius:16px;padding:30px;max-width:400px;margin:auto;box-shadow:0 4px 12px rgba(0,0,0,0.1);}";
  html += ".temp{font-size:48px;color:#e74c3c;font-weight:bold;}";
  html += ".hum{font-size:48px;color:#3498db;font-weight:bold;}</style>";
  html += "</head><body><div class='card'>";
  html += "<h1>ModuKit Weather</h1>";
  html += "<p class='temp'>" + String(temp, 1) + " C</p>";
  html += "<p class='hum'>" + String(hum, 1) + " %</p>";
  html += "<p>Updated every 5 sec</p>";
  html += "</div></body></html>";
  server.send(200, "text/html", html);
}

void setup() {
  Serial.begin(115200);
  dht.begin();
  
  if (!display.begin(SSD1306_SWITCHCAPVCC, 0x3C)) {
    Serial.println("OLED 연결 실패");
  }
  display.clearDisplay();
  display.setTextSize(1);
  display.setTextColor(SSD1306_WHITE);
  display.setCursor(0, 0);
  display.println("WiFi connecting...");
  display.display();
  
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  
  Serial.println("\nWiFi connected!");
  Serial.print("IP: ");
  Serial.println(WiFi.localIP());
  
  server.on("/", handleRoot);
  server.begin();
}

void loop() {
  server.handleClient();
  
  temp = dht.readTemperature();
  hum = dht.readHumidity();
  
  if (!isnan(temp) && !isnan(hum)) {
    display.clearDisplay();
    display.setTextSize(1);
    display.setCursor(0, 0);
    display.println("ModuKit Weather");
    display.drawLine(0, 10, 128, 10, SSD1306_WHITE);
    
    display.setTextSize(2);
    display.setCursor(0, 20);
    display.print(temp, 1);
    display.println(" C");
    display.setCursor(0, 44);
    display.print(hum, 1);
    display.println(" %");
    display.display();
  }
  
  delay(2000);
}
+73 줄 더 보기

💡 팁: ssid와 password를 자신의 Wi-Fi 정보로 변경하세요. 업로드 후 시리얼 모니터에서 IP 주소를 확인합니다.

📝

4단계업로드 및 테스트

  1. Arduino IDE에서 ESP32 보드와 라이브러리(DHT, Adafruit SSD1306, Adafruit GFX)를 설치합니다.
  2. Wi-Fi SSID와 비밀번호를 코드에 입력합니다.
  3. 코드를 업로드합니다.
  4. OLED에 온습도가 표시됩니다.
  5. 시리얼 모니터에서 IP 주소를 확인하고 브라우저에 입력하면 웹 페이지에서도 확인할 수 있습니다!

💡 팁: 같은 Wi-Fi에 연결된 스마트폰에서도 IP 주소로 접속 가능합니다.

🎉

축하합니다!

"ESP32 Wi-Fi 날씨 스테이션" 프로젝트를 완성했습니다!