Today I Learned

Development

HDR Displays And CSS

: 개발을 하던 도중 svg와 circle 태그로 만든 동그라미 마우스 커서에 attribute로 준 fill-color와 konvaJS로 만든 캔버스에 그은 Konva.Line의 stroke-color 값에 동일한 값을 줬음에도 커서의 색깔과 선의 색깔이 다른 에러를 마주쳤다. 완전히 동일한 값을 넣어줌에도 왜 색깔이 다르게 렌더링될까?... 전혀 이해할 수 없었다. 하지만, 우연찮게 브라우저를(모니터가 여러개이므로) HDR Color를 지원하고, 실제 사용중인 모니터에서 그렇지 않은 모니터로 옮겨봤더니 정상적으로, 즉, 두 컬러가 동일하게 출력됨을 볼 수 있었다. 의도치않은? 원인 발견이지만, 어쨌든 HDR Display가 이러한 영향을 미칠 수 있다는게 ... 짜증난다.

어쨌든 이건 디버깅을 해야할 요소이기에 디버깅을 해본다. 먼저, HDR Display와 CSS 의 연관성 등을 분석해보자.

High Dynamic Range (HDR)

: 더욱 넓은 스펙트럼의 컬러를 쓸 수 있게 해주고, 밝기도 더 폭넓게 사용할 수 있게 해준다. 이렇게 베리에이션을 넓혀주므로 화질이 좋아지는건 당연할듯!. sRGB 시절에 비교하면(?) colour coverage가 상당히 증가함을 볼 수 있었다.

function isitHDRReady() {
  // Check if browser supports hdr media queries
  const mediaCheck = window.matchMedia(
    "(dynamic-range: high) and (color-gamut: p3)"
  ).matches;

  // Check if browser supports color() function
  const supportCheck =
    window.CSS && window.CSS.supports("color", "color(display-p3 1 1 1)");

  if (mediaCheck && supportCheck) {
    return true;
  }

  return false;
}

추가로, 위와 같이 HDR Display를 지원하는 디바이스인지 체크할 수 있다(JS 코드로).

근데 이게 문제가 아니지 않나?

: 생각해보면, HDR Display를 지원한다는건 예를 들어, 이전버전이 A고, 현재 버전이 B일 때 A버전보다 많은 컬러를 B버전이 지원한다는거다. 이 때, B가 HDR Display다 하면 결국 B에서는 A가 갖는걸 모두 지원한다는 의미가 된다. 즉, A +a 라는 것. 근데, B를 적용했을 때 같은 값을 넣어줬음에도 컬러가 다르게 출력됐다는건 HDR Display 지원과 관련이 있는 이슈인가 싶다. 오히려 컬러 베리에이션이 넓은 버전인데.. 이거랑 뭔 상관이 있을까?.. 좋아졌으면 좋아졌지..!

하지만, 명확한건 HDR Display인 모니터에서만 생기는 이슈라는거다. 심지어 멀티 모니터로 브라우저를 반쪽은 Non-HDR Display Monitor에 놓고, 반쪽은 HDR Display Monitor에 두니까 반쪽에서는 이슈가없고, 반쪽에선 생긴다.. 일단 이유는 명확하지만, 논리적으로 이해가 안되는 상황이다.

일단,, Okky에도 이슈를 공유해본다. 도저히 해결책이 안보임!!
https://okky.kr/questions/1468627

깃 remote 삭제 및 변경

git remote remove origin
git remote add origin https://github.com/계정/리포지토리