File Handling API를 사용하면 웹 애플리케이션이 애플리케이션에서 지원할 수 있는 파일 형식의 파일 핸들러로 등록할 수 있습니다. 이미지 편집 애플리케이션 Photopea에서 이 API를 사용하는 방법을 알아봅니다.
소개
이 도움말은 동영상으로도 제공됩니다.
Photopea는 이반 쿠츠키르가 개발한 무료 온라인 이미지 편집기입니다. 이반은 2012년에 앱 개발을 시작했으며 Photopea에 추가한 주요 기능을 공유하는 블로그를 운영하고 있습니다. Photopea는 PSD (Adobe Photoshop), XCF (GIMP), Sketch (Sketch 앱), XD (Adobe XD), CDR (CorelDRAW) 형식을 사용할 수 있습니다.
Photopea의 파일 처리
Photopea는 설치 가능한 PWA로서 사용자가 앱 설치를 선택할 때 독립형 창에서 실행됩니다. 이렇게 하면 PWA 슈퍼 파워를 잠금 해제하여 Photopea에서 파일 처리를 많이 활용합니다.
File Handling 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"]
}
]
}
}
}
File Handling 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를 사용해 보고 데스크톱에 설치한 후 지원되는 파일 형식 중 하나를 열어 보세요. 즐거운 이미지 편집 되세요.