25 posts tagged with "Community"

이번 주에는 GitHub 알림을 관리하기 위한 Electron 기반 도구인 Jasper의 창시자를 인터뷰했다.

안녕하세요! 저는 누구일까요?​

저는 마루야마 료라고 합니다. 일본에서 소프트웨어 개발자로 활동 중이며, Jasper와 ESDoc를 개발하고 있습니다.

Jasper란 무엇인가?​

Jasper는 GitHub 이슈를 읽기 위한 유연하고 강력한 도구다. github.com과 GitHub Enterprise의 이슈와 풀 리퀘스트를 지원한다.

왜 만들었나?​

직장이나 오픈소스 활동에서 GitHub를 사용하는 사람들은 매일 많은 알림을 받는다. 이러한 알림을 구독하는 방법으로 GitHub는 이메일과 웹 알림을 제공한다. 나도 몇 년 동안 이를 사용했지만 다음과 같은 문제에 직면했다:

• 내가 언급된 이슈, 내가 댓글을 단 이슈, 내가 주시하고 있는 이슈를 쉽게 놓치곤 했다.
• 나중에 확인하려고 머릿속 한구석에 이슈를 두곤 했지만, 가끔 까먹곤 했다.
• 이슈를 잊지 않기 위해 브라우저에 많은 탭을 열어두곤 했다.
• 나와 관련된 모든 이슈를 확인하기가 어려웠다.
• 팀의 모든 활동을 파악하기가 어려웠다.

이러한 문제를 해결하기 위해 많은 시간과 에너지를 소모하고 있었기 때문에, 나는 이러한 문제를 효율적으로 해결할 수 있는 GitHub 이슈 리더를 만들기로 결심했고, Jasper 개발을 시작했다.

Jasper을 누가 사용하나요?​

Jasper는 GitHub를 사용하는 여러 회사의 개발자, 디자이너, 매니저들이 활용하고 있다. 물론 일부 오픈소스 개발자들도 사용 중이다. GitHub 내부 직원들도 Jasper를 사용하고 있다!

Jasper의 작동 원리​

Jasper를 설정하면 다음과 같은 화면이 나타난다. 왼쪽부터 차례로 "스트림 목록", "이슈 목록", "이슈 본문"을 확인할 수 있다.

이 "스트림"은 Jasper의 핵심 기능이다. 예를 들어, "electron/electron 저장소에서 @zeke에게 할당된 이슈"를 보고 싶다면 다음과 같은 스트림을 생성한다:

repo:electron/electron assignee:zeke is:issue

스트림을 생성하고 몇 초 정도 기다리면, 조건에 맞는 이슈들을 확인할 수 있다.

스트림을 활용해 무엇을 할 수 있을까?​

스트림을 활용할 수 있는 다양한 조건에 대해 알아보자.

사용자와 팀​

involves는 mention, author, assignee, commenter 중 하나를 의미한다.

저장소와 조직​

org는 user와 동일하다

속성​

리뷰 상태​

이 표를 통해 확인할 수 있듯이, 스트림은 GitHub의 검색 쿼리를 사용할 수 있다. 스트림과 검색 쿼리를 사용하는 방법에 대한 자세한 내용은 다음 URL을 참고한다.

• jasperapp.io/doc.html#stream
• help.github.com/articles/searching-issues
• help.github.com/articles/search-syntax

Jasper는 읽지 않은 이슈 관리, 읽지 않은 댓글 관리, 별표 표시, 알림 업데이트, 이슈 필터링, 키보드 단축키 등의 기능도 제공한다.

Jasper는 유료 제품인가요? 가격은 얼마인가요?​

Jasper는 12달러입니다. 하지만 무료 체험판을 30일 동안 사용할 수 있습니다.

Jasper를 Electron 기반으로 개발한 이유는 무엇인가?​

Electron의 다음과 같은 장점이 마음에 들었다:

• 자바스크립트, CSS, HTML로 앱을 개발할 수 있다.
• 윈도우, 맥, 리눅스 플랫폼 모두에서 동작하는 앱을 만들 수 있다.
• Electron은 활발하게 개발되고 있으며 커뮤니티도 크다.

이러한 특징 덕분에 데스크톱 애플리케이션을 빠르고 간단하게 개발할 수 있다. 정말 훌륭한 도구다! 여러분도 제품 아이디어가 있다면 꼭 Electron을 고려해 보길 바란다.

Jasper 개발 과정에서 어떤 어려움을 겪었나요?​

"스트림" 개념을 이해하는 데 어려움을 겪었다. 처음에는 GitHub의 Notifications API를 사용하려고 했다. 하지만 이 API가 특정 사용 사례를 지원하지 않는다는 것을 알게 되었다. 그 후 Issues API와 Pull Requests API를 Notifications API와 함께 사용하는 방법을 고민했다. 하지만 원하는 결과를 얻지 못했다. 다양한 방법을 고민하던 중 GitHub의 Search API를 폴링하는 것이 가장 유연한 방법이라는 것을 깨달았다. 이 과정에 약 한 달이 걸렸고, 이후 스트림 개념을 적용한 Jasper 프로토타입을 이틀 만에 구현했다.

참고: 폴링은 최대 10초에 한 번으로 제한된다. GitHub API의 제한 사항을 고려할 때 이는 충분히 허용 가능한 수준이다.

다음에 추가될 기능​

다음과 같은 기능을 개발할 계획이다:

• 필터링된 스트림: 스트림에 특정 조건으로 이슈를 필터링하는 기능을 추가할 예정이다. SQL의 뷰와 유사한 개념이다.
• 다중 계정 지원: github.com과 GHE(GitHub Enterprise)를 동시에 사용할 수 있게 될 것이다.
• 성능 개선: 현재 WebView에서 이슈를 로딩하는 속도가 일반 브라우저보다 느린 문제를 해결할 예정이다.

업데이트 소식은 @jasperappio 트위터 계정을 팔로우하면 확인할 수 있다.

이번 주에는 @feross와 @dcposch와 함께 WebTorrent에 대해 이야기를 나눴다. WebTorrent는 웹 기반의 토렌트 클라이언트로, 사용자들을 연결해 분산형 브라우저 간 네트워크를 형성한다.

WebTorrent란 무엇인가?​

WebTorrent는 브라우저에서 동작하는 최초의 토렌트 클라이언트이다. 완전히 JavaScript로 작성되었으며, WebRTC를 사용해 피어 간 통신을 가능하게 한다. 브라우저 플러그인, 확장 프로그램, 또는 별도의 설치가 필요하지 않다.

WebTorrent는 오픈 웹 표준을 활용해 웹사이트 사용자들을 연결하여 분산되고 탈중앙화된 브라우저 간 네트워크를 형성한다. 이를 통해 효율적인 파일 전송이 가능하다.

WebTorrent의 동작 데모는 webtorrent.io에서 확인할 수 있다.

이게 왜 멋질까?​

YouTube 같은 비디오 사이트를 상상해보자. 하지만 이번에는 방문자들이 사이트 콘텐츠를 호스팅하는 데 직접 참여한다. WebTorrent로 구동되는 웹사이트를 더 많은 사람이 사용할수록, 사이트는 더 빠르고 안정적으로 작동한다.

브라우저 간 직접 통신은 중개자를 없애고, 사람들이 자신의 방식으로 소통할 수 있게 한다. 더 이상 클라이언트/서버 구조가 아니다. 모든 사람이 동등한 네트워크의 일원이 된다. WebTorrent는 웹을 다시 분산화하는 여정의 첫걸음이다.

Electron이 왜 필요했을까?​

약 1년 전, 우리는 WebTorrent를 데스크톱 앱으로 실행하는 WebTorrent Desktop을 만들기로 결정했다.

WebTorrent Desktop을 만든 이유는 세 가지다:

1. 깔끔하고 가벼우며 광고 없이 오픈소스로 제공되는 토렌트 앱을 원했다.
2. 스트리밍 지원이 잘 되는 토렌트 앱을 원했다.
3. BitTorrent와 WebTorrent 네트워크를 연결하는 "하이브리드 클라이언트"가 필요했다.

웹 브라우저에서 토렌트를 다운로드할 수 있는데, 왜 데스크톱 앱이 필요할까?​

먼저, WebTorrent의 설계 배경을 간단히 살펴보자.

초기에는 BitTorrent가 TCP를 전송 프로토콜로 사용했다. 이후 uTP가 등장하면서 TCP보다 더 나은 성능과 추가적인 장점을 제공했다. 모든 주요 토렌트 클라이언트는 결국 uTP를 채택했고, 현재는 두 프로토콜 모두를 사용할 수 있다. WebRTC 프로토콜은 논리적인 다음 단계다. 이 프로토콜은 웹 브라우저와의 상호 운용성을 제공하며, 모든 데스크톱 BitTorrent 클라이언트와 수백만 개의 웹 브라우저로 구성된 거대한 P2P 네트워크를 가능하게 한다.

"웹 피어"(웹 브라우저에서 실행되는 토렌트 피어)는 수백만 개의 새로운 피어를 추가함으로써 BitTorrent 네트워크를 더 강력하게 만들고, BitTorrent를 다양한 새로운 사용 사례로 확장한다. WebTorrent는 기존 BitTorrent 클라이언트가 WebTorrent를 쉽게 지원할 수 있도록 BitTorrent 사양을 최대한 따르도록 설계했다.

Vuze와 같은 일부 토렌트 앱은 이미 웹 피어를 지원하지만, 나머지 클라이언트가 이를 지원할 때까지 기다리고 싶지 않았다. 즉, WebTorrent Desktop은 WebTorrent 프로토콜의 채택 속도를 높이기 위한 우리의 방법이었다. 사람들이 정말로 사용하고 싶어 하는 훌륭한 토렌트 앱을 만들어 웹 피어(웹사이트 사용자)와 토렌트를 공유할 수 있는 네트워크 내 피어의 수를 늘리는 것이 목표였다.

토렌트의 잘 알려지지 않은 흥미로운 활용 사례​

WebTorrent의 가장 흥미로운 활용 사례 중 하나는 피어 지원 전송(peer-assisted delivery)이다. 위키백과나 인터넷 아카이브와 같은 비영리 프로젝트는 방문자들이 함께 참여하도록 함으로써 대역폭과 호스팅 비용을 줄일 수 있다. 인기 있는 콘텐츠는 브라우저 간에 빠르고 저렴하게 전송할 수 있다. 드물게 접근되는 콘텐츠는 오리진 서버에서 HTTP를 통해 안정적으로 제공할 수 있다.

인터넷 아카이브는 이미 토렌트 파일을 업데이트해 WebTorrent와 잘 작동하도록 했다. 따라서 인터넷 아카이브 콘텐츠를 사이트에 임베드하려는 경우, 아카이브의 호스팅 비용을 줄이는 방식으로 구현할 수 있다. 이를 통해 아카이브는 웹 아카이빙에 더 많은 자원을 투자할 수 있다.

또한 CDN부터 P2P를 통한 앱 배포까지 다양한 비즈니스 활용 사례도 있다.

WebTorrent를 사용한 멋진 프로젝트들​

WebTorrent로 만들어진 가장 멋진 프로젝트는 단연 Gaia 3D Star Map이다. 이 프로젝트는 은하수를 3D로 구현한 인터랙티브 시뮬레이션이다. 데이터는 토렌트를 통해 브라우저에서 직접 로드된다. 은하계를 날아다니며 인간이 얼마나 작은 존재인지 깨닫게 되는 경험은 정말 감동적이다.

이 프로젝트가 어떻게 만들어졌는지는 Torrenting The Galaxy라는 블로그 포스트에서 확인할 수 있다. 저자 Charlie Hoey는 WebGL과 WebTorrent를 사용해 이 별 지도를 어떻게 만들었는지 설명한다.

Brave도 매우 인상적인 프로젝트다. Brave는 광고와 트래커를 자동으로 차단해 웹을 더 빠르고 안전하게 만드는 브라우저다. 최근 Brave는 토렌트 지원을 추가해 별도의 앱 없이 전통적인 토렌트를 볼 수 있게 했다. 이 기능은 WebTorrent로 구현되었다.

대부분의 브라우저가 PDF 파일을 렌더링할 수 있는 것처럼, Brave는 마그넷 링크와 토렌트 파일을 렌더링할 수 있다. 이제 토렌트는 브라우저가 기본적으로 지원하는 또 하나의 콘텐츠 타입이 된 셈이다.

Brave의 공동 창업자 중 한 명은 JavaScript의 창시자인 Brendan Eich다. WebTorrent도 JavaScript로 작성되었기 때문에 Brave가 WebTorrent를 통합한 점이 매우 의미 있다고 생각한다.

WebTorrent Desktop을 Electron으로 개발한 이유​

Electron 앱은 모든 앱에 Chrome 콘텐츠 모듈을 포함하기 때문에 "부풀려졌다"는 이야기가 있다. 경우에 따라 이는 부분적으로 사실이다. Electron 앱 설치 프로그램은 보통 ~40MB인 반면, 운영체제별 앱 설치 프로그램은 보통 ~20MB 정도다.

하지만 WebTorrent Desktop의 경우, 정상적인 작동 과정에서 거의 모든 Electron 기능과 수십 가지 Chrome 기능을 사용한다. 각 플랫폼별로 이러한 기능을 처음부터 구현하려면 앱 개발에 몇 달에서 몇 년이 더 걸렸을 것이다. 아니면 단일 플랫폼에서만 출시할 수 있었을 것이다.

예를 들어, 다운로드 진행 상황을 보여주기 위해 Electron의 dock 통합, 백그라운드에서 실행하기 위한 메뉴 바 통합, 마그넷 링크를 열기 위한 프로토콜 핸들러 등록, 비디오 재생 중 절전 모드 방지를 위한 절전 모드 차단, 그리고 자동 업데이터를 사용한다. Chrome 기능도 많이 사용한다: 다양한 비디오 형식을 재생하기 위한 <video> 태그, 자막 지원을 위한 <track> 태그, 드래그 앤 드롭 지원, 그리고 네이티브 앱에서 사용하기 까다로운 WebRTC 등이 있다.

또한, 우리의 토렌트 엔진은 JavaScript로 작성되었으며, 특히 TCP 및 UDP 소켓 지원을 위한 require('net')과 require('dgram')과 같은 많은 Node API의 존재를 가정한다.

기본적으로 Electron은 우리가 필요로 하는 기능을 모두 갖추고 있었고, 기록적으로 빠른 시간 안에 견고하고 세련된 앱을 출시할 수 있게 해주었다.

Electron의 가장 좋은 점은 무엇인가?​

WebTorrent 라이브러리는 오픈 소스 사이드 프로젝트로 2년 동안 개발되어 왔다. 우리는 WebTorrent Desktop을 단 4주 만에 만들었다. 이렇게 빠르게 앱을 개발하고 출시할 수 있었던 주된 이유는 Electron 덕분이다.

Node.js가 jQuery를 사용하던 프론트엔드 개발자들에게 서버 프로그래밍을 가능하게 한 것처럼, Electron은 웹이나 Node.js 개발에 익숙한 누구나 네이티브 앱 개발을 할 수 있게 해준다. Electron은 정말 강력한 도구다.

웹사이트와 데스크톱 클라이언트가 코드를 공유하나요?​

네, webtorrent npm 패키지는 Node.js, 브라우저, 그리고 Electron에서 동작한다. 정확히 동일한 코드가 모든 환경에서 실행될 수 있다. 이것이 바로 JavaScript의 매력이다. JavaScript는 현대의 보편적인 런타임 환경이다. Java 애플릿은 "한 번 작성하고 어디서든 실행"되는 앱을 약속했지만, 여러 가지 이유로 그 비전은 실현되지 못했다. Electron은 다른 어떤 플랫폼보다도 이 이상에 상당히 근접한 성과를 보여주고 있다.

WebTorrent 개발 과정에서 어떤 어려움을 겪었나요?​

초기 버전의 앱에서 UI 성능 문제로 고생했다. 토렌트 엔진을 메인 앱 윈도우를 그리는 렌더러 프로세스에 함께 배치했는데, 이로 인해 토렌트 엔진에서 CPU 사용량이 급증할 때마다(예: 피어로부터 받은 토렌트 조각을 검증하는 경우) 앱이 느려지는 문제가 발생했다.

이 문제를 해결하기 위해 토렌트 엔진을 두 번째, 보이지 않는 렌더러 프로세스로 이동시켰다. 그리고 IPC를 통해 이 프로세스와 통신하도록 구조를 변경했다. 이렇게 하면 해당 프로세스에서 CPU를 많이 사용하더라도 UI 스레드에 영향을 미치지 않는다. 부드러운 스크롤링과 애니메이션은 정말 만족스럽다.

참고: 토렌트 엔진을 렌더러 프로세스에 배치한 이유는 WebRTC에 접근해야 하기 때문이다. WebRTC는 렌더러 프로세스에서만 사용할 수 있다.

Electron의 개선이 필요한 부분은 무엇인가?​

프로덕션 준비가 된 앱을 빌드하고 배포하는 방법에 대한 더 나은 문서화가 필요하다. 특히 코드 서명(code signing)과 자동 업데이트(auto-updating)와 같은 복잡한 주제에 대한 설명이 부족하다. 우리는 소스 코드를 뒤지고 Twitter에서 질문을 올리는 방식으로 최적의 방법을 직접 찾아야 했다.

WebTorrent Desktop는 완성되었나요? 아니라면, 다음에 어떤 기능이 추가될 예정인가요?​

현재 버전의 WebTorrent Desktop은 훌륭하지만, 여전히 개선의 여지가 있다고 생각한다. 현재는 사용 편의성, 성능, 자막 지원, 그리고 비디오 코덱 지원을 개선하기 위해 노력 중이다.

프로젝트에 참여하고 싶다면 GitHub 페이지를 확인해 보자!

다른 개발자에게 유용할만한 Electron 개발 팁​

WebTorrent Desktop 기여자 중 한 명인 Feross는 NodeConf Argentina에서 _"Real world Electron: JavaScript로 크로스 플랫폼 데스크톱 앱 만들기"_라는 주제로 발표했다. 이 발표는 기본적으로 동작하는 앱을 더욱 세련되고 전문적으로 다듬는 단계에 있는 개발자에게 특히 유용한 팁을 담고 있다.

영상 보기:

슬라이드 보기:

또 다른 WebTorrent 기여자인 DC는 앱을 더 세련되고 네이티브하게 느껴지도록 만들기 위한 체크리스트를 작성했다. 이 체크리스트에는 코드 예제가 포함되어 있으며, macOS 독 통합, 드래그 앤 드롭, 데스크톱 알림, 앱 로딩 속도 개선 등의 주제를 다룬다.

이번 주에는 Aprile Elcich와 Paolo Fragomeni를 만나 Electron 기반의 음악 플레이어인 Voltra에 대해 이야기를 나눴다.

Voltra란 무엇인가?​

Voltra는 음악을 소유하고 싶은 사람들을 위한 음악 플레이어다. 또한, 이미 소유한 음악을 기반으로 새로운 음악을 발견하고 구매할 수 있는 스토어 기능도 제공한다. 광고가 없으며 데스크톱과 모바일에서 모두 사용할 수 있는 크로스 플랫폼이다. 사용자를 추적하거나 감시하지도 않는다.

Voltra는 누구를 위한 서비스인가?​

음악을 듣는 모든 이를 위한 서비스다.

Voltra를 만든 이유는 무엇인가?​

라디오는 항상 많은 청취자를 확보해 왔다. 이제 라디오는 공중파를 벗어나 인터넷으로 이동하고 있다. 주문형 음악 대여가 가능해지면서 라디오의 부활이 일어나고 있다! 이로 인해 다양한 새로운 제품과 서비스가 등장했지만, 스트리밍 라디오는 여전히 다른 사람이 음악과 그 경험을 통제한다.

우리는 사용자가 소유한 음악에 완전히 초점을 맞춘 제품을 원했다. 아티스트나 레이블로부터 직접 새 음악을 발견하고 구매할 수 있게 해주는 무언가가 필요했다.

무료 버전이 있나요?​

데스크톱 플레이어는 완전히 무료입니다. 음악 판매도 무료로 제공합니다! 광고 지원 방식이 아닙니다.

앱이 무료이기 때문에, 추후 오픈소스로 공개할 가능성이 있습니다. 현재는 이를 관리할 여유가 없습니다. 또한 기능과 발전 방향에 대해 구체적인 아이디어를 가지고 있습니다. 활발한 베타 커뮤니티가 있으며, 사용자 피드백을 소중히 받아들입니다.

어떻게 수익을 창출하나요?​

우리는 프리미엄 기능을 제공합니다!

Voltra Audio Archive는 음악을 위해 특별히 설계된 클라우드 백업 서비스입니다. 데이터 블록을 압축하거나 공유하지 않습니다. 여러분의 음악 컬렉션을 물리적으로 백업해 드립니다.

아티스트와 레이블을 위한 Pro Membership은 분석 도구와 전문 아티스트 웹페이지와 같은 도구를 제공하여 더 많은 관련 청중에게 도달할 수 있도록 돕습니다.

Voltra의 차별화된 특징은 무엇인가?​

디자인과 사용성은 우리에게 매우 중요하다. 우리는 청취자들이 방해받지 않고 음악을 즐길 수 있는 환경을 제공하고자 한다. 현재 시장에는 다양한 음악 플레이어와 스토어가 존재한다. 하지만 많은 제품들이 제작자의 의도와 달리 복잡하고 사용하기 어렵다. 우리는 Voltra를 가능한 많은 사람들이 쉽게 사용할 수 있도록 만들고자 한다.

또한, 우리는 아티스트나 레이블로부터 수수료를 받지 않는다. 이는 우리의 핵심 차별점 중 하나다. 이는 아티스트들이 자신의 음악을 시장에 내놓는 데 있어 진입 장벽을 낮추는 중요한 요소다.

어떤 디자인 및 기술적 결정을 내렸는가?​

Voltra를 설계하면서 네이티브 앱과 웹의 UI 관례를 고려했을 뿐만 아니라, 무엇을 제거할 수 있을지 깊이 고민했다. 지난 몇 달 동안 활발히 활동한 비공개 베타 테스트 그룹으로부터 중요한 피드백을 받았다.

앨범 아트와 사진이 사용자들에게 매우 중요하다는 사실을 발견했다. 많은 플레이어가 단순히 파일 목록으로 구성되어 있다. 물리적 앨범을 소유하는 멋진 점 중 하나는 앨범 아트이며, Voltra 데스크톱 앱에서 이를 강조하고 싶었다.

또한 사용자의 파일을 건드리지 않도록 주의했다. 파일 감시 기능을 사용해 파일을 원하는 곳에 배치할 수 있게 했고, 파일 이름을 변경하거나 이동시키지 않는다. 감시 중인 디렉터리의 상태를 추적하기 위해 내장 데이터베이스를 사용해 프로세스가 실행 중이 아닐 때도 새로운 내용을 파악할 수 있다.

Voltra를 개발하며 마주한 도전 과제는 무엇인가?​

성능 최적화에 많은 시간을 투자했다. 처음에는 프레임워크를 사용했지만, 결국 바닐라 자바스크립트로 전환했다. 우리의 경험에 따르면, 프레임워크가 제공하는 일반화된 추상화는 성능 저하와 추가적인 복잡성을 감수할 만한 가치가 있다.

현재는 매우 큰 컬렉션을 효율적으로 처리할 수 있다. 여기서 '큰 컬렉션'은 수만 개의 이미지를 의미한다! Node.js의 파일 시스템 모듈을 렌더링 프로세스에서 직접 사용할 수 있어, DOM 이벤트에 따라 많은 이미지를 빠르게 지연 로딩하고 언로드하는 작업이 매우 쉬워졌다.

일반적으로 setImmediate와 requestIdleCallback은 UI의 반응성을 유지하면서 많은 처리를 수행하는 데 매우 중요한 도구로 사용되었다. 특히, CPU 집약적인 작업을 별도의 프로세스로 분산시키는 것이 사용자 인터페이스의 반응성을 유지하는 데 큰 도움이 되었다. 예를 들어, 실제 오디오 컨텍스트를 별도의 프로세스로 옮기고, IPC를 통해 통신함으로써 바쁜 UI로 인한 잠재적인 중단을 피할 수 있었다.

Voltra를 Electron으로 개발한 이유​

브라우저의 샌드박스는 우리 앱에 너무 제한적이다. 하지만 웹 플레이어도 함께 개발 중이다. 따라서 두 구현체 간 거의 100%의 코드를 공유할 수 있다는 점은 큰 장점이다.

처음에는 Swift로 네이티브 앱을 개발하려고 했다. 하지만 너무 많은 부분을 직접 구현해야 한다는 문제점을 발견했다. 웹은 세계에서 가장 큰 오픈소스 생태계를 가지고 있다. 그래서 빠르게 Electron으로 전환했다.

가장 중요한 점은, Electron을 사용하면 한 번 개발하면 모든 주요 플랫폼에서 작동해야 한다는 것이다. 완벽히 보장되지는 않지만, 각 플랫폼별로 네이티브 코드를 작성하는 비용은 Electron이 도입하는 다른 비용보다 확실히 더 크다.

Electron의 가장 좋은 점은 무엇인가?​

효율성: Node.js의 네트워킹 스택과 Chromium의 프레젠테이션 레이어가 함께 제공되어 작업을 빠르게 처리할 수 있다.

전문성: 웹 기술 스택을 그대로 사용하기 때문에, 우리 팀 전체가 제품 개발에 직접 참여할 수 있다.

커뮤니티: 매우 체계적이고 소통이 원활한 커뮤니티가 있다. 이런 지원 속에서 개발할 수 있어 매우 만족스럽다.

Electron의 개선이 필요한 부분은 무엇인가?​

Electron이 단일 패키저를 공식적으로 지원해 주길 바란다. 패키저는 Node에서의 패키지 관리자만큼 Electron에게도 중요하다. 현재 사용자 영역에는 여러 패키저가 존재하며, 각각 흥미로운 기능을 제공하지만 버그도 함께 존재한다. 커뮤니티의 합의는 기여자들이 쏟는 에너지를 올바른 방향으로 이끄는 데 도움을 줄 것이다.

다음에 어떤 일이 벌어질까?​

현재 모바일 앱을 개발 중이며, 아티스트와 레이블과 협력해 Voltra 상점에 음악을 추가하고 있다. 아티스트나 레이블이라면 지금 바로 가입하세요! 목표인 1천만 트랙을 달성하면 상점을 열 예정이다.

이번 주에는 Automattic의 팀원들과 만나 WordPress Desktop에 대해 이야기를 나눴다. WordPress Desktop은 워드프레스 콘텐츠를 관리할 수 있는 오픈소스 데스크톱 클라이언트다.

모두가 알고 있는 WordPress, 그렇다면 WordPress Desktop은 무엇일까?​

WordPress.com Desktop 앱은 크로스 플랫폼 환경에서 원활한 경험을 제공한다. 브라우저 탭으로 인한 방해 없이 콘텐츠와 디자인에 집중할 수 있으며, 사이트를 쉽게 접근할 수 있는 상태로 유지할 수 있다. 브라우저 지원과 모바일 앱과 함께 사용하면 어디서든 사이트를 구축할 수 있고, 작업을 완료하는 데 도움이 되는 방식으로 진행할 수 있다.

WordPress 사이트 관리를 위해 데스크톱 앱을 만드는 이유는? 웹 기반으로 모두 처리할 수 있지 않나?​

실제로 이 앱은 WordPress.com을 브라우저에서 방문할 때와 동일한 기술을 사용한다. 다만, 모든 것이 로컬에서 호스팅되기 때문에 로드 시간이 최소화된다. 또한, 독(dock)에 위치하거나 알림과 같은 네이티브 기능을 활용할 수 있어, WordPress 사이트와 블로깅에 더 집중할 수 있다.

왜 WordPress Desktop을 Electron으로 개발했나?​

2015년 말, 우리는 WordPress.com의 많은 부분을 React를 사용한 오픈소스 모던 자바스크립트 앱인 Calypso로 재구축했다. 우리는 Electron을 살펴보기 시작했고, Calypso에 몇 가지 변경을 가해 로컬에서 실행할 수 있게 했다. 이는 매우 매력적인 경험이었고, 이를 더 발전시키는 데 큰 가치가 있다고 생각했다.

당시 우리는 여러 팀이 Calypso를 개발하고 있었다. 전통적인 데스크톱 기술을 사용해 이와 동일한 기능을 가진 멀티플랫폼 GUI 클라이언트를 만드는 데는 더 많은 작업이 필요했다. Electron을 사용함으로써, 2~4명으로 구성된 작은 팀이 다른 팀의 노력을 활용해 데스크톱 앱을 단 몇 달 만에 개발할 수 있었다.

WordPress Desktop 개발 과정에서 겪은 어려움​

초기 버전의 앱을 빠르게 실행하는 데는 성공했지만, 이를 데스크톱 앱으로 최적화하는 데는 훨씬 더 많은 시간이 필요했다. 이 앱의 가장 큰 도전은 실제로 사용자의 컴퓨터에서 Calypso의 복사본을 실행한다는 점이다. 이는 순수하게 API 기반의 UI로 동작하기 때문에, 이를 연결하는 데 상당한 작업이 필요했고, 이러한 변경사항은 Calypso 자체에도 반영되었다.

또한, 다양한 플랫폼(Windows, macOS, Linux)에 맞춰 앱을 패키징하는 데도 많은 노력이 들었다. 각 플랫폼마다 충분한 차이가 있어 이를 해결하는 것이 쉽지 않았다.

당시 Electron은 비교적 새로운 기술이었기 때문에, 우리는 자주 문제에 직면했고, 그 문제들은 빠르게(때로는 같은 날) 해결되기도 했다.

Electron의 개선이 필요한 부분은 무엇인가?​

Electron은 이미 데스크톱 앱 개발에 필요한 대부분의 기능을 제공하며, 우리가 사용하기 시작한 이후로 빠르게 발전해 왔다. 하지만 스펠 체크나 찾기/바꾸기와 같은 데스크톱 앱에서 당연하게 여겨지는 기능들은 현재의 Electron으로 구현하기에는 여전히 어려운 부분이 있다.

또한, 최신 Chrome 기술들이 Electron으로도 도입되기를 기대한다. 특히 WebVR을 실험해 보고 싶은 마음이 크다.

Electron에서 가장 좋아하는 점은 무엇인가?​

Electron을 선택한 주된 이유이자 가장 큰 강점은 매우 활발하고 개방적인 커뮤니티다. Automattic은 항상 오픈소스를 믿어왔다. 이는 우리의 핵심 원칙 중 하나이며, Electron 프로젝트와 커뮤니티는 매우 개방적이고 긍정적인 핵심 신념을 많이 따르고 있다.

WordPress 데스크톱 앱의 향후 계획​

우리 모델의 장점은 데스크톱 앱이 Calypso의 모든 새로운 기능을 자동으로 활용한다는 점이다. 지속적인 개선이 이루어지고 있다. 앞으로 앱에 오프라인 지원과 같은 추가 기능을 도입해 더욱 네이티브 앱에 가까워지길 기대한다. 또한 시스템 알림 기능도 개선할 계획이다.

Automattic에서 다른 Electron 앱을 개발하는 팀이 있나요?​

네, 데스크톱 앱 작업 이후 Simplenote 팀은 Windows와 Linux용 데스크톱 앱을 개발하기 위해 Electron을 사용하기로 결정했습니다. (Mac용 네이티브 클라이언트는 이미 존재합니다.) Simplenote Electron 앱은 오픈 소스로 GitHub에서 확인할 수 있습니다.

또한, Electron을 사용한 Raspberry Pi 통합 기능도 곧 출시될 예정입니다.

이 중 흥미로운 내용이 있다면 저희에게 연락 주세요!

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

서명된 데스크톱 소프트웨어를 배포하는 과정은 우리에게 비교적 새로운 경험이었다. 특히 Windows 환경에서 더 그랬다. 우리는 Windows 앱 코드 서명에 대한 글을 작성했는데, 여기에는 올바르게 코드 서명을 수행하기 위해 거쳐야 하는 과정과 몇 가지 어려움에 대한 내용이 포함되어 있다.

이번 주에 소개할 프로젝트는 Dat이다. Dat은 그랜트 지원을 받아 개발된 오픈 소스 분산형 데이터셋 배포 도구다. Dat은 지리적으로 분산된 팀에 의해 구축되고 유지되며, 이 글을 작성하는 데에도 팀원들이 기여했다.

Dat이란 무엇인가?​

Dat은 피어 투 피어와 분산 시스템의 장점을 데이터 공유에 적용하기 위해 개발했다. 처음에는 과학 데이터 공유를 목적으로 시작했지만, 점차 연구 기관, 정부, 공공 서비스, 오픈소스 팀 등 다양한 분야로 확장했다.

Dat은 Dropbox나 BitTorrent Sync와 같은 동기화 및 업로드 앱과 유사하지만, 오픈소스라는 점이 다르다. Dat의 목표는 대규모, 중규모, 소규모 데이터를 모두 지원하는 강력하고 오픈소스이며 비영리적인 데이터 공유 소프트웨어를 만드는 것이다.

dat CLI 도구를 사용하려면 아래 명령어를 입력하면 된다:

dat share path/to/my/folder

이 명령어를 실행하면 특정 폴더를 공유할 수 있는 링크가 생성된다. 중앙 서버나 제3자가 데이터에 접근할 필요가 없다. BitTorrent와 달리, 누가 무엇을 공유하는지 추적할 수 없다. (자세한 내용은 Dat Paper 초안을 참고하면 된다.)

Dat이 무엇인지 이해했다면, Dat Desktop은 어떤 역할을 할까?​

Dat Desktop은 커맨드라인을 사용하지 않거나 사용하기 어려운 사람들도 Dat을 쉽게 활용할 수 있게 해주는 도구다. 여러분의 컴퓨터에서 여러 Dat을 호스팅하고, 네트워크를 통해 데이터를 제공할 수 있다.

어떤 멋진 사용 사례가 있을까?​

DataRefuge + Project Svalbard​

Project Svalbard라는 코드명으로 작업 중인 프로젝트가 있다. 이 프로젝트는 DataRefuge와 관련이 있는데, DataRefuge는 사라질 위기에 처한 정부 기후 데이터를 백업하기 위해 노력하는 단체다. Svalbard는 북극에 위치한 Svalbard Global Seed Vault에서 이름을 따왔는데, 이 저장소는 식물 DNA를 대규모로 지하에 보관하는 곳이다. 우리의 버전은 공공 과학 데이터셋을 버전 관리하며 대규모로 수집하는 프로젝트다. 메타데이터를 신뢰할 수 있게 되면, 분산된 자원봉사 데이터 저장 네트워크와 같은 다른 멋진 프로젝트를 구축할 수 있다.

캘리포니아 시빅 데이터 연합​

CACivicData는 캘리포니아의 정치 자금 추적 데이터베이스인 CAL-ACCESS에서 매일 다운로드할 수 있는 오픈소스 아카이브를 제공한다. 이들은 매일 릴리스를 진행하며, 이는 ZIP 파일에 걸쳐 많은 중복 데이터를 호스팅한다는 것을 의미한다. 우리는 이 데이터를 Dat 저장소로 호스팅하는 작업을 진행 중이며, 이를 통해 특정 버전을 참조하거나 최신 버전으로 업데이트하는 데 필요한 번거로움과 대역폭을 줄일 수 있을 것으로 기대한다.

Electron 업데이트​

아직 구체적인 구현은 아니지만, 흥미로운 사용 사례를 제안한다. 컴파일된 Electron 앱을 Dat 저장소에 넣은 다음, Electron 내부의 Dat 클라이언트를 사용해 빌드된 앱 바이너리의 최신 변경 사항만 가져오는 방식이다. 이렇게 하면 다운로드 시간을 줄일 수 있을 뿐만 아니라 서버의 대역폭 비용도 절약할 수 있다.

Dat Desktop은 누가 사용해야 할까?​

피어투피어(p2p) 네트워크를 통해 데이터를 공유하고 업데이트하려는 모든 사람이 적합하다. 데이터 과학자, 오픈 데이터 해커, 연구자, 개발자 등 다양한 분야의 사용자에게 유용하다. 또한, 우리는 아직 생각하지 못한 멋진 사용 사례에 대한 피드백을 적극적으로 수렴한다. 궁금한 점이 있다면 Gitter Chat에 방문해 언제든지 질문할 수 있다.

Dat과 Dat Desktop의 향후 계획은 무엇인가?​

사용자 계정과 메타데이터 게시 기능이 곧 추가될 예정이다. 현재 datproject.org에 배포할 Dat 레지스트리 웹 앱을 개발 중이다. 이는 기본적으로 '데이터셋을 위한 NPM'과 유사하지만, 모든 데이터를 중앙에서 호스팅하는 NPM이나 GitHub와 달리 메타데이터 디렉토리 역할만 수행하며, 데이터는 온라인 어디에나 존재할 수 있다. 많은 데이터셋이 크기 때문에, BitTorrent 트래커와 유사한 분산형 레지스트리가 필요하다. Dat Desktop에서 레지스트리를 통해 데이터셋을 쉽게 찾거나 게시할 수 있도록 하여 데이터 공유 과정을 원활하게 만들 계획이다.

또 다른 기능으로는 다중 작성자/협업 폴더가 있다. 데이터셋 협업을 중심으로 설계된, git의 브랜치와 유사한 협업 워크플로를 구축할 큰 계획이 있다. 하지만 현재는 전반적인 안정성과 프로토콜 표준화 작업에 집중하고 있다!

왜 Dat Desktop을 Electron 기반으로 개발했는가?​

Dat은 Node.js를 사용해 개발했기 때문에, Electron과의 통합은 자연스러운 선택이었다. 더불어 우리의 사용자들은 다양한 기기를 사용한다. 과학자, 연구자, 정부 관계자들이 각 기관의 규정에 따라 특정 환경을 사용해야 하는 경우가 많기 때문이다. 이는 우리가 Mac뿐만 아니라 Windows와 Linux도 지원해야 한다는 것을 의미한다. Dat Desktop은 이러한 요구를 쉽게 충족시켜 준다.

Dat과 Dat Desktop을 개발하며 마주한 주요 문제점은 무엇인가?​

사용자들이 원하는 것을 파악하는 것이 가장 큰 과제였다. 초기에는 표 형식의 데이터셋을 중심으로 개발을 시작했지만, 이는 해결하기 복잡한 문제였고 대부분의 사용자가 데이터베이스를 사용하지 않는다는 사실을 깨달았다. 따라서 프로젝트 중반에 모든 것을 처음부터 다시 설계하여 파일 시스템을 기반으로 전환했고, 그 이후로는 큰 문제 없이 진행되고 있다.

또한 Electron 인프라와 관련된 몇 가지 일반적인 문제에 직면했다:

• 원격 측정(Telemetry): 익명 사용 통계를 어떻게 수집할 것인가
• 업데이트: 자동 업데이트 설정은 복잡하고 신비로운 과정이다
• 릴리스: XCode 서명, Travis에서의 릴리스 빌드, 베타 빌드 생성 등 모두 도전적인 과제였다

Dat Desktop의 '프론트엔드' 코드에서는 Browserify와 몇 가지 멋진 Browserify Transform을 사용한다. 이는 네이티브 require가 있음에도 여전히 번들링을 하는 것이 이상하게 보일 수 있지만, Transform을 사용하기 위해서는 필요하다. CSS 관리를 더욱 효율적으로 하기 위해 Sass에서 sheetify로 전환했다. 이를 통해 CSS를 모듈화하고, UI를 공통 의존성을 가진 컴포넌트 기반 아키텍처로 쉽게 이동할 수 있게 되었다. 예를 들어 dat-colors는 모든 프로젝트에서 공유하는 색상을 포함하고 있다.

우리는 항상 표준과 최소한의 추상화를 중요하게 여겨왔다. 전체 인터페이스는 몇 가지 헬퍼 라이브러리와 함께 일반 DOM 노드를 사용해 구축했다. 이러한 컴포넌트 중 일부를 base-elements라는 저수준 재사용 가능한 컴포넌트 라이브러리로 옮기기 시작했다. 대부분의 기술과 마찬가지로, 우리는 올바른 방향으로 나아가고 있다는 느낌을 받으며 계속 반복하고 개선해 나가고 있다.

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

가장 큰 문제점은 네이티브 모듈이다. npm을 사용해 Electron용 모듈을 다시 빌드해야 하는 것은 워크플로우를 복잡하게 만든다. 우리 팀은 사전 빌드된 바이너리를 처리하는 prebuild라는 모듈을 개발했는데, 이는 Node에서는 잘 작동했지만 Electron 워크플로우에서는 설치 후 보통 npm run rebuild와 같은 커스텀 단계가 필요했다. 이는 번거로웠다. 이 문제를 해결하기 위해 최근 npm tarball 내부에 모든 플랫폼의 컴파일된 바이너리 버전을 번들링하는 전략으로 전환했다. 이 방법은 tarball의 크기를 증가시키지만 (.so 파일 - 공유 라이브러리를 사용해 최적화할 수 있음), 설치 후 스크립트를 실행할 필요가 없고 npm run rebuild 패턴을 완전히 피할 수 있다. 이는 npm install이 Electron에서 처음부터 올바르게 작동한다는 것을 의미한다.

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

Electron의 API는 상당히 잘 설계되어 있고, 비교적 안정적이며, 최신 Node 릴리즈를 잘 따라간다는 점이 가장 마음에 듭니다. 이 정도면 더 이상 바랄 것이 없죠!

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

네이티브 모듈을 사용한다면 prebuild를 시도해 보세요!

Dat 프로젝트를 팔로우하는 가장 좋은 방법은 무엇인가?​

Twitter에서 @dat_project를 팔로우하거나, 이메일 뉴스레터를 구독한다.

이번 주에는 Slack의 데스크톱 엔지니어이자 Ghost 출판 플랫폼용 Electron 클라이언트인 Ghost Desktop의 메인테이너인 Felix Rieseberg와 이야기를 나눴다.

Ghost란 무엇인가?​

Ghost는 현대적인 온라인 출판물을 구축하고 운영하기 위한 완전 오픈 소스이며, 커스터마이징이 가능한 플랫폼이다. Zappos부터 Sky News에 이르기까지 다양한 블로그, 매거진, 저널리스트를 지원한다.

다른 출판 플랫폼과의 차이점​

Ghost는 2013년 4월, 전문 출판에 초점을 맞춘 새로운 플랫폼을 만들기 위한 성공적인 Kickstarter 캠페인 이후 설립되었다. 이 플랫폼의 미션은 전 세계 독립 저널리스트와 작가들을 위한 최고의 오픈소스 도구를 제공하고, 온라인 미디어의 미래에 실질적인 영향을 미치는 것이다. Ghost는 더 간단하고 집중된 경험을 제공한다. 에디터는 최고의 글쓰기 경험을 제공하는 데 초점을 맞춰 설계되었다.

전통적인 WordPress와 비교했을 때, Ghost는 더 간단하고 간소화된 경험을 제공한다. 설정과 유지 관리가 더 쉽고, 모든 주요 기능이 기본적으로 제공되며, 속도가 훨씬 빠르다. 다른 온라인 플랫폼과 비교했을 때, Ghost는 작가들이 자신의 콘텐츠에 대한 완전한 소유권과 통제권을 가지며, 완전한 커스터마이징이 가능하고, 출판물을 기반으로 사업을 구축할 수 있도록 지원한다.

Ghost는 영리 기업인가요?​

이 부분은 우리에게 매우 중요하다. Ghost는 독립적인 비영리 조직이다. 우리는 언론의 자유가 중요하다고 믿기 때문에 현대 저널리즘과 블로깅을 위한 출판 도구를 만든다. 우리의 소프트웨어는 무료 오픈소스 라이선스로 공개되어 있으며, 비즈니스 모델은 완전히 투명하다. 또한, 우리의 법적 구조는 Ghost가 벌어들인 수익의 100%를 Ghost를 개선하는 데 재투자한다는 것을 의미한다.

Ghost Desktop이란?​

Ghost Desktop은 작가들이 여러 블로그를 한 번에 관리하고 글쓰기에 집중할 수 있게 해주는 도구다. 일반적인 글쓰기 단축키 같은 간단한 기능들도 브라우저에서는 구현하기 어렵지만, 이 데스크톱 앱에서는 사용할 수 있다. 또한 다른 애플리케이션이 딥링크를 통해 블로그와 직접 통신할 수 있게 해준다.

Ghost for Journalism란 무엇인가?​

올해 우리는 10명의 전직 Ghost 팀 전체와 45,000달러 상당의 리소스를 독립 출판물 3곳의 성장을 지원하는 데 전념하게 되어 매우 기쁘게 생각한다. 우리는 이를 Ghost for Journalism이라고 부르기로 했다.

우리는 약 3년 반 동안 독립 출판사를 위한 웹의 차세대 플랫폼으로 Ghost를 구축해 왔으며, 이제 매우 흥미로운 전환점에 도달했다. 우리는 누구나 사용할 수 있는 간단하고 잘 디자인된 블로깅 플랫폼을 만들기 위해 이 여정을 시작했다. 이는 항상 첫 번째 단계가 될 것이었다.

장기적으로, 우리는 Ghost가 세계 최고의 저널리즘을 위한 놀라운 플랫폼이 되기를 원한다. 이는 바로 그런 사람들을 끌어들이기 위한 기능을 구축해야 한다는 것을 의미한다. 올해 우리는 그에 초점을 맞추기 위해 매우 의식적인 결정을 내렸다.

Ghost는 백엔드와 프론트엔드 모두에서 JavaScript와 Node.js를 사용한다. 동일한 기술과 스킬셋을 활용하면 개발 속도를 높이고 더 많은 기능을 구현할 수 있으며, 궁극적으로 더 나은 사용자 경험을 제공할 수 있다. 또한 macOS, Windows, Linux 버전 간에 95% 이상의 코드를 공유할 수 있어 각 플랫폼마다 별도의 코드베이스를 유지할 필요 없이 핵심 사용자 경험에 집중할 수 있다.

Ghost Desktop을 개발하며 마주친 도전 과제는 무엇인가?​

맞춤법 검사는 여전히 가장 어려운 서비스 중 하나다. 많은 온라인 서비스를 쉽게 활용할 수 있지만, 여러 언어로 된 텍스트를 정확히 검사하면서도 사용자의 프라이버시와 자율성을 보호하는 것은 쉽지 않은 과제다.

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

Electron이 운영체제의 기본 맞춤법 검사 기능을 앱에 통합하는 것을 기대한다. <input> 필드가 NSTextView와 동일한 서비스를 받는 세상을 꿈꾸지만, 이를 구현하는 것이 얼마나 어려운지도 잘 알고 있다.

Electron의 가장 매력적인 점은 무엇인가요?​

JavaScript는 방대한 생태계로 유명하며, 수많은 도구와 프레임워크를 포함한다. 하지만 이들이 제공하는 편의성은 과장할 수 없을 정도로 크다. Electron으로 앱을 만드는 것은 웹 앱을 만드는 것보다 약간 더 어려울 뿐이며, 이는 놀라운 업적이다.

Ghost 개발이 완료되었나요? 아니라면, 앞으로 어떤 계획이 있나요?​

Ghost Desktop은 여전히 진행 중인 프로젝트입니다. 아직 완료와는 거리가 멀죠. 우리는 오랫동안 사용자를 위한 완전한 오프라인 모드를 제공하는 것에 대해 논의해 왔으며, 이제 그 목표에 상당히 가까워졌습니다. 또 다른 중요한 작업 영역은 Word나 Atom과 같은 다른 텍스트 편집 앱과의 확장 및 통합입니다. 이를 통해 사용자가 선호하는 도구를 사용해 글을 작성할 수 있게 될 것입니다. 일반적으로 오프라인 모드 기능을 출시한 후에는 운영체제와의 더 깊은 통합을 모색할 계획입니다. 이 내용이 흥미롭게 느껴진다면, 저희와 함께하세요!

좋아하는 Electron 앱은 무엇인가요?​

저는 Kap, Felony, 그리고 Visual Studio Code를 특히 좋아합니다.

👻

이번 주에는 Beaker Browser의 창시자인 Paul Frazee와 이야기를 나눴다. Beaker는 실험적인 피어 투 피어 웹 브라우저로, 사용자의 기기에서 사이트를 호스팅하기 위해 Dat 프로토콜을 사용한다.

Beaker는 무엇이고 왜 만들었는가?​

Beaker는 참여형 브라우저다. 독립 개발자를 위한 브라우저이다.

현재의 웹은 폐쇄적이다. 소셜 미디어의 작동 방식을 바꾸고 싶다면 Facebook이나 Twitter에서 일해야 한다. 검색 엔진을 바꾸려면 Google에 들어가야 한다. 사용자보다 기업이 모든 것을 통제한다.

Beaker는 새로운 웹 프로토콜인 Decentralized Archive Transport를 사용한다. "Dat"이라고 부른다. 이 프로토콜은 필요할 때마다 무료로 사이트를 생성하고, 기기에서 직접 공유한다. 서버가 필요 없다. 이것이 우리의 혁신이다.

Beaker에서 Dat 사이트를 방문하면 파일을 다운로드한다. 그 사이트는 영원히 여러분의 것이다. 저장하거나 포크해서 수정한 후, 새로운 버전을 무료로 공유할 수 있다. 모든 것이 오픈소스다.

이것이 Beaker의 핵심이다. 우리는 오픈소스 웹사이트를 위한 브라우저를 만든다. 소셜 해킹을 위한 도구 키트가 되길 바란다.

Beaker를 누가 사용해야 할까?​

해커, 모더, 창의적인 사람들, 그리고 뭔가를 직접 만져보고 개조하는 걸 좋아하는 사람들이 적합하다.

Dat을 사용하는 새 프로젝트를 어떻게 만들까?​

우리는 bkr라는 커맨드라인 도구를 제공한다. 이 도구는 git과 npm을 합친 것과 비슷하다. 다음은 사이트를 만드는 예제다:

$ cd ~/my-site
$ bkr init
$ echo "Hello, world!" > index.html
$ bkr publish

다음은 사이트를 포크하는 예제다:

$ bkr fork dat://0ff7d4c7644d0aa19914247dc5dbf502d6a02ea89a5145e7b178d57db00504cd/ ~/my-fork
$ cd ~/my-fork
$ echo "My fork has no regard for the previous index.html!" > index.html
$ bkr publish

이렇게 만든 사이트는 브라우저에서 호스팅된다. BitTorrent와 비슷한 방식으로, P2P 메시지를 통해 사이트를 공유한다.

GUI가 필요하다면, 브라우저에 기본적으로 제공되는 도구를 사용할 수 있다. 하지만 우리는 이 도구들을 사용자 영역으로 옮기고 있다. 모든 것이 사용자 앱으로 수정 가능할 것이다.

Beaker를 Electron 기반으로 개발한 이유​

이 프로젝트에는 Electron이 가장 적합했다. 만약 Chrome을 직접 포크해서 개발했다면 지금쯤 C++로 코딩하고 있었을 것이다. 아무도 그걸 원하지 않는다. 나는 웹 기술 스택을 잘 알고 있고, 이를 활용하면 빠르게 개발할 수 있다. 이건 명백한 선택이었다.

사실, Electron 없이는 이 모든 걸 해낼 수 있었을지 확신이 없다. Electron은 정말 훌륭한 소프트웨어다.

Beaker를 개발하며 어떤 어려움을 겪었나요?​

절반 정도는 도구들을 살펴보면서 어디까지 할 수 있는지 알아내는 과정이었다.

브라우저 자체를 만드는 건 꽤 쉬웠다. Electron은 브라우저를 만드는 도구와 다름없었다. 하지만 브라우저 탭은 오랜 시간이 걸렸다. 결국 SVG를 배우기로 결심했다. 훨씬 더 나아 보이긴 하지만, 제대로 만들기까지 3~4번의 시도가 필요했다.

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

웹뷰 내부에서 개발자 도구를 도킹할 수 있으면 정말 좋을 것 같다.

Beaker의 미래에는 무엇이 있을까?​

Dat 사이트를 위한 보안 DNS 이름이 추가될 예정이다. 또한 "앱 스키마"라고 불리는 사회적으로 구성 가능한 URL 체계가 도입된다. 더불어 다양한 Dat API도 추가될 것이다.

프로젝트에 기여하고 싶은 분들을 위해 Beaker가 도움을 필요로 하는 분야는 무엇인가요?​

현재 많은 이슈가 열려 있습니다. 언제든지 저에게 연락해도 좋습니다. Freenode에서 #beakerbrowser 채널을 이용하세요. 기여자 페이지를 운영하고 있으며, 기여하시는 분들을 해당 페이지에 추가할 예정입니다. 또한, 오스틴을 방문하시면 맥주를 사드리겠습니다.

다른 개발자에게 유용할 수 있는 Electron 팁​

1. 이미 존재하는 빌드 도구를 활용한다. 직접 해결책을 만들려고 고민하지 말고 electron-builder를 사용한다. 보일러플레이트 리포지토리를 활용한다.

2. Electron 리포지토리에 이슈를 올릴 때는 재현하기 쉽도록 최대한 노력한다. 이렇게 하면 더 빠른 응답을 받을 수 있고, 팀도 고마워할 것이다. 더 나아가 직접 문제를 해결해보는 것도 좋다. 내부 구조를 살펴보는 것은 꽤 흥미로운 일이다.

3. 모든 가이드와 고급 문서를 최소 한 번은 읽어본다.

4. 브라우저를 만들지 않는다. 이미 포화 상태인 시장이다.

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

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

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을 확인해 보세요. 예제를 살펴보고 훌륭한 문서를 적극 활용하세요!

최근 GitHub 본사에서 여성 코딩 학교인 Hackbright Academy의 멤버들을 대상으로 Electron 해커톤을 개최했다. 참가자들이 프로젝트를 빠르게 시작할 수 있도록, GitHub의 Kevin Sawicki가 몇 가지 예제 Electron 애플리케이션을 만들었다.

Electron 개발이 처음이거나 아직 시도해보지 않았다면, 이 예제 애플리케이션들이 좋은 시작점이 될 것이다. 이 예제들은 작고 읽기 쉬우며, 코드에 상세한 주석이 달려 있어 각 부분이 어떻게 동작하는지 쉽게 이해할 수 있다.

시작하려면 먼저 이 저장소를 클론한다:

git clone https://github.com/electron/simple-samples

아래 앱 중 하나를 실행하려면 해당 앱의 디렉터리로 이동한 후, 의존성을 설치하고 시작한다:

cd activity-monitor
npm install
npm start

활동 모니터​

CPU의 시스템, 사용자, 유휴 시간을 도넛 차트로 보여준다.

해시​

입력된 텍스트의 해시 값을 다양한 알고리즘으로 계산해 보여준다.

미러​

컴퓨터 카메라의 영상을 거울처럼 확대된 크기로 보여준다. CSS 애니메이션을 활용한 무지개 필터 효과를 선택적으로 추가할 수 있다.

가격 정보​

Yahoo Finance API를 활용해 현재 유가, 금, 은의 시세를 보여준다.

URL​

커맨드라인에서 전달된 URL을 윈도우에 로드한다.

추가 리소스​

이 앱들이 여러분이 Electron을 시작하는 데 도움이 되길 바란다. 더 많은 정보를 얻을 수 있는 몇 가지 추가 리소스를 소개한다:

• electron-quick-start: 최소한의 Electron 애플리케이션 보일러플레이트.
• Electron API Demos: Electron API의 핵심 기능을 보여주는 인터랙티브 앱.
• electronjs.org/docs/all: 모든 Electron 문서를 한 페이지에서 검색할 수 있는 사이트.
• hokein/electron-sample-apps: Electron 메인테이너 Haojian Wu가 모은 또 다른 샘플 애플리케이션 모음.
• awesome-electron: Electron 관련 최신 튜토리얼, 책, 비디오 등을 모아둔 GitHub 저장소.

Electron 웹사이트에 새로운 userland 섹션을 추가했다. 이 섹션은 우리의 활발한 오픈소스 생태계를 이루는 사람들, 패키지, 앱을 사용자가 쉽게 발견할 수 있도록 돕는다.

유저랜드의 기원​

유저랜드는 소프트웨어 커뮤니티의 사람들이 도구와 아이디어를 공유하는 장소다. 이 용어는 Unix 커뮤니티에서 시작되었으며, 커널 외부에서 실행되는 모든 프로그램을 의미했다. 하지만 오늘날에는 더 넓은 의미를 지닌다. 현재 JavaScript 커뮤니티에서 유저랜드를 언급할 때, 대부분 npm 패키지 레지스트리를 가리킨다. 여기서 대부분의 실험과 혁신이 이루어지며, Node와 JavaScript 언어(Unix 커널과 유사하게)는 비교적 작고 안정적인 핵심 기능 집합을 유지한다.

Node와 Electron​

Node와 마찬가지로 Electron도 핵심 API 세트를 제공한다. 이 API들은 멀티플랫폼 데스크톱 애플리케이션 개발에 필요한 기본 기능을 지원한다. 이러한 설계 철학은 Electron이 사용 방식에 대해 지나치게 규제하지 않으면서도 유연한 도구로 남을 수 있게 한다.

Userland는 "core"의 상대 개념으로, 사용자가 Electron의 기능을 확장하는 도구를 만들고 공유할 수 있게 한다.

데이터 수집​

우리 생태계의 트렌드를 더 잘 이해하기 위해 electron이나 electron-prebuilt에 의존하는 15,000개의 공개 GitHub 저장소의 메타데이터를 분석했다.

GitHub API, libraries.io API, 그리고 npm 레지스트리를 사용해 의존성, 개발 의존성, 의존 패키지, 패키지 작성자, 저장소 기여자, 다운로드 수, 포크 수, 스타 수 등의 정보를 수집했다.

이 데이터를 활용해 다음과 같은 보고서를 생성했다:

• 앱 개발 의존성: Electron 앱에서 devDependencies로 가장 자주 등록되는 패키지
• GitHub 기여자: 여러 Electron 관련 GitHub 저장소에 기여한 GitHub 사용자
• 패키지 의존성: 다른 npm 패키지에서 자주 의존하는 Electron 관련 npm 패키지
• 스타가 많은 앱: npm 패키지가 아닌 Electron 앱 중 스타가 많은 앱
• 가장 많이 다운로드된 패키지: 다운로드 수가 많은 Electron 관련 npm 패키지
• 앱 의존성: Electron 앱에서 dependencies로 가장 자주 등록되는 패키지
• 패키지 작성자: Electron 관련 npm 패키지를 가장 많이 작성한 저자

결과 필터링​

앱 의존성이나 스타를 받은 앱과 같은 보고서는 패키지, 앱, 레포지토리를 나열하며, 결과를 필터링할 수 있는 텍스트 입력창을 제공한다.

이 입력창에 텍스트를 입력하면 페이지의 URL이 실시간으로 업데이트된다. 이를 통해 특정 조건에 맞는 userland 데이터를 나타내는 URL을 복사하고 다른 사람과 공유할 수 있다.

더 많은 내용이 추가될 예정​

이번에 공개한 첫 번째 보고서는 시작에 불과하다. 우리는 Electron 커뮤니티가 어떻게 프로젝트를 구축하고 있는지에 대한 데이터를 계속 수집할 것이며, 웹사이트에 새로운 보고서를 추가할 예정이다.

이 데이터를 수집하고 표시하는 데 사용된 모든 도구는 오픈소스로 공개되어 있다:

• electron/electronjs.org: Electron 웹사이트
• electron/electron-userland-reports: Electron 사용자 영역의 패키지, 저장소, 사용자에 대한 데이터
• electron/repos-using-electron: electron 또는 electron-prebuilt에 의존하는 GitHub의 모든 공개 저장소
• electron/electron-npm-packages: package.json 파일에서 electron을 언급하는 모든 npm 패키지

이 보고서를 개선할 아이디어가 있다면, 웹사이트 저장소에 이슈를 열어 알려주거나 위에 언급된 저장소 중 하나에 제안해 주길 바란다.

Electron 커뮤니티 여러분 덕분에 사용자 영역이 오늘날의 모습을 갖추게 되었다. 감사하다!