lvgl

KO | EN

gitlite — search

#javascript #php #java #hacktoberfest #python #ruby #shell #objective-c #c-sharp #csharp #community #language

★ 24,395 Open GitHub ↗

LVGL은 소형 MCU부터 3D 지원 MPU에 이르는 기기를 위한 무료 고기능 임베디드 UI 라이브러리이며, 전문 에디터 및 툴링인 LVGL Pro로 더욱 강화됩니다.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

[문서](https://lvgl.io/docs "Documentation") •
[포럼](https://forum.lvgl.io "Community forum") •
[블로그](https://blog.lvgl.io "News and articles") •
[서비스](https://lvgl.io/services "Professional services")
![spacer](https://upload.wikimedia.org/wikipedia/commons/c/ca/1x1.png)
**EN** •
[中文](./docs/README_zh.md) •
[日本語](./docs/README_ja.md) •
[한국어](./docs/README_ko.md) •
[PT](./docs/README_pt_BR.md) •
[עברית](./docs/README_he.md)

[![](https://lvgl.io/github-assets/logo-colored.png)](https://lvgl.io)

# Light and Versatile Graphics Library

![Ebike demo with vector graphics](https://github.com/user-attachments/assets/965e8b8b-d240-45ed-9744-bdd81785967d)
 
![ECG demo with animated 3D model](https://github.com/user-attachments/assets/d83820ed-5448-494e-94c8-3ca1b4ddceb0)

[개요](#overview "What LVGL is") •
[기능](#features "What LVGL can do") •
[LVGL Pro](#lvgl-pro "The professional toolchain") •
[예제](#examples "C and XML examples") •
[통합](#integration "How to add LVGL to your project") •
[기여하기](#contributing "How to get involved") •
[라이선스](#license "Licensing terms")

## Overview
\*\*LVGL\*\*은 모든 플랫폼에서, 어떤 벤더의 어떤 MCU 및 MPU용 그래픽 사용자 인터페이스든 생성할 수 있게 해주는 자유 오픈소스 UI 라이브러리입니다.
\*\*요구사항\*\*: LVGL은 외부 종속성이 없어 소형 MCU부터 3D를 지원하는 멀티코어 Linux 기반 MPU에 이르기까지 모든 현대적 타깃을 쉽게 컴파일할 수 있습니다. \*일반적인\* UI의 경우 약 100kB의 RAM, 약 200~300kB의 플래시, 그리고 렌더링을 위해 화면의 1/10 크기에 해당하는 버퍼 크기만 있으면 됩니다.
\*\*광범위한 채택\*\*: 칩 벤더(NXP, Espressif, Renesas 등), RTOS 프로젝트(Zephyr, NuttX 등), 그리고 보드 제조업체(Riverdi, Seeed Studio, VIEWE, Elecrow 등)가 이미 LVGL을 통합했습니다. 개발 보드에 디스플레이가 장착되어 있다면, 벤더 역시 LVGL 지원을 제공할 가능성이 매우 높습니다.
\*\*전문가용 도구\*\*: C 코드를 직접 작성하는 대신, 편집기, Figma 통합, 온라인 뷰어, CLI를 갖춘 완전한 툴킷인 [LVGL Pro](#lvgl-pro)를 사용하여 UI 개발 속도를 크게 높이고 간소화할 수 있습니다. 추가 런타임이나 숨겨진 마법 없이 XML로부터 순수한 LVGL C 코드를 내보냅니다. 비상업적 용도 및 평가는 무료입니다.
\*\*시작하려면\*\*, [Examples](#examples)를 둘러보거나, [Simulator project](https://lvgl.io/docs/open/integration/pc)를 실행하고, LVGL Pro의 [Online Viewer](https://viewer.lvgl.io/)를 탐색해 보고, 원클릭으로 [LVGL Pro](https://lvgl.io/docs/pro/integration/simulator)의 창에서 UI를 컴파일하고 실행하거나, AI 지원 [Docs](https://lvgl.io/docs/open)를 살펴보세요. [\*\*Ask AI\*\*](https://lvgl.io/docs/open)를 클릭하고 무엇이든 물어보세요!
## Features
\*\*무료, 이식성 및 확장성\*\*
- 외부 종속성이 없는 완전 이식 가능한 C(C++ 호환) 라이브러리입니다.
- 어떤 (RT)OS를 사용하든 모든 MCU 또는 MPU용으로 컴파일할 수 있습니다. Make, CMake, 그리고 단순 글롭(globbing)이 모두 지원됩니다.
- 단색, ePaper, OLED, TFT 디스플레이 또는 모니터까지 지원합니다. [Displays](https://lvgl.io/docs/open/main-modules/display)
- MIT 라이선스로 배포되므로 상업용 프로젝트에서도 쉽게 사용할 수 있습니다.
- 최소한으로 필요한 것은 32kB RAM, 128kB 플래시, 프레임 버퍼, 그리고 렌더링을 위한 최소 1/10 화면 크기의 버퍼입니다.
- OS, 외부 메모리, GPU가 지원되지만 필수는 아닙니다.
\*\*위젯, 스타일, 레이아웃 등\*\*
- 30개 이상의 내장 [Widgets](https://lvgl.io/docs/open/widgets): 버튼, 레이블, 슬라이더, 차트, 키보드, 미터, 아크, 테이블 등 다수.
- 모든 상태의 위젯의 모든 부분을 커스터마이즈할 수 있는 100개 이상의 스타일 속성을 갖춘 유연한 [Style system](https://lvgl.io/docs/open/common-widget-features/styles).
- 위젯의 크기와 위치를 반응형으로 자동 조절해 주는 [Flexbox](https://lvgl.io/docs/open/common-widget-features/layouts/flex) 및 [Grid](https://lvgl.io/docs/open/common-widget-features/layouts/grid) 스타일의 레이아웃 엔진.
- UI를 애플리케이션과 쉽게 연결하는 [Data bindings](https://lvgl.io/docs/open/main-modules/observer).
- 마우스, 터치패드, 키패드, 키보드, 외장 버튼, 엔코더 [Input devices](https://lvgl.io/docs/open/main-modules/indev) 지원.
- [Multiple display](https://lvgl.io/docs/open/main-modules/display/overview#how-many-displays-can-lvgl-use) 지원.
\*\*렌더링\*\*
- 기본 도형, 그라데이션, 안티앨리어싱, 불투명도, 부드러운 스크롤, 박스 및 드롭 그림자, 이미지 변환 등을 지원하는 내장 2D 렌더링 엔진.
- OpenGL로 [glTF models](https://sketchfab.com/)을 표시하는 [Powerful 3D rendering engine](https://lvgl.io/docs/open/libs/gltf).
- 벡터 그래픽, SVG 및 Lottie 지원.
- 텍스트는 UTF-8 인코딩으로 렌더링되며, CJK, 태국어, 힌디어, 아랍어, 페르시아어 문자 체계를 지원합니다.
- VG-Lite, Dave2D, NeoChrome, OpenGL 등 GPU에 대한 기본 지원.
## LVGL Pro
C로 UI를 구축하는 것은 잘 작동하지만, 프로젝트가 커짐에 따라 반복 작업이 느려지고 일관성을 유지하기가 어려워집니다.
[LVGL Pro](https://lvgl.io/pro)를 사용하면 재사용 가능한 컴포넌트와 화면을 시각적으로 구축하고, 변경 사항을 즉시 미리 보고, 데이터 바인딩, 번역, 애니메이션, 테스트를 한곳에서 관리할 수 있습니다.
Pro는 플레인한

n LVGL C code: 이미 사용하고 계신 것과 동일한 LVGL로, 추가적인 런타임이나 의존성이 없습니다. 빌드나 배포 방식을 변경하지 않고도 기존 프로젝트에 바로 적용할 수 있습니다.

![Building a UI in the LVGL Pro editor with live preview](https://github.com/user-attachments/assets/8cef0f05-0ff1-4766-8dfd-1d15e47f181a)

설치할 필요 없이 브라우저에서 [viewer.lvgl.io](https://viewer.lvgl.io)를 통해 직접 체험해 보거나, [Editor 다운로드](https://lvgl.io/pro#download)를 통해 무료 Community 라이선스로 사용할 수 있습니다.
LVGL Pro는 긴밀하게 연관된 네 가지 도구로 구성됩니다:
1. \*\*Editor\*\*: LVGL Pro의 핵심입니다. XML로 컴포넌트와 화면을 빌드하고, 데이터 바인딩, 번역, 애니메이션, 테스트 등을 관리할 수 있는 데스크톱 앱입니다. [XML 형식](https://lvgl.io/docs/pro/syntax)과 [위젯](https://lvgl.io/docs/pro/built\_in\_widgets)에 대해 자세히 알아보세요.
2. \*\*Online Viewer\*\*: 개발 환경을 설정하지 않고도 브라우저에서 Editor를 실행하고, GitHub 프로젝트를 열어 쉽게 공유할 수 있습니다. [https://viewer.lvgl.io](https://viewer.lvgl.io)를 방문해 보세요.
3. \*\*Figma Plugin\*\*: 클릭 한 번으로 Figma 디자인을 LVGL Pro로 옮길 수 있습니다. 작동 방식은 [여기](https://lvgl.io/docs/pro/figma)에서 확인하세요.
4. \*\*CLI Tool\*\*: C 코드를 생성하고 CI/CD에서 테스트를 실행합니다. 자세한 내용은 [여기](https://lvgl.io/docs/pro/cli)를 참조하세요.
Community 및 Evaluation 등급은 무료로 사용할 수 있으며, 상업적 사용에 대해서는 [라이선스](#license)를 참조하세요.

## Examples
https://lvgl.io/docs/open/examples에서 100개 이상의 C 및 XML 예제를 확인할 수 있습니다.
또한 LVGL Pro의 [Online Viewer](https://viewer.lvgl.io/)에는 대화형으로 실습해 볼 수 있는 다양한 튜토리얼과 동일한 예제들이 포함되어 있습니다.
맛보기로, C와 XML로 작성된 동일한 간단한 UI를 소개합니다:

![A centered button that prints when clicked](https://github.com/user-attachments/assets/5948b485-e3f7-4a63-bb21-984381417c4a)

|  |  |
| --- | --- |
| ```c static void button\_clicked\_cb(lv\_event\_t \* e) { printf("Clicked\n"); } /\* ... \*/ lv\_obj\_t \* button = lv\_button\_create(lv\_screen\_active()); lv\_obj\_center(button); lv\_obj\_add\_event\_cb(button, button\_clicked\_cb, LV\_EVENT\_CLICKED, NULL); lv\_obj\_t \* label = lv\_label\_create(button); lv\_label\_set\_text(label, "Hello from LVGL!"); ``` | ```xml   ``` |

위의 XML은 [LVGL Pro](#lvgl-pro)가 작동하는 방식입니다. 화면을 시각적으로 빌드하면 C 코드가 자동으로 생성됩니다.
## 통합 (Integration)
LVGL은 외부 종속성이 없으므로 어떤 장치에서든 쉽게 컴파일할 수 있습니다. 내장 드라이버가 함께 제공되며, 많은 패키지 관리자 및 RTOS에서 사용할 수 있고, 새로운 장치에도 쉽게 포팅할 수 있습니다.
### 사전 통합 (Pre-integrated)
- \*\*칩 벤더\*\*: [ESP32](https://components.espressif.com/components/lvgl/lvgl), [NXP MCUXpresso component](https://www.nxp.com/design/software/embedded-software/lvgl-open-source-graphics-library:LITTLEVGL-OPEN-SOURCE-GRAPHICS-LIBRARY), [Renesas FSP](https://lvgl.io/docs/open/integration/chip/renesas), [STM32](https://lvgl.io/docs/open/integration/chip/stm32)
- \*\*RTOS\*\*: [Zephyr](https://lvgl.io/docs/open/integration/os/zephyr), [NuttX](https://lvgl.io/docs/open/integration/os/nuttx), [RT-Thread](https://lvgl.io/docs/open/integration/os/rt-thread)
- \*\*프레임워크\*\*: [Arduino](https://lvgl.io/docs/open/integration/framework/arduino), [PlatformIO](https://registry.platformio.org/libraries/lvgl/lvgl), [CMSIS-Pack](https://lvgl.io/docs/open/integration/framework/cmsis-pack)
- \*\*보드 제조사\*\*: [Seeed Studio](https://www.seeedstudio.com), [Elecrow](https://www.elecrow.com/display/esp-hmi-display.html), [Riverdi](https://lvgl.io/docs/open/integration/boards/manufacturers/riverdi), [VIEWE](https://lvgl.io/docs/open/integration/boards/manufacturers/viewe), 그리고 [기타 다수](https://lvgl.io/boards)
### 내장 드라이버 (Built-in drivers)
LVGL은 바로 사용할 수 있는 드라이버를 제공하므로 일반적인 플랫폼에서는 디스플레이 및 입력 처리를 직접 작성할 필요가 없습니다:
- \*\*시뮬레이터 / 데스크톱\*\*: PC에서 UI를 개발하고 미리 볼 수 있는 [SDL](https://lvgl.io/docs/open/integration/pc/sdl), X11, [Wayland](https://lvgl.io/docs/open/integration/embedded\_linux/drivers/wayland) 창.
- \*\*디스플레이 컨트롤러\*\*: 범용 MIPI-DBI/SPI LCD ([ILI9341](https://lvgl.io/docs/open/integration/external\_display\_controllers/ili9341), ST7789 및 유사 제품)와 ST의 [LTDC](https://lvgl.io/docs/open/integration/chip\_vendors/stm32/ltdc), NXP의 [eLCDIF](https://lvgl.io/docs/open/integration/chip\_vendors/nxp/elcdif) 같은 벤더 컨트롤러.
- \*\*임베디드 Linux\*\*: 터치 및 포인터 입력을 위한 프레임버퍼(fbdev), DRM/KMS, Wayland, `libinput`/`evdev`. 자세한 내용은 [여기](https://lvgl.io/docs/open/integration/embedded\_linux)에서 확인하세요.
- \*\*GPU / 가속기\*\*: VG-Lite, NXP PXP, ThinkSilicon NemaGFX, Arm-2D 및 [OpenGL ES](https://lvgl.io/docs/open/integration/embedded\_linux/drivers/opengl\_driver)
전체 목록과 설정 가이드는 [통합 문서(Integration docs)](https://lvgl.io/docs/open/integration)를 참조하세요.
### LVGL Pro 기능
LVGL Pro에서는 클릭 한 번으로 UI 전용, VSCode, Zephyr, Linux 프로젝트를 즉시 사용할 수 있도록 생성할 수 있습니다.
![image](https://github.com/user-attachments/assets/5aadb850-6b40-49d1-ba96-2296041c7e27)
### 수동 포팅 (Porting manually)
LVGL 통합은 매우 간단합니다. 프로젝트에 파일을 추가하고 다른 파일처럼 컴파일하기만 하면 됩니다.
LVGL을 설정하려면 `lv\_conf\_template.h`를 `lv\_conf.h`로 복사하고, 첫 번째 `#if 0`을 활성화한 후 필요에 따라 설정을 조정하세요.
(기본 설정으로도 보통 충분합니다.) 가능한 경우 LVGL을 Kconfig와 함께 사용할 수도 있습니다.
프로젝트에 포함한 후에는 다음과 같이 LVGL을 초기화하고 디스플레이 및 입력 장치를 생성할 수 있습니다:
```c
#include "lvgl/lvgl.h" /\*Define LV\_LVGL\_H\_INCLUDE\_SIMPLE to include as "lvgl.h"\*/
#define TFT\_HOR\_RES 320
#define TFT\_VER\_RES 240
static uint32\_t my\_tick\_cb(void)
{
return my\_get\_millisec();
}
static void my\_flush\_cb(lv\_display\_t \* disp, const lv\_area\_t \* area, uint8\_t \* px\_map)
{
/\*Write px\_map to the area->x1, area->x2, area->y1, area->y2 area of the
\*frame buffer or external display controller. \*/
/\* signal LVGL that we're done \*/
lv\_display\_flush\_ready(disp);
}
static void my\_touch\_read\_cb(lv\_indev\_t \* indev, lv\_indev\_data\_t \* data)
{
if(my\_touch\_is\_pressed()) {
data->point.x = touchpad\_x;
data->point.y = tou

chpad\_y;
data->state = LV\_INDEV\_STATE\_PRESSED;
} else {
data->state = LV\_INDEV\_STATE\_RELEASED;
}
}
void main(void)
{
my\_hardware\_init();
/\*Initialize LVGL\*/
lv\_init();
/\*Set millisecond-based tick source for LVGL so that it can track time.\*/
lv\_tick\_set\_cb(my\_tick\_cb);
/\*Create a display where screens and widgets can be added\*/
lv\_display\_t \* display = lv\_display\_create(TFT\_HOR\_RES, TFT\_VER\_RES);
/\*Add rendering buffers to the screen.
\*Here adding a smaller partial buffer assuming 16-bit (RGB565 color format)\*/
static uint8\_t buf[TFT\_HOR\_RES \* TFT\_VER\_RES / 10 \* 2]; /\* x2 because of 16-bit color depth \*/
lv\_display\_set\_buffers(display, buf, NULL, sizeof(buf), LV\_DISPLAY\_RENDER\_MODE\_PARTIAL);
/\*Add a callback that can flush the content from `buf` when it has been rendered\*/
lv\_display\_set\_flush\_cb(display, my\_flush\_cb);
/\*Create an input device for touch handling\*/
lv\_indev\_t \* indev = lv\_indev\_create();
lv\_indev\_set\_type(indev, LV\_INDEV\_TYPE\_POINTER);
lv\_indev\_set\_read\_cb(indev, my\_touch\_read\_cb);
/\*The drivers are in place; now we can create the UI\*/
lv\_obj\_t \* label = lv\_label\_create(lv\_screen\_active());
lv\_label\_set\_text(label, "Hello world");
lv\_obj\_center(label);
/\*Execute the LVGL-related tasks in a loop\*/
while(1) {
lv\_timer\_handler();
my\_sleep\_ms(5); /\*Wait a little to let the system breathe\*/
}
}
```
## 기여하기 (Contributing)
LVGL은 오픈 프로젝트이며, 기여를 진심으로 환영합니다. 프로젝트에 대해 알리거나, 예제 작성, 문서 개선, 버그 수정, 혹은 LVGL 조직 하에 자신만의 프로젝트를 호스팅하는 것까지 다양한 방법으로 기여할 수 있습니다.
기여할 수 있는 방법에 대한 자세한 내용은 문서의 [Contributing](https://lvgl.io/docs/open/contributing) 섹션을 참조하세요.
이미 수백 명의 사람들이 LVGL에 발자취를 남겼습니다. 여러분도 그중 한 명이 되어보세요! 여기서 만나요! 🙂

## 라이선스 (License)
LVGL 라이브러리는 \*\*MIT 라이선스\*\*로 배포되므로, 로열티 없이 오픈소스 및 상용 제품 모두에서 자유롭게 사용할 수 있습니다. [`LICENCE.txt`](LICENCE.txt)를 참조하세요.
LVGL에 번들로 제공되는 모든 서드파티 라이브러리 역시 MIT 호환 라이선스로 배포되므로, LVGL과 그 종속성을 안심하고 사용할 수 있습니다.

\*\*[LVGL Pro](https://lvgl.io/pro)\*\*는 별도의 라이선스가 적용됩니다:
- \*\*Community\*\* 및 \*\*Evaluation\*\* 등급은 \*\*비상업적 용도로 무료\*\*이며, 학습, 취미 프로젝트, 도구 평가에 적합합니다.
- LVGL Pro의 상업적 사용에는 유료 라이선스가 필요합니다. [가격 및 세부 정보](https://lvgl.io/pro#pricing)를 참조하세요.

lvgl

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README