드디어 WebKit에도 그동안 작업했던 Caret Color patch가 적용되었고 Mac port를 위한 gardening도 끝났다. Blink와 WebKit에 적용된 이번 Patch로 인해 이제 적어도 IE를 제외한 모든 Gecko, WebKit, Blink 기반 브라우저는 같은 방식으로 Caret Color를 결정한다. 사실, Caret Color는 웹표준의 영역도 아니고, 대부분 플랫폼이 어떤 특별한 기준을 갖고 있지도 않다. 그렇기 때문에 브라우저 엔진 마다 Caret Color를 결정하는 방식이 달랐다. 어찌보면 사소한 일이지만, 이 부분이 상당히 눈에 거슬렸고, 나중에 접근성 문제까지 있다는 사실을 알게되어 관심을 갖지 않을 수 없었다. 그렇다면 그 동안 무슨 문제가 있었고 어떻게 해결했는지 잠깐 소개해보려고 한다.
Caret Color 문제는 HTML5 ContentEditable 표준과 관계가 깊다. IE에서 먼저 구현한 이 기능을 Firefox가 구현했고 HTML5 표준으로 채택되면서 이제 모든 브라우저에서 사용할 수 있게 되었다. 하지만 Caret Color에 대한 부분은 표준에서 논의되지 않았다. 어찌보면 플랫폼의 영역같이 보이지만, 실제 Windows를 제외하면 명확한 기준도 없다. 그러다 보니, Caret Color를 선택하는 기준이 애플리케이션 마다 다른 경우도 있다.
위 비디오에서 봐서 알 수 있듯이, Opera, Firefox, Chromium 브라우저에서 Caret Color가 모두 다른 것을 알 수 있다. 특히, 당시 WebKit엔진을 사용했던 Chromium 브라우저의 경우, 검은 배경에서 Caret이 보이지 않는 특수한 상황이 존재했었다. 아직 반영된 patch가 릴리스버전에 포함되기 까지 시간이 걸리기 때문에 비디오에서 보는 Test Case를 열어보면 아직까지 Caret Color가 서로 다른 것을 확인할 수 있다.
각 브라우저 엔진에서 Caret Color를 얻어오는 방식은 다음과 같다.
1. Firefox : 편집 중인 element의 CSS color property에서 Caret Color를 얻어온다. 위 비디오에서 볼 수 있듯이, element의 Color에 따라 Caret Color가 바뀌는 것을 볼 수 있다.
2. IE: IE는 Windows에서 제공하는 API를 이용해서 Caret을 그린다. 그러므로 모든 응용 프로그램에서 같은 Caret Color를 보여준다. Color 선택방식으로 배경색의 XOR하여 즉, 반전효과를 이용해서 어떤 배경에서도 Caret를 구분시켜준다. 이 방식의 큰 장점은 이미지 배경에서도 Caret이 보일 수 있도록 한다. 단점이라면 회색 배경에서는 다소 Caret이 잘 보이지는 않는 점이다. 특히, 색명인 사용자는 회색 배경에서 반전된 Caret은 잘 보이지 않는다고 한다.
3. WebKit: WebKit은 특이하게 현재 편집중인 element의 최상위 ContentEditable element의 CSS color property에서 Caret Color를 얻어왔다. 예를 들어 body tag에서 contentEditable attribute를 추가했다면 body이하 모든 태그가 편집 가능한데, 바로 편집 가능한 최상위 태그인 body tag의 CSS Color property에서 Caret Color를 얻어온다는 것이다. 그러한 이유로, WebKit에서 대부분 Caret Color가 항상 검은색을 갖고 있다.
2010년에 처음 이 작업을 시작할 때는 Firefox 방식으로 patch를 작성했다. 가장 구현하기 쉽고, 검은 배경에서 검색은 글꼴만 아니면, Caret이 항상 구분 가능 방법이다. 하지만 Reviwer는 글꼴 색상에 따라 변경되는 것은 보기 좋지 않다는 의견을 주었고, 나 역시도 빨갛고 노란 Caret Color는 맘에 들지 않았다. 그래서 나온 아이디어가 배경의 lightness를 얻어서 이에 따라 Caret을 흰색 또는 검은색으로 결정하는 것이였다. 배경색을 얻기 힘든 이미지 배경만 빼면 색맹 사용자도 배려한 괜찮은 아이디였다. 물론 Windows용 WebKit port에서만 Caret를 구한 API를 사용하기로 하였다. 그리고는 다른 일로 인해 이 patch를 더 이상 발전시키지 못하고 시간이 2년 넘게 흐르고 말았다.
다시 Blink에 이 patch를 적용하면서 Caret Color를 구하는 방식을 잘못 이해한 부분과 배경의 lightness를 얻는 것이 특정 상황에서는 상당히 복잡도가 높다는 것을 알게 되었다. 예를 들어, CSS position, z-order, text-align 등 사용하면, 편집되고 있는 자식 element가 부모 element 영역을 벗어날 수 있다. 이 경우에는 좌표를 통해 배경색을 얻어야 하는데, caret를 그릴 때 마다 이런 작업을 하기에는 복잡도가 너무 높다.
결과적으로, 편집 중인 text node를 포함하고 있는 element의 CSS color property에서 Caret Color를 얻어오는 것으로 patch가 작성되었고, 이는 WebKit과 Blink에 모두 반영되었다. 참고로, Chromium Canary버전에서 확인할 수 있다.
아직 caret color 논쟁이 끝난 것이 아니다. 색맹인 사용자도 caret을 잘 구분할 수 있고, image배경에서도 잘 구분할 수 있는 방법이 필요하다.
이제 Firefox, WebKit, Blink가 같은 방식으로 caret를 그리게 되었다. 비록 큰 변화는 아니지만, 뭔가 브라우저간의 차이를 조금 줄였다는데 보람이 느껴진다.
댓글 없음:
댓글 쓰기