Pake: 5MB짜리 데스크탑 앱을 만들어주는 CLI 도구

한국어العربيةDeutschEnglishEspañolFrançaisहिन्दीBahasa Indonesia日本語PortuguêsРусский中文
BBetter Stack
Computing/SoftwareSmall Business/StartupsInternet Technology

Transcript

00:00:00Paik은 웹사이트를 단 하나의 명령어로 네이티브 데스크톱 앱으로
00:00:05바꿔주는 명령줄 도구입니다. Rust로 만들어져서 앱 용량이 약 5MB 정도로 작습니다.
00:00:10모든 앱에 크롬 전체를 번들로 포함하는 Electron과 비교하면 정말 작은 크기죠.
00:00:15사용자 지정 CSS와 자바스크립트를 주입하거나, 트레이 아이콘을 만들고, 제목 표시줄 스타일을 변경할 수도
00:00:20있습니다. 이 모든 걸 Rust 코드를 한 줄도 쓰지 않고 할 수 있죠. 그런데 왜 비슷한
00:00:25다른 도구 대신 이걸 써야 할까요? 또 Rust로 만들었는데 왜 PNPM이나 NPM 설치가 필요할까요?
00:00:31잘은 모르겠지만, 일단 구독 누르고 같이 알아봅시다. Paik은 2022년 중국의 제품 엔지니어인 TW93이 만들었습니다.
00:00:40그는 엄청난 인기를 끌었던 맥 최적화 도구인 Mole도 만들었는데, 저도 실제로 꽤 오랫동안
00:00:45사용해 왔습니다. Paik의 아이디어는 매우 합리적입니다. 생각해 보면
00:00:49유튜브 뮤직, 지메일, 인스타그램 같은 앱들은 공식 네이티브 앱이 따로 없잖아요. 그냥
00:00:55브라우저 탭 안에서만 작동하죠. 브라우저 기능을 다 쓰고 싶다면 괜찮지만, 좀 더
00:00:59성능이 좋고 분리를 위해 독 아이콘이 따로 필요한 웹사이트라면, 독립형 앱으로
00:01:04만드는 게 매우 유용할 수 있습니다. 여기서 Paik이 등장합니다. Electron보다 훨씬
00:01:09나은 점은 시스템의 기본 웹뷰를 활용하는 Tauri 2를 기반으로 해서 앱이
00:01:14더 작고 빠르며 메모리도 덜 쓴다는 겁니다. Electro, Bun, Vercel의 Zero Native와 비슷한 방식이죠.
00:01:19이 부분은 영상 후반에 더 자세히 다루겠습니다. 아무튼 TW93이 Tauri 2 위에 작성한
00:01:24실제 커스텀 코드는 약 1,800줄의 Rust로 창 관리, 기본 메뉴,
00:01:30자바스크립트 주입 같은 기능을 처리합니다. 명령어 하나만 실행하면 Paik이 알아서 다 해줍니다. 한번
00:01:35Paik을 사용해서 제 필름 에뮬레이션 프로젝트를 독립형 앱으로 만들어 보겠습니다. Paik CLI를
00:01:40설치하고 나면 Mole을 써보신 분들은 아시겠지만 매우 유사하게 생겼습니다. 옵션 플래그가 많지
00:01:45않다는 건 개인적으로 아주 좋은 점이라고 생각합니다. 프로젝트 서버를 실행한 상태에서 URL과
00:01:50원하는 앱 이름을 넣고 Paik을 실행합니다. 이제 엔터를 누르면 아이콘을 가져오고
00:01:55앱을 만드는 과정이 진행되는데 약 5분에서 10분 정도 걸립니다. 완료되면
00:02:00여기 4.3MB짜리 DMG 파일이 생성됩니다. 클릭해 보면 여기 우리 앱이 있고,
00:02:05애플리케이션 폴더로 드래그해서 설치할 수 있습니다. 아이콘이 제대로 안 들어간 것 같지만
00:02:10그건 상관없습니다. 이제 앱을 열어보면 독에 아이콘이 뜨면서 즉시 작동하는 걸 볼 수 있습니다.
00:02:14동영상을 선택해 봐도 모든 게 잘 작동하네요. 활성 상태 보기를 확인해 보면
00:02:19우리 앱은 메모리를 61MB만 사용하는데, ARC 브라우저는 엄청난 용량을 차지하고 있죠.
00:02:24앱 크기를 봐도 55MB인데, Slack 같은 Electron 앱은 310MB입니다.
00:02:30하지만 아까 보셨듯이 Paik에는 꽤 흥미로운 옵션들도 있습니다. 예를 들어
00:02:35debug 플래그를 사용해 앱을 빌드하면 개발자 도구에 액세스할 수 있습니다. 그리고 hide title bar 플래그를
00:02:40써서 제목 표시줄을 숨겨 더 앱처럼 보이게 할 수도 있죠. 프레임이 없는 제목 표시줄을
00:02:46만들어줍니다. 하지만 이 앱은 애초에 프레임리스 디자인이 아니었죠. 다행히 Paik은
00:02:51앱 소스 코드를 수정하지 않고도 해결할 수 있는 옵션을 제공합니다. 커스텀 CSS를 작성해서
00:02:56inject 플래그로 앱에 주입하면 상단에 패딩이 추가되지만, 아래쪽에 스크롤 할 공간이 더 생기게 됩니다.
00:03:01show system tray 플래그를 사용하면 시스템 트레이에 아이콘이 나타나서 앱을 표시하거나 숨길 수 있습니다.
00:03:06CSS뿐만 아니라 자바스크립트 주입도 가능합니다.
00:03:12하지만 지금으로선 Paik이 기본으로 제공하는 메뉴 항목은 수정할 수 없는 것 같습니다.
00:03:17또 Paik은 실행 중인 URL에서만 작동합니다. 그래서 서버를 끄고 앱을 열어보면,
00:03:23빈 화면만 나옵니다. 솔직히 말해서 Paik은 로컬 앱용으로 설계된 건 아닙니다. 제가 유튜브 뮤직
00:03:28앱을 테스트해 봤는데, 명령어 하나로 놀라울 정도로 잘 작동합니다. 심지어 오프라인에서도 되는데,
00:03:33유튜브 뮤직 사이트 자체가 그렇게 작동하기 때문이죠. 그래서 저는 이걸 메인 음악 플레이어로
00:03:38사용하고 있습니다. 하지만 Paik은 라이브 URL을 감싸는 방식이라
00:03:42로컬 파일을 사용하는 옵션을 쓰지 않는 한, 여러분이 가진 코드를 번들링해 주는 도구는 아닙니다.
00:03:48영상 제작 후에야 이 옵션을 알게 되었죠. 빌드 방식도 아주 잘 만들어진 것 같진 않습니다.
00:03:53PNPM이나 NPM 대신 BUN을 써서 설치했는데, Tauri 빌드를 하려면 내부적으로 하나가 필요하더라고요.
00:04:00제 PNPM 버전이 요구하는 버전보다 최신이라 빌드와 앱 설치가 안 됐습니다.
00:04:05그래서 Claude code를 써서 Paik 소스 코드를 직접 수정해야 했습니다.
00:04:11결국 이슈는 등록해 뒀는데, 만약 Paik이 컴파일된 바이너리를 제공했다면
00:04:15해결될 문제였습니다. 그게 ElectroBUN이나 ZeroNative를 쓸 때의 장점이기도 하죠.
00:04:20ElectroBUN은 웹뷰 뒤에 실제 BUN 런타임을 제공해서 백엔드
00:04:25로직을 실행할 수 있게 해주고, ZeroNative는 한술 더 떠서 C 라이브러리를 직접 호출 가능한 Zig 쉘을 줍니다.
00:04:31그러니 Paik은 라이브 웹사이트를 감싸는 가장 빠른 방법이지만, 그 이상의 기능이
00:04:36필요하다면 다른 도구를 사용하는 게 좋습니다.

Key Takeaway

Paik은 Tauri 2를 활용해 웹사이트를 5MB 수준의 저용량 네이티브 데스크톱 앱으로 빠르게 변환하는 CLI 도구이다.

Highlights

  • Paik은 웹사이트를 네이티브 데스크톱 앱으로 변환하는 명령줄 도구로, 약 5MB의 가벼운 설치 용량을 가진다.

  • Tauri 2를 기반으로 시스템 기본 웹뷰를 활용하여 Electron 대비 메모리 점유율이 현저히 낮고 실행 속도가 빠르다.

  • 앱 소스 코드 수정 없이 inject 플래그를 사용하여 사용자 지정 CSS와 자바스크립트를 주입할 수 있다.

  • 개발자 도구 액세스, 제목 표시줄 숨기기, 시스템 트레이 아이콘 생성 기능을 명령어 하나로 제공한다.

  • 실행 중인 라이브 URL을 감싸는 방식이므로 로컬 파일을 직접 번들링하는 용도로는 설계되지 않았다.

Timeline

Paik의 기본 개념과 기술적 이점

  • Rust 기반으로 제작된 Paik은 앱 용량을 약 5MB로 유지한다.
  • Tauri 2를 활용해 시스템 기본 웹뷰를 사용하므로 Electron 기반 앱보다 메모리를 적게 사용한다.

대부분의 웹 서비스는 공식 네이티브 앱이 없어 브라우저 탭에서 실행된다. Paik은 이를 독립형 앱으로 만들어 사용성과 성능을 개선한다. 약 1,800줄의 Rust 코드로 구성되어 있으며, 복잡한 설정 없이 명령줄 도구 하나로 창 관리와 자바스크립트 주입을 수행한다.

사용 사례와 커스텀 옵션

  • 프로젝트 실행 후 URL과 앱 이름을 지정하여 명령어 하나로 설치 파일을 생성한다.
  • debug 플래그로 개발자 도구에 액세스하고, hide title bar 플래그로 프레임 없는 디자인을 구현한다.
  • inject 플래그를 사용하여 기존 앱의 CSS나 자바스크립트를 수정 없이 보완할 수 있다.

실제 프로젝트에 적용 시 약 5~10분 내에 설치 가능한 DMG 파일이 생성된다. 활성 상태 보기에서 Paik으로 만든 앱은 약 61MB의 메모리를 사용하는데, 이는 수백 MB를 차지하는 Slack 등의 Electron 앱보다 훨씬 효율적이다.

한계와 대안적 접근

  • 라이브 URL 기반으로 작동하므로 서버가 꺼지면 앱이 빈 화면을 표시한다.
  • Tauri 빌드 환경 설정에 따라 의존성 버전 충돌 문제가 발생할 수 있다.
  • 복잡한 백엔드 로직이나 C 라이브러리 호출이 필요할 경우 ElectroBUN이나 ZeroNative가 더 적합하다.

유튜브 뮤직처럼 오프라인 지원이 포함된 웹사이트에는 효과적이지만, 로컬 소스 코드 번들링 도구로는 제한적이다. 컴파일된 바이너리를 직접 제공하지 않아 초기 빌드 과정에서 기술적 이슈가 발생할 가능성이 존재한다.

Community Posts

No posts yet. Be the first to write about this video!

Write about this video