드래그 앤 드롭으로 완성하는 LVGL 에디터와 GUI 빌더.
PicoPixel 작동 방식
PicoPixel에서는 C 코드를 직접 작성하는 대신 드래그 앤 드롭으로 LVGL 인터페이스를 만듭니다. 빈 캔버스에서 시작해 몇 분 만에 제품용 임베디드 UI를 완성해 보세요. 화면에서 디자인하고 라이브 LVGL 시뮬레이터로 확인한 뒤 깔끔한 C 코드를 내보내면 됩니다. 설치할 필요도 없습니다.
무료로 시작하세요!디자인에서 디바이스까지 6단계
인터페이스 디자인하기
다운로드나 설치 없이 브라우저에서 PicoPixel을 여세요. 팔레트의 LVGL 위젯을 캔버스로 드래그하고 픽셀 단위로 배치하며 스타일을 조정할 수 있습니다.
- •버튼, 라벨, 슬라이더, 스위치, 아크, 차트, 드롭다운, 롤러, 체크박스, 텍스트 영역, 탭뷰, 컨테이너, 이미지
- •하드웨어에 맞는 대상 디스플레이 해상도 설정
- •색상, 테두리, 패딩, 폰트, 불투명도, 그라디언트, 그림자 스타일 설정
- •정렬 및 분배 도구로 위젯을 정확하게 배치
- •멀티 페이지 인터페이스를 위한 화면 및 레이어 구성
인터랙션 연결하기
비주얼 이벤트 에디터를 사용하여 C 코드를 한 줄도 작성하지 않고 위젯 액션을 연결합니다. PicoPixel이 LVGL 이벤트 콜백을 자동으로 생성합니다.
- •버튼 누르기 → 다른 화면으로 이동
- •슬라이더 값 변경 → 라벨 업데이트
- •체크박스 토글 → 패널 표시 또는 숨기기
- •드롭다운 선택 → 스타일 변경 또는 액션 트리거
- •위젯에 액션을 드래그 — 콜백 코드 불필요
라이브 시뮬레이터에서 미리보기
PicoPixel은 LVGL을 WebAssembly로 컴파일하여 브라우저에서 직접 실행합니다. 미리보기에서도 실제 LVGL 렌더링 엔진을 사용합니다.
- •UI가 하드웨어에서 어떻게 렌더링되는지 정확히 확인
- •터치 인터랙션, 스크롤, 애니메이션 테스트
- •인터랙션 오버레이가 탭 및 스크롤 가능한 요소를 표시
- •팀이나 클라이언트와 시뮬레이터 링크 공유 — 개발 환경 불필요
제품용 코드 내보내기
프로젝트를 깔끔한 LVGL C 소스 파일로 다운로드하세요. 표준 LVGL API를 사용하고 독점 라이브러리에 의존하지 않으므로 기존 LVGL 프로젝트에 바로 추가할 수 있습니다.
- •위젯 정의 및 레이아웃 코드
- •스타일 선언
- •이벤트 핸들러 바인딩
- •폰트 및 이미지 에셋 참조
- •표준 LVGL 8.x API — PicoPixel 런타임 라이브러리 없음
통합 및 플래시
내보낸 파일을 ESP-IDF, Arduino 또는 PlatformIO 프로젝트에 추가합니다. 컴파일해 기기에 플래시하면 시뮬레이터와 픽셀 단위로 일치하는 UI가 표시됩니다.
- •ESP32, STM32, Arduino, Raspberry Pi Pico 및 모든 LVGL 호환 플랫폼에서 작동
- •UI 헤더를 포함하고 디스플레이 드라이버 설정 후 ui_init() 호출
- •대부분의 설정에서 빌드 시스템 변경 불필요
- •또는 zip을 AI 코드 어시스턴트에 전달하여 통합을 맡기기
함께 검토하고 개선하기
팀원을 프로젝트에 초대하세요. 모두가 실시간으로 같은 캔버스를 편집합니다. 내장 버전 관리로 변경 사항을 추적하고 필요할 때 롤백하세요.
- •실시간 협업 편집 — 라이브 커서, 피드백, 주석
- •세밀한 세션 기록을 갖춘 내장 버전 관리
- •이전 상태로 롤백하고 버전 비교
- •검토를 요청할 사람에게 시뮬레이터 링크 공유
LVGL UI를 드래그 앤 드롭으로 만드는 이유
기존에는 LVGL C 코드를 한 줄씩 작성해 임베디드 UI를 만들었습니다. 픽셀 좌표로 위젯을 배치하고 함수로 스타일을 적용하며, 변경할 때마다 다시 컴파일해야 했습니다. 이 방식은 결과를 확인하는 데 시간이 걸리고 코드만으로 화면을 예상하기도 어렵습니다.
PicoPixel에서는 디자인 결과를 즉시 볼 수 있습니다. 버튼을 캔버스에 드래그하고 크기와 색상을 바꾸고 라벨을 추가하면, 라이브 LVGL 시뮬레이터가 실제 하드웨어에서 표시될 모습을 보여 줍니다. 디자인을 마친 뒤에는 ESP32, STM32, Arduino 등 모든 LVGL 호환 플랫폼에서 컴파일할 수 있는 깔끔한 C 코드를 내보내세요.
이렇게 작업하면 프로토타입을 더 빠르게 만들 수 있고, 디자이너와 엔지니어가 실시간으로 협업하기도 쉽습니다. 결과물은 직접 작성한 코드와 같은 수준의 제품용 LVGL 코드입니다. PicoPixel의 전체 기능과 다른 LVGL 에디터와의 상세 비교를 확인하세요.
자주 묻는 질문
PicoPixel을 사용하려면 설치해야 하는 것이 있나요?
아니요. PicoPixel은 모든 기능이 브라우저에서 실행됩니다. 에디터 URL을 열고, 로그인하고, 디자인을 시작하세요. 데스크톱 앱, 플러그인, SDK 설치가 필요 없습니다.
에디터에서 어떤 LVGL 위젯을 사용할 수 있나요?
PicoPixel은 버튼, 라벨, 슬라이더, 스위치, 드롭다운, 롤러, 아크, 바, 차트, 이미지, 체크박스, 텍스트 영역, 탭뷰, 컨테이너 등의 핵심 LVGL 위젯을 지원합니다. 지원하는 위젯을 계속 늘리고 있습니다.
라이브 시뮬레이터는 얼마나 정확한가요?
시뮬레이터는 WebAssembly로 컴파일된 실제 LVGL 렌더링 엔진을 실행합니다 — 목업이나 CSS 근사치가 아닙니다. 미리보기에서 보이는 것이 대상 하드웨어와 픽셀 단위로 일치합니다.
내보낸 코드는 어떤 형식을 사용하나요?
PicoPixel은 깔끔하고 사람이 읽을 수 있는 LVGL C 코드(.c 및 .h 파일)가 포함된 zip 파일을 내보냅니다. 내보낸 코드에는 위젯 생성, 스타일, 레이아웃, 이벤트 핸들러 설정이 포함됩니다. 모두 표준 LVGL API를 사용하며 독점 라이브러리에 의존하지 않습니다.
내보낸 코드를 ESP-IDF, Arduino 또는 PlatformIO와 함께 사용할 수 있나요?
네. 내보낸 코드는 표준 LVGL API 호출을 사용하므로 ESP-IDF, Arduino IDE, PlatformIO를 포함한 LVGL을 지원하는 모든 빌드 시스템에서 작동합니다. 프로젝트에 파일을 추가하고 디스플레이 드라이버 설정 후 ui_init()을 호출하면 됩니다. 플랫폼별 세부 사항은 ESP32 가이드를 참조하세요.
PicoPixel은 무료인가요?
네. PicoPixel은 개인 및 취미 용도로 무료로 사용할 수 있으며 신용카드가 필요 없습니다. 상업적 사용은 월 $17($204/년)부터 시작합니다. 넉넉한 무료 요금제는 항상 제공됩니다.