Excalidraw 프로젝트에서 웹 버전을 위해 Electron 래퍼 지원을 중단하기로 결정한 이유를 알아보세요.
Excalidraw 프로젝트에서 Excalidraw용 Electron 래퍼인 Excalidraw Desktop을 지원 중단하고 excalidraw.com에서 언제든지 찾을 수 있는 웹 버전을 사용하기로 결정했습니다. Google은 신중한 분석 끝에 프로그레시브 웹 앱 (PWA)이 Google에서 구축하고자 하는 미래로 결정했습니다. 그 이유를 알아보세요.
Excalidraw Desktop이 탄생한 이유
2020년 1월에 @vjeux가 Excalidraw의 초기 버전을 만들고 이에 대해 블로그한 직후 문제 #561에서 다음을 제안했습니다.
Excalidraw를 Electron (또는 이와 동등한 버전) 내에 래핑하여 다양한 앱 스토어에 [플랫폼별] 애플리케이션으로 게시하는 것이 좋습니다.
@voluntadpear의 즉각적인 반응은 다음과 같았습니다.
PWA로 만들면 어떨까요? Android는 현재 이 활동을 신뢰할 수 있는 웹 활동으로 Play 스토어에 추가하고 있으며, iOS에서도 곧 이와 같이 지원할 예정입니다. 데스크톱에서 Chrome을 사용하면 바탕화면 바로가기를 PWA에 다운로드할 수 있습니다
결과적으로 @vjeux가 내린 결정은 간단했습니다.
둘 다 해야 해요 :)
Excalidraw 버전을 PWA로 변환하는 작업은 @voluntadpear 및 이후 다른 주체에 의해 시작되었지만 @lipis는 독립적으로 앞서 Excalidraw Desktop을 위한 별도의 저장소를 만들었습니다.
지금까지 @vjeux가 설정한 초기 목표, 즉 다양한 앱 스토어에 Excalidraw를 제출하는 목표에 도달하지 못했습니다. 솔직히 말해서, 아무도 스토어에 제출 프로세스를 시작하지 않았습니다. 그런데 왜 그럴까요? 대답하기 전에 플랫폼인 Electron을 살펴보겠습니다.
Electron이란 무엇인가요?
Electron의 고유한 장점은 'JavaScript, HTML, CSS로 크로스 플랫폼 데스크톱 앱을 빌드'할 수 있다는 점입니다. Electron으로 빌드된 앱은 'Mac, Windows, Linux와 호환'됩니다. 즉, 'Electron 앱은 3가지 플랫폼에서 빌드 및 실행됩니다'. 홈페이지에 따르면 Electron을 쉽게 만들어 주는 어려운 부분은 자동 업데이트, 시스템 수준 메뉴 및 알림, 비정상 종료 보고, 디버깅 및 프로파일링, Windows 설치 프로그램입니다. 약속된 기능 중 일부는 작은 글씨를 자세히 살펴봐야 합니다.
예를 들어 자동 업데이트"는 macOS 및 Windows에서만 [지원]됩니다. Linux에서는 자동 업데이터가 기본적으로 지원되지 않으므로 배포판의 패키지 관리자를 사용하여 앱을 업데이트하는 것이 좋습니다."
개발자는
Menu.setApplicationMenu(menu)를 호출하여 시스템 수준 메뉴를 만들 수 있습니다. Windows 및 Linux에서는 메뉴가 각 창의 상단 메뉴로 설정되지만, macOS에는 서비스 메뉴와 같은 다양한 시스템 정의 표준 메뉴가 있습니다. 메뉴를 표준 메뉴로 만들려면 개발자는 메뉴의role를 적절하게 설정해야 합니다. 그러면 Electron에서 이를 인식하고 표준 메뉴로 만듭니다. 즉, 많은 메뉴 관련 코드가const isMac = process.platform === 'darwin'플랫폼 검사를 사용합니다.Windows 설치 프로그램은 windows-installer로 만들 수 있습니다. 프로젝트의 README에는 '애플리케이션에 서명해야 하는 프로덕션 앱의 경우 Internet Explorer의 SmartScreen 필터는 앱의 다운로드를 차단하며 많은 바이러스 백신 공급업체는 유효한 인증서를 얻지 못하면 앱을 멀웨어로 간주합니다." [sic].
이 세 가지 예만 보면 Electron이 '한 번 쓰고 모든 위치에서 실행'하는 것과는 거리가 멉니다. 앱 스토어에 앱을 배포하려면 앱 소유권을 인증하는 보안 기술인 코드 서명이 필요합니다. 앱을 패키징하려면 electron-forge와 같은 도구를 사용하고 앱 업데이트를 위한 패키지를 호스팅할 위치를 생각해야 합니다. 특히 목표가 크로스 플랫폼 지원인 경우 비교적 빠르게 복잡해집니다. 충분한 노력과 노력으로 놀라운 Electron 앱을 만드는 것은 절대 가능합니다. Excalidraw Desktop의 경우 이러한 도구가 없었기 때문입니다.
Excalidraw Desktop이 중단된 부분
지금까지 Excalidraw Desktop은 기본적으로 Excalidraw 정보 창이 추가된 .asar 파일로 번들로 제공되는 Excalidraw 웹 앱입니다. 애플리케이션의 모양과 느낌은 웹 버전과 거의 동일합니다.
macOS에는 이제 애플리케이션 상단에 시스템 수준 메뉴가 있지만 Close Window 및 About Excalidraw를 제외한 메뉴 작업이 어떤 항목에도 연결되어 있지 않으므로 메뉴는 현재 상태에서 매우 쓸모가 없습니다. 한편 모든 작업은 일반 Excalidraw 툴바와 컨텍스트 메뉴를 통해 실행할 수 있습니다.
파일 형식 연결을 지원하는 electron-builder를 사용합니다.
.excalidraw 파일을 더블클릭하면 Excalidraw Desktop 앱이 열리는 것이 이상적입니다. electron-builder.json 파일의 관련 발췌 부분은 다음과 같습니다.
{
"fileAssociations": [
{
"ext": "excalidraw",
"name": "Excalidraw",
"description": "Excalidraw file",
"role": "Editor",
"mimeType": "application/json"
}
]
}
설치 유형 (현재 사용자의 경우, 모든 사용자의 경우)에 따라 Windows 10의 앱에는 특정 파일 형식을 자체적으로 연결할 수 있는 권리가 없으므로 실제로 이 방식이 의도한 대로 작동하지 않을 수도 있습니다.
이러한 단점과 미완성으로 모든 플랫폼에서 모든 플랫폼에서 앱과 같은 환경을 구현한다는 한계가 있었기 때문에 이는 충분히 노력한 결과 가능합니다. 하지만 가장 큰 논쟁은 당사의 사용 사례에서는 Electron이 제공하는 모든 기능이 필요하지 않을 것으로 예상된다는 점입니다. 계속 성장하고 있는 웹의 기능은 더 나은 것은 아니지만 우리에게도 똑같이 도움이 됩니다.
웹이 현재와 미래에 제공하는 방식
2020년에도 jQuery는 여전히 엄청난 인기를 얻고 있습니다. 현재는 jQuery가 필요하지 않을 수도 있음에도 불구하고 많은 개발자에게 이 옵션을 사용하는 습관이 되었습니다. Electron을 위한 유사한 리소스도 You Might Not Need Electron이라는 이름으로 알려져 있습니다. Electron이 필요하지 않은 이유를 간단히 설명해 드리겠습니다.
설치 가능한 프로그레시브 웹 앱
현재 Excalidraw는 서비스 워커 및 웹 앱 매니페스트가 포함된 설치 가능한 프로그레시브 웹 앱입니다. 글꼴 및 글꼴 관련 CSS를 위한 캐시와 기타 모든 것을 위한 캐시 등 모든 리소스를 두 개의 캐시에 캐시합니다.
즉, 애플리케이션이 완전히 오프라인이 가능하며 네트워크 연결 없이도 실행할 수 있습니다. 데스크톱 및 모바일의 Chromium 기반 브라우저에서 사용자에게 앱을 설치하라는 메시지를 표시합니다. 아래 스크린샷에서 설치 메시지를 확인할 수 있습니다.
Excalidraw는 독립형 애플리케이션으로 실행되도록 구성되므로, 앱을 설치하면 자체 창에서 실행되는 앱을 얻게 됩니다. 운영체제의 멀티태스킹 UI에 완전히 통합되며 설치하는 플랫폼에 따라 홈 화면, 도크 또는 작업 표시줄에 자체 앱 아이콘이 표시됩니다.
파일 시스템 액세스
Excalidraw는 browser-fs-access를 사용하여 운영체제의 파일 시스템에 액세스합니다. 지원되는 브라우저에서는 이를 통해 실제 열기→수정→저장 워크플로가 가능하고 실제 초과 저장과 '다른 이름으로 저장'이 가능하며 다른 브라우저의 경우 투명한 대체가 가능합니다. 이 기능에 관한 자세한 내용은 블로그 게시물 browser-fs-access 라이브러리를 사용하여 파일 및 디렉터리 읽기 및 쓰기를 참고하세요.
드래그 앤 드롭 지원
플랫폼별 애플리케이션에서처럼 파일을 Excalidraw 창으로 드래그 앤 드롭할 수 있습니다. File System Access API를 지원하는 브라우저에서는 드롭된 파일을 즉시 수정할 수 있고 수정 사항을 원본 파일에 저장할 수 있습니다. 이 방법은 직관적이어서 웹 앱을 다루고 있다는 사실을 잊어버리는 경우가 있습니다.
클립보드 액세스
Excalidraw는 운영체제의 클립보드에 잘 작동합니다. Excalidraw 그림 전체 또는 개별 객체만 복사하여 image/png 및 image/svg+xml 형식으로 붙여넣을 수 있으므로 Inkscape와 같은 다른 플랫폼별 도구 또는 SVGOMG와 같은 웹 기반 도구와 쉽게 통합할 수 있습니다.
파일 처리
Excalidraw는 실험용 File Handling API를 지원합니다. 즉, Excalidraw가 운영체제에서 .excalidraw 파일의 파일 핸들러로 등록되기 때문에 운영체제의 파일 관리자에서 .excalidraw 파일을 더블클릭하여 Excalidraw 앱에서 직접 열 수 있습니다.
선언적 링크 캡처
Excalidraw 그림은 링크로 공유할 수 있습니다. 예를 들면 다음과 같습니다. 향후 사용자가 Excalidraw를 PWA로 설치한 경우 이러한 링크는 브라우저 탭에서 열리지 않고 새로운 독립형 창이 실행됩니다. 구현 대기 중인 경우, 이 기능은 작성 당시 새로운 웹 플랫폼 기능에 관한 최첨단 제안인 선언적 링크 캡처 덕분에 작동합니다.
결론
웹은 많은 진전을 이루었고, 겨우 몇 년, 심지어 몇 달 전에는 웹에서는 상상할 수 없었으며 플랫폼별 애플리케이션에만 사용할 수 있었던 기능이 브라우저에 도입되면서 점점 더 많은 기능을 사용할 수 있게 되었습니다. Excalidraw는 브라우저에서 가능한 작업을 가장 중시하지만, 플랫폼의 모든 브라우저가 Google이 사용하는 각 기능을 지원하는 것은 아니라는 점을 인정합니다. 점진적인 개선 전략에 의지하여 가능한 한 언제나 가장 훌륭한 최신 콘텐츠를 누리면서도 누구도 뒤지지 않습니다. 모든 브라우저에서 가장 잘 표시됩니다.
Electron은 우리에게 큰 도움이 되었지만, 2020년 이후에는 Electron 없이도 생활할 수 있습니다. 아, 그리고 @vjeux의 목표는 Android Play 스토어에서 이제 신뢰할 수 있는 웹 활동이라는 컨테이너 형식의 PWA를 허용하고 있고, Microsoft Store에서도 PWA를 지원하므로, 머지않아 이러한 스토어에서 Excalidraw가 가능할 것으로 예상됩니다. 그때까지는 언제든지 브라우저에서 Excalidraw를 사용하고 설치할 수 있습니다.
감사의 말
@lipis, @dwelle, Joe Medley가 이 문서를 검토했습니다.