이번 주에는 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 커뮤니티 여러분 덕분에 사용자 영역이 오늘날의 모습을 갖추게 되었다. 감사하다!

Electron 1.4.12에는 중요한 패치가 포함되어 있다. 이 패치는 libchromiumcontent(Electron의 기반이 되는 Chrome 라이브러리) 빌드 시간으로부터 10주 후에 일부 Symantec, GeoTrust, Thawte SSL/TLS 인증서가 잘못 거부되는 Chrome의 문제를 해결한다. 해당 사이트에서 사용 중인 인증서 자체에는 문제가 없으며, 인증서를 교체해도 이 문제는 해결되지 않는다.

Electron 1.4.0부터 1.4.11 버전에서는 특정 날짜 이후에 이러한 영향을 받는 인증서를 사용하는 사이트로의 HTTPS 요청이 네트워크 오류로 실패한다. 이 문제는 Chrome의 기본 네트워킹 API를 사용하는 모든 HTTPS 요청에 영향을 미친다. 여기에는 window.fetch, Ajax 요청, Electron의 net API, BrowserWindow.loadURL, webContents.loadURL, <webview> 태그의 src 속성 등이 포함된다.

애플리케이션을 1.4.12 버전으로 업그레이드하면 이러한 요청 실패를 방지할 수 있다.

참고: 이 문제는 Chrome 53에서 도입되었기 때문에 Electron 1.4.0 이전 버전은 영향을 받지 않는다.

영향 일정​

아래 표는 각 Electron 1.4 버전과 해당 인증서를 사용하는 사이트에 대한 요청이 실패하기 시작하는 날짜를 나타낸다.

컴퓨터의 시계를 앞당겨 설정한 후 https://symbeta.symantec.com/welcome/이 정상적으로 로드되는지 확인하면 앱의 영향 일자를 직접 확인할 수 있다.

추가 정보​

이 주제와 관련된 원본 이슈, 그리고 수정 사항에 대해 더 자세히 알고 싶다면 다음 자료를 참고하면 된다:

• Certificate Transparency란 무엇인가?
• Symantec 기술 자료 문서
• Chrome 이슈 664177
• Chrome 이슈 664177 수정 내용
• libchromiumcontent 패치 (이슈 664177)

9월에 사이트에 추가된 새로운 Electron 앱과 발표 내용을 소개한다.

이 사이트는 커뮤니티의 pull request를 통해 새로운 앱과 미트업 정보로 업데이트된다. 저장소를 watch하면 새로운 추가 사항에 대한 알림을 받을 수 있다. 사이트의 모든 변경 사항에 관심이 없다면 블로그 RSS 피드를 구독하면 된다.

Electron 앱을 만들었거나 미트업을 주최한다면 pull request를 통해 사이트에 추가할 수 있다. 그러면 다음 회차에 포함될 것이다.

새로운 발표들​

9월에 GitHub은 미래의 소프트웨어를 구축하는 사람들을 위한 행사로 GitHub Universe 컨퍼런스를 개최했다. 이번 행사에서 몇 가지 흥미로운 Electron 관련 발표가 있었다.

• Slack의 소프트웨어 엔지니어인 Machisté Quintana의 Making Electron Development Simpler, More Pleasant, and More Productive
• GitHub의 Electron 개발자인 Zeke Sikelianos의 Electron: Desktop Apps with Web Languages

또한, 12월 5일 파리에 있을 예정이라면 Zeke가 dotJS 2016에서 Electron 발표를 진행할 예정이다.

	Pexels	완전히 무료한 사진을 검색하고 클립보드에 복사할 수 있다.
	Timestamp	사용자 정의가 가능한 날짜/시간 표시와 캘린더를 제공하는 더 나은 macOS 메뉴 바 시계
	Harmony	Spotify, Soundcloud, Play Music 및 로컬 파일과 호환되는 음악 플레이어
	uPhone	WebRTC 데스크톱 전화
	SealTalk	RongCloud IM 클라우드 서비스와 IM SDK로 구동되는 인스턴트 메시징 앱
	Infinity	프레젠테이션을 쉽게 만들 수 있는 도구
	Cycligent Git Tool	Git 프로젝트를 위한 직관적이고 그래픽적인 GUI
	Foco	집중력을 유지하고 생산성을 높이는 도구
	Strawberry	레스토랑을 위한 올인원 소프트웨어 제품군. 고객을 더 잘 알고 서비스할 수 있다.
	Mixmax	이메일의 모든 작업을 실시간으로 확인하고 어디서나 작성할 수 있다.
	Firebase Admin	Firebase 데이터 관리 도구
	ANote	간단하고 친숙한 마크다운 노트
	Temps	간단하지만 스마트한 메뉴 바 날씨 앱
	Amium	파일과 대화를 연결하는 작업 협업 제품
	Soube	간단한 음악 플레이어
	(Un)colored	테마와 함께 문서를 저장하는 차세대 데스크톱 리치 콘텐츠 편집기. HTML 및 마크다운 호환. Windows, OS X, Linux 지원.
	quickcalc	메뉴 바 계산기
	Forestpin Analytics	비즈니스를 위한 금융 데이터 분석 도구
	Ling	REST 클라이언트
	Shortexts	자주 복사하는 텍스트, 폴더 및 이모티콘을 위한 단축키
	Front-End Box	프론트엔드 코드 생성기 세트

오늘 Electron 문서에 몇 가지 개선 사항을 발표한다. 이제 모든 새로운 릴리스에는 Electron의 모든 공개 API를 상세히 설명하는 JSON 파일이 포함된다. 개발자들이 Electron의 API 문서를 새로운 방식으로 활용할 수 있도록 이 파일을 만들었다.

스키마 개요​

각 API는 name, description, type 등의 속성을 가진 객체로 구성된다. BrowserWindow와 Menu 같은 클래스는 인스턴스 메서드, 인스턴스 속성, 인스턴스 이벤트 등을 설명하는 추가 속성을 포함한다.

다음은 BrowserWindow 클래스를 설명하는 스키마의 일부이다:

{
  name: 'BrowserWindow',
  description: '브라우저 윈도우를 생성하고 제어한다.',
  process: {
    main: true,
    renderer: false
  },
  type: 'Class',
  instanceName: 'win',
  slug: 'browser-window',
  websiteUrl: 'https://electronjs.org/docs/api/browser-window',
  repoUrl: 'https://github.com/electron/electron/blob/v1.4.0/docs/api/browser-window.md',
  staticMethods: [...],
  instanceMethods: [...],
  instanceProperties: [...],
  instanceEvents: [...]
}

다음은 메서드 설명의 예시로, apis.BrowserWindow.instanceMethods.setMaximumSize 인스턴스 메서드의 설명이다:

{
  name: 'setMaximumSize',
  signature: '(width, height)',
  description: '윈도우의 최대 크기를 width와 height로 설정한다.',
  parameters: [{
    name: 'width',
    type: 'Integer'
  }, {
    name: 'height',
    type: 'Integer'
  }]
}

새로운 데이터 활용하기​

개발자가 프로젝트에서 이 구조화된 데이터를 쉽게 사용할 수 있도록, 우리는 electron-docs-api라는 작은 npm 패키지를 만들었다. 이 패키지는 새로운 Electron 릴리스가 나올 때마다 자동으로 업데이트된다.

npm install electron-api-docs --save

즉시 사용해보고 싶다면, Node.js REPL에서 이 모듈을 시험해볼 수 있다:

npm i -g trymodule && trymodule electron-api-docs=apis

데이터 수집 방식​

Electron의 API 문서는 Electron 코딩 스타일과 Electron 스타일 가이드를 준수한다. 이 때문에 문서의 내용을 프로그래밍 방식으로 파싱할 수 있다.

electron-docs-linter는 electron/electron 저장소의 새로운 개발 의존성이다. 이 도구는 커맨드라인에서 모든 마크다운 파일을 검사하고 스타일 가이드의 규칙을 강제한다. 오류가 발견되면 해당 오류를 나열하고, 릴리스 프로세스를 중단한다. API 문서가 유효한 경우 electron-json.api 파일이 생성되고, GitHub에 업로드되어 Electron 릴리스의 일부로 포함된다.

표준 자바스크립트와 표준 마크다운​

올해 초, Electron의 코드베이스는 모든 자바스크립트 파일에 대해 standard 린터를 사용하도록 업데이트되었다. Standard의 README는 이 선택의 이유를 다음과 같이 요약하고 있다:

표준 스타일을 채택한다는 것은 코드의 명확성과 커뮤니티 규약을 개인적인 스타일보다 우선시한다는 의미이다. 이는 모든 프로젝트와 개발 문화에 적합하지 않을 수 있지만, 오픈소스는 초보자에게 가혹한 환경이 될 수 있다. 명확하고 자동화된 기여자 기대치를 설정하면 프로젝트가 더 건강해진다.

또한 최근에는 standard-markdown을 만들어 문서에 포함된 모든 자바스크립트 코드 조각이 유효하고 코드베이스의 스타일과 일치하는지 확인하고 있다.

이 두 도구를 함께 사용하면 지속적 통합(CI)을 통해 풀 리퀘스트에서 오류를 자동으로 찾을 수 있다. 이를 통해 코드 리뷰를 하는 사람들의 부담을 줄이고, 문서의 정확성에 대한 신뢰를 더욱 높일 수 있다.

커뮤니티의 노력​

Electron 문서는 지속적으로 개선되고 있으며, 이는 오픈소스 커뮤니티의 큰 기여 덕분이다. 이 글을 쓰는 시점에서 거의 300명이 문서에 기여했다.

이 새로운 구조화된 데이터로 사람들이 어떤 일을 해낼지 기대가 크다. 가능한 활용 사례는 다음과 같다:

• https://electronjs.org/docs/ 문서 개선
• TypeScript를 사용하는 프로젝트에서 Electron 개발을 더 효율적으로 할 수 있는 TypeScript 정의 파일 생성
• Dash.app이나 devdocs.io 같은 도구를 위한 검색 가능한 오프라인 문서 제공

Electron 커뮤니티의 활발한 참여가 문서 품질을 높이는 데 큰 역할을 하고 있다. 이러한 노력은 개발자들이 Electron을 더 쉽게 이해하고 활용할 수 있도록 돕는다. 앞으로도 더 많은 사람들이 참여해 문서를 발전시켜 나가길 기대한다.