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

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

Patrick Brosset
Patrick Brosset
홈페이지
Thomas Steiner

EyeDropper API란 무엇인가요?

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

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

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

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

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

Chromium 색상 선택 도구

EyeDropper API 사용 방법

브라우저 지원

Browser Support

  • Chrome: 95.
  • Edge: 95.
  • Firefox: not supported.
  • Safari: not supported.

Source

기능 감지 및 브라우저 지원

먼저 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 이상을 사용하여 스포이트 데모 중 하나를 엽니다.

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

색상 게임 데모

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

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

이 문제를 해결하기 위해 API 사양에서는 다음 조치를 요구합니다.

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

의견

Chromium팀은 EyeDropper API 사용 경험에 관한 의견을 듣고 싶습니다.

API 설계에 대해 알려주세요.

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

구현 문제 신고

Chromium 구현에서 버그를 발견하셨나요? 아니면 구현이 사양과 다른가요? new.crbug.com에서 버그를 신고합니다. 최대한 많은 세부정보와 재현을 위한 간단한 안내를 포함하고 구성요소 상자에 Blink>Forms>Color를 입력합니다.

API 지원 표시

EyeDropper API를 사용할 계획인가요? 공개 지원은 Chromium팀이 기능의 우선순위를 지정하는 데 도움이 되며 다른 브라우저 공급업체에 지원의 중요성을 보여줍니다. 해시태그 #EyeDropper를 사용하여 @ChromiumDev에 트윗을 보내 어디에서 어떻게 사용하고 있는지 알려주세요.

유용한 링크

감사의 말씀

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