브라우저에서 Photoshop처럼 복잡한 소프트웨어를 실행한다는 아이디어는 불과 몇 년 전만 해도 상상하기 어려웠을 것입니다. 하지만 Adobe는 다양하고 새로운 웹 기술을 사용하여 Photoshop의 공개 베타를 웹에 도입했습니다.
지난 3년 동안 Chrome은 브라우저의 한계를 뛰어넘고자 하는 웹 애플리케이션을 지원하기 위해 노력해 왔습니다. 이러한 웹 애플리케이션 중 하나가 Photoshop입니다. 브라우저에서 Photoshop처럼 복잡한 소프트웨어를 실행한다는 아이디어는 불과 몇 년 전만 해도 상상하기 어려웠을 것입니다. 하지만 Adobe는 다양하고 새로운 웹 기술을 사용하여 Photoshop의 공개 베타를 웹에 도입했습니다.
(읽기보다는 시청을 선호하는 경우 이 도움말을 동영상으로도 제공).
이 게시물에서는 Google과의 협업을 통해 Photoshop을 웹까지 확장하는 방식을 처음으로 자세히 공유하고자 합니다. Adobe에서 사용한 모든 API를 비롯한 많은 API를 자체 앱에서도 사용할 수 있습니다. 웹 기능 관련 블로그 게시물에서 아이디어를 얻고 API 추적기에서 개발 중인 최신 기능을 확인해 보세요.
Photoshop을 웹으로 옮긴 이유
웹이 발전함에 따라 웹사이트 및 웹 앱이 플랫폼별 애플리케이션에 비해 제공하는 핵심적인 이점이 한 가지 변하지 않았습니다. 이러한 장점에는 연결 가능, 임시성, 범용성과 같은 많은 고유한 기능이 포함되지만, 간단히 말하자면 간단한 액세스, 쉬운 공유, 뛰어난 공동작업이 가능합니다.
URL의 장점은 누구나 URL을 클릭하여 즉시 액세스할 수 있다는 것입니다. 브라우저만 있으면 사용 가능합니다. 애플리케이션을 설치하거나 실행 중인 운영체제에 대해 걱정할 필요가 없습니다. 이는 웹 애플리케이션의 경우 사용자가 애플리케이션과 자신의 문서 및 댓글에 액세스할 수 있음을 의미합니다. 이에 따라 웹은 크리에이티브팀과 마케팅팀에 필수적인 요소가 되고 있는 이상적인 공동작업 플랫폼이 되었습니다.
Google Docs는 이러한 간소화된 액세스의 선구자입니다. 문서를 시작하고 링크를 다른 사람에게 보내고 즉시 애플리케이션뿐만 아니라 특정 문서나 댓글로 이동하는 것이 얼마나 쉬운지 잘 알고 계실 것입니다. 그 이후로 과거에 보여드렸던 앱과 같은 수많은 멋진 애플리케이션이 이 모델을 채택했으며 이제 Photoshop에도 이점을 얻을 수 있습니다.
Photoshop을 웹으로 옮긴 방법
웹은 문서에만 적합한 플랫폼으로 시작했지만 역사를 통틀어 급격히 성장했습니다. Gmail 같은 초기 앱은 최소한 더 복잡한 상호작용과 애플리케이션을 사용할 수 있음을 보여주었습니다. 그 이후로, 우리는 웹 앱이 가능성의 한계를 뛰어넘고 있으며, 브라우저 공급업체는 웹 기능을 더욱 확장함으로써 이에 대응하는 놀라운 공동 개발을 목격했습니다. 이러한 선순환의 최신 반복은 웹에서 Photoshop을 사용할 수 있게 해준 덕분입니다.
Adobe는 이전에 Spark와 Lightroom을 웹에 도입했으며 수년 동안 Photoshop을 웹에 가져오는 데 관심을 가지고 있었습니다. 그러나 JavaScript의 성능 제한, 코드에 적합한 컴파일 대상의 부재, 웹 기능 부족으로 인해 차단되었습니다. 이러한 문제를 해결하기 위해 Chrome이 브라우저에 어떤 기능을 내장했는지 알아보려면 계속 읽어보세요.
Emscripten으로 WebAssembly 포팅
WebAssembly 및 C++ 도구 모음인 Emscripten은 Photoshop의 웹 기반 기능을 가능하게 하는 열쇠였습니다. Adobe가 처음부터 시작할 필요는 없지만 기존 Photoshop 코드베이스를 활용할 수 있었기 때문입니다. WebAssembly는 모든 브라우저에서 프로그래밍 언어를 위한 컴파일 타겟으로 설계된 이식 가능한 바이너리 명령 집합 제공입니다. 즉, C++로 작성된 Photoshop과 같은 애플리케이션은 JavaScript로 재작성하지 않고도 웹으로 직접 포팅할 수 있습니다. 직접 포팅을 시작하려면 전체 Emscripten 문서를 확인하거나 라이브러리 포팅 방법에 대한 안내 예를 따르세요.
Emscripten은 모든 기능을 갖춘 도구 모음으로, C++를 Wasm으로 컴파일하는 데 도움을 줄 뿐만 아니라 POSIX API 호출을 웹 API 호출로 전환하고 OpenGL을 WebGL로 변환하는 변환 레이어를 제공합니다. 예를 들어 로컬 파일 시스템을 참조하는 애플리케이션을 포팅할 수 있으며 Emscripten은 에뮬레이션된 파일 시스템을 제공하여 기능을 유지합니다.
Emscripten은 한동안 Photoshop의 대부분을 웹에 가져올 수 있었지만, 그 속도는 그다지 빨랐습니다. Google은 Adobe와 지속적으로 협력하여 병목 현상의 원인을 파악하고 Emscripten을 개선했습니다. Photoshop은 멀티스레딩에 종속됩니다. WebAssembly에 동적 멀티스레딩을 도입하는 것이 중요한 요구사항이었습니다.
또한 예외 기반 오류 처리는 C++에서는 매우 일반적이지만 Emscripten 및 WebAssembly에서는 제대로 지원되지 않았습니다. Google은 W3C의 WebAssembly Community Group과 협력하여 WebAssembly 표준을 개선하고 이를 위한 도구를 개선하여 WebAssembly에 C++ 예외를 적용했습니다.
Emscripten은 대규모 애플리케이션에서 작동할 뿐만 아니라 라이브러리나 소규모 프로젝트도 포팅할 수 있도록 합니다. 예를 들어 Emscripten을 통해 인기 OpenCV 라이브러리를 웹에 컴파일하는 방법을 확인할 수 있습니다.
마지막으로 WebAssembly는 SIMD 명령과 같은 고급 성능 프리미티브를 제공하여 웹 앱 성능을 크게 개선합니다. 예를 들어 Halide는 Adobe의 성능에 필수적인데, 여기서 SIMD는 평균적으로 3~4배, 어떤 경우에는 80~160배의 속도 향상을 제공합니다.
WebAssembly 디버깅
작업에 적합한 도구 없이는 대규모 프로젝트를 성공적으로 완료할 수 없습니다. 바로 이러한 이유에서 Chrome팀은 모든 기능을 갖춘 WebAssembly 디버깅 지원을 개발했습니다. 소스 코드 단계별 실행, 중단점 설정 및 예외 시 일시 중지, 리치 타입 지원으로 변수 검사, 그리고 DevTools 콘솔에서 기본적인 평가를 위한 지원까지 제공합니다!
WebAssembly 디버깅 활용 방법에 관한 신뢰할 수 있는 가이드를 참고하세요.
고성능 스토리지
Photoshop 문서의 크기를 감안할 때 Photoshop에는 사용자가 화면 이동 시 데이터를 디스크에서 인메모리로 동적으로 이동하는 기능이 필요합니다. 다른 플랫폼에서는 일반적으로 mmap를 통한 메모리 매핑을 통해 실행되지만, 웹에서는 원본 비공개 파일 시스템 액세스 핸들이 개발 및 오리진 트라이얼로 개발 및 구현되기 전까지 성능 면에서 불가능했습니다. 이 새로운 API를 활용하는 방법은 문서에서 확인할 수 있습니다.
캔버스의 P3 색상 공간
지금까지 웹의 색상은 음극선 모니터의 기능을 기반으로 90년대 중반의 표준인 sRGB 색공간으로 지정되었습니다. 카메라와 모니터는 25세기에 걸쳐 많은 발전을 이루었고, 더 크고 유능한 많은 색공간이 표준화되었습니다. 가장 많이 사용되는 현대적인 색상 공간 중 하나는 Display P3입니다. Photoshop은 Display P3 캔버스를 사용하여 브라우저에 이미지를 더 정확하게 표시합니다. 특히 밝은 흰색, 밝은 색상, 그림자가 있는 디테일이 있는 이미지는 Display P3 데이터를 지원하는 최신 디스플레이에서 최대한 잘 표시됩니다. Display P3 Canvas API는 높은 다이내믹 레인지 디스플레이를 지원하기 위해 추가로 구축되고 있습니다.
웹 구성요소 및 Lit
Photoshop은 수많은 기능을 갖춘 대형 애플리케이션으로 유명한 애플리케이션으로, 수십 개의 워크플로를 지원하는 수백 개의 UI 요소가 있습니다. 이 앱은 다양한 도구와 개발 관행을 사용하여 여러 팀에서 빌드했지만, 앱의 서로 다른 부분들이 조화롭고 우수한 성과를 낼 수 있는 전체를 만들어야 합니다.
이 문제를 해결하기 위해 Adobe는 웹 구성요소와 Lit 라이브러리를 선택했습니다. Photoshop의 UI 요소는 Adobe의 Spectrum Web Components 라이브러리를 기반으로 합니다. 이 라이브러리는 모든 프레임워크에서 작동하거나 프레임워크가 전혀 없는 Adobe 디자인 시스템의 가볍고 뛰어난 성능을 구현합니다.
또한 전체 Photoshop 앱은 Lit 기반 웹 구성요소를 사용하여 빌드됩니다. 브라우저의 기본 제공 구성 요소 모델과 Shadow DOM 캡슐화를 활용하여 팀은 다른 Adobe 팀에서 제공하는 몇 가지 React 코드 "섬"을 깔끔하게 통합할 수 있었습니다.
Workbox에서 서비스 워커 캐싱
서비스 워커는 프로그래밍 가능한 로컬 프록시 역할을 하여 네트워크 요청을 가로채고 네트워크의 데이터, 장기 캐시 또는 이 두 가지를 조합하여 응답합니다.
성능 개선을 위한 V8팀의 노력의 일환으로, 서비스 워커가 캐시된 WebAssembly 응답으로 처음 응답할 때 Chrome은 최적화된 버전의 코드를 생성하고 저장합니다. 이는 Photoshop 코드베이스에서 흔히 사용되는 수 메가바이트 WebAssembly 스크립트의 경우에도 마찬가지입니다. install 단계 중에 서비스 워커가 JavaScript를 캐시할 때도 유사한 사전 컴파일이 발생합니다. 두 경우 모두 Chrome은 최소한의 런타임 오버헤드로 캐시된 스크립트의 최적화된 버전을 로드하고 실행할 수 있습니다.
웹의 Photoshop은 다수의 JavaScript 및 WebAssembly 스크립트를 사전 캐시하는 서비스 워커를 배포함으로써 이를 활용합니다. 이러한 스크립트의 URL은 빌드 시간에 생성되며 캐시를 최신 상태로 유지하는 로직이 복잡할 수 있기 때문에 Google에서 관리하는 Workbox라는 라이브러리 세트를 사용하여 빌드 프로세스의 일부로 서비스 워커를 생성했습니다.
작업 상자 기반 서비스 워커를 V8 엔진의 스크립트 캐싱과 함께 사용하여 성능을 크게 향상할 수 있었습니다. 구체적인 수치는 코드를 실행하는 기기에 따라 다르지만, 팀은 이러한 최적화를 통해 코드 초기화에 소요되는 시간이 75% 줄어든 것으로 추정합니다.
Adobe on the web의 다음 단계
Photoshop 베타의 출시는 시작에 불과하며, Photoshop에서 이 베타 버전 이후의 정식 출시를 앞두고 있으며 이미 여러 가지 성능 및 기능 개선 작업을 진행하고 있습니다. Adobe는 Photoshop을 따라잡은 것이 아니며, Creative Cloud를 웹까지 공격적으로 확장해 창의적 콘텐츠 제작과 공동작업을 위한 기본 플랫폼이 될 계획입니다. 이를 통해 수백만 명의 신규 크리에이터가 자신의 이야기를 전달하고 웹에서 혁신적인 워크플로를 활용할 수 있습니다.
Adobe가 가능성의 한계를 계속 확장해 나가고 있는 지금, Chrome 팀은 Adobe와 역동적인 웹 개발자 생태계를 위해 웹을 발전시키기 위해 지속적인 협력을 이어갈 것입니다. 다른 브라우저도 이러한 최신 브라우저 기능을 따라잡고 있으므로 Adobe에서 제품을 사용할 수 있게 된 것을 기쁘게 생각합니다. 웹을 지속적으로 개선해 나가고 있으므로 향후 업데이트도 기대해 주세요.
Adobe 고객센터에서 웹용 Photoshop 액세스 (베타)에 대해 자세히 알아볼 수 있습니다.