ESP32 LVGL 튜토리얼: 터치스크린 UI 만들기

ESP32 UI에 시각적 편집기를 사용하는 이유

전통적인 방식으로 ESP32용 터치스크린 인터페이스를 만드는 것은 느립니다. 각 위젯을 배치하기 위한 LVGL C 코드를 직접 작성하고, 색상과 크기를 설정하고, 보드에 플래시하고, 화면을 들여다보고, 몇 픽셀을 조정하고, 다시 플래시합니다. 작은 변경 하나에도 하드웨어와 왕복이 필요합니다.

시각적 편집기는 이 과정을 뒤집습니다. LVGL 위젯을 캔버스에 드래그하고, 클릭으로 스타일을 설정하고, 결과를 즉시 확인합니다. 만족스러우면 C 코드를 내보내면 됩니다. 재컴파일하는 대신 디자인에 시간을 쓸 수 있습니다.

필요한 것

따라오기 위해 많은 것이 필요하지 않습니다:

• 디스플레이가 있는 ESP32 보드, LVGL을 실행할 수 있는 모든 ESP32 변형이 작동합니다(특정 보드에 대해서는 아래를 참고).
• 선호하는 펌웨어 툴체인: ESP-IDF, Arduino, 또는 PlatformIO, LVGL 8.x가 이미 추가되고 디스플레이 + 터치 드라이버가 작동 중이어야 합니다.
• 무료 PicoPixel 계정, 이 가이드의 모든 작업은 브라우저에서 이루어집니다.

1단계 - 디스플레이 크기 설정하기

편집기를 열고 새 프로젝트를 시작합니다. 가장 먼저 맞춰야 할 것은 해상도입니다. 디자인이 물리적 화면과 픽셀 단위로 일치하도록 해야 합니다.

디스플레이에 맞는 프리셋을 선택하세요:

• 320×240, 가장 일반적인 소형 SPI TFT 패널(ST7789, ILI9341).
• 240×240, GC9A01 같은 원형 디스플레이.
• 480×320, 480×480, 또는 800×480, 대형 및 정사각형 패널.

처음부터 올바르게 설정하면 디자인한 내용이 디바이스에 그대로 표시됩니다.

2단계 - 드래그 앤 드롭으로 디자인하기

이제 재미있는 부분입니다. 팔레트에서 LVGL 위젯을 캔버스에 드래그합니다. 버튼, 레이블, 슬라이더, 호, 스위치, 차트, 드롭다운 등 30가지 이상의 위젯 타입이 있습니다. 배치한 다음, 사이드 패널에서 색상, 폰트, 간격, 둥근 모서리를 시각적으로 스타일링합니다. 이 단계에서는 C 코드가 필요 없습니다.

작업하면서 알아두면 유용한 것들:

• 여러 화면. 필요한 만큼 화면을 추가하고 화면 간 내비게이션을 연결합니다. 메뉴, 설정 페이지, 대시보드에 매우 유용합니다.
• 처음부터 터치 지원. 위젯은 탭에 반응하고 컨테이너는 스크롤되므로 정적인 레이아웃이 아닌 실제 터치스크린 상호작용을 디자인할 수 있습니다.
• 폰트와 이미지도 핵심 기능. 임베디드 디바이스의 텍스트와 그래픽은 LVGL이 저장할 수 있는 형식으로 변환해야 합니다. PicoPixel이 이를 대신 처리합니다. 폰트를 작게 유지하는 방법은 폰트 가이드를, 애니메이션이 있는 멀티 스테이트 위젯을 원한다면 스프라이트 가이드를 참고하세요.

3단계 - 실시간으로 미리보기

하드웨어에 손대기 전에 미리보기를 실행하세요. PicoPixel은 실제 LVGL 엔진을 WebAssembly로 컴파일해 브라우저에서 직접 실행하므로, 보이는 것이 모형이나 대략적인 근사치가 아닌 진짜 LVGL 렌더링입니다.

버튼을 탭하고, 슬라이더를 드래그하고, 스크롤하며 화면 내비게이션을 확인합니다. 여기서 레이아웃 문제를 수정하는 데는 몇 초가 걸리지만, 디바이스에서 수정하려면 플래시 사이클이 필요합니다. 팀원이나 클라이언트에게 피드백을 받기 위해 미리보기 링크를 공유할 수도 있습니다.

4단계 - 프로덕션 준비 C 코드 내보내기

디자인이 완성되면 내보냅니다. 깔끔하고 표준적인 LVGL 8.x C 코드가 담긴 picopixel_lvgl_ui.zip을 받게 됩니다:

• ui.c / ui.h, 진입점으로 ui_init()와 ui_tick()을 포함합니다.
• screens.c / screens.h, 화면과 레이아웃.
• styles, fonts, images, actions, vars, 디자인에서 사용하는 모든 것이 자동 생성됩니다.
• README.md, 내보내기에 대한 평문 설명(5단계에서 다룹니다).

독자적인 의존성이 없고 추가해야 할 PicoPixel 런타임 라이브러리도 없습니다. 순수한 LVGL이므로 ESP-IDF, Arduino, PlatformIO 어느 것을 사용해도 동일하게 작동합니다.

5단계 - ESP32 프로젝트에 UI 추가하기

내보낸 파일을 프로젝트에 압축 해제합니다(대부분 ui/ 폴더 아래에 둡니다). 그런 다음 펌웨어에서 두 가지만 하면 됩니다. LVGL과 디스플레이/터치 드라이버 설정 후 한 번 ui_init()를 호출하고, 메인 루프에서 ui_tick()를 호출합니다.

Arduino 스타일 스케치에서의 모습:

#include <lvgl.h>
#include "ui/ui.h"          // exported by PicoPixel

void setup() {
  lv_init();
  // ... initialize your display + touch drivers here ...
  ui_init();                // builds the UI you designed
}

void loop() {
  lv_timer_handler();       // let LVGL render and handle input
  ui_tick();                // keep PicoPixel's screens updated
  delay(5);
}

런타임에 화면을 전환하려면(예: 버튼이 눌렸을 때) 원하는 화면과 함께 loadScreen()을 호출합니다. 통합은 이것이 전부입니다. 컴파일하고 플래시하면 ESP32의 UI가 브라우저에서 본 것과 동일하게 표시됩니다.

어떤 ESP32 보드가 작동하나요?

PicoPixel이 표준 LVGL C 코드를 내보내므로, LVGL 8.x를 실행할 수 있는 거의 모든 ESP32에서 작동합니다. 변형별 간단한 안내:

• ESP32-S3, 대부분의 디스플레이 프로젝트에 가장 적합: PSRAM을 갖춘 듀얼 코어로 풍부한 UI에 충분한 여유가 있습니다.
• ESP32(오리지널) / ESP32-S2, 간단한 인터페이스에 적합합니다. 메모리 예산에 주의하세요.
• ESP32-C3 / C6, 가벼운 단일 코어 RISC-V 칩으로 소규모 UI에 좋습니다.
• ESP32-P4, Espressif의 가장 강력한 칩으로 부드럽고 고해상도 인터페이스를 위한 전용 GPU를 갖추고 있습니다. PicoPixel 내보내기는 Waveshare와 Guition의 ESP32-P4 보드에서 테스트되었습니다.

인기 있는 기성품 보드인 LILYGO T-Display-S3, M5Stack Core2/CoreS3, Waveshare와 Sunton 디스플레이 보드, Espressif ESP32-S3-BOX, 그리고 저가형 "Cheap Yellow Display" 모두 작동합니다. ST7789, ILI9341, GC9A01(원형), ILI9488 같은 일반적인 드라이버도 지원됩니다.

UI를 메모리 효율적으로 유지하기

임베디드 디스플레이는 스마트폰이나 노트북보다 메모리가 훨씬 적으므로, 약간의 주의를 기울이면 UI를 빠르고 플래시 효율적으로 유지할 수 있습니다:

• 폰트 크기를 적절히 조정하세요. 각 폰트는 고정된 픽셀 크기로 저장되며, 대형 문자 집합(특히 중국어, 일본어, 한국어)은 금방 용량이 쌓입니다. 폰트 가이드에서 실제로 사용하는 문자만 포함하는 방법을 설명합니다.
• 디스플레이의 색상 깊이에 맞추세요. 16비트 패널에는 32비트 이미지가 필요하지 않습니다. 올바른 색상 깊이를 선택하면 에셋 크기가 줄어듭니다.
• 중복 대신 재사용하세요. 위젯을 한 번 만들고 화면과 프로젝트 전반에 걸쳐 재사용합니다.

자주 묻는 질문

PicoPixel이 ESP32와 호환되나요?

네. LVGL 8.x를 실행하는 모든 ESP32 변형에서 ESP-IDF, Arduino, PlatformIO와 함께 작동하는 표준 LVGL C 코드를 생성합니다. 내보내기는 ESP32-P4 하드웨어에서도 테스트되었습니다.

어떤 LVGL 버전을 지원하나요?

LVGL 8.x입니다. 내보낸 코드는 LVGL 8.x API를 사용하므로 LVGL 9.x 호출과 혼용하지 마세요. (v9 지원은 계획 중입니다.)

C 코드를 직접 작성해야 하나요?

5단계의 소량의 연결 코드(즉, ui_init()와 ui_tick() 호출)만 작성하면 됩니다. UI 자체는 시각적으로 디자인되고 자동으로 생성됩니다.

무료인가요?

네. PicoPixel은 개인 및 취미 사용에는 무료이며 신용카드가 필요하지 않습니다. 상업적 사용은 월 $17(연간 $204)부터 시작합니다.

다음 단계

이제 아이디어에서 플래시된 UI까지의 전체 과정을 알게 됐습니다. 해상도 설정, 드래그 앤 드롭 디자인, 실시간 미리보기, 내보내기, 통합. 다음으로:

• 편집기에서 app.picopixel.io에서 프로젝트를 시작하세요.
• 보드 및 프레임워크 지원에 대한 자세한 내용은 ESP32 GUI 빌더 페이지를 살펴보세요.
• 애니메이션 스프라이트와 커스텀 폰트로 위젯을 더욱 풍부하게 만드세요.
• 다른 옵션과 비교하고 싶다면 PicoPixel이 다른 LVGL 편집기와 어떻게 다른지를 확인하세요.