브라우저 기본 포커스 링을 해치지 않고 세련된 :focus-visible 링 디자인하기

웹 디자인과 프론트엔드 퍼블리싱 현장에서 디자이너와 접근성 담당자 사이에 수십 년간 끊이지 않았던 가장 고질적인 전쟁은 바로 '브라우저 기본 포커스 링(Default Focus Ring)'이었습니다. 마우스 사용자가 버튼이나 링크를 클릭할 때마다 주변에 생기는 둔탁하고 못생긴 파란색/검은색 테두리는 디자이너들의 눈에 거슬리는 흉물로 취급되었습니다. 이로 인해 수많은 개발자가 CSS 리셋 스타일 시트 맨 위에 :focus { outline: none; } 또는 outline: 0;을 무심코 집어넣어, 마우스 클릭 시 생기는 테두리를 지우는 데 성공했습니다. 그러나 이는 키보드로 웹사이트를 탐색하는 지체 장애인과 저시력자에게서 자신의 현재 위치를 확인할 수 있는 유일한 나침반을 영구적으로 파괴하는 끔찍한 결과를 낳았습니다. 모던 CSS는 이 해묵은 갈등을 단숨에 해결하는 가상 클래스인 :focus-visible을 공식 표준으로 제공합니다. 이 글에서는 디자인의 세련미와 키보드 접근성을 100% 동시에 만족시키는 모던 포커스 스타일링 기법을 다룹니다.

:focus와 :focus-visible의 혁신적인 휴리스틱 알고리즘 차이

전통적인 :focus 가상 클래스는 요소가 초점을 받기만 하면 입력 도구가 마우스인지, 트랙패드인지, 키보드인지, 터치스크린인지를 전혀 가리지 않고 무조건 스타일을 발화시켰습니다. 마우스로 버튼을 콕 누르는 순간 파란 테두리가 남아 디자인을 해쳤던 이유입니다.

반면 모던 브라우저가 지원하는 :focus-visible 가상 클래스는 브라우저 내부의 '입력 모달리티(Input Modality) 감지 휴리스틱'을 기반으로 작동합니다. 사용자가 마우스나 손가락 터치로 요소를 클릭했을 때는 포커스 링을 화면에 일절 노출하지 않고 감춰줍니다. 하지만 사용자가 키보드의 Tab 키나 방향키를 눌러 해당 요소로 진입했을 때는 '키보드 사용자에게 시각적 안내가 절실한 상황'임을 똑똑하게 인지하여 선명한 포커스 링을 마법처럼 띄워줍니다.

즉, :focus-visible을 사용하면 마우스 사용자에게는 미니멀하고 깔끔한 디자인을 그대로 보여주면서, 키보드 사용자에게는 완벽한 시각적 초점 피드백을 제공할 수 있습니다.

WCAG 2.2 SC 2.4.13(Focus Appearance) 3대 필수 규격

W3C가 WCAG 2.2에서 신설한 포커스 외형 규격을 완벽히 충족하기 위한 3대 CSS 수치는 다음과 같습니다.

• 1. 최소 2px 이상의 충분한 두께: outline-width: 2px; 이상을 설정하여 고해상도 레티나 디스플레이에서도 링이 흐릿하게 뭉개지지 않도록 합니다.
• 2. 인접 배경과의 3.0:1 비텍스트 대비율: 흰색 배경에서는 짙은 파란색(#0056B3)이나 검은색(#000000)을, 다크 모드 배경에서는 밝은 형광 시안(#00E5FF)이나 라임(#D7F36B)을 사용하여 3:1 이상의 높은 대비를 확보합니다.
• 3. outline-offset을 통한 시각적 호흡 공간 확보: outline-offset: 2px;을 부여하여 포커스 링이 버튼의 테두리에 바짝 붙어 겹치지 않고, 버튼 바깥으로 살짝 띄워져 시각적 가독성을 극대화합니다.

전역 CSS 리셋에서 절대 하지 말아야 할 위험한 코드

코드베이스에서 가장 경계해야 할 안티패턴은 *:focus { outline: none; }입니다.

올바른 모던 리셋 패턴은 다음과 같이 작성되어야 합니다.

:focus:not(:focus-visible) { outline: none; }

:focus-visible { outline: 2px solid var(--focus-ring-color, #1A73E8); outline-offset: 2px; }

이렇게 선언해 두면 마우스로 클릭할 때만 outline이 깔끔하게 지워지고, 키보드로 접근할 때는 디자인 시스템의 브랜드 컬러와 완벽히 조화되는 아름다운 2px 포커스 링이 선명하게 노출됩니다.

Windows 고대비 모드(Forced Colors Mode) 대응 테크닉

box-shadow나 border-color 트릭만으로 포커스 링을 흉내 낸 프로젝트는 Windows 고대비 모드(Contrast Themes)에서 완전히 사라져 버리는 치명적인 취약점이 있습니다. Windows 고대비 모드는 모든 box-shadow를 강제로 지워버리기 때문입니다.

따라서 포커스 스타일을 정의할 때는 항상 네이티브 outline 속성을 메인으로 사용해야 합니다. outline 속성은 OS 고대비 모드에서도 시스템 하이라이트 색상(Highlight / CanvasText)으로 강제 매핑되어 100% 온전하게 살아남으므로 가장 안전한 포커스 접근성을 보장받을 수 있습니다.