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

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

Patrick Brosset
Patrick Brosset
X GitHub
Thomas Steiner

EyeDropper API란 무엇인가요?

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

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

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

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

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

Chromium 색상 선택 도구.

EyeDropper API 사용 방법

브라우저 지원

브라우저 지원

  • 95
  • 95
  • x
  • x

소스

기능 감지 및 브라우저 지원

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 키를 눌러 스포이트 모드를 벗어나면 promise가 거부됩니다.

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에서 버그를 신고합니다. 가능한 한 많은 세부정보와 간단한 재현 안내를 포함하고 구성요소 상자에 Blink>Forms>Color를 입력합니다. Glitch는 쉽고 빠른 재현을 공유하는 데 효과적입니다.

API 지원 표시

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

유용한 링크

감사의 말

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