이미지 편집 앱 Photopea에서 File Handling API를 사용하여 사용자가 파일 탐색기에서 파일을 열 수 있도록 하는 방법

File Handling API를 사용하면 웹 애플리케이션이 애플리케이션에서 지원할 수 있는 파일 형식의 파일 핸들러로 등록할 수 있습니다. 이미지 편집 애플리케이션 Photopea에서 이 API를 사용하는 방법을 알아보세요.

Thomas Steiner
Ivan Kutskir
Ivan Kutskir
X GitHub

소개

(이 도움말은 동영상으로도 제공됩니다.)

Photopea는 Ivan Kutskir가 개발한 무료 온라인 이미지 편집기입니다. 이반은 2012년에 앱 작업을 시작했으며 Photopea에 추가하는 주요 기능을 공유하는 블로그를 운영하고 있습니다. Photopea는 PSD(Adobe Photoshop), XCF(GIMP), Sketch(Sketch App), XD(Adobe XD), CDR(CorelDRAW) 형식을 지원합니다.

Photopea 앱

Photopea의 파일 처리

설치 가능한 PWA인 Photopea는 사용자가 앱을 설치하기로 선택하면 독립형 창에서 실행됩니다. 이렇게 하면 Photopea가 많이 사용하는 PWA의 강력한 기능인 파일 처리가 잠금 해제됩니다.

파일 처리 API의 선언적 부분

설치 후 Photopea는 지원하는 다양한 파일 형식에 대해 운영체제에 파일 핸들러로 등록됩니다. 이는 웹 앱 매니페스트에서 file_handlers 필드를 추가하여 실행됩니다. 지원되는 각 파일 형식은 객체이며, action에는 상대 URL이 값으로 있고, accept 객체에는 MIME 유형과 연결된 파일 확장자의 맵이 있습니다. 예를 들면 {"image/jpeg": [".jpeg", ".jpg"]}입니다. 다음 코드는 프로덕션 Photopea의 웹 앱 매니페스트이며 관련 부분이 강조표시되어 있습니다.

{
    "name": "Photopea",
    "short_name": "Photopea",
    "display": "standalone",
    "icons": [
        {  "src": "promo/icon512.png",     "type": "image/png", "sizes": "512x512"  },
        {  "src": "promo/maskable512.png", "type": "image/png", "sizes": "512x512", "purpose":"maskable"  }
    ],
    "start_url": "/?utm_source=homescreen",
    "background_color":"#0f171d",
    "theme_color": "#474747",
    "file_handlers": [
        { "action": "/", "accept": {  "image/psd" : [ ".psd" ]  } },
        { "action": "/", "accept": {  "image/jpeg": [ ".jpeg", ".jpg" ]  } },
        { "action": "/", "accept": {  "image/png" : [ ".png" ]  } },
        { "action": "/", "accept": {  "image/webp": [ ".webp" ]  } },
        { "action": "/", "accept": {  "image/bmp" : [ ".bmp" ]  } },
        { "action": "/", "accept": {  "image/gif" : [ ".gif" ]  } },
        { "action": "/", "accept": {  "image/svg+xml": [ ".svg" ]  } },
        { "action": "/", "accept": {  "image/pdf" : [ ".pdf" ]  } },
        { "action": "/", "accept": {  "image/tiff": [ ".tif", ".tiff" ]  } },
        { "action": "/", "accept": {  "image/ai"  : [ ".ai"  ]  } },
        { "action": "/", "accept": {  "image/psb": [ ".psb" ]  } },
        { "action": "/", "accept": {  "image/xcf": [ ".xcf" ]  } },
        { "action": "/", "accept": {  "image/sketch": [ ".sketch" ]  } },
        { "action": "/", "accept": {  "image/xd" : [ ".xd"  ]  } },
        { "action": "/", "accept": {  "image/pxd": [ ".pxd" ]  } },
        { "action": "/", "accept": {  "image/cdr": [ ".cdr" ]  } },
        { "action": "/", "accept": {  "image/eps": [ ".eps", ".ps" ]  } },
        { "action": "/", "accept": {  "image/x-icon": [ ".ico" ]  } },
        { "action": "/", "accept": {  "image/jpx": [ ".jpx" ]  } },
        { "action": "/", "accept": {  "image/jp2": [ ".jp2" ]  } },
        { "action": "/", "accept": {  "image/x-tga": [ ".tga" ]  } },
        { "action": "/", "accept": {  "image/vnd-ms.dds": [ ".dds" ]  } }
    ],
    "share_target": {
        "action": "/",
        "method": "POST",
        "enctype": "multipart/form-data",
        "params": {
            "files": [
            {
                "name": "image",
                "accept": ["image/jpeg", "image/png", "image/webp", "image/gif"]
            }
          ]
        }
    }
}

사용자가 파일을 마우스 오른쪽 버튼으로 클릭한 다음 Photopea로 '연결 프로그램'을 선택하는 macOS Finder

파일 처리 API의 명령형 부분

그런 다음 API의 명령형 부분은 운영체제가 PWA에 전달하는 파일을 실제로 처리합니다. Photopea의 코드는 분명히 크게 최소화되고 보기 좋지 않지만, 아래 스니펫의 요점은 파악하기 어렵지 않습니다. LaunchQueue 인터페이스(N로 축소됨)에는 함수를 인수로 허용하는 setConsumer() 메서드가 있습니다. 이 함수는 LaunchParams 객체(W로 축소됨)를 사용합니다. 이 LaunchParams 객체에는 FileSystemHandle 객체의 읽기 전용 배열을 가리키는 files 속성이 있습니다. 그런 다음 나머지 코드가 이 배열을 반복하고 각 객체에 대해 getFile()를 호출하여 File 객체(G로 축소됨)를 가져옵니다. 그런 다음 이 파일은 Photopea의 다른 로직으로 전달되어 파일을 표시합니다.

var N = window.launchQueue;
if (N) {
  var $ = this.UA;
  N.setConsumer(function (W) {
    var O = W.files;
    console.log(O);
    for (var Y = 0; Y < O.length; Y++) {
      var T = O[Y];
      T.getFile().then(function (G) {
        $.YO([G], null, null, null, [T]);
      });
    }
  });
}

결론

사용자들은 오랫동안 Photopea가 이미지 파일 핸들러가 되기를 요청해 왔습니다. 이 질문이 올라온 2020년에는 이 기능이 완전히 불가능했지만, 2022년 초에 열성적인 사용자가 파일 처리 API를 초기 단계에서 발견했습니다. 당시 이 기능은 아직 플래그 뒤에 숨겨져 있었습니다. 파일 처리는 결국 Chrome 102에서 출시되었으며 사용자가 매일 사용하는 Photopea 기능으로 자리 잡았습니다. 일부 사용자는 획기적인 기능이라고 부르기도 합니다. Photopea를 사용해 보고 데스크톱에 설치한 다음 지원되는 파일 형식 중 하나를 열어 보세요. 즐거운 이미지 편집 시간이 되시기를 바랍니다.