웹 제어·음성 안내 통합 투명 LED 디스플레이

웹 브라우저에서 콘텐츠를 제작·편집하고 투명 LED 디스플레이로 송출하는 시스템을 개발했습니다. STM32 제어 보드와 웹 플랫폼을 연동하고, 텍스트 음성 안내와 모션 감지 재생, 장치 상태 모니터링을 하나의 운영 흐름으로 구성했습니다.

개발 범위

• STM32F767IIK6 기반 제어 회로, RS-485 통신부 및 PCB 설계
• C++ 펌웨어, LED 병렬 GPIO 제어와 프레임버퍼 처리 구현
• Spring Boot API 서버와 SQLite/PostgreSQL 데이터 구조 설계
• Nuxt3 웹 화면, Fabric.js 콘텐츠 편집기, WebSocket 모니터링 개발
• FFmpeg 영상 변환과 eSpeak-NG 음성 안내 연동

주요 구현 내용

• 브라우저 콘텐츠 관리: Fabric.js 편집기에서 콘텐츠를 작성하고 송출하도록 구성했습니다.
• 음성 안내: 입력한 텍스트를 eSpeak-NG로 변환해 음성 안내에 활용하도록 했습니다.
• 감지 기반 재생: PIR 센서와 연동해 사람의 움직임에 따라 콘텐츠 재생을 제어합니다.
• 장치 상태 확인: WebSocket으로 CPU, 메모리, 온도 등의 상태 정보를 표시하며, 모니터링 갱신 주기는 0.1초로 설정했습니다.
• 영상·이미지 처리: FFmpeg 영상 변환과 프레임버퍼 기반 이미지 처리를 웹 운영 기능과 연결했습니다.

설계 개선

과제	적용한 방법
편집기 격자 객체로 인한 JSON 크기 증가	격자 표현을 CSS 배경 처리로 전환
Base64 이미지의 중복 저장	구조화 데이터는 DB에, 미디어는 파일 시스템에 분리 저장
제어 장비 연결 구조의 복잡성	STM32 GPIO 직접 제어와 보드 통합 설계
LED 데이터 수신과 출력의 연결	DMA 수신과 프레임버퍼 처리 구성

시스템 구성

웹 브라우저
    ↓ HTTP / WebSocket
Spring Boot 서버 · 메인 보드
    ↓ RS-485 / 시리얼
STM32 제어 보드
    ↓ 병렬 GPIO
MT1836E LED 드라이버 · 투명 LED 디스플레이

구분	사용 기술·구성
MCU	STM32F767IIK6, ARM Cortex-M7
AP	ARM Cortex-A76 프로세서
LED 드라이버	MT1836E
통신	RS-485 3Mbps 설정, 1:N 제어
GPIO 제어	64bit 병렬 구동 구성
전원부	5V/80A 구성
서버	Java 17, Spring Boot, C++
데이터베이스	SQLite, PostgreSQL
웹	Nuxt3, Node.js 18, HTML5, Fabric.js
멀티미디어	FFmpeg, eSpeak-NG

회로·시제품 보드, 임베디드 펌웨어, API와 웹 편집기를 연결하고 시스템 통합 테스트를 진행했습니다. 하드웨어 제어와 콘텐츠 운영을 함께 다룬 투명 LED 디스플레이 개발 사례입니다.