체크박스 하나의 파란색이 브랜드를 흔든다
정성껏 고른 브랜드 색으로 사이트를 물들여 놓고도, 정작 손님이 클릭하는 체크박스와 라디오 버튼만 낯선 파란색인 경우가 많다. 회원가입 동의란, 옵션 선택, 설문 폼 — 손님의 손이 실제로 닿는 곳마다 브라우저 기본색이 툭 튀어나와 애써 맞춘 분위기를 깬다. 작은 차이 같지만, 손님은 이런 어긋남에서 '대충 만든 곳'이라는 인상을 먼저 읽는다.
예전엔 네모를 숨기고 처음부터 다시 그렸다
이 파란색 하나를 바꾸겠다고, 개발자들은 오랫동안 무리한 방법을 써 왔다. 네이티브 체크박스를 화면에서 숨긴 뒤, 그 위에 가짜 네모를 <span>으로 그리고 자바스크립트로 체크 상태를 흉내 내는 식이다.
- 코드가 몇 배로 늘고, 유지보수할 곳도 그만큼 많아진다.
- 키보드로 이동하거나 화면 낭독기를 쓰는 손님에게 '이게 체크박스'라는 사실이 제대로 전달되지 않아 접근성이 무너지기 쉽다.
- 모바일에서 터치 영역이 어긋나 헛클릭이 나기도 한다.
색 하나 바꾸자고 치르는 대가치고는 너무 컸다.
이제는 accent-color 한 줄이면 끝난다
표준으로 자리 잡은 accent-color 속성은 이 고생을 통째로 없앤다. 요소를 숨길 것도, 자바스크립트를 얹을 것도 없이 한 줄이면 된다.
:root { accent-color: #c8352f; }
이 한 줄로 페이지 안의 체크박스·라디오 버튼이 일제히 브랜드 색으로 물든다. 네이티브 요소는 그대로 살아 있으니, 손님이 얻는 경험은 조금도 손해 보지 않는다.
색이 통하는 요소들
- 체크박스·라디오 버튼: 선택 표시가 브랜드 색으로 바뀐다.
- 범위 슬라이더(range): 손잡이와 채워진 구간에 색이 입혀진다.
- 진행 표시줄(progress): 로딩·업로드 막대가 브랜드 색으로 찬다.
진짜 이득은 '접근성을 지킨 채' 바뀐다는 것
accent-color의 가치는 단순히 편해진 데 있지 않다. 네이티브 요소를 유지하기 때문에 키보드 조작, 화면 낭독기 안내, 브라우저 자동완성이 전부 그대로 작동한다. 예전 방식이 색을 얻는 대가로 접근성을 내주던 것과 정반대다. 게다가 손님이 다크 모드를 쓰면 브라우저가 대비까지 알아서 조정해 준다.
작은 회사일수록 이 한 줄이 크다
디테일에 큰돈과 시간을 쓰기 어려운 작은 회사일수록, 비용 없이 완성도를 끌어올리는 이런 표준 기능이 소중하다. 손님의 손이 닿는 폼 하나까지 브랜드 색으로 정돈된 사이트는, 말 없이도 '여기는 꼼꼼한 곳'이라고 이야기한다.
CYAN은 화려한 기술을 덧대기보다, 이렇게 손님의 신뢰로 이어지는 작은 디테일을 표준 기술로 야무지게 채워 사이트를 만든다. 우리 가게의 체크박스는 지금 무슨 색인지, 오늘 한번 눌러 보시길 권한다.
