EyeDropper API는 사용자가 브라우저 창 외부를 포함하여 화면에서 색상을 샘플링할 수 있는 스포이트 도구를 만드는 메커니즘을 제공합니다. 3D 모델 편집기 Blockbench가 코드베이스에서 이 API를 어떻게 사용하는지 알아보세요.
소개
(이 도움말은 동영상 형식으로도 제공됩니다.)
Blockbench는 픽셀 아트 텍스처가 적용된 로우 폴리 모델을 위한 최신 무료 모델 편집기입니다. Minecraft를 플레이해 본 적이 있다면 Blockbench로 만든 애셋(예: Caves and Cliffs Update, 1부)의 일환으로 Minecraft에 추가된 염소를 본 적이 있을 것입니다. GPL 버전 3 라이선스가 부여된 Blockbench 코드는 GitHub의 오픈소스입니다.
Blockbench를 사용해 보려면 web.blockbench.net으로 이동하여 앱을 실행하세요. PWA의 경우 데스크톱에 설치한 후 독립형 창에서 실행할 수 있습니다. 3D 모델링을 처음 사용한다면 GitHub의 코드 검색을 사용하여 찾을 수 있는 여러 오픈소스 .bbmodel 파일 예시 중 하나로 시작할 수 있습니다. 예를 들어 다음 스크린샷에서 볼 수 있는 학습 모델을 사용해 보세요.
EyeDropper API
Blockbench는 다양한 기능 중에서도 페인트 기능을 제공합니다. 따라서 기차에 태그를 지정할 수 있습니다. 실제 세계에서는 그렇게 하지 마세요. 제가 태그할 때 밝은 주황색을 사용했음을 알 수 있습니다.
실제로는 EyeDropper API를 통해 macOS Ventura 배경화면에서 직접 추출한 주황색입니다. 다음 스크린샷에서 볼 수 있듯이 스포이트 (앱 창의 왼쪽에 있는 주황색 원)는 애플리케이션 외부에서 내 데스크톱이나 내가 연 다른 앱으로 바로 연결할 수 있습니다.
Blockbench는 오픈소스이므로 개발자가 API를 구현한 방법을 알아볼 수 있습니다. 문제의 코드는 JannisX11/blockbench/blob/master/js/texturing/color.js에 있습니다. Blockbench는 Electron.js 앱으로도 제공됩니다. 댓글을 통해 확인할 수 있듯이 색상 선택 도구가 창 외부의 색상을 선택할 수 없는 Electron의 문제에 대한 특수한 케이스 처리가 포함되어 있습니다. 코드 스니펫의 강조표시된 부분에서 볼 수 있는 Web 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를 사용하여 플레이한다면 즐겁게 색을 피하세요!