EyeDropper API를 사용하여 화면의 픽셀 색상 선택

EyeDropper API를 사용하면 작성자가 맞춤 색상 선택 도구를 구성할 때 브라우저에서 제공하는 스포이트를 사용할 수 있습니다.

Patrick Brosset
Patrick Brosset
X GitHub
Thomas Steiner

EyeDropper API란 무엇인가요?

많은 창의적 애플리케이션에서는 사용자가 일반적으로 아이드로퍼 메타포를 사용하여 앱 창의 일부 또는 전체 화면에서 색상을 선택할 수 있습니다.

예를 들어 Photoshop을 사용하면 사용자가 캔버스에서 색상을 샘플링할 수 있으므로 색상을 추측하여 잘못 선택할 위험이 없습니다. PowerPoint에는 도형의 윤곽선 또는 채우기 색상을 설정할 때 유용한 스포이트 도구도 있습니다 Chromium DevTools에도 CSS 스타일 패널에서 색상을 수정할 때 사용할 수 있는 아이드로퍼가 있으므로 색상 코드를 기억하거나 다른 곳에서 복사할 필요가 없습니다.

웹 기술로 창의적인 애플리케이션을 빌드하는 경우 사용자에게 유사한 기능을 제공할 수 있습니다. 하지만 가능하다면 웹에서 이 작업을 실행하기는 어렵습니다. 특히 현재 브라우저 탭뿐만 아니라 전체 기기 화면 (예: 다른 애플리케이션에서)에서 색상을 샘플링하려는 경우에는 더욱 그렇습니다. 웹 앱이 자체 필요에 따라 사용할 수 있는 브라우저에서 제공하는 스포이트 도구는 없습니다.

<input type="color"> 요소가 가까워집니다. 데스크톱 기기에서 실행되는 Chromium 기반 브라우저에서는 색상 선택 도구 드롭다운에 유용한 스포이트를 제공합니다. 그러나 이 방법을 사용하려면 앱에서 CSS로 맞춤설정하고 앱의 다른 부분에서 사용할 수 있도록 자바스크립트로 래핑해야 합니다. 이 옵션을 사용하면 다른 브라우저에서 이 기능에 액세스할 수 없습니다.

EyeDropper API는 화면에서 색상을 샘플링하는 방법을 제공하여 이 격차를 메웁니다.

Chromium 색상 선택 도구

EyeDropper API 사용 방법

브라우저 지원

브라우저 지원

  • Chrome: 95.
  • Edge: 95
  • Firefox: 지원되지 않음
  • Safari: 지원되지 않음

소스

기능 감지 및 브라우저 지원

먼저 API를 사용하기 전에 API를 사용할 수 있는지 확인합니다.

if ('EyeDropper' in window) {
  // The API is available!
}

EyeDropper API는 버전 95부터 Edge 또는 Chrome과 같은 Chromium 기반 브라우저에서 지원됩니다.

API 사용

API를 사용하려면 EyeDropper 객체를 만든 다음 open() 메서드를 호출합니다.

const eyeDropper = new EyeDropper();

open() 메서드는 사용자가 화면에서 픽셀을 선택한 후에 확인되는 프로미스를 반환하며, 확인된 값은 sRGBHex 형식 (#RRGGBB)으로 픽셀의 색상에 액세스할 수 있도록 합니다. 사용자가 esc 키를 눌러 아이드로퍼 모드를 종료하면 프로미스가 거부됩니다.

try {
  const result = await eyeDropper.open();
  // The user selected a pixel, here is its color:
  const colorHexValue = result.sRGBHex;
} catch (err) {
  // The user escaped the eyedropper mode.
}

앱 코드는 스포이트 모드를 취소할 수도 있습니다. 이 기능은 앱의 상태가 크게 변경되는 경우 유용할 수 있습니다. 팝업 대화상자가 표시되고 사용자의 입력이 필요할 수 있습니다. 이 시점에서 스포이트 모드를 중지해야 합니다.

스포이트를 취소하려면 AbortController 객체의 신호를 사용하여 open() 메서드에 전달하면 됩니다.

const abortController = new AbortController();

try {
  const result = await eyeDropper.open({signal: abortController.signal});
  // ...
} catch (err) {
  // ...
}

// And then later, when the eyedropper mode needs to be stopped:
abortController.abort();

이를 종합하면 다음과 같이 재사용 가능한 비동기 함수를 확인할 수 있습니다.

async function sampleColorFromScreen(abortController) {
  const eyeDropper = new EyeDropper();
  try {
    const result = await eyeDropper.open({signal: abortController.signal});
    return result.sRGBHex;
  } catch (e) {
    return null;
  }
}

사용해 보기

Windows 또는 Mac에서 Microsoft Edge 또는 Chrome 95 이상을 사용하여 EyeDropper 데모 중 하나를 엽니다.

예를 들어 색상 게임 데모를 사용해 보세요. Play 버튼을 누르고 제한된 시간 동안 하단의 목록에서 상단의 색상 정사각형과 일치하는 색상을 샘플링해 봅니다.

색상 게임 데모

개인 정보 보호 및 보안 고려사항

단순해 보이는 이 웹 API 뒤에는 잠재적으로 유해한 개인 정보 보호 및 보안 문제가 있습니다. 악성 웹사이트에서 내 화면의 픽셀을 볼 수 있다면 어떻게 해야 하나요?

이 문제를 해결하기 위해 API 사양에는 다음과 같은 조치가 필요합니다.

  • 첫째, API는 사용자 인텐트 없이는 실제로 아이드로퍼 모드를 시작할 수 없습니다. open() 메서드는 사용자 작업 (예: 버튼 클릭)에 대한 응답으로만 호출할 수 있습니다.
  • 둘째, 사용자 의도 없이는 다시 어떤 형태의 픽셀 정보도 가져올 수 없습니다. open()에서 반환된 약속은 사용자 작업 (픽셀 클릭)에 대한 응답으로만 색상 값으로 확인됩니다. 따라서 사용자가 눈치채지 못하도록 백그라운드에서 색상 선택 도구를 사용할 수 없습니다.
  • 사용자가 스포이트 모드를 쉽게 알 수 있도록 브라우저에서 모드를 명확하게 표시해야 합니다. 이 때문에 잠시 지연된 후 일반 마우스 커서가 사라지고 전용 사용자 인터페이스가 표시됩니다. 또한 사용자가 돋보기를 볼 수 있는 시간을 확보할 수 있도록 눈금자 모드가 시작된 시점과 사용자가 픽셀을 선택할 수 있는 시점 사이에 지연 시간이 있습니다.
  • 마지막으로 사용자는 언제든지 esc 키를 눌러 스포이트 모드를 취소할 수 있습니다.

의견

Chromium팀에서 EyeDropper API를 사용한 경험에 관해 듣고자 합니다.

API 설계 설명

API에 예상대로 작동하지 않는 부분이 있나요? 아니면 아이디어를 구현하는 데 필요한 메서드나 속성이 누락되어 있나요? 보안 모델에 관해 질문이나 의견이 있으신가요? API의 GitHub 저장소에서 사양 문제를 신고하거나 기존 문제에 관한 의견을 추가하세요.

구현 문제 신고

Chromium 구현에 버그가 있나요? 아니면 구현이 사양과 다른가요? new.crbug.com에서 버그를 신고합니다. 간단한 재현 안내를 포함하여 최대한 많은 세부정보를 포함하고 Components 상자에 Blink>Forms>Color를 입력합니다. Glitch는 빠르고 간편한 재현을 공유하는 데 적합합니다.

API 지원 표시

EyeDropper API를 사용할 계획인가요? 공개적으로 지원하면 Chromium팀에서 기능의 우선순위를 지정하는 데 도움이 되며 다른 브라우저 공급업체에 기능을 지원하는 것이 얼마나 중요한지 보여줍니다. #EyeDropper 해시태그를 사용하여 @ChromiumDev에 트윗을 보내고 사용 중인 위치와 사용 방법을 알려주세요.

유용한 링크

감사의 말씀

EyeDropper API는 Microsoft Edge팀의 Ionel Popescu가 지정하고 구현했습니다. 이 게시물은 조 미들리님이 검토했습니다.