EyeDropper API는 사용자가 브라우저 창 외부를 포함하여 화면에서 색상을 샘플링할 수 있는 스포이트 도구를 만들기 위한 메커니즘을 제공합니다. 3D 모델 편집기 Blockbench가 코드베이스에서 이 API를 사용하는 방법을 알아봅니다.
소개
이 도움말은 동영상으로도 제공됩니다.
Blockbench는 픽셀 아트 텍스처가 있는 로우 폴리 모델을 위한 무료의 최신 모델 편집기입니다. Minecraft를 플레이한 적이 있다면 Blockbench로 만든 애셋을 본 적이 있을 것입니다. 예를 들어 동굴과 절벽 업데이트 1부에서 Minecraft에 추가된 염소가 있습니다. GPL 버전 3 라이선스가 부여된 Blockbench 코드는 GitHub의 오픈소스입니다.
Blockbench를 사용해 보려면 web.blockbench.net으로 이동하여 앱을 실행하세요. PWA로 데스크톱에 설치하고 독립형 창에서 실행할 수 있습니다. 3D 모델링을 처음 접하는 경우 GitHub의 코드 검색을 사용하여 찾을 수 있는 여러 오픈소스 .bbmodel 파일 예시 중 하나로 시작할 수 있습니다. 예를 들어 다음 스크린샷에 표시된 트레인 모델을 사용해 보세요.
EyeDropper API
Blockbench는 다른 많은 기능 중에서도 페인트 기능을 제공하므로 이제 트레인에 태그를 지정할 수 있습니다. 현실에서는 이렇게 하지 마세요. 태그 지정 시 밝은 주황색을 사용했습니다.
이것은 실제로 EyeDropper API를 통해 macOS Ventura 배경화면에서 직접 추출한 오렌지입니다. 다음 스크린샷에서 볼 수 있듯이, 아이드ropper (앱 창 왼쪽의 주황색 원)는 애플리케이션 외부에서 바로 데스크톱이나 열려 있는 다른 앱으로 이동할 수 있습니다.
Blockbench는 오픈소스이므로 개발자가 API를 구현한 방법을 알아볼 수 있습니다. 문제의 코드는 JannisX11/blockbench/blob/master/js/texturing/color.js에 있습니다. Blockbench는 Electron.js 앱으로도 사용할 수 있습니다. 댓글에서 볼 수 있듯이 색상 선택 도구가 창 바깥에서 색상을 선택할 수 없는 Electron의 문제에 대한 특수한 케이스 처리가 있습니다. 코드 스니펫의 강조표시된 부분에서 확인할 수 있는 웹 API에서는 이 문제가 발생하지 않습니다. API 사용 방법은 간단합니다. 새 EyeDropper 인스턴스를 인스턴스화하고 open() 메서드를 호출합니다. 이 메서드는 선택된 색상을 16진수 sRGB 형식으로 나타내는 sRGBHex 문자열로 확인합니다.
new Action("pick_screen_color", {
icon: "colorize",
category: "color",
condition: () => typeof EyeDropper == "function",
click: async function () {
if (Blockbench.platform == "win32") {
// workaround for https://github.com/electron/electron/issues/27980
ipcRenderer.send("request-color-picker", {
sync: settings.sync_color.value,
});
} else if (typeof EyeDropper == "function") {
let dropper = new EyeDropper();
let { sRGBHex } = await dropper.open();
ColorPanel.set(sRGBHex);
}
},
});
결론
색상 선택 도구는 Blockbench와 같은 창의성 소프트웨어에서 작지만 중요한 부분입니다. 원하는 색상은 앱 창에 포함되어 있지 않고 외부 어딘가에 있을 수 있으며 다른 화면에 있을 수도 있습니다. 이러한 경우에 색상을 선택할 수 없는 색상 선택 도구는 쓸모가 없을 수도 있습니다. EyeDropper API는 이와 같은 사용 사례를 위해 정확히 제작되었으며 2021년 11월에 구현된 이후 Blockbench에서 잘 작동해 왔습니다. Blockbench로 플레이하는 경우 즐겁게 색상을 선택하세요.