요약

  • 2018년 2월 W3C Selectors Level 4 초안은 :focus가 가리키는 현재 입력 위치와 브라우저가 그 위치를 눈에 보여야 한다고 판단할 때의 :focus-visible을 구분했다.
  • 이후 초안은 키보드 이동, 글을 입력하는 칸, 항상 표시하라는 이용자 설정, 스크립트가 포커스를 옮길 때의 연속성을 판단 단서로 설명했다. 브라우저는 도착 경로를 알고 사이트는 표지를 그린다.

디자이너가 마우스로 버튼을 눌렀다. 시안에는 없던 테두리가 둘러졌다. CSS 한 줄로 없애니 버튼이 얌전해졌다. 마우스로 다시 눌러 봐도 문제없다. 다음 이용자는 Tab 키를 누른다. 포커스는 버튼에 도착했지만 화면은 어디에 왔는지 말해 주지 않는다. Enter는 주소를 지운 택배가 된다. 테두리는 너무 눈에 띈다는 이유로 해고됐다. 눈에 띄는 것이 원래 업무였는데도.

2018년 2월 2일 W3C 초안은 이 상황의 두 사실을 나눴다. :focus는 지금 입력을 받는 요소를 나타낸다. :focus-visible은 브라우저가 그 위치를 드러내는 편이 좋다고 판단할 때 적용된다. 초안은 글 입력 칸과 버튼을 비교한다. 입력 칸에는 다음 글자가 들어간다. 키보드로 도착한 버튼은 마우스 포인터가 위치를 알려 주지 않는다. 반대로 버튼을 직접 클릭했다면 포인터가 방금 도착한 곳을 가리킨다. 같은 버튼이어도 오는 길이 다르다.

브라우저는 그 길을 지켜봤고 이용자의 설정도 볼 수 있다. 사이트는 색과 선 굵기, 대비를 정할 수 있다. :focus 전체에서 outline을 지우면 브라우저가 가진 정보를 독자에게 건네기도 전에 버리는 셈이다. :focus-visible을 또렷하게 꾸미면 판단과 디자인이 만난다. 테두리가 예전 제복을 계속 입을 필요는 없다. 근무하는 자리만큼은 보여 줘야 한다.

2018년 11월 21일 초안은 제법 대담한 예를 실었다. :focus-visible 요소에는 굵은 노란 윤곽선을, 링크에는 노란 배경까지 준다. 브라우저의 기본 모양을 참으라는 말이 아니다. 사이트 전체에 일관되고 확실한 표지를 직접 만들라는 제안이다. 버튼과 링크가 빽빽한 페이지에서 현재 위치가 한눈에 들어와야 다음 행동도 자신 있게 고를 수 있다.

초안에는 브라우저가 참고할 상황도 적혀 있다. 이용자가 항상 포커스를 보고 싶다고 설정했다면 그 선택을 따른다. 글을 입력하는 요소는 타이핑의 목적지를 알려야 한다. 키보드나 포인터가 없는 장치로 움직였다면 표시가 특히 유용하다. 포인터로 버튼을 직접 누른 순간에는 클릭 자체가 위치를 알려 준다. 이 목록은 출발점이며 브라우저가 운영 환경과 설정을 고려할 여지를 둔다. CSS 선택자는 그렇게 내린 결론을 전달받는다.

스크립트가 포커스를 옮기면 경로의 기억이 중요해진다. 키보드 이용자가 패널을 열자 프로그램이 패널 안 첫 버튼에 포커스를 둔다. 11월 초안은 이전 위치에 표지가 있었다면 새 버튼도 그 표지를 이어받도록 제안한다. 새 방 문턱을 넘자마자 현재 위치가 사라지면 이용자는 다시 길을 찾아야 한다. 포인터에서 출발한 경우의 연속성도 다룬다. 브라우저는 버튼 하나만 보지 않고 사람이 밟아 온 동선을 본다.

2022년 5월 7일 초안은 구분을 더 간결하게 썼다. :focus는 현재 포커스와 언제나 일치한다. :focus-visible은 브라우저가 그 포커스를 표시할 때 일치한다. 사이트는 표지의 생김새를 바꾸되 등장 시점을 매번 자체 추론할 필요가 없다. 초안은 브라우저의 기본 포커스 표시에도 :focus-visible을 쓰도록 권한다. 사이트가 그린 선과 브라우저가 그린 선이 서로 다른 시계를 보고 다투지 않게 하자는 것이다.

2022년 11월 11일 초안도 그 구조를 유지했다. W3C 발행 이력에는 2018년부터의 수정 단계가 나열돼 있다. 이 작은 선택자가 겨냥한 장면은 늘 평범하다. 사람은 이미 다음 버튼에 와 있는데, 화면이 그 사실을 알려 주지 않는 순간. 마우스 클릭의 화면은 조용해도 좋다. Tab 키로 도착한 자리에는 가로등 하나가 필요하다.

포커스 테두리가 복직했다. 이번에는 눈에 띄는 일이 경력이 됐다.