개요
PicoPixel은 LVGL을 위한 비주얼 에디터입니다. Figma 같은 워크스페이스에서 임베디드 UI를 시각적으로 만들 수 있고, LVGL 프로젝트가 실제로 배포되는 방식에 맞춰 재사용 가능한 컴포넌트, 라이브러리, 에셋, 협업 도구를 제공합니다.
PicoPixel에서 UI를 만들면 C 코드를 내보내고 LVGL을 실행할 수 있는 거의 모든 디바이스에서 사용할 수 있습니다. PicoPixel은 현재 LVGL 8.x를 지원하며 LVGL 9 지원도 예정되어 있습니다.
템플릿, UI 키트, 예제, 스프라이트, 위젯, 완성된 앱은 이 작업 흐름의 시작점입니다. 일부는 PicoPixel 개발 팀이 만들고, 일부는 사용자와 커뮤니티가 만듭니다. 공유할 만한 것이 있다면 템플릿 제출 방법을 보세요.
템플릿의 실제 의미
PicoPixel 템플릿은 일반 .picopixel 파일입니다. 자신의 워크스페이스에서 내보내는 프로젝트와 같은 형식입니다.
즉 템플릿에는 화면, LVGL 위젯, 재사용 가능한 컴포넌트, 색상, 폰트, 이미지, 애니메이션 이미지, 스프라이트 및 기타 에셋이 들어갈 수 있습니다. 열거나 가져온다고 원래 디자인에 묶이는 것이 아닙니다. 편집하고, 줄이고, 일부를 다른 파일로 복사하고, 팀 라이브러리로 공유하거나 LVGL C 코드로 내보낼 수 있습니다.
템플릿은 스크린샷이 아니라 편집 가능한 PicoPixel 프로젝트 파일입니다. 자신의 LVGL 프로젝트에 필요한 부분을 자유롭게 활용할 수 있습니다.
템플릿을 찾는 곳
주요 탐색 위치는 PicoPixel 템플릿 갤러리입니다. 프로젝트 유형으로 갤러리를 필터링하고, 프로젝트 상세 페이지를 열고, 포함된 내용을 미리 보고, PicoPixel로 가져오는 방식을 선택할 수 있습니다.
GitHub에서도 같은 파일 모음에 접근할 수 있습니다.
파일을 직접 다운로드하거나, 프로젝트 이력을 확인하거나, .picopixel 파일을 다른 프로젝트 에셋과 함께 보관하고 싶다면 GitHub가 유용합니다.
알맞은 시작점 고르기
갤러리에는 여러 종류의 파일이 있습니다. 필요한 구성에 따라 선택하세요.
- Full App, 완전한 앱 프로젝트입니다. 미래에는 더 많은 완성된 앱 항목이 펌웨어 바이너리를 포함해 하드웨어 플래시를 더 쉽게 할 수도 있습니다. 지금은 UI 파일을 열고 수정한 뒤 자신의 펌웨어용 UI 코드를 내보내는 데 집중하세요.
- Example, 특정 작업 흐름, 위젯, 레이아웃 또는 인터랙션 패턴을 보여 주는 참고 프로젝트입니다.
- UI Kit, 여러 제품에 맞춰 조정할 수 있는 재사용 가능한 컴포넌트, 스타일, 화면, 에셋 세트입니다.
- Template, 자신의 인터페이스로 수정할 수 있는 미리 만들어진 화면 또는 프로젝트 레이아웃입니다.
- Sprite, 재사용할 수 있는 다중 상태 LVGL 애니메이션 위젯입니다. PicoPixel에서 스프라이트가 작동하는 방식은 스프라이트란 무엇인가요?를 보세요.
- Animated Image, LVGL 애니메이션 이미지 프레임을 중심으로 만든 파일 또는 예제입니다. 자세한 내용은 LVGL Animated Image 위젯 사용하기을 보세요.
- Widget, 더 큰 UI에 넣을 수 있는 사용자 지정 LVGL 위젯 또는 컴포넌트입니다.
사용법을 배우려면 Example, 재사용할 구성 요소가 필요하면 UI Kit, 만들려는 화면과 비슷한 출발점이 필요하면 Template을 선택하세요.
파일 열기 또는 가져오기
템플릿 갤러리에서 유용해 보이는 프로젝트를 클릭합니다. 미리보기, 메타데이터, 갤러리 이미지, 액션 버튼이 있는 프로젝트 상세 페이지로 이동합니다.
파일을 PicoPixel 워크스페이스에 추가하는 일반적인 방법은 세 가지입니다.
- Open in PicoPixel을 클릭합니다. PicoPixel이 에디터에서 바로 파일을 열게 하고 싶을 때 가장 빠른 경로입니다.
- Download .picopixel을 클릭합니다. 파일을 로컬에 저장해 나중에 가져오거나 백업으로 보관하거나 펌웨어 프로젝트와 공유할 수 있습니다.
- GitHub에서
.picopixel파일을 다운로드한 뒤 PicoPixel에 드래그 앤 드롭하거나 에디터에서 가져옵니다.
파일이 PicoPixel 안에 들어오면 다른 PicoPixel 프로젝트처럼 동작합니다. 이름을 바꾸고, 복제하고, 화면을 편집하고, 에셋을 교체하고, 폰트를 바꾸고, 색상을 조정한 뒤 준비되면 내보냅니다.
안에 있는 것 재사용하기
템플릿을 가져오면 자신의 프로젝트처럼 자유롭게 편집할 수 있습니다. 전체 파일을 기본 프로젝트로 쓰거나 구성 요소의 라이브러리처럼 사용할 수 있습니다.
많은 파일에는 이미지, 색상, 폰트, 애니메이션 이미지 프레임 세트, 컴포넌트 같은 재사용 가능한 에셋이 들어 있습니다. Assets 탭을 열면 파일과 함께 온 내용을 볼 수 있습니다.
파일에 재사용 가능한 LVGL 위젯 또는 컴포넌트가 있다면 팀 라이브러리로 만들고 다른 파일에서 연결할 수 있습니다. UI 키트와 위젯 모음에 특히 유용합니다. 원본 파일을 주 라이브러리로 유지한 뒤 각 제품 UI로 컴포넌트를 가져옵니다.
전체 작업 흐름은 PicoPixel 라이브러리와 재사용 컴포넌트 가이드를 읽어 보세요. 로컬 라이브러리, 공유된 팀 라이브러리, 연결된 라이브러리, 컴포넌트 업데이트가 파일 사이에서 어떻게 이동하는지 설명합니다.
디바이스용 코드 내보내기
UI가 준비되면 PicoPixel에서 LVGL C 코드를 내보내고 보드 펌웨어와 통합합니다. 펌웨어와 LVGL 설정이 사용한 위젯과 에셋에 맞게 설정되어 있다면, 내보낸 UI는 LVGL을 지원하는 거의 모든 디바이스에서 실행될 수 있습니다.
메모리에 주의하세요. 큰 이미지, 애니메이션 이미지 프레임, 스프라이트, 큰 폰트, 복잡한 전체 화면 레이아웃은 작은 보드의 기본값보다 더 많은 RAM과 플래시를 요구할 수 있습니다. PicoPixel에서는 잘 보이는데 플래시 후 나타나지 않는다면 LVGL 설정, 이미지 크기, 색상 깊이, 힙 메모리 할당, 디스플레이 버퍼 설정을 확인하세요.
템플릿은 디자인의 출발점이며, 모든 하드웨어에서의 작동을 보장하지는 않습니다. 특히 애니메이션 이미지, 스프라이트, 큰 폰트, 많은 이미지 에셋을 사용할 때는 내보낸 UI에 충분한 RAM과 플래시가 보드에 있는지 항상 확인하세요.
다음 단계
- 템플릿 갤러리, 사용 가능한
.picopixel파일 둘러보기 - 템플릿 제출 방법, 자신의 PicoPixel 파일을 커뮤니티와 공유하기
- PicoPixel 라이브러리와 재사용 컴포넌트 가이드, 가져온 컴포넌트를 파일 사이에서 재사용하기
- 스프라이트란 무엇인가요?, 여러 상태를 가진 애니메이션 위젯이 작동하는 방식 배우기
- LVGL Animated Image 위젯 사용하기, 프레임 기반 LVGL 애니메이션 이해하기
