ESP32 내부 웹페이지
같은 Wi-Fi에 연결된 휴대폰이나 노트북에서 ESP32를 직접 제어합니다.
- 가장 빠르게 구현 가능
- 별도 서버 불필요
- 학교 Wi-Fi의 기기 간 통신 차단에 영향받을 수 있음
THINK • BUILD • DEBUG
만들고 싶은 것을
만들고 싶은 것을
ESP32로 구현하세요.
무엇을 만들지 정하는 단계부터 부품 선택, 핀 연결, Codex 프롬프트, 코드 작성, 오류 해결, 웹페이지 연결까지 한곳에서 도와주는 제작 사이트입니다.
가장 빠른 제작 방법
입력 하나 → 출력 하나 → 작동 확인 → 기능 추가
INPUT
센서·버튼
→
ESP32
→
OUTPUT
LED·모터·웹
01. IDEA FINDER
무엇을 만들지 떠오르지 않을 때
관심 분야와 난이도를 고르면 만들기 좋은 아이디어를 보여줍니다.
02. PROJECT DESIGNER
작품 설계 도우미
하고 싶은 기능을 적으면 필요한 구성과 제작 순서를 자동으로 정리합니다.
추천 설계안
왼쪽에서 만들고 싶은 기능을 입력하세요.
03. PARTS GUIDE
부품 사전
부품의 역할, 추천 핀, 사용 시 주의사항을 빠르게 확인하세요.
04. CODEX PROMPT
Codex 프롬프트 생성기
핀 번호와 기능을 명확히 적은 프롬프트를 만들어 잘못된 코드 생성을 줄입니다.
생성된 프롬프트
왼쪽 내용을 채운 뒤 프롬프트를 생성하세요.
권장 요청 순서
단독 테스트 코드 → 두 기능 결합 → 전체 통합 코드 → 오류 수정
05. STARTER CODE
부품 단독 테스트 코드
통합 코드를 만들기 전에 부품 하나씩 작동하는지 먼저 확인하세요.
LED 점멸 테스트
06. DEBUG CENTER
막혔을 때 찾아보기
증상이나 오류 문구를 검색하면 확인 순서를 보여줍니다.
07. WEB & CLOUDFLARE
홈페이지와 연결하고 싶을 때
원하는 수준에 따라 가장 간단한 방법부터 선택하세요.
Cloudflare Pages 소개 사이트
작품 설명, 사진, 기능, 제작 과정을 보여주는 홈페이지를 만듭니다.
- HTML·CSS·JavaScript만으로 제작
- Cloudflare Pages에 바로 배포 가능
- ESP32 실시간 데이터 연결 없이도 완성 가능
Cloudflare Worker 데이터 연동
ESP32가 센서값을 외부 API로 보내고 웹페이지가 이를 표시하게 만듭니다.
- 어디서든 데이터 확인 가능
- HTTP·JSON 이해 필요
- 인증키와 저장 방식 설계 필요
보안 주의
Wi-Fi 비밀번호, API 키, 인증 토큰을 GitHub나 공개 웹페이지에 올리지 마세요. 공개 배포 전에는 코드에서 비밀값을 분리해야 합니다.
HELP REQUEST
다른 사람에게 도움을 요청할 때
- 무엇을 만들고 있는지
- 사용 부품과 핀 번호
- 어디까지 정상 작동하는지
- 오류 메시지 전체
- 방금 바꾼 코드나 배선
좋은 질문 예시
“HC-SR04 거리값은 정상인데 GPIO 19의 서보가 움직이지 않습니다. 외부 5V 전원과 공통 GND를 연결했고, 시리얼 모니터에는 오류가 없습니다.”