투박한 파란색 체크박스는 그만! 단 1줄로 우리 회사 컬러 입히기
회원가입 창이나 약관 동의 화면에서 [✓] 체크박스나 ( ) 라디오 버튼을 누를 때, 우리 회사 로고는 빨간색인데 체크박스 안에는 무조건 파란색 불이 들어와서 어색했던 적 없으신가요?
이 파란색은 브라우저(크롬, 사파리 등)가 강제로 지정해 둔 고유의 색상입니다. 과거에는 이를 바꾸기 위해 수십 줄의 복잡한 코드를 짜야 했지만, 이제는 단 1줄이면 끝납니다.
💡 폼(Form) 요소의 색상 통일이 중요한 이유
고객이 사이트를 이용하며 가장 집중하는 순간은 바로 '개인정보를 입력하고 결제를 누르는' 폼(Form) 작성 순간입니다. 이 중요한 공간에 브라우저 기본 디자인이 날것 그대로 노출되어 있다면, 고객은 무의식적으로 사이트의 완성도가 낮다고 판단하게 됩니다.
1. 마법의 속성: accent-color 적용하기
가장 최신의 CSS 표준 속성인 accent-color를 사용해 보세요. 체크박스, 라디오 버튼, 진행률 바(Range) 등 브라우저가 제공하는 폼 컨트롤 요소의 메인 컬러(Accent)를 한 번에 브랜드 컬러로 덮어씌워 줍니다.
/* 특정 체크박스나 라디오 버튼에만 적용할 때 */
input[type="checkbox"], input[type="radio"] {
accent-color: #cc2b2b; /* 나눔웹의 강렬한 레드 컬러로 변신! */
/* 체크박스 크기도 살짝 키워주면 터치하기 훨씬 편해집니다 */
width: 1.2rem;
height: 1.2rem;
}
/* 웹사이트 전체의 모든 폼 요소에 한 번에 적용하고 싶다면? */
:root {
accent-color: #cc2b2b;
}2. 진짜 하이엔드 디테일: "글씨를 눌러도 체크되게 하라"
색상만 바꿨다고 끝이 아닙니다. 모바일 화면에서 그 작은 네모 박스(체크박스)를 손가락으로 정확히 터치하기란 매우 힘듭니다.
체크박스 옆에 있는 글씨(Label)를 터치해도 박스에 체크가 되도록 연결해 주는 것이 진정한 배려(UX)입니다.
<!-- 가장 완벽한 체크박스 HTML 작성법 -->
<!-- label 태그로 input과 글씨를 통째로 감싸주세요 -->
<label style="cursor: pointer; display: flex; align-items: center; gap: 8px;">
<input type="checkbox">
<span>[필수] 개인정보 수집 및 이용에 동의합니다.</span>
</label>"작은 네모 박스 하나에도 브랜드의 철학이 담깁니다."
나눔웹은 복잡한 스크립트를 남용하지 않고, 모던 CSS의 강력한 기능을 적극 활용하여
가장 빠르고 아름답게 브랜드의 아이덴티티를 100% 구현합니다.