비주얼 드래그 앤 드롭 LVGL 에디터.

PicoPixel 작동 방식

PicoPixel은 LVGL 개발을 코드 우선 프로세스에서 비주얼 드래그 앤 드롭 워크플로로 전환합니다. 빈 캔버스에서 프로덕션 레디 임베디드 UI까지 몇 분이면 완성 — 시각적으로 디자인하고, 라이브 LVGL 시뮬레이터로 미리 보고, 깔끔한 C code를 내보내세요. 설치 불필요.

무료로 시작하세요!

디자인에서 디바이스까지 6단계

01

인터페이스 디자인하기

브라우저에서 PicoPixel을 엽니다 — 다운로드 불필요, 설치 불필요. 팔레트에서 LVGL 위젯을 픽셀 단위로 정확한 캔버스에 드래그하고 시각적으로 스타일링하세요.

  • • 버튼, 라벨, 슬라이더, 스위치, 아크, 차트, 드롭다운, 롤러, 체크박스, 텍스트 영역, 탭뷰, 컨테이너, 이미지
  • • 하드웨어에 맞는 대상 디스플레이 해상도 설정
  • • 색상, 테두리, 패딩, 폰트, 불투명도, 그라디언트, 그림자 스타일 설정
  • • 정렬 및 분배 도구로 위젯을 정확하게 배치
  • • 멀티 페이지 인터페이스를 위한 화면 및 레이어 구성
02

인터랙션 연결하기

비주얼 이벤트 에디터를 사용하여 C code를 한 줄도 작성하지 않고 위젯 액션을 연결합니다. PicoPixel이 LVGL 이벤트 콜백을 자동으로 생성합니다.

  • • 버튼 누르기 → 다른 화면으로 이동
  • • 슬라이더 값 변경 → 라벨 업데이트
  • • 체크박스 토글 → 패널 표시 또는 숨기기
  • • 드롭다운 선택 → 스타일 변경 또는 액션 트리거
  • • 위젯에 액션을 드래그 — 콜백 코드 불필요
03

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

PicoPixel은 LVGL을 WebAssembly로 컴파일하여 브라우저에서 직접 실행합니다. 미리보기는 실제 LVGL 렌더링 엔진입니다 — 목업이 아닙니다.

  • • UI가 하드웨어에서 어떻게 렌더링되는지 정확히 확인
  • • 터치 인터랙션, 스크롤, 애니메이션 테스트
  • • 인터랙션 오버레이가 탭 및 스크롤 가능한 요소를 표시
  • • 팀이나 클라이언트와 시뮬레이터 링크 공유 — 개발 환경 불필요
04

프로덕션 레디 코드 내보내기

프로젝트를 깔끔한 LVGL C 소스 파일로 다운로드합니다. 출력은 독점 의존성 없는 표준 LVGL API 호출을 사용합니다 — 모든 LVGL 프로젝트에 바로 추가 가능.

  • • 위젯 정의 및 레이아웃 코드
  • • 스타일 선언
  • • 이벤트 핸들러 바인딩
  • • 폰트 및 이미지 에셋 참조
  • • 표준 LVGL 8.x API — PicoPixel 런타임 라이브러리 없음
05

통합 및 플래시

내보낸 파일을 ESP-IDF, Arduino 또는 PlatformIO 프로젝트에 추가합니다. 컴파일, 플래시하면 디바이스의 UI가 시뮬레이터와 픽셀 단위로 일치합니다.

  • • ESP32, STM32, Arduino, Raspberry Pi Pico 및 모든 LVGL 호환 플랫폼에서 작동
  • • UI 헤더를 포함하고 디스플레이 드라이버 설정 후 ui_init() 호출
  • • 대부분의 설정에서 빌드 시스템 변경 불필요
  • • 또는 zip을 AI 코드 어시스턴트에 전달하여 통합을 맡기기
06

협업 및 반복

팀원을 프로젝트에 초대하세요. 모두가 실시간으로 같은 캔버스를 편집합니다. 내장 버전 관리로 변경 사항을 추적하고 필요할 때 롤백하세요.

  • • 실시간 협업 편집 — 라이브 커서, 피드백, 주석
  • • 세밀한 세션 기록을 갖춘 내장 버전 관리
  • • 이전 상태로 롤백하고 버전 비교
  • • 이해관계자 리뷰를 위한 시뮬레이터 링크 공유

LVGL에 왜 드래그 앤 드롭인가?

전통적으로 LVGL로 임베디드 UI를 구축한다는 것은 C code를 한 줄씩 작성하는 것을 의미했습니다 — 픽셀 좌표로 위젯을 배치하고, 함수 호출로 스타일을 적용하고, 모든 변경 후 재컴파일합니다. 작동하지만 피드백 루프가 느리고 코드를 시각화하기 어렵습니다.

PicoPixel의 드래그 앤 드롭 방식은 결과를 즉시 볼 수 있는 비주얼 에디터로 그 사이클을 대체합니다. 캔버스에 버튼을 드래그하고, 크기를 조절하고, 색상을 변경하고, 라벨을 추가하세요 — 라이브 LVGL 시뮬레이터가 대상 하드웨어에서의 정확한 모습을 보여줍니다. 완료하면 ESP32, STM32, Arduino 및 모든 LVGL 호환 플랫폼에서 컴파일되는 깔끔한 C code를 내보냅니다.

비주얼 워크플로는 프로토타이핑이 더 빠르고, 팀에게 더 쉬우며(디자이너와 엔지니어가 실시간으로 협업 가능), 수동으로 작성하는 것과 동일한 프로덕션 품질의 LVGL 코드를 생성합니다. 모든 PicoPixel 기능을 보거나 다른 LVGL 에디터와의 상세 비교를 읽어보세요.

자주 묻는 질문

PicoPixel을 사용하려면 설치해야 하는 것이 있나요?

아니요. PicoPixel은 완전히 브라우저에서 실행됩니다. 에디터 URL을 열고, 로그인하고, 디자인을 시작하세요. 데스크톱 앱, 플러그인, SDK 설치가 필요 없습니다.

에디터에서 어떤 LVGL 위젯을 사용할 수 있나요?

PicoPixel은 버튼, 라벨, 슬라이더, 스위치, 드롭다운, 롤러, 아크, 바, 차트, 이미지, 체크박스, 텍스트 영역, 탭뷰, 컨테이너 등의 핵심 LVGL 위젯 세트를 지원합니다. 추가 위젯 지원을 지속적으로 추가하고 있습니다.

라이브 시뮬레이터는 얼마나 정확한가요?

시뮬레이터는 WebAssembly로 컴파일된 실제 LVGL 렌더링 엔진을 실행합니다 — 목업이나 CSS 근사치가 아닙니다. 미리보기에서 보이는 것이 대상 하드웨어와 픽셀 단위로 일치합니다.

내보낸 코드는 어떤 형식을 사용하나요?

PicoPixel은 깔끔하고 사람이 읽을 수 있는 LVGL C code(.c 및 .h 파일)가 포함된 zip 파일을 내보냅니다. 출력에는 위젯 생성, 스타일링, 레이아웃, 이벤트 핸들러 설정이 포함됩니다 — 모두 표준 LVGL API 호출을 사용하며 독점 의존성이 없습니다.

내보낸 코드를 ESP-IDF, Arduino 또는 PlatformIO와 함께 사용할 수 있나요?

네. 내보낸 코드는 표준 LVGL API 호출을 사용하므로 ESP-IDF, Arduino IDE, PlatformIO를 포함한 LVGL을 지원하는 모든 빌드 시스템에서 작동합니다. 프로젝트에 파일을 추가하고 디스플레이 드라이버 설정 후 ui_init()을 호출하면 됩니다. 플랫폼별 세부 사항은 ESP32 가이드를 참조하세요.

PicoPixel은 무료인가요?

네. PicoPixel은 상업 프로젝트를 포함하여 무료로 사용할 수 있습니다. 신용카드가 필요 없습니다. 플랫폼이 성장하고 더 많은 사용자가 참여함에 따라 스토리지 및 서비스 비용을 충당하기 위한 유료 플랜이 도입될 수 있습니다. 무료 티어는 항상 제공됩니다.

첫 번째 LVGL 인터페이스를 무료로 디자인하세요

브라우저에서 PicoPixel을 열고, LVGL 위젯을 캔버스에 드래그 앤 드롭하고, 몇 분 만에 프로덕션 레디 C code를 내보내세요. 설치 불필요. 신용카드 불필요.

무료로 시작하세요!

상업 프로젝트를 포함하여 무료 사용 가능. FAQ 읽기 · 문의하기