ESP32-S3 Matrix Portal Display System
AI코딩의 등장과 함께 다양한 분야에서 AI와의 협업을 통한 시스템 개발이 가능해졌습니다.
YOUTUBE나 블로그에서의 AI코딩과 관련된 개발 가이드들은 대부분 웹개발을 위주로 합니다. 대부분의 개발자들이 개발 결과물의 저장소로 GitHub를 이용하고 있는데, 많은 수의 저장소가 대부분 웹 플랫폼과 관련된 서비스이기도 하고 웹 개발자들이 많은 이유도 있을듯 합니다.
[LED STATION] 프로젝트는 Visuaul Studio Code + GitHub Copilot AI Code Assistant + PlatformIO 개발 플랫폼에서 아두이노 프레임워크를 이용한 소프트웨어 개발과 Adafruit Matrix Portal S3 제어보드, HUB75 인터페이스 기반의 LED Matrix 64x64 P2.0을 이용하여 다양한 모드에서 활용될 수 있는 하드웨어를 개발하는데 목표를 두고 있습니다.
아래는 최종 결과물인 [LED STATION]으로 총 9가지 모드를 가지고 있습니다.
모드간 전환 및 제어는 1) 내장 UP/DOWN버튼, 2) IR 리모트 컨트롤러, 3) MQTT 메시지 등의 다양한 채널을 통해 가능하도록 하였습니다.
개발 내용이 다소 길기는 하지만 전체 프로젝트에 대해서 조금은 자세하게 설명하고, 개발된 소프트웨어 소스코드를 공유함으로써 아두이노 기반의 초보 개발자에게 도움이 되고자 총 10편정도의 프로젝트 연재 글을 올리려고 합니다.
1. LED Station : 주요 기능 및 사양
Adafruit Matrix Portal ESP32-S3를 이용한 멀티 모드의 LED 매트릭스 디스플레이는 디지털시계, MQTT 스테이션, 카운트다운 타이머 그래픽 패턴, 이미지 뷰어, GIF 애니메이션 뷰어, 폰트 뷰어, 시스템 정보 표시 및 IR 코드 스캐너의 모드를 갖는 다기능 디스플레이 입니다.
디스플레이 모드
- 1) Clock Mode : 실시간 디지털 시계로 NTP서버와의 동기화를 통해 정확한 현재 시간을 제공합니다.
- 2) MQTT Mode: 실시간 MQTT 메시지를 수신하여 모드를 변경하거나, RFID관련된 메시지인 경우 수신된 메시지에 따라 합격/불합격 판정과 관련된 결과값을 표시합니다. RFID를 이용하는 현장에서의 전광판 역할을 대신합니다.
- 3) Countdown Mode: 가속도 센서와 모래알갱이를 표현하는 LED Dot를 이용하여 모래시계를 구현합니다.
- 4) Pattern Mode: 다이내믹한 패턴형 애니메이션과 알고리즘에 의한 그래픽 효과를 다양하게 보여줍니다. IR 리모트 컨트롤러의 Left/Right버튼으로 패턴간 이동이 가능합니다.
- 5) Image Mode: 이미지 파일 (*.PNG)을 순차적으로 보여줍니다. IR 리모트 컨트롤러의 Left/Right버튼으로 이미지간 이동이 가능합니다.
- 6) GIF Mode: GIF파일을 이용한 애니메이션을 보여줍니다. IR 리모트 컨트롤러의 Left/Right버튼으로 이미지간 이동이 가능합니다.
- 7) Font Mode: 시스템 내장 폰트와 커스텀 폰트의 Glyph를 확인하는 기능입니다.
- 8) SysInfo Mode: 시스템 일반 정보, 메모리 정보 및 네트워크 정보를 확인합니다.
- 9) IR Scanner: Infrared 리모트 컨트롤러의 코드값을 스캔하고, 시스템에 반영하는 기능을 포함합니다.
디스플레이 모드 및 미디어 전환 제어
- IR Remote Control: NEC호환 프로토콜을 사용하는 원격제어 기능을 이용하여, 1~9번 모드의 전환 및 미디어간 이동을 지원합니다.
- Physical Buttons: Adafruit Matrix Portal S3 보드에 내장된 UP/DOWN 버튼을 이용하여 디스플에이 모드간 순환 이동을 지원합니다.
- MQTT Commands: 1) MQTT 메시지를 이용하여 디스플레이 모드 및 미디어 전환을 직접적으로 변환할 수 있습니다. (3.0은 모드 전환, 3.2처럼 소숫점 뒤부분은 해당 모드의 미디어 순서에 직접 접근이 가능하게 합니다.)
- Auto-timeout: 각 디스플레이 모드는 추가 활동이 없는 경우 지정된 시간(Inactive Timeout 5분, 변경가능)이 지나면 자동으로 기본모드(설정가능)로 전환됩니다.
핵심 기술 요소
- 64x64 RGB LED Matrix : P2, P2.5, P3등 실내에서 사용되는 64x64의 고해상도 LED Dot Matrix를 제어합니다.
- ESP32-S3 with PSRAM : 복잡하고 다양한 형태의 미디어 패턴 애니메이션을 지원하기 위해 ESP32-S3에 내장된 PSRAM을 버퍼로 사용하여 성능을 향상시킵니다.
- LittleFS Storage: PNG이미지 파일, GIF 애니메이션 파일 및 폰트를 저장하기 위하여 LittleFS기반의 저장소를 관리합니다.
- WiFi & MQTT: Network connectivity with automatic reconnection
- Real-time Updates: NTP time synchronization and live data display
결과물 확인 : YouTube
- 실제로 제작된 프로토타입을 실행하고 테스트하는 동영상입니다. 모드 전환시 필요한 'Beep'음과 배경음악만 나오고 자막, 음성 없습니다. 그냥 결과물만 확인하는 용도로 시청해 주시면 감사하겠습니다.
- LED Matrix Station V1.0 : https://youtu.be/yr7WbjEC45Y
2. 하드웨어 요구사항
주요 부품 구성
- 메인 컨트롤러 : Adafruit Matrix Portal ESP32-S3
- 1) Adafruit : Adafruit Matrix Portal S3 CircuitPython Powered Internet Display
- 2) Alliexpress : For 5778 Adafruit Matrix Portal S3 CircuitPython Powered Intern - 64x64 RGB LED Matrix Panel (P2 or P3 spacing recommended)
- 1) Alliexpress : 2mm Pitch(P2) SMD1515 64x64 Pixel RGB Full Color Indoor LED Panel Matrix - 5V/5A Power Supply
- LED Matrix 최대 밝기시 대응 가능한 5V / 5A 전원공급용 아답터 (명호전자, 국산), 4A 이상 이면 되지만, 안정적 전원 공급을 위해서 5A를 추천
- 1) Coupang : 아답터 100~240V / 5V 5A [내경2.1~2.5mm/외경5.5mm] - IR Remote Control
- NEC 프로토콜 호환형 Infrared 리모트 컨트롤 송신기/수신기
- 수신기가 포함 안되는 경우 38K 표준형 수신기 모듈을 사용 : 2) 쿠팡 구매 링크 참조
- 1) Coupang : Yahboom IR 적외선 원격 컨트롤러 20 키 호환 용품 버튼 배터리 38K 변조 주파수 스마트 로봇 자동차 키트
- 2) Coupang : makePCB S346 아두이노 디지털 적외선 IR 수신기 모듈 38Khz
- 3) Alliexpress : Yahboom IR Infrared Remote Controller 20 Keys Universal with Button Battery 38K Modulation Frequency for Smart Robot Car Kit (Advanced Version)
기타 부품 구성
- 스테이션 케이스
- 3D 모델 및 출력 : Top_Cover.stl, Bottom_Cover.stl
- 케이스 모델 및 3D 프린터용 파일은 [하드웨어 구성 및 조립] 블로그 글에서 상세 기술 예정 - 프론트 불투명 아크릴
- 128mm(W) X 128mm(H) X 2T(D), Deep Gray 반투명 아크릴 : 온라인에서 주문 제작 - 상태표시 LED
- 네트워크 상태 표시용 : 3mm 원형 LED Blue 1EA + 270ohm 저항
- 전원 상태 표시용 : 3mm 원형 LED Green 1EA + 220ohm 저항 - 파워 아답터 소켓
- DC잭 제작용 전원 연결 케이블 5.5/ 2.1-2.5 mm ( Coupang ) - 파워 스위치
- 스위치 소형 전기 전원 똑딱이 누름버튼 ( Coupang ) - 리셋 버튼
- ST-1102S 5mm SMD 택트 택스위치 TACT SWITCH ( Coupang ) - 부저
- 아두이노 패시브 부저 모듈 [ELB030301] ( Coupang ) - 와이어 및 단자
- 기타 보드간 연결을 위한 전원케이블 및 신호 케이블 (전원용은 18awg, 신호용은 22awg 권장)
- 보드 및 스위치, 전원 잭 연결을 위한 말굽단자 또는 원형 단자 필요 (상황에 맞게 쓰세요) - 조립용 볼트
- 2.5X6mm 렌치 볼트 10EA : PCB 및 와이어 조립용
- 4.1X4mm 인서트 : 3mm 볼트용 플라스틱 인서트 (볼트로만 고정되어도 되지만, 자주 열고 닫는 경우 꼭 인서트 사용)
- 3.0X10mm 렌치 볼트 4EA : 상단/하단 케이스 조립용
옵션 부품 구성 (프로젝트에서 제외)
- MicroSD card : 이미지나 동영상을 많이 포함하는 경우 별도 구매해서 사용 (이 프로젝트에서는 사용하지 않음)
- External Matrix buttons : 모드 선택이나 콘텐츠 선택을 위한 매트릭스 버튼 (이 프로젝트에서는 내장 버튼과 IR리코트 컨트롤러를 사용)
- Temperature/humidity sensors : LED 디스플레이에 온도/습도를 표시하는 모드 추가시 사용 ( 이 프로젝트에서는 사용하지 않음)
3. 빠르게 시작하기
하드웨어 설정
ESP32-S3 Matrix Portal → 64x64 LED Panel
├── HUB75 Connector → LED Panel Input
├── 5V Power → Panel Power Input
└── IR Receiver → GPIO Pin (configured in config.h)
소프트웨어 설치 및 설정
GitHub
- https://github.com/woosul/MatrixPortalS3.git
Visuan Studion Code + PlatformIO 개발 환경
PlatformIO 설치 및 활용 : 초보자 가이드
[ESP32] PlatformIO로 ESP32-S3 개발하기: 초보자도 쉽게 따라할 수 있는 완벽 가이드 ESP32-S3 개발을 시작하려다가 Arduino IDE의 한계에 답답함을 느끼고 계신가요? 저도 처음엔 Arduino IDE로 시작했지만, 프
peaknine.io
Arduino IDE vs PlatformIO 개발 플랫폼 선택
확장성과 세밀한 제어를 고려한다면, PlatformIO를 선택해야죠... 안녕하세요! ESP32로 첫 프로젝트를 시작하려는데 "Arduino IDE를 쓸까, PlatformIO를 쓸까?" 고민되시나요? 저도 처음 시작할 때 똑같은 고
peaknine.io
- 펌웨어 컴파일 및 실행하기
# Clone the repository
git clone https://github.com/woosul/MatrixPortalS3.git
cd MatrixPortalS3
# Install dependencies and build
pio run
# Upload to device
pio run --target upload
# Upload filesystem data and Config.json
pio run --target uploadfs
시스템 동작환경 설정
- 프로젝트 폴더의 "data/config.json" 파일을 자신의 개발 또는 동작환경에 맞게 설정하세요.
- 설정 파일이 변경된 경우 'pio run --target uploadfs'로 변경된 파일을 타겟보드로 업로드하세요.
{
"deviceId": "YOUR_DEVICE_ID",
"deviceNo": "YOUR_DEVICE_NUMBER",
"wifiSsid": "YOUR_WIFI_SSID",
"wifiPass": "YOUR_WIFI_PASSWORD",
"mqttServer": "YOUR_MQTT_BROKER",
"mqttPort": 1883,
"mqttTopic": "your/mqtt/topic",
"panelBrightness": 128,
"buzzerVolume": 40
}
시스템 사용 방법
디스플레이 모드 및 미디어 전환
기능 | 제어 | 설명 | 비고 |
Button : 미디어 전환 | UP/DOWN | 모드 1~9번까지 순환 전환 | |
IR : 디스플레이 모드 전환 | NUM 1~9 | 숫자 1~9번 선택시, 해당 모드로 직접 이동 | |
IR : 미디어 전환 | Left/Right | 다이나믹 패턴, 이미지, 애니메이션 미디어간 순환 전환 | |
MQTT : 디스플레이 모드 전환 | mode : 1~9 | 모드 번호에 따라 모드 직접 전환 | |
MQTT : 미디어 전환 | mode : x.x | '모드번호.미디어번호' 조합으로 모드 및 미디어 직접 전환 |
MQTT 메시지 활용
사전에 설정된 MQTT 브로커의 TOPIC (#스테이션 번호)에 따라 모드 전환과 미디어 전환이 가능합니다. MQTT 메시지는 아래의 코드블럭에 정의된 JSON타입으로 전송되어야 합니다.
- 모드전환 및 미디어 전환을 위해서는 'stage : mode'로 설정되는 경우에만 가능합니다.
- 일반적인 메시지는 'stage : others'로 설정되는 경우는 모드 전환이 되지 않고, 메시지와 관련된 상태값을 출력합니다.
{
"device" : "yc201",
"seq" : "Y2506050001",
"mode": "5.1",
"stage" : "mode",
"message": "Chang mode to 5 and media to 1"",
"timestamp": "2025060812345601"
}
디스플레이 모드
- 1.0 : Clock Mode - Digital time display
- 2.0 : MQTT Standby - Waiting for messages
- 2.1 : MQTT Message - Active message display
- 3.0 : Countdown Mode - Timer functionality
- 4.0 : Pattern Mode (4.1...4.n) - Visual effects
- 5.0 : Image Mode (5.1...5.n) - Static image display
- 6.0 : GIF Mode (6.1...6.n) - Animated content
- 7.0 : Font Mode (7.1...7.n) - Typography preview
- 8.0 : SysInfo Mode - System information, system memory and network information
- 9.0 : IR Scanner - Remote debugging
4. 프로젝트 시작하기
프로젝트 구조
├── src/ # Main source code
│ ├── main.cpp # Application entry point
│ ├── mode_*.cpp # Display mode implementations
│ ├── utils.cpp # Utility functions
│ └── ir_manager.cpp # IR remote handling
├── include/ # Header files
│ ├── config.h # Hardware and app configuration
│ ├── mode_*.h # Mode class definitions
│ └── common.h # Shared definitions
├── data/ # Filesystem data
│ ├── config.json # Runtime configuration
│ ├── images/ # PNG image assets
│ └── gifs/ # Animated GIF files
├── fonts/ # Custom font definitions
├── lib/ # External libraries
├── tools/ # Development utilities
└── docs/ # Documentation assets
개발 환경 및 라이브러리
핵심 라이브러리
- ESP32-HUB75-MatrixPanel-DMA: 64x64 LED 매트릭스 구동을 위한 드라이버 라이브러리
- PubSubClient: MQTT 통신을 위한 클라이언트 라이브러리
- ArduinoJson: JSON타입의 MQTT 메시지를 읽고, 생성하기 위한 라이브러리
- AnimatedGIF: GIF 애니메이션 지원을 위한 기본 라이브러리
- LittleFS: ESP32와 같은 마이크로 프로세서를 지원하기 위한 원격 저장소 관리 라이브러리
주요 개발 툴
- Visual Studion Code + GitHub Copilot : 프로젝트 개발을 위한 통합 개발환경 및 AI 코드 어시스턴트
- PlatformIO : 마이크로 프로세스의 펌웨어를 컴파일하고 패키지를 관리하는 플랫폼으로 Arduino 프레임워크를 지원
- Python 3.x : 폰트 내장을 위한 TTF > BDF 변환 유틸리티 등의 제작을 위한 개발 툴
- Static Analysis : 개발중 C++ 문법이나 포맷등을 지원
소프트웨어 개발 주요 프로세스
디스플레이 모드별 표준 구성
- 모든 개별 모드는 표준화된 프로세스로 동작되도록 구성됩니다. 기존 모드 및 신규 모드 모두 표준화된 프로세스를 준수해야 동작됩니다.
- 각 모드의 표준 프로세스는
setup()
,run()
,exit()
핵심 메소드 및 지원 메소드로 구성됩니다. - 각 모드는 main.cpp모듈 안에 등록되고 전환되는 로직에 포함되어야 합니다.
- 각 모드의 등록과 설정은 config.h에서 관리됩니다. (모드 명칭, 모드 번호 등)
커스텀 폰트의 등록 및 관리
Adafruit GFX library/
안의 'FontConverter' Python 툴을 이용하여 TTF폰트를 GFX 폰트로 변경하여 사용합니다.- 변경된 모든 폰트파일 (*.h)은
fonts/
폴더에 저장합니다. - 저장되고 사용할 폰트는
font_manager.cpp
에 등록하여 사용합니다. - Font_manager에 등록된 폰트는 getFont()메소드로 폰트를 로딩하여 사용합니다.
MQTT 메시지 형식
{
"device": "string", # 개별 스테이션의 ID값으로 TOPIC으로 활용됨
"seq": "string", # 메시지의 전송ID로 순서값 형태로 사용
"code": "string", # 모드/미디어 전환 및 일반 메시지의 유형 정의
"stage": "string", # 모드전환 또는 일반 메시지에서의 상태값 정의
"message": "string", # 메시지 내용
"timestamp": "string" # 메시지 전송관련 타임 스탬프
}
주요 성능 기준
메모리 사용 기준
- Flash : ~1.2MB (어플리케이션 + 파일시스템)
- RAM : ~180KB (PSRAM과 함께 디스플레이를 위한 버퍼에서 사용, 참고로 더블버퍼 사용)
- PSRAM : ~512KB (대용량 이미지 및 GIF 애니메이션 처리를 위해 사용)
디스플레이 사양
- Resolution : 64x64 Dot Matrix LED pixels (총 4,096 pixels)
- Color Depth : 각 채널별 6-bit 칼라 사용 (262,144 컬러 / pixel, 성능 영향 있음)
- Refresh Rate : 120Hz (깜박임 최소화를 위한 디스플레이 채용)
- Brightness : 0-255 수준의 밝기 조절 (전원 안정화 및 눈부심 방지를 위해 50% (128)로 사용하는 것을 권장)
5. 문제 해결 : Troubleshooting
일반적인 문제
네트워크(WiFi) 연결 실패
- WIFI 연결을 위한 'SSID'와 'password'를 확인하세요. (config.json에 등록된 내용을 확인해주세요.)
- 사용하고 있는 WiFI 공유기가 2.4GHz 대역을 지원하는지 확인하세요.
- Adafruit Matrix Portal S3에 내장된 WIFI모듈은 다른 모듈보다 네트워크 접속에 강하지 못합니다. 최초 연결시 공유기와 가까운 곳에서 접속해보세요. 특히 전원이 불안정한 경우 네트워크 연결도 불안정하므로 단독 전원 사용과 전원 안정성을 확인해주세요.
MQTT 연결 실패
- MQTT 브로커 서버의 연결주소 및 포트를 확인해주세요. (기본포트 : 1883)
- 데스크탑 PC 또는 라우터의 방화벽 설정을 확인해주세요.
- MQTT 메시지 수신을 위해 올바른 'TOPIC'을 구독하고 있는지 확인해주세요.
- MQTT 브로커 서버는 Docker등을 활용해 쉽게 운영하실 수 있습니다.
LED 디스플레이가 깜박임
- LED 디스플레이가 깜박이거나 노이즈가 있다면, 전원 문제일 가능성이 높습니다. 5V 4A이상의 전원이 충분히 공급되어야 합니다.
- 밝기가 높게 설정되는 경우 많은 전원을 사용합니다. 특히 USB전원만을 사용하는 경우에는 깜박임이 자주 발생합니다. 밝기 정도를 50%이하고 설정해보세요.
- LED 디스플레이와 직접적으로 연결되는 HUB75 표준 인터페이스에 사용되는 케이블을 점검하세요.
GIF 애니메이션 불안정
- GIF 표준 형식과 호환되게 만들어졌는지 확인하세요. (https://essygif.com을 활용하세요.)
- PSRAM의 사용 가능 용량을 확인하세요.
- 가능한한 GIF애니메이션의 파일 사이즈를 줄여보세요.
6. 라이선스
이 블로그글을 포함한 하드웨어 설계, 소프트웨어 설계 및 코드 등 제품개발과 성과물은 'MIT 라이선스'규정을 따릅니다. ( MIT License - see the LICENSE file for details.) 부가적으로 학습 및 취미 목적으로 사용하시는 모든 경우는 무상으로 제공되지만, 상업적으로 사용하시는 경우는 허가되지 않습니다.
저작자
Denny Kim - Feature Lead : GitHub Copilot with Claude Sonnet 4.0 model
- Email: woosul@gmail.com
- GitHub: @woosul
- Tistory Blog : @peaknine
향후 개발 계획
- 웹 기반 설정 및 제어 인터페이스
- OTA (Over-The-Air)를 이용한 펌웨어 업데이트
- 환상적인 애니메이션 기능 라이브러리
- 다중 패널 지원용 라이브러리
- 산업용/상업용 IoT 플랫폼 통합
- 설정 및 제어용 모바일 앱
'AI 기획 및 분석' 카테고리의 다른 글
로컬 AI 도입계획 가이드 - 4) ROI분석서 (13) | 2025.08.08 |
---|---|
로컬 AI 도입계획 가이드 - 3) 투자계획서 (12) | 2025.08.07 |
로컬 AI 도입계획 가이드 - 2) 3개년 추진 로드맵 (8) | 2025.08.06 |
로컬 AI 도입계획 가이드 - 1) 현황분석서 (9) | 2025.08.05 |
AI 시대, 소멸 위기에 처한 직업군 TOP 30 (17) | 2025.07.04 |