ESP32 터치스크린 UI를 비주얼로 구축

1. 인터페이스 디자인

브라우저에서 PicoPixel을 열고 새 프로젝트를 시작하세요. LVGL 위젯 — 버튼, 라벨, 슬라이더, 차트, 아크, 스위치 등 — 을 캔버스에 드래그 앤 드롭하세요. ESP32 화면에 맞게 디스플레이 해상도를 설정하세요: 일반적인 SPI TFT는 320×240, 원형 GC9A01 디스플레이는 240×240, 더 큰 패널은 800×480. 색상, 폰트, 간격을 비주얼로 스타일링하세요 — 이 단계에서는 C 코드가 필요 없습니다.

2. 라이브 LVGL 시뮬레이터에서 미리보기

PicoPixel은 LVGL을 WebAssembly로 컴파일하여 브라우저에서 직접 실행합니다. 미리보기는 실제 LVGL 렌더링 엔진이며 목업이 아닙니다. 하드웨어를 만지기 전에 터치 인터랙션, 스크롤, 애니메이션을 테스트하세요. 팀원이나 고객에게 시뮬레이터 링크를 공유하여 피드백을 받을 수도 있습니다.

3. UI 파일 내보내기

LVGL C 코드(.c 및 .h 파일)가 포함된 zip 파일을 내보내세요. 출력에는 위젯 생성, 스타일링, 레이아웃, 이벤트 바인딩이 포함됩니다 — 모두 표준 LVGL 8.x API 호출을 사용합니다. 독점적 종속성이나 PicoPixel 런타임 라이브러리가 없습니다. LVGL v9.x 지원이 예정되어 있습니다.

4. 통합 및 플래시

내보낸 파일을 ESP-IDF, Arduino 또는 PlatformIO 프로젝트에 압축 해제하세요. UI 헤더를 포함하고 LVGL 디스플레이 및 입력 드라이버가 구성된 후 ui_init()을 호출하세요. 컴파일, 플래시하면 ESP32의 UI가 시뮬레이터와 픽셀 단위로 일치합니다. 더 빠른 방법으로, zip 파일을 AI 코드 어시스턴트(Claude Code, Codex 등)에 넘겨 통합을 자동으로 처리하게 할 수 있습니다.

ESP32 변형

PicoPixel은 LVGL 8.x를 지원하는 모든 ESP32 변형에서 작동하는 표준 LVGL 코드를 생성합니다:

• •ESP32 (오리지널) — SRAM이 제한적; 간단한 UI에 적합
• •ESP32-S2 — USB OTG 지원, 보통 수준의 디스플레이 능력
• •ESP32-S3 — 대부분의 디스플레이 프로젝트에 권장; PSRAM을 갖춘 듀얼 코어로 복잡한 UI에 충분한 성능
• •ESP32-C3 — RISC-V 싱글 코어; 경량 UI에 적합
• •ESP32-C6 — Wi-Fi 6 + Bluetooth 5.3; C3와 동일한 디스플레이 능력
• •ESP32-P4 — 전용 GPU와 하드웨어 픽셀 처리를 갖춘 최신 변형; 복잡한 고해상도 GUI에 탁월. Waveshare 및 Guition 보드에서 테스트 완료.

인기 개발 보드

LVGL을 지원하는 모든 ESP32 개발 보드와 호환됩니다:

• •LILYGO T-Display / T-Display-S3
• •M5Stack Core2 / CoreS3
• •Waveshare ESP32-S3 / ESP32-P4 디스플레이 보드
• •Guition ESP32-P4 디스플레이 보드
• •Elecrow 디스플레이 보드
• •Adafruit Feather ESP32-S3 TFT
• •Espressif ESP32-S3-BOX / BOX-3
• •Sunton 보드 (인기 있는 저가형 ESP32 디스플레이 보드)

호환 디스플레이 드라이버

PicoPixel은 플랫폼에 구애받지 않는 LVGL 코드를 생성합니다 — 디스플레이 드라이버는 LVGL 포트 설정에서 처리됩니다. ESP32에서 LVGL과 작동하는 일반적인 디스플레이 컨트롤러:

• •ST7789 (소형 TFT에서 가장 일반적)
• •ILI9341 (240×320 디스플레이)
• •ILI9488 (320×480 디스플레이)
• •GC9A01 (원형 디스플레이)
• •ST7796 (대형 디스플레이)
• •SSD1306 (소형 OLED)
• •MIPI DSI 디스플레이 (ESP32-P4)

디스플레이가 LVGL에서 작동하면 PicoPixel의 출력도 작동합니다.

ESP-IDF 통합

PicoPixel의 내보내기는 순수 UI 코드입니다 — lv_init(), 디스플레이 드라이버 등록 또는 틱 처리가 포함되지 않습니다. 프로젝트에 이미 작동하는 LVGL 8.x 설정이 있어야 합니다. PicoPixel의 UI를 추가하려면:

1. 1.PicoPixel에서 UI를 내보내기 (.zip 파일이 다운로드됩니다)
2. 2.프로젝트의 components/ 폴더 안에 ui/ 디렉토리 생성
3. 3.내보낸 파일을 components/ui/에 압축 해제
4. 4.components/ui/에 CMakeLists.txt를 만들고 lvgl 종속성으로 소스를 등록
5. 5.main/CMakeLists.txt의 REQUIRES 목록에 ui 추가
6. 6.main.c에 #include "ui/ui.h"를 포함하고 디스플레이 설정 후 ui_init() 호출
7. 7.빌드 및 플래시: idf.py build && idf.py flash

Arduino IDE 통합

스케치에 LVGL 8.x가 설치되어 있고 작동하는 디스플레이 드라이버가 구성되어 있어야 합니다.

1. 1.PicoPixel에서 UI를 내보내기 (.zip 파일이 다운로드됩니다)
2. 2.스케치의 src/ 디렉토리 안에 ui/ 폴더 생성
3. 3.내보낸 파일을 src/ui/에 압축 해제
4. 4..ino 파일에 #include "src/ui/ui.h" 포함
5. 5.setup()에서 lv_init() 및 디스플레이 드라이버 구성 후 ui_init() 호출
6. 6.Arduino IDE는 src/의 모든 .c 파일을 재귀적으로 자동 컴파일 — 빌드 설정 변경 불필요
7. 7.ESP32에 업로드

PlatformIO 통합

프로젝트의 lib_deps에 LVGL 8.x가 있고 작동하는 디스플레이 드라이버가 구성되어 있어야 합니다.

1. 1.PicoPixel에서 UI를 내보내기 (.zip 파일이 다운로드됩니다)
2. 2.내보낸 파일을 src/ui/에 압축 해제
3. 3.main.cpp에 #include "ui/ui.h" 포함
4. 4.LVGL 설정 후 ui_init() 호출
5. 5.platformio.ini 변경 불필요 — PlatformIO가 src/의 모든 소스를 자동 컴파일
6. 6.빌드 및 플래시: pio run --target upload

AI 지원 통합

더 빠른 방법으로, PicoPixel에서 zip을 내보내 AI 코드 어시스턴트에 넘기세요. Claude Code, GitHub Copilot 또는 Codex에 "이 PicoPixel UI 파일을 내 ESP32 LVGL 프로젝트에 추가해 주세요"라고 말하면 대부분의 어시스턴트가 파일 배치, 인클루드, 빌드 구성을 자동으로 처리할 수 있습니다.