Skip to main content

이번 주 프로젝트: Kap

· 14 min read
skllcrn
skllcrn
sindresorhus
sindresorhus
zeke
zeke

Electron 커뮤니티는 빠르게 성장하고 있으며, 사람들은 놀라운 속도로 강력한 새로운 앱과 도구를 만들어내고 있다. 이러한 창의적인 움직임을 기리고 커뮤니티가 이러한 새로운 프로젝트들을 알 수 있도록, 우리는 주간 블로그 시리즈를 시작하기로 결정했다. 이 시리즈는 주목할 만한 Electron 관련 프로젝트를 소개할 예정이다.

이 글은 시리즈의 첫 번째로, Wulkano가 개발한 오픈소스 화면 녹화 앱 Kap을 소개한다. Wulkano는 지리적으로 분산된 프리랜서 디자이너와 개발자로 구성된 팀이다.

Kap Screencast

Kap이란 무엇인가?​

Kap은 오픈소스 화면 녹화 도구로, 주로 디자이너와 개발자가 작업 내용을 쉽게 캡처할 수 있도록 만들었다. 사용자들은 애니메이션 프로토타입 공유, 버그 문서화, 재미있는 GIF 제작 등 다양한 용도로 Kap을 활용한다.

교육 현장, 스크린캐스트, 튜토리얼 등 다양한 연령대와 배경을 가진 사람들이 Kap을 사용하는 모습을 볼 수 있다. 심지어 프로덕션 자산을 만드는 데도 활용한다! 우리의 작은 사이드 프로젝트가 이렇게 큰 호응을 얻을 줄은 상상도 못했다.

왜 만들었나요?​

좋은 질문입니다. 이미 화면 녹화 프로그램이 부족한 상황은 아니죠! 하지만 기존 솔루션들은 너무 복잡하거나, 비싸거나, 기능이 제한적이라고 느꼈습니다. 우리의 일상적인 요구를 충족시키는 완벽한 도구는 없었습니다. 또한, 우리가 사용하는 도구가 오픈소스여야 한다고 생각합니다. 그래야 모두가 함께 발전시킬 수 있기 때문이죠. Kap을 만드는 과정은 하지 않기로 한 결정들에 관한 이야기이기도 했습니다. 세부적인 개선들이 모여 우리가 원하는 도구의 윤곽을 그려냈습니다.

하지만 가장 중요한 점은, Kap이 우리가 걱정을 잠시 내려놓고, 우리 자신과 같은 사람들을 위해 무언가를 재미있게 만들 수 있는 공간이 되었다는 것입니다. 새로운 것을 시도하고, 자신의 기술을 즐기며, 스트레스를 풀 수 있는 환경을 만드는 것이 중요합니다. 요구사항 없이, 압박 없이, 기대 없이 말이죠. 디자이너와 개발자가 사이드 프로젝트를 해야 할까요? 물론입니다. 그들은 그래야 합니다.

Kap을 Electron으로 개발한 이유​

Kap을 Electron 기반으로 개발하기로 결정한 데에는 여러 가지 이유가 있다:

  • 웹 기술 활용
  • 팀 대부분이 웹 개발자 출신
  • JavaScript에 대한 투자
  • 더 많은 사람들이 기여할 수 있는 가능성
  • Electron 자체가 오픈소스
  • node_modules의 강력하고 유지보수가 쉬운 모듈성
  • 크로스 플랫폼 지원 가능성

우리는 앱의 미래가 브라우저에 있다고 생각하지만, 아직 그 단계에 이르지는 못했다. Electron은 그 미래로 나아가는 중요한 단계다. Electron은 앱 자체를 더 접근하기 쉽게 만들 뿐만 아니라, 앱을 구축하는 코드도 더 열린 환경으로 만든다. 흥미로운 점은 운영체제가 브라우저가 되고, 각 탭이 기본적으로 Electron 앱이 되는 미래를 상상해 볼 수 있다는 것이다.

또한 주로 웹 개발자로 구성된 우리 팀은 JavaScript의 동형(isomorphic) 특성을 매우 좋아한다. JavaScript는 클라이언트, 서버, 그리고 이제는 데스크톱에서도 실행할 수 있다. 웹 기술(HTML, CSS, JS)을 사용하면 많은 부분이 네이티브보다 훨씬 간단해진다. 빠른 프로토타이핑, 더 적은 코드, 그리고 플렉스 박스가 macOS/iOS의 자동 레이아웃보다 우수하다는 점이 그 예이다.

Kap 개발 과정에서 마주친 도전 과제들​

Electron의 리소스를 활용해 화면을 녹화하는 것이 가장 큰 도전 과제였다. Electron 자체의 문제는 아니었지만, 제공된 기능들은 우리의 요구 사항을 충족할 만큼 성능이 좋지 않았고, 이는 프로젝트 실패로 이어질 수 있었다. 네이티브 개발과 웹 기술을 사용한 데스크톱 앱 개발 사이에는 여전히 간극이 존재한다.

성능이 떨어지는 getUserMedia API를 우회하는 데 많은 시간을 투자했다. 이 문제는 Chromium에서 기인한 것이었다. Kap를 만들 때 우리의 주요 목표 중 하나는 웹 기술로 전체 앱을 구축하는 것이었다. 가능한 모든 방법을 시도했지만(최소 요구 사항은 Retina 화면에서 30 FPS), 결국 다른 해결책을 찾아야 했다.

getUserMedia 대안을 찾아야 했던 상황에서, 우리는 ffmpeg를 실험하기 시작했다. ffmpeg는 오디오와 비디오 변환에 있어 최고의 도구 중 하나일 뿐만 아니라, 거의 모든 운영체제에서 화면을 녹화할 수 있는 기능도 제공한다. 우리는 레티나 디스플레이에서 최소 요구 사항인 30 FPS로 선명한 비디오를 녹화할 수 있었다. 문제는 성능이 "😩"라는 점이었다. CPU 사용률이 걷잡을 수 없이 치솟았다. 그래서 다시 원점으로 돌아가 옵션을 논의한 결과, 타협해야 한다는 결론에 이르렀다. 그 결과로 Swift로 작성된 macOS용 화면 녹화 라이브러리인 Aperture를 개발하게 되었다.

Electron이 개선해야 할 부분은 무엇인가?​

Electron 앱이 RAM을 많이 사용한다는 것은 잘 알려진 사실이다. 하지만 이는 사실 Chromium의 특성 때문이다. 이는 Chromium의 동작 방식의 일부이며, 실행 중인 앱에 따라 크게 달라진다. 예를 들어 Kap와 Hyper 같은 앱은 일반적으로 100MB 미만의 메모리를 사용한다.

가장 개선이 필요한 부분 중 하나는 페이로드다. 특히 Electron이 Chromium을 배포하는 방식이다. 한 가지 아이디어는 공유된 Electron 코어를 만들고, 앱 설치 시 시스템에 이미 존재하는지 확인하는 것이다.

크로스 플랫폼 Electron 앱 개발 경험도 개선이 필요하다. 현재는 플랫폼 간 일관성이 부족하고, 플랫폼별 API와 누락된 기능이 많아 코드베이스가 if-else 문으로 가득 차는 문제가 있다. 예를 들어, vibrancy는 macOS에서만 지원되며, 자동 업데이터는 macOS와 Windows에서 다르게 동작하고 Linux에서는 아예 지원되지 않는다. Linux에서 투명도는 대부분 제대로 작동하지 않는다.

네이티브 시스템 API를 더 쉽게 호출할 수 있어야 한다. Electron은 훌륭한 API 세트를 제공하지만, 때로는 제공하지 않는 기능이 필요할 때가 있다. 네이티브 Node.js 애드온을 만드는 것도 한 가지 방법이지만, 작업이 번거롭다. Electron이 fastcall과 같은 좋은 FFI(Foreign Function Interface) API를 기본으로 제공한다면, Swift 부분을 JavaScript로 작성할 수 있을 것이다.

Electron의 가장 마음에 드는 점은 무엇인가요?​

가장 마음에 드는 점은 웹 개발 지식만 있으면 누구나 멀티플랫폼 네이티브 경험을 구축하고 기여할 수 있다는 점이다. 개발의 편리함과 즐거움, 훌륭한 문서화, 그리고 활발한 생태계도 빼놓을 수 없다.

프론트엔드 관점에서 Kap을 만드는 건 브라우저 API를 사용해 간단한 웹사이트를 만드는 것과 다르지 않았다. Electron은 앱 개발을 웹 개발과 매우 유사하게(거의 동일하게) 만드는 데 탁월한 역할을 한다. 사실 너무 간단해서 프레임워크나 유사한 도구의 도움 없이도 깔끔하고 모듈화된 JS와 CSS만으로 충분했다.

또한 Electron을 만드는 팀과 그들의 헌신과 지원, 그리고 그들이 유지하는 활발하고 친절한 커뮤니티도 매우 좋아한다. 여러분 모두에게 큰 감사의 마음을 전한다!

Kap의 다음 단계는 무엇인가?​

다음 단계로 Kap 2.0.0 마일스톤을 준비하며 앱을 검토할 예정이다. 이번 업데이트에는 React로의 재작성과 함께 플러그인 지원이 추가되어 개발자들이 Kap의 기능을 확장할 수 있게 된다! 여러분 모두가 이 프로젝트를 따라가고 GitHub 저장소에 기여할 것을 초대한다. 우리는 여러분의 의견을 듣고 싶다. Kap을 여러분에게 최고의 도구로 만들기 위해 어떻게 해야 하는지 알려주세요!

Wulkano란 무엇인가?​

Wulkano는 디자인 스튜디오이자 디지털 콜렉티브다. 원격으로 일하는 기술 전문가들로 구성된 팀으로, 클라이언트 작업과 자체 프로젝트를 함께 진행하는 것을 좋아한다. 서로 다른 지역과 배경을 가진 사람들이 모여 있지만, 강한 유대감을 가지고 있다. 가상 사무실(이것은 Electron 기반의 Slack이다!)에서 지식, 아이디어, 경험을 공유하며, 무엇보다도 웃긴 GIF와 밈을 주고받는다.

다른 개발자에게 도움이 될 만한 Electron 팁​

커뮤니티에 참여해 활발히 활동하고, Awesome Electron을 확인해 보세요. 예제를 살펴보고 훌륭한 문서를 적극 활용하세요!