PicoPixel의 라이브러리와 재사용 가능한 LVGL 컴포넌트 가이드

라이브러리란

라이브러리는 파일 안에 들어 있는 재사용 가능한 에셋 세트입니다. Assets 패널에서는 파일 자체의 에셋이 로컬 라이브러리 아래에 보입니다. 항상 존재하고 기본으로 열립니다.

다른 팀 라이브러리를 파일에 연결하면 로컬 라이브러리 아래에 별도의 이름이 붙은 섹션으로 나타납니다. 제목은 그 라이브러리의 파일 이름입니다(예: Animation Examples). 따라서 라이브러리가 연결되면 Assets 패널은 파일 자체의 에셋과 연결된 라이브러리의 에셋을 나란히 보여 주며, 바로 드래그해 사용할 수 있습니다.

라이브러리가 담을 수 있는 것

파일의 Assets 패널에 있는 모든 것은 공유할 때 라이브러리와 함께 이동합니다. PicoPixel은 에셋을 다음 섹션으로 묶습니다.

• Images, 파일에 추가한 정적 그래픽.
• Animated images, 여러 프레임의 애니메이션 그래픽.
• Components, 재사용 가능한 LVGL 위젯(아래 참고).
• Colors, 저장된 색상 견본.
• Fonts, 추가하고 디바이스용으로 변환한 폰트.

파일을 공유하면 이 모든 것이 팀에서 재사용 가능해지며, 파일 사이를 복사해 붙여 넣을 필요가 없습니다.

"컴포넌트"란

컴포넌트는 하나 이상의 위젯으로 만들어진 재사용 가능한 구성 요소입니다. 단일 버튼이나 라벨은 하나의 위젯이지만, 컴포넌트는 여러 위젯과 레이어를 함께 묶을 수 있습니다. 예를 들어 제목, 아이콘, 값이 있는 스타일이 적용된 카드를 하나의 재사용 단위로 만들어 어떤 화면에도 놓을 수 있습니다.

각 컴포넌트에는 메인 인스턴스가 있습니다. 메인 인스턴스를 편집하면 해당 컴포넌트의 복사본에도 변경 사항을 반영할 수 있습니다. 자신의 라이브러리를 연결한 다른 파일 안의 복사본도 포함됩니다. 따라서 여러 화면의 UI를 일관되게 유지하기 좋습니다. 컨트롤을 한 번 정의하고, 어디서나 재사용하고, 한곳에서 업데이트할 수 있습니다.

파일을 라이브러리로 공유하기

Publish를 실행하면 현재 파일을 팀의 공유 라이브러리로 사용할 수 있습니다.

1. Libraries 대화상자를 엽니다. Assets 패널에서 Add library 버튼을 사용합니다(파일에 연결된 라이브러리 또는 컴포넌트가 이미 있으면 Manage library로 표시됩니다).
2. LIBRARIES 탭에서 LIBRARIES IN THIS FILE 아래를 봅니다. File library가 현재 파일의 라이브러리이며, 옆에 Publish 버튼이 있습니다.
3. Publish를 클릭합니다.

버튼은 Unpublish로 바뀌며, 팀에서 연결할 수 있는 공유 라이브러리가 되었음을 알려 줍니다. PicoPixel은 파일에 작은 라이브러리 배지도 추가합니다. 워크스페이스 헤더 오른쪽 위와 Dashboard의 파일 카드에서 볼 수 있어 어떤 파일이 공유되었는지 쉽게 알아볼 수 있습니다.

팀 라이브러리 찾기

공유된 라이브러리는 팀 전체를 위해 한곳에 모입니다.

• Dashboard를 엽니다.
• 왼쪽 사이드바의 Sources 아래에서 Libraries를 클릭합니다.

이 페이지는 팀 전체에 공유된 모든 라이브러리를 나열하며, 현재 속한 팀으로 범위가 제한됩니다. 팀을 바꾸면 그 팀의 라이브러리가 보입니다. 팀원이 재사용 가능한 것을 찾아보는 목록입니다.

다른 파일에서 라이브러리 재사용하기

라이브러리가 공유되면 팀의 어떤 파일이든 가져올 수 있습니다.

1. 작업할 파일을 엽니다.
2. Assets 패널에서 Add library(또는 Manage library)를 클릭해 Libraries 대화상자를 엽니다.
3. SHARED LIBRARIES 섹션에서 원하는 라이브러리를 찾습니다. 목록이 길면 Search shared libraries 상자가 도움이 됩니다. 옆의 **+**를 클릭해 연결합니다.

연결된 라이브러리는 Assets 패널에서 로컬 라이브러리 아래에 자체 이름을 가진 섹션으로 나타납니다. 컴포넌트, 이미지, 색상, 폰트를 그대로 디자인에 드래그하세요.

연결된 라이브러리 최신 상태 유지하기

연결한 라이브러리가 바뀌어도, 예를 들어 소유자가 컴포넌트를 편집하거나 색상을 조정해도, 업데이트가 강제로 적용되지는 않습니다. Libraries 대화상자의 UPDATES 탭은 더 최신 변경 사항이 있는 연결된 라이브러리를 나열하고, 준비되었을 때 Update 버튼으로 적용할 수 있게 합니다. 변경 사항이 없으면 업데이트할 것이 없다고 알려 줍니다.

공개 범위: 라이브러리는 자동으로 외부에 공개되지 않습니다

Publish는 보통 공개 게시를 뜻하지만, 여기에서는 팀 내 공유를 의미합니다.

직접 만든 것이 팀 밖으로 나가는 방법은 정확히 두 가지뿐이며, 둘 다 직접 선택하는 일입니다.

1. 직접 .picopixel 파일을 내보내고 보냅니다. 워크스페이스 메뉴에서 **Export .picopixel**을 하면 파일이 컴퓨터로 다운로드됩니다. 그 파일을 이메일로 보내거나 공유하거나 누군가에게 넘기는 것은 전적으로 자신의 선택이며 PicoPixel 밖에서 일어납니다.
2. PicoPixel 팀에 정식으로 제출합니다. 디자인을 더 넓은 PicoPixel 커뮤니티와 공유하고 싶다면 app.picopixel.io/#/settings/submit-template에 검토를 위해 제출할 수 있습니다. 커뮤니티 갤러리에 게시되기 전에 팀이 각 제출물을 검토합니다. 양식에 필요한 내용과 부여하는 권리는 템플릿 제출 방법을 보세요.

이 두 가지 의도적인 단계 외에는 파일과 라이브러리가 팀 안에 머뭅니다.

커뮤니티 템플릿과 미리 만들어진 라이브러리

처음부터 시작할 필요는 없습니다. PicoPixel 템플릿 갤러리에는 PicoPixel 팀과 커뮤니티가 만든 템플릿, UI 키트, 예제, 스프라이트, 애니메이션 이미지, 완성된 앱 파일이 점점 늘고 있습니다. 각각은 일반 .picopixel 파일이며, 열고 수정하고 자신의 프로젝트 시작점으로 사용할 수 있습니다.

가져온 템플릿도 라이브러리로 사용할 수 있습니다. 공유하면 팀이 컴포넌트, 폰트, 색상, 이미지에 접근할 수 있고 다시 만들 필요가 없습니다. 새 프로젝트를 빠르게 시작하거나 기존 프로젝트에 완성도 높은 요소를 추가하는 가장 빠른 방법입니다.

템플릿을 찾고, 가져오고, 수정하는 전체 흐름은 PicoPixel 템플릿, UI 키트, 완성된 앱 사용하기를 보세요.

다음 단계

• 템플릿 제출 방법, 더 넓은 PicoPixel 커뮤니티와 디자인 공유하기
• 스프라이트란 무엇인가요?, 컴포넌트로 만들 만한 여러 애니메이션 상태를 가진 위젯 만들기
• 폰트 사용하기, 라이브러리가 담는 폰트 추가 및 변환하기
• LVGL Animated Image 위젯 사용하기, 파일 사이에서 재사용할 애니메이션 이미지 만들기