desktop-apps

2 개의 포스트

discord3분 읽기큐레이션 요약

앱으로 즐기는 더 다양한 방법 –

Discord는 음성 통화, 텍스트 채팅, 서버, DM 어디서든 다양한 앱을 실행해 친구들과 게임·음악·영상·창작 활동을 즐길 수 있도록 기능을 확장했다. App Launcher를 통해 데스크톱과 모바일에서 Activities와 봇을 쉽게 찾고 실행할 수 있으며, 지원되는 앱은 계정에 추가해 여러 공간에서 재사용할 수 있다. 이를 통해 대기 시간이나 채팅의 빈틈을 엔터테인먼트와 협업 활동으로 바꾸는 것이 글의 핵심이다. ## Discord 앱의 역할 - Discord 앱은 단순한 채팅 기능을 넘어 오락과 생산성 도구를 제공한다. - 파티 게임, 영상 함께 보기, 음악 감상, 게임 통계 확인, 이미지·창작 작업 등을 지원한다. - 대표적인 예시는 다음과 같다. - **Gartic Phone**: 친구들과 그림·추리 게임 - **YouTube Watch Together**: 영상을 함께 시청 - **Rythm**: 음악 감상 - **Stat Tracker**: 게임 기록 및 통계 확인 - **Midjourney**: 이미지 생성 - 음성 통화 참여자를 기다리는 동안 게임을 하거나, 텍스트 채팅에서 각자 원하는 속도로 앱을 사용할 수 있다. ## App Launcher로 간편하게 앱 실행 - App Launcher는 데스크톱과 모바일 모두에서 사용할 수 있다. - 텍스트 채팅에서는 채팅 입력창 옆에, 음성 통화에서는 통화 제어 영역에 위치한다. - 기존 Activities뿐 아니라 봇도 앱 형태로 통합되어 한곳에서 접근할 수 있다. - Whiteboard, Midjourney 등 다양한 앱을 명령어를 직접 입력하지 않고 실행할 수 있다. - 모바일에서는 시각적인 명령어 선택 인터페이스를 제공해 명령어를 타이핑하지 않아도 된다. - 예시: - **Death by AI**로 재난 상황 생존 게임 즐기기 - **Chess In The Park**로 텍스트 채팅에서 체스 플레이 - **Putt Party**로 미니 골프 게임 플레이 ## 채팅 이미지에 앱 명령 적용 - 채팅에 공유된 이미지에서도 App Launcher를 바로 열 수 있다. - 이미지에 대해 다음과 같은 작업을 수행할 수 있다. - 이미지 설명 생성 - 스티커 변환 - 이미지에 움직임 효과 적용 - 밈용 문구 추가 - 처리 결과는 새로운 채팅 메시지로 표시된다. - 예를 들어 **esmBot**의 Caption 명령을 사용하면 공유된 이미지에 재치 있는 캡션을 붙일 수 있다. ## 계정에 앱을 추가해 어디서나 사용 - 지원되는 앱은 특정 서버에만 묶이지 않고 계정에 직접 추가할 수 있다. - 앱 프로필이나 멤버 목록에서 **Add App**을 선택하면 계정에 등록된다. - App Launcher에서 앱을 실행하고 권한을 승인해도 자동으로 계정에 추가된다. - 계정에 추가된 앱은 App Launcher 상단의 **Recents** 영역에 표시된다. - 이후 다른 서버나 DM에서도 해당 앱을 다시 찾기 쉽다. ## Discord 앱 생태계의 확장 - Discord 개발자 커뮤니티가 새로운 앱을 지속적으로 제작하고 있다. - 사용자는 게임, 음악, 영상, 이미지 생성 등 다양한 목적의 앱을 탐색할 수 있다. - 개발자는 Discord 플랫폼용 앱을 직접 만들어 커뮤니티와 공유할 수 있다. ## 활용을 위한 추천 App Launcher를 먼저 확인해 자주 사용하는 게임·음악·창작 앱을 계정에 추가하면 서버나 DM이 달라져도 빠르게 이용할 수 있다. 친구를 기다리는 시간에는 음성 통화용 Activities를, 비동기적으로 즐기고 싶을 때는 텍스트 채팅용 앱을 활용하는 방식이 효과적이다.

원문 읽기(새 탭에서 열림)
figma3분 읽기큐레이션 요약

Electron용 BrowserView 소개 | Figma 블

Figma는 Electron에서 원격 웹 앱을 임베드할 때 사용하던 `<webview>`의 성능·안정성 문제를 해결하기 위해 `BrowserView`를 개발했다. `BrowserView`는 DOM 계층이 아닌 운영체제 창 계층에서 웹 콘텐츠를 관리해 Chrome 탭에 가까운 성능과 안정성을 제공한다. 다만 HTML/CSS 기반의 자동 배치와 레이어링을 사용할 수 없어 위치와 겹침을 직접 관리해야 하며, Figma는 이를 데스크톱 앱 2.0에 적용했다. ## Electron과 Figma의 웹 기반 데스크톱 전략 - Figma는 접근성이 뛰어난 웹을 주요 플랫폼으로 선택했다. - 파일 공유가 링크 하나로 가능하다는 점이 큰 장점이다. - 웹 앱의 성능을 네이티브 애플리케이션 수준으로 끌어올리기 위해 다음 기술을 활용했다. - WebGL 기반 캔버스 렌더링 - WebAssembly를 통한 앱 로딩 시간 개선 - 데스크톱 앱에는 웹 기술로 크로스플랫폼 애플리케이션을 만들 수 있는 Electron을 사용했다. - Figma는 Electron의 성능과 버그를 개선하기 위해 Chromium 및 Electron 프로젝트에도 지속적으로 기여했다. ## `<webview>` 기반 임베딩의 한계 - Electron 창에서 원격 웹 앱을 삽입하는 기존 표준 방식은 `<webview>`였다. - `<webview>`는 `<iframe>`과 유사하지만, 콘텐츠를 별도 프로세스에서 렌더링한다. - 일반 iframe보다 성능, 보안, 안정성 측면에서 유리하다. - 그러나 Figma가 실제 사용 과정에서 다음 문제를 겪었다. - 드래그 앤 드롭 같은 기본 기능의 버그 - Chrome에 미치지 못하는 전반적인 성능 - 시간이 지날수록 증가하는 호환성과 안정성 문제 - `<webview>`는 Chromium 내부에서 구현되므로 Electron 측에서 직접 근본 문제를 해결하기 어려웠다. - Chromium을 크게 수정하는 것은 현실적으로 부담이 크기 때문에, Electron 팀과 Figma는 `<webview>`를 우회하는 대안을 선택했다. ## `BrowserView`의 구조와 장점 - `BrowserView`는 웹 콘텐츠를 DOM 계층에 포함하지 않고 운영체제의 창 계층에 배치한다. - 구조적으로 Chrome이 브라우저 탭을 관리하는 방식과 유사하다. - 이 방식의 장점은 다음과 같다. - `<webview>`에 특화된 버그를 상당 부분 피할 수 있다. - Chrome 탭과 동일한 렌더링 경로를 활용해 웹 앱이 Chrome 수준의 속도로 동작한다. - Chrome에서 중요하게 취급되는 창·탭 관련 문제를 더 빠르게 수정할 수 있다. - 결과적으로 Electron 앱 안에서 원격 웹 앱을 더 빠르고 안정적으로 실행할 수 있다. ## 레이아웃과 레이어링의 trade-off - `BrowserView`는 DOM 요소가 아니므로 일반적인 HTML/CSS 레이아웃 기능을 사용할 수 없다. - CSS의 위치 지정 - DOM 기반의 자동 크기 조정 - 요소 간 z-index 및 레이어링 - 애플리케이션이 직접 다음 작업을 처리해야 한다. - 각 `BrowserView`의 위치와 크기 계산 - 여러 뷰의 겹침 순서 관리 - 창 크기 변경에 따른 수동 레이아웃 갱신 - 복잡한 위치 배치나 레이어 구성이 핵심인 애플리케이션에서는 이 제약이 큰 단점이 될 수 있다. - 반면 Figma처럼 구조가 비교적 명확한 앱에서는 전환 작업이 충분히 실용적이었다. ## 출시와 향후 계획 - `BrowserView`는 당시 최신 Electron 베타 버전에 실험적 API로 포함됐다. - Figma는 이를 적용한 Figma Desktop 2.0을 출시했다. - Figma는 Electron과 BrowserView가 아직 완벽하지 않지만 빠르게 발전하고 있다고 평가했다. - 다른 기업과 개발자들도 Electron 개선에 참여하고 있으며, Figma는 더 많은 앱이 BrowserView로 이전하기를 기대했다. 실용적으로는 원격 웹 앱을 Electron에 임베드하면서 `<webview>`의 성능이나 버그가 문제가 된다면 `BrowserView`를 검토할 수 있다. 다만 도입 전 수동 레이아웃과 레이어링 구현 부담, 당시 실험적 API라는 안정성 문제를 함께 평가해야 한다.

원문 읽기(새 탭에서 열림)