ESP32-C3 Mini로 구축하는 스마트한 무선 개발 환경: 웹 파일 탐색기 및 편집기 만들기

안녕하세요! Mana’s Lab입니다.

ESP32나 ESP32-C3 같은 마이크로컨트롤러를 가지고 IoT 프로젝트를 진행하다 보면, 매번 소스 코드를 수정할 때마다 USB 케이블을 PC에 연결하고 펌웨어를 다시 업로드하는 과정이 번거롭게 느껴질 때가 많습니다. 특히 센서가 이미 하우징 내부에 고정되어 있거나, 접근하기 어려운 위치에 설치되어 있다면 케이블 연결은 더욱 고역이죠.

이런 불편함을 해결하기 위해, 예전에 ESP32-C3 Mini 칩 내부의 파일 시스템(LittleFS/SPIFFS)을 웹 브라우저에서 직접 관리하고 편집할 수 있는 ‘웹 기반 파일 탐색기 프로그램’을 개발했었습니다. 오늘은 이 무선 개발 환경의 개념과 장점을 소개해 보려고 합니다.

1. 왜 무선 개발 환경(Web IDE)이 필요할까?

일반적으로 ESP32 개발은 PC와 유선으로 연결된 상태에서 진행됩니다. 하지만 웹 기반 무선 개발 환경을 구축하면 다음과 같은 강력한 장점이 생깁니다.

• 케이블 프리(Cable-Free): Wi-Fi만 연결되어 있다면 언제 어디서든 칩에 접근할 수 있습니다.
• 실시간 파일 수정: MicroPython이나 내부 설정 파일(JSON, TXT 등)을 웹에서 열어 즉시 수정하고 저장할 수 있습니다.
• 비개발 환경에서도 제어 가능: 별도의 개발 툴(IDE)을 설치하지 않고, 스마트폰이나 태블릿의 웹 브라우저에서도 칩 내부 파일을 확인하고 코드를 고칠 수 있습니다.

2. 주요 구현 기능 및 아키텍처

제가 구현했던 프로그램의 핵심 기능은 크게 세 가지였습니다.

• 웹 서버 구성: ESP32-C3 내부에서 HTTP 웹 서버를 구동하여 PC나 스마트폰의 브라우저로 접속할 수 있는 UI 페이지를 제공합니다.
• 파일 탐색기(File Explorer): 내장 파일 시스템(LittleFS 등)과 연동하여 파일 목록 보기, 파일 편집, 삭제 기능을 웹 화면에 구현했습니다.
• 웹 에디터(Web Editor): 오픈소스 코드 에디터 라이브러리를 활용하여, 웹브라우저 상에서 소스 코드를 직접 편집하고 ESP32-C3 내부에 바로 ‘저장(Save)’할 수 있도록 만들었습니다.
• 파일에 작성한 마이크로 파이썬 코드를 직접 실행할 수 있습니다.

3. 작동 프로세스

1. ESP32-C3 전원이 켜지면 지정된 Wi-Fi 공유기에 접속하거나 자체 AP 모드를 켭니다.
2. 할당된 IP 주소로 웹 브라우저에 접속합니다.
3. 깔끔하게 구성된 웹 화면에서 내부 폴더와 파일 구조가 한눈에 보입니다.
4. 수정하고 싶은 파일(예: main.py 또는 설정 파일)을 클릭해 코드를 수정한 뒤 ‘저장’을 누르면, 무선으로 칩 내부에 반영됩니다.

4. 마치며

ESP32-C3 Mini의 작은 크기와 강력한 Wi-Fi 기능 덕분에, 외부 장치 없이 칩 자체만으로도 이런 훌륭한 무선 개발 환경을 품을 수 있었습니다. 특히 IoT 디바이스를 필드에 배치하고 유지보수할 때 이보다 편한 방법이 없더군요.

자세한 구동 모습은 함께 업로드한 유튜브 쇼츠 영상에서 확인하실 수 있습니다