문의 폼을 연 순간, 아직 한 글자도 안 썼는데 이름·연락처·이메일 칸이 죄다 빨갛게 물들어 있습니다. 손님은 무엇을 잘못했나 싶어 움츠러들고, 어떤 이는 그대로 창을 닫습니다. 반대로 검증을 아예 빼면, 손님은 잘못 적은 이메일을 그대로 보내고 사장님은 연락할 길을 잃죠. 그래서 개발자들은 '손님이 그 칸을 다 쓴 뒤에만' 빨강·초록을 띄우려고 자바스크립트로 칸마다 상태를 감시해 왔습니다. 이제 CSS의 :user-valid·:user-invalid가 그 일을 코드 몇 줄로 대신합니다.
검증 표시는 왜 늘 자바스크립트의 몫이었나
사실 CSS에는 오래전부터 입력값의 맞고 틀림을 가려내는 :valid·:invalid가 있었습니다. 문제는 이 둘이 페이지가 열리는 즉시 판정을 내린다는 데 있었죠. 아직 아무것도 입력하지 않은 '필수' 칸은 곧바로 '틀림'으로 취급돼, 폼 전체가 처음부터 빨갛게 물들어 버렸습니다.
그래서 개발자들은 이 표준 기능을 두고도 자바스크립트에 기댔습니다. 손님이 그 칸을 한 번 건드렸는지, 입력을 마치고 떠났는지를 일일이 추적해, '충분히 만진 뒤'에만 검증 표시를 켜는 코드를 붙인 것이죠. 흔한 기능이지만 칸마다 이벤트를 매다는 코드가 폼마다 따라다녔습니다.
손님이 '다 쓴 뒤에만' 알려 주는 방식
:user-valid·:user-invalid는 바로 이 '타이밍'을 해결합니다. 이름 그대로, 손님이 직접 입력에 관여한 뒤에만 판정이 작동합니다.
- 페이지를 갓 열었을 때는 아무 표시도 뜨지 않습니다. 빈 칸을 미리 나무라지 않죠.
- 손님이 칸을 채우고 넘어가면, 그제야 맞으면 :user-valid, 틀리면 :user-invalid가 적용됩니다.
- 잘못을 고쳐 올바른 값이 되면 표시도 즉시 초록으로 바뀝니다.
손님의 입력 흐름을 뒤쫓던 자바스크립트가 사라지고, 브라우저가 그 판단을 대신 맡는 셈입니다.
빨강·초록 테두리를 CSS 몇 줄로
쓰는 법도 단순합니다. 입력칸에 :user-invalid일 때 붉은 테두리, :user-valid일 때 초록 테두리를 지정하고, 그 옆에 안내 문구를 함께 보여 주면 됩니다. 잘못된 이메일 형식이나 빠뜨린 필수 항목이, 손님이 그 칸을 지나친 순간에 딱 맞춰 표시됩니다.
덤으로 얻는 이점도 있습니다. 이 방식은 화면을 읽어 주는 보조기기와도 잘 어울려, 눈으로 색을 못 보는 손님에게도 '이 칸을 다시 봐 달라'는 신호가 자연스럽게 전달됩니다.
작은 회사 문의 폼에는 무엇이 달라지나
가장 크게 바뀌는 곳은 역시 문의·예약·상담 양식입니다. 처음부터 겁주지 않으니 손님이 편하게 입력을 시작하고, 다 쓴 뒤에는 틀린 곳을 제때 짚어 주니 잘못된 연락처가 오는 일도 줄어듭니다. 손님의 답답함과 사장님의 헛걸음을 동시에 덜어 주는 셈이죠.
홈페이지 입장에서도 검증만을 위한 별도 스크립트가 줄어드니 그만큼 가벼워지고, 나중에 손볼 코드도 하나 사라집니다.
지금 쓸 때 주의할 점
:user-valid·:user-invalid는 최신 크롬·엣지·사파리·파이어폭스에서 두루 지원되기 시작했지만, 오래된 브라우저를 쓰는 손님도 있습니다. 다행히 이 방식은 '있으면 더 친절하고 없어도 괜찮은' 형태로 쓸 수 있습니다. 지원되지 않는 곳에서는 검증 색만 뜨지 않을 뿐, 브라우저 기본 검증과 폼 제출 자체는 그대로 작동하니까요.
핵심은 늘 같은 방향입니다. 예전엔 자바스크립트로 힘겹게 흉내 내던 일이, 팝오버·컨테이너 쿼리·:has()처럼 브라우저의 기본 기능으로 하나씩 자리를 옮기고 있습니다. CYAN 에이전시는 이런 새 표준을 무작정 앞세우기보다, 방문자의 환경과 사업의 목적에 맞게 '지금 써도 되는 것'과 '조금 더 기다릴 것'을 가려 적용합니다. 화려한 기술보다, 손님이 문의 한 통을 막힘없이 끝내게 하는 설계를 먼저 생각합니다.
