색상 토큰 채택률 점검법

색상 토큰 채택률 점검법

---

ViewCheck 마케팅 홍보 — 2026년 9월 · W2 색상 586 토큰 (9/14~9/20)

대주제: 디자인 일관성·토큰 · 홍보 훅: 토큰 채택률 리포트

【도입 — 공감·문제제기】

이번 주 월요일엔 색상 토큰이라는 게 도대체 뭔지, 586개나 되는 색을 왜 일일이 정리해 두는지를 다뤘다. 수요일엔 토큰을 안 쓰면 사이트가 어떻게 조금씩 어긋나는지를 봤다. 그리고 오늘 금요일, 가장 손에 잡히는 이야기를 하려 한다. ‘우리 사이트가 그 색상 토큰을 실제로 얼마나 쓰고 있는지’를 담당자가 직접 점검하는 방법이다.

먼저 솔직하게 털어놓자. ‘토큰 채택률’이라는 말, 처음 들으면 좀 거창하고 어렵다. 무슨 통계 지표 같고, 데이터 분석가나 들여다볼 숫자처럼 들린다. 그런데 막상 뜯어보면 의외로 단순하다. 채택률이란 ‘우리 사이트가 쓰는 색 중에서, 정해진 토큰을 제대로 따라 쓴 비율’이다. 100가지 색을 썼는데 그중 80가지가 정해진 토큰을 따랐다면 채택률은 80%고, 나머지 20가지는 누군가가 그때그때 눈대중으로 박아 넣은 ‘제멋대로 색’이라는 뜻이다. 이 비율 하나가 사이트 디자인의 건강 상태를 꽤 정직하게 보여준다.

생각해보면 우리는 일상에서 이미 이런 ‘채택률’을 자연스럽게 따진다. 옷장을 예로 들어보자. 잘 정돈된 옷장은 몇 가지 어울리는 색으로 통일돼 있어, 아무거나 꺼내 입어도 조합이 어색하지 않다. 반면 충동구매로 산 ‘튀는 색’ 옷들이 잔뜩 섞인 옷장은, 분명 옷은 많은데 ‘입을 게 없다’. 색이 제각각이라 서로 안 어울리기 때문이다. 사이트의 색도 똑같다. 정해진 토큰 몇 가지로 통일된 사이트는 어느 페이지를 봐도 ‘한 사이트’ 같지만, 그때그때 산 충동구매 옷처럼 제멋대로 색이 섞인 사이트는 페이지마다 ‘다른 데 같다’. 채택률을 점검한다는 건, 우리 사이트라는 옷장을 열어 ‘얼마나 잘 정돈돼 있나’를 들여다보는 일과 다르지 않다.

왜 디자이너도 아닌 내가 이런 걸 봐야 하나 싶을 수 있다. 하지만 색의 일관성은 디자이너 혼자 지키는 게 아니다. 콘텐츠를 올리는 담당자가 표 하나 만들면서 ‘이 칸 배경은 좀 진한 회색’ 하고 색을 직접 고르는 순간, 외주 업체가 새 배너를 만들며 ‘대충 우리 파랑 비슷하게’ 색을 박는 순간, 채택률은 조금씩 깎인다. 사이트에 손대는 모든 사람이 채택률에 영향을 준다. 그래서 ‘우리가 정한 색을 우리가 잘 쓰고 있나’를 가늠하는 감각은, 디자인 담당이 아니어도 누구나 조금씩 갖추면 좋은 능력이다.

그리고 이 점검은 돈이 안 든다. 외부 컨설팅을 부르기 전에, 비싼 도구를 사기 전에, 지금 당장 브라우저 하나만 켜면 시작할 수 있다. 결재도 필요 없고, 누구의 허락도 필요 없다. 그저 우리 사이트의 색을 ‘기준이 있는 눈’으로 한 바퀴 돌아보는 것뿐이다. 거창한 디자인 개편을 기획하기 전에, 먼저 ‘지금 우리 색이 얼마나 흐트러져 있는지’ 아는 것 — 모든 정리는 거기서 출발한다. 솔직히 말해, 많은 기관이 ‘개편’을 큰 예산이 드는 거대한 프로젝트로만 생각한다. 하지만 색의 일관성처럼 ‘기준을 세우고 꾸준히 지키면 되는’ 영역은, 큰돈 없이도 충분히 좋아질 수 있다. 돈으로 한 번에 사는 게 아니라, 습관으로 매일 쌓는 종류의 품질이다. 그리고 그렇게 쌓은 품질이 의외로 오래간다. 한 번 외주로 새로 만든 사이트는 몇 년 지나면 또 낡지만, ‘색을 토큰으로 관리하는 문화’가 자리 잡은 기관은 사이트가 바뀌어도 그 정돈된 감각을 계속 이어간다.

오늘 글은 ‘실무 체크리스트’다. 개념을 길게 설명하기보다, 담당자가 모니터 앞에서 바로 따라 할 수 있는 자가 점검 항목과 단계별 실행법에 무게를 둔다. 준비물은 단출하다. 우리 기관 사이트, 데스크탑 브라우저 하나, 그리고 ‘예/아니오’를 적을 메모장 하나. 색을 다루는 일이라 가능하면 색이 정확히 보이는 모니터에서 하는 게 좋지만, 없으면 평소 쓰던 화면으로도 충분히 시작할 수 있다.

점검을 시작하기 전에 마음가짐 하나만 다잡자. 이건 ‘시험’이 아니라 ‘건강검진’이다. 채택률이 낮게 나왔다고 부끄러워할 일이 전혀 아니다. 오히려 낮게 나올수록 ‘고쳐서 좋아질 여지가 그만큼 크다’는 뜻이고, 점검이 제대로 됐다는 신호다. 진짜 위험한 건 채택률이 낮은 게 아니라, 채택률이 낮은데도 그걸 모르고 ‘우리 사이트 색은 괜찮은 편’이라고 믿고 있는 상태다. 보이지 않는 문제가 가장 무섭다. 오늘 점검의 목적은 좋은 점수를 받는 게 아니라, ‘우리 색이 지금 어디서 새고 있는지’를 정확히 찾아내는 것이다.

한 가지 미리 당부하자면, 채택률은 ‘한 번 재고 끝’이 아니라 ‘정기적으로 추적’할 때 진짜 가치가 생긴다. 사이트는 살아 있어서 콘텐츠가 늘고 페이지가 추가되면서 색도 계속 변한다. 오늘 80%였던 채택률이 반년 뒤엔 65%로 떨어져 있을 수 있다. 새 페이지마다 누군가 제멋대로 색을 박았기 때문이다. 그래서 분기에 한 번쯤 같은 방법으로 다시 재면, 우리 사이트의 색이 정돈되고 있는지 흐트러지고 있는지 추세가 보인다. 오늘의 점검은 그 첫 번째 기준점을 찍는 일이다. 이 기준점이 있어야 나중에 ‘좋아졌다/나빠졌다’를 말할 수 있다.

한 가지 더 당부하자면, 점검할 땐 ‘만든 사람’의 마음이 아니라 ‘쓰는 사람’의 마음으로 색을 봐야 한다. 우리는 우리 사이트의 색에 익숙하다. 매일 보다 보니 ‘이 정도면 일관적이지’ 하고 후하게 넘기기 쉽다. 하지만 처음 방문한 사용자는 우리 사이트를 ‘낯선 눈’으로 본다. 그 낯선 눈에는 우리가 익숙해서 못 보던 색의 균열이 더 잘 보인다. 그러니 점검하는 동안만큼은 ‘오늘 처음 이 사이트에 들어온 까다로운 사용자’가 됐다고 상상하며 보길 바란다. 가능하면 사이트를 잘 모르는 동료에게 ‘이 두 페이지 색이 같은 사이트처럼 보여요?’라고 물어보는 것도 좋은 방법이다. 익숙하지 않은 눈이 가끔 더 정확하다.

그리고 이 점검이 ‘건강검진’이라는 마음가짐을 한 번 더 강조하고 싶다. 검진의 목적은 좋은 결과를 받는 게 아니라 ‘이상을 일찍 찾는 것’이다. 채택률 점검도 똑같다. ‘아니오’가 많이 나올수록, 고칠 거리를 그만큼 많이 확보한 것이고 사이트가 좋아질 여지가 그만큼 크다는 뜻이다. 그러니 점검하는 동안엔 우리 사이트에 일부러 더 엄격해지자. 후하게 봐서 ‘우리 괜찮네’ 하고 넘기는 순간, 정작 손봐야 할 곳을 놓친다. 의심스러우면 사용자 편에 서서 더 깐깐하게 보는 게, 결국 사용자에게도 우리에게도 이득이다.

자, 이제 구체적인 점검법으로 들어가자. 오늘 글은 다섯 묶음으로 구성했다. 첫째, 채택률이 정확히 무엇이고 왜 봐야 하는가. 둘째, 우리 색을 직접 세어보는 가장 쉬운 방법. 셋째, ‘아니오’가 나오는 전형적인 장면들(익명 사례). 넷째, 발견한 문제를 어떤 순서로 고쳐 채택률을 끌어올릴 것인가. 다섯째, 점검 결과를 기록하고 다음 분기로 이어가는 법. 차례대로 따라오면, 점검을 마칠 즈음엔 ‘우리 사이트 색이 지금 어떤 상태이고, 무엇부터 손대야 하는지’가 손에 잡힐 것이다.

【본론】

■ 토큰 채택률이란 무엇이고, 왜 이 숫자 하나를 봐야 하나

채택률을 한 문장으로 다시 정의하자. ‘우리 사이트에서 실제로 쓰인 색 가운데, 미리 정해 둔 색상 토큰을 따라 쓴 비율’이다. 분모는 ‘우리가 쓴 색의 총량’이고, 분자는 ‘그중 토큰을 제대로 쓴 양’이다. 이 비율이 높을수록 사이트의 색이 한 몸처럼 정돈돼 있고, 낮을수록 페이지마다 색이 제각각이라는 뜻이다.

여기서 ‘토큰’이라는 말을 잠깐 풀어보자. 토큰은 ‘이름이 붙은 색’이다. 그냥 ‘#1F4E79’ 같은 색 코드가 아니라, ‘기본-파랑-진하게’ 혹은 ‘주요-버튼-배경’ 같은 이름이 붙어 있는 색이다. 이름이 붙어 있으면 무엇이 좋은가. 모두가 같은 이름을 불러 같은 색을 꺼내 쓰게 된다. ‘우리 브랜드 파랑’이라고만 하면 사람마다 머릿속의 파랑이 미묘하게 다르지만, ‘기본-파랑-진하게라는 이름의 토큰’이라고 하면 누가 꺼내 써도 정확히 같은 한 가지 색이 나온다. 행정안전부 「전자정부 웹사이트 품질관리 지침」이 추구하는 KRDS 디자인 체계가 색을 586개의 토큰으로 촘촘히 정리해 둔 이유가 바로 이것이다. 색을 ‘느낌’이 아니라 ‘이름이 붙은 약속’으로 다루기 위해서다.

그러면 왜 굳이 ‘비율’이라는 숫자로 봐야 할까. 색 일관성은 원래 ‘느낌’으로만 이야기되기 쉬운 영역이다. ‘좀 어수선해 보여요’ ‘통일감이 없네요’ 같은 말은 사람마다 다르게 받아들이고, 누구는 동의하고 누구는 ‘이 정도면 괜찮은데’ 한다. 그런데 ‘채택률 62%’라는 숫자가 나오면 이야기가 달라진다. 막연한 인상이 구체적인 수치가 되는 순간, 개선이 ‘안건’이 된다. ‘우리 사이트 색이 좀 별로인 것 같아요’로는 누구도 움직이지 않지만, ‘색 토큰 채택률이 62%로 떨어져 있고, 특히 새로 만든 페이지에서 제멋대로 색이 늘고 있습니다’라고 하면 회의 테이블에 올릴 수 있는 문제가 된다. 숫자는 흐릿한 느낌을 또렷한 사실로 바꿔준다.

채택률을 봐야 하는 이유를 좀 더 나눠보자. 첫째, 사용자의 신뢰와 직결된다. 색이 일관된 사이트는 사용자가 의식하지 못해도 ‘여기 정돈됐다, 믿을 만하다’는 인상을 받는다. 반대로 페이지마다 파랑이 미묘하게 다르고 회색이 들쭉날쭉하면, 또렷이 집어내진 못해도 ‘뭔가 어수선하다, 덜 꼼꼼하다’는 느낌이 쌓인다. 공공 사이트에서 이 인상은 곧 ‘이 기관이 일을 얼마나 야무지게 하는가’에 대한 무의식적 판단으로 번진다. 민간 쇼핑몰이라면 ‘좀 어수선해도 물건만 좋으면’ 넘어갈 수 있지만, 공공 사이트는 다르다. 사용자는 그곳에서 민원을 넣고, 자격을 확인하고, 중요한 신청을 한다. ‘이 사이트를 믿고 내 정보를 맡겨도 되나’ 하는 판단이 무의식적으로 작동하고, 그 판단의 첫 재료가 바로 ‘화면이 정돈돼 보이는가’이다. 색의 일관성은 그래서 단순한 미관이 아니라 ‘신뢰의 토대’다.

둘째, 유지보수 비용과 직결된다. 색을 토큰으로 쓰면, 나중에 브랜드 색을 바꿔야 할 때 토큰 하나만 바꾸면 사이트 전체가 따라 바뀐다. 반대로 페이지마다 색 코드를 직접 박아 뒀다면, 색을 바꾸려고 수백 군데를 일일이 찾아 고쳐야 한다. 채택률이 낮다는 건 곧 ‘앞으로 색 하나 바꾸는 데 며칠씩 걸리는 사이트’라는 뜻이다. 지금의 채택률은 미래의 작업 비용을 미리 알려주는 예고편인 셈이다.

셋째, 접근성과 닿아 있다. 토큰으로 정리된 색은 글자색과 배경색의 명암 대비가 기준에 맞게 미리 검토돼 있는 경우가 많다. 그런데 누군가 그때그때 눈대중으로 색을 박으면, ‘예뻐 보이지만 흐린 회색 위에 더 흐린 회색 글자’ 같은, 저시력 사용자가 읽기 힘든 조합이 슬그머니 끼어든다. 채택률이 낮을수록 이런 ‘검토 안 된 색 조합’이 늘어날 가능성이 커진다. 그래서 색 채택률은 단순한 미관 지표가 아니라, 신뢰·비용·접근성을 한꺼번에 비추는 거울이다.

여기서 오해 하나를 짚고 가자. ‘채택률 100%’가 목표가 아니다. 사이트에는 토큰으로 다 담을 수 없는 색도 있다. 외부에서 가져온 지도, 첨부된 사진, 동영상 썸네일, 외부 위젯의 색까지 100% 토큰화하는 건 현실적이지도 않고 필요하지도 않다. 우리가 끌어올려야 할 건 ‘우리가 직접 통제할 수 있는 영역’의 채택률이다. 버튼, 배경, 글자, 표, 알림창처럼 우리 손으로 만드는 요소들 — 거기서 토큰을 충실히 따르고 있느냐가 핵심이다. 그러니 점검할 때도 ‘우리가 만든 부분’과 ‘외부에서 들어온 부분’을 구분하는 눈이 필요하다.

채택률을 ‘체중계 숫자’에 비유하면 이해가 쉽다. 체중계에 올라가는 일 자체가 살을 빼주진 않는다. 하지만 그 숫자가 있어야 ‘지난달보다 늘었는지 줄었는지’를 알고, 식단을 조일지 운동을 늘릴지 판단할 수 있다. 채택률도 마찬가지다. 채택률을 잰다고 색이 저절로 정돈되는 건 아니지만, 그 숫자가 있어야 ‘우리 색이 좋아지는 중인지 나빠지는 중인지’를 알고 손쓸 시점을 잡는다. 숫자가 없으면 매일 거울만 보다 ‘어, 언제 이렇게 됐지’ 하고 뒤늦게 놀라게 된다. 색의 흐트러짐은 워낙 서서히 진행돼서, 매일 보는 사람은 변화를 잘 못 느낀다. 그래서 ‘느낌’이 아니라 ‘잰 숫자’가 필요한 것이다.

또 하나 분명히 해둘 게 있다. 채택률이 낮다고 해서 ‘디자이너가 일을 못 한 것’이 절대 아니다. 오히려 잘 만든 사이트일수록 시간이 지나며 채택률이 떨어지는 경우가 흔하다. 처음 만들 땐 디자이너가 색을 토큰으로 깔끔히 정리해 두지만, 이후 수년간 수많은 담당자와 외주가 손을 대면서 조금씩 어긋난다. 처음 집을 지을 땐 반듯했어도, 살면서 여기저기 못을 박고 가구를 들이다 보면 흐트러지는 것과 같다. 그러니 채택률이 낮게 나왔다면 ‘누구 탓인가’를 따질 게 아니라, ‘이제 한 번 정리할 때가 됐구나’로 받아들이는 게 건강하다. 색의 흐트러짐은 책임 추궁의 대상이 아니라, 모두가 함께 손볼 ‘집안일’에 가깝다.

마지막으로, 채택률이라는 개념이 ‘색에만’ 쓰이는 게 아니라는 점도 알아두면 좋다. 글꼴에도, 간격에도, 둥근 모서리의 정도에도 똑같이 ‘토큰’이 있고 ‘채택률’이 있다. 오늘은 색을 예로 들지만, 같은 원리가 디자인 시스템 전체에 적용된다. 색의 채택률을 보는 눈을 한번 길러두면, ‘우리 글꼴은 토큰을 따르나’ ‘우리 여백은 정해진 간격 규칙을 지키나’ 같은 질문도 자연스럽게 던지게 된다. 색은 그 모든 ‘일관성 점검’의 가장 쉬운 입문이다. 눈에 가장 잘 띄고, 누구나 ‘이 파랑이랑 저 파랑이 다르네’ 정도는 알아볼 수 있기 때문이다. 그래서 색부터 시작하는 거다.

■ 우리 색을 직접 세어보는 가장 쉬운 방법 — 4단계 자가 점검

이론은 충분하다. 이제 모니터 앞에서 직접 해보자. 전문 도구 없이도, 브라우저만으로 채택률을 ‘대략’ 가늠하는 4단계 방법을 소개한다. 정밀한 수치는 자동 진단에 맡기되, 그 전에 ‘대충 어느 수준인지’ 손으로 느껴보는 워밍업이다.

1단계, 대표 페이지 다섯을 고른다. 사이트 전체를 다 볼 필요는 없다. 사용자가 가장 많이 거치는 페이지 다섯을 고른다. 보통은 메인, 자주 찾는 정보의 목록 페이지, 그 상세 페이지, 대표 신청·예약 페이지, 그리고 검색 결과 페이지다. 이 다섯을 한 브라우저에 탭으로 나란히 열어 둔다. 색의 균열은 한 페이지만 봐서는 잘 안 보이고, 여러 페이지를 ‘오가며’ 봐야 도드라지기 때문이다. 다섯 페이지를 고를 때 요령 하나. ‘메인처럼 공들여 만든 화면’과 ‘안내문처럼 손이 덜 간 화면’을 섞어 고르는 게 좋다. 잘 만든 화면만 보면 ‘우리 색 괜찮네’ 하고 끝나기 쉽지만, 손이 덜 간 화면을 함께 보면 색이 새는 진짜 지점이 드러난다. 가장 정성껏 만든 페이지와 가장 방치된 페이지를 나란히 놓는 것 — 그 대비가 우리 사이트 색 관리의 ‘최고점과 최저점’을 동시에 보여준다.

2단계, ‘파랑 찾기’부터 한다. 채택률 점검의 가장 빠른 입구는 사이트의 ‘대표색’ 하나를 정해 그 색의 일관성을 보는 것이다. 대부분의 공공 사이트는 파랑 계열을 주색으로 쓴다. 다섯 페이지를 오가며 ‘파랑이 쓰인 모든 곳’을 눈으로 훑어보라. 헤더의 파랑, 주요 버튼의 파랑, 링크의 파랑, 강조 박스의 파랑 — 이것들이 ‘같은 파랑’으로 보이는가, 아니면 미묘하게 제각각인가. 같은 파랑이 페이지마다 조금씩 다르게 느껴진다면, 그건 토큰 하나를 공유한 게 아니라 사람마다 다른 파랑을 박았다는 신호다. 이 ‘파랑의 흔들림’ 하나만 봐도 채택률의 대략적인 수준이 가늠된다.

3단계, ‘회색 점검’으로 넘어간다. 의외로 채택률을 가장 많이 깎아 먹는 건 파랑이 아니라 회색이다. 사이트엔 글자색, 테두리색, 비활성 버튼색, 배경 음영 등 회색이 정말 많이 쓰인다. 그런데 회색은 ‘티가 잘 안 나서’ 담당자들이 가장 눈대중으로 박기 쉬운 색이다. 표 하나 만들면서 ‘이 칸 배경은 좀 연한 회색’ 하고 즉석에서 고른 회색이 사이트 곳곳에 미세하게 다른 수십 가지 회색을 만든다. 다섯 페이지에서 ‘글자가 검정이 아닌 회색으로 보이는 곳’ ‘테두리선’ ‘연한 배경 박스’를 유심히 보라. 같은 ‘연한 회색’인데 페이지마다 조금씩 다른 톤이라면, 회색 토큰이 제대로 안 쓰이고 있는 것이다. 회색이야말로 채택률의 숨은 구멍이다. 파랑은 ‘튀는 색’이라 누구나 어긋남을 알아채지만, 회색은 ‘조용한 색’이라 어긋나도 아무도 지적하지 않는다. 그래서 회색은 소리 없이 채택률을 갉아먹는다. 점검할 때 파랑만 보고 ‘우리 색 괜찮네’ 하고 넘어가면, 정작 가장 크게 새는 회색을 통째로 놓친다. 회색을 일부러 더 꼼꼼히 보는 이유가 여기 있다.

4단계, ‘예외 색 세기’로 마무리한다. 마지막으로, 우리 사이트의 주색·회색 계열에서 ‘완전히 벗어난 색’이 몇 군데 보이는지 센다. 갑자기 튀어나오는 형광 초록 버튼, 어디선가 복사해 온 듯한 주황 배너, 외부에서 붙인 위젯의 보라색 — 이런 ‘이 사이트엔 원래 없던 색’이 많을수록 채택률이 낮다는 직접적인 증거다. 다섯 페이지를 돌며 ‘어, 이 색은 왜 여기 있지’ 싶은 색을 손가락으로 꼽아보라. 손가락 다섯 개로 모자라면, 채택률 점검을 본격적으로 해야 할 때가 온 것이다. 다만 여기서 한 가지 구분이 필요하다. ‘예외 색’ 중에는 우리가 통제할 수 없는 것(외부 지도, 첨부 사진, 외부 위젯)도 섞여 있다. 이건 채택률 계산에서 빼고 봐야 한다. 우리가 세야 할 건 ‘우리가 직접 칠한 영역인데도 토큰을 벗어난 색’이다. 버튼, 박스, 글자, 표처럼 우리 손으로 만든 곳에서 튀는 색이 발견됐다면, 그건 명백한 누수다. 외부 요소의 색은 ‘어쩔 수 없는 것’으로 따로 묶고, 우리 영역의 예외만 골라 세는 눈 — 이 구분이 점검의 정확도를 한 단계 높여준다.

이 4단계는 5분에서 10분이면 끝난다. 정밀하진 않지만, 끝나고 나면 ‘우리 색이 잘 정돈된 편인지, 아니면 제각각인지’에 대한 감이 확실히 잡힌다. 그리고 이 감이 중요하다. 나중에 자동 진단으로 ‘채택률 62%’ 같은 정확한 숫자를 받았을 때, 그 숫자가 그냥 숫자가 아니라 ‘아, 아까 그 흔들리던 파랑과 제각각이던 회색이 이 숫자였구나’로 살아 움직이기 때문이다. 도구는 ‘얼마나 새는지’를 알려주지만, ‘어디서 왜 새는지’를 몸으로 아는 건 이렇게 직접 세어본 사람의 몫이다.

이 4단계를 좀 더 정교하게 하고 싶다면, 브라우저에 기본으로 들어 있는 ‘개발자 도구’를 살짝 활용하는 방법도 있다. 어렵게 들리지만, 색만 확인하는 정도라면 누구나 할 수 있다. 화면에서 어떤 요소(버튼, 글자, 배경)에 마우스 오른쪽 버튼을 누르고 ‘검사’를 고르면, 그 요소에 실제로 칠해진 색 코드가 ‘#’으로 시작하는 값으로 보인다. 페이지마다 같아 보이는 파랑의 색 코드를 이렇게 몇 군데 찍어보면, ‘같은 줄 알았던 파랑이 사실 #1F4E79와 #1E4D7A로 미세하게 다르다’는 걸 눈이 아닌 숫자로 확인할 수 있다. 색 코드가 한 글자라도 다르면 그건 ‘다른 색’이고, 토큰을 안 따랐다는 직접적 증거다. 손으로 하는 점검이 ‘느낌’에 머무는 게 답답하다면, 이 작은 확인이 ‘증거’를 보태준다. 물론 페이지 수백 개를 이렇게 일일이 찍어볼 순 없으니, 어디까지나 ‘대표 몇 군데를 확인 사살’하는 용도다.

또 하나 권하는 게 ‘스크린샷 모아보기’다. 다섯 페이지의 같은 부분 — 이를테면 주요 버튼만 — 을 화면 캡처해 한 문서에 죽 붙여 나란히 놓아본다. 한 화면에서 따로따로 볼 땐 다 ‘그 파랑’ 같던 버튼들이, 캡처를 모아 옆으로 늘어놓으면 ‘어, 이건 좀 더 진하네’ ‘이건 살짝 보라끼가 있네’ 하고 차이가 도드라진다. 우리 눈은 색을 ‘기억’으로 비교할 땐 둔하지만, ‘나란히 놓고’ 비교할 땐 꽤 예민해진다. 이 ‘나란히 놓기’가 자가 점검의 정확도를 크게 높여준다. 색의 균열은 떨어뜨려 보면 안 보이고, 붙여 보면 보인다.

그리고 자가 점검을 할 땐 ‘하루 중 같은 시간, 같은 화면’에서 하길 권한다. 모니터는 밝기 설정에 따라, 또 주변 조명에 따라 색이 다르게 보인다. 아침에 본 회색과 저녁에 본 회색이 달라 보일 수 있다. 그래서 점검은 가능하면 일정한 환경에서 하고, 분기마다 반복할 때도 비슷한 조건을 유지하는 게 좋다. 비교의 기준이 흔들리면 ‘좋아졌나 나빠졌나’ 판단도 흔들린다. 사소해 보이지만, 정기 점검의 신뢰도를 지키는 작은 규칙이다.

■ ‘아니오’가 나오는 전형적인 장면들 — 익명 사례로 보는 채택률 누수

여기서는 채택률이 낮은 사이트에서 거의 빠짐없이 발견되는 장면들을 익명으로 정리한다. 특정 기관을 흉보려는 게 아니라, 어디서나 반복되는 ‘전형’을 보여주려는 거다. 규모가 크든 작든, 예산이 많든 적든 이 패턴들은 거의 똑같이 나타난다. 읽으면서 ‘우리도 저런데’ 싶은 게 나와도 자책할 필요 없다. 대부분이 겪는 일이고, 대부분 같은 방법으로 풀어왔다.

첫 번째 장면. A광역지자체의 한 부서가 새 사업 안내 페이지를 외주로 만들었다. 외주 업체는 ‘기관 브랜드 파랑’을 정확한 토큰 값으로 전달받지 못한 채, 기존 페이지를 눈으로 보고 ‘비슷한 파랑’을 골라 작업했다. 결과는 90%쯤 비슷하지만 10%쯤 다른 파랑. 메인에서 그 안내 페이지로 넘어가면, 사용자는 ‘분위기가 살짝 다른 데 들어왔나’ 하는 미묘한 위화감을 느낀다. 한 페이지만 보면 멀쩡하지만, 메인과 나란히 놓으면 ‘같은 사이트인데 색이 미묘하게 따로 논다’가 드러난다. 채택률이 새는 가장 흔한 입구가 바로 이 ‘외주에 토큰 값을 안 넘긴’ 경우다.

두 번째 장면. B공공기관의 콘텐츠 담당자가 공지사항에 표를 하나 올렸다. 표의 머리행을 강조하려고 ‘진한 회색 배경’을 직접 골랐는데, 그게 사이트가 원래 쓰던 머리행 회색과 미세하게 달랐다. 그 담당자는 다음 공지에도, 그다음 공지에도 매번 ‘그때그때 기분에 맞는 회색’을 골랐다. 몇 달 뒤, 공지사항 목록을 죽 내려보면 표마다 머리행 회색이 조금씩 다른 ‘회색 박물관’이 됐다. 회색은 티가 안 나서 아무도 지적하지 않았지만, 채택률 점검 도구는 이 미세한 차이를 전부 ‘서로 다른 색’으로 세어 채택률을 깎는다.

세 번째 장면. ○○시 사이트가 특정 캠페인 기간에 맞춰 메인에 화려한 배너를 띄웠다. 캠페인 색이 워낙 강렬해서, 그 배너 주변 버튼들까지 캠페인 색으로 맞췄다. 문제는 캠페인이 끝난 뒤였다. 배너는 내렸지만, 그때 캠페인 색으로 바꿔 둔 버튼 몇 개가 그대로 남았다. 시간이 지나며 ‘왜 이 버튼만 색이 다르지’ 싶은, 출처를 알 수 없는 색이 사이트에 박제됐다. 이렇게 ‘한때의 예외가 정리되지 않고 눌러앉는’ 경우도 채택률 누수의 단골이다.

네 번째 장면. C기관은 여러 외부 서비스(지도, 통계 위젯, 외부 신청 시스템)를 페이지에 끼워 넣어 쓴다. 이 외부 요소들은 저마다 자기 색을 갖고 들어온다. 지도는 지도대로, 위젯은 위젯대로 색을 칠한다. 우리가 통제할 수 없는 영역이라 채택률 100%는 애초에 불가능하다. 그런데 문제는, 이 외부 요소의 색을 보고 ‘우리도 저기 맞춰볼까’ 하며 주변 우리 영역의 색까지 외부 색에 끌려가는 경우다. 외부 색에 휘둘리지 말고 ‘우리 영역은 우리 토큰을 지킨다’는 경계선을 분명히 긋는 게 중요하다.

다섯 번째 장면. D기관은 ‘디자인 가이드 문서’가 분명히 있었다. PDF로 잘 정리돼 있고 색 코드도 다 적혀 있었다. 그런데 그 문서는 캐비닛 속에, 정확히는 공유 폴더 깊숙한 어딘가에 잠들어 있었다. 새로 온 담당자도, 외주 업체도 그 문서의 존재를 몰랐다. 기준이 ‘있긴 한데 아무도 안 보는’ 상태였던 것이다. 채택률이 낮은 사이트의 상당수는 ‘기준이 없어서’가 아니라 ‘기준이 살아 움직이지 않아서’ 그렇다. 문서로만 존재하는 기준은 시간이 지나면 현실과 따로 논다. 토큰의 진짜 힘은, 기준이 문서가 아니라 ‘실제로 꺼내 쓰는 색 그 자체’로 살아 있을 때 나온다.

이 다섯 장면을 읽으며 한 가지만 기억하자. 채택률을 깎는 건 대형 사고가 아니라, ‘작고 사소해 보이는 결정들’의 누적이다. 표 하나의 회색, 배너 하나의 파랑, 캠페인 한 번의 잔재 — 하나하나는 별것 아니지만 모이면 사이트 전체의 색이 흐트러진다. 그래서 채택률 관리는 ‘큰 결심’이 아니라 ‘작은 습관’의 문제다. 색을 고를 때마다 ‘이거, 정해진 토큰에 있는 색인가?’ 하고 한 번 묻는 습관 — 그 작은 질문 하나가 채택률을 지킨다.

이 다섯 장면에는 공통된 뿌리가 하나 있다. ‘기준이 화면 밖에 있거나, 아예 없거나, 있어도 전달되지 않았다’는 것이다. 첫 번째 장면(외주에 토큰 값 미전달)은 기준이 ‘전달되지 않은’ 경우, 두 번째(즉석 회색)는 기준이 ‘머릿속에만 있는’ 경우, 세 번째(캠페인 잔재)는 ‘예외를 정리하는 규칙이 없는’ 경우, 다섯 번째(잠든 가이드 문서)는 기준이 ‘살아 있지 않은’ 경우다. 표면적 증상은 제각각이지만, 근본 원인은 ‘모두가 같은 색을 같은 방식으로 꺼내 쓰게 만드는 장치’의 부재로 모인다. 그래서 이 다섯 장면을 다 한꺼번에 잡는 방법은 의외로 하나다. 색을 ‘이름이 붙은 토큰’으로 정리해, 그 토큰을 ‘실제로 꺼내 쓰는 색 그 자체’로 살려두는 것. 문서가 아니라 현실에서 살아 움직이는 기준 말이다.

내 사이트와 비교하며 한 가지만 더 해보자. 위 다섯 장면 중 ‘우리에게도 있다’ 싶은 게 몇 개인지 손가락으로 세어보라. 하나도 없다면 축하할 일이지만, 솔직히 그런 경우는 드물다. 두세 개는 대부분 짚인다. 그런데 여기서 중요한 건 ‘몇 개가 있느냐’가 아니라 ‘있다는 걸 알아챘느냐’다. 알아챈 문제는 고칠 수 있지만, 못 본 문제는 계속 자란다. 그러니 사례에서 우리 모습을 발견했다면, 그건 부끄러운 게 아니라 ‘점검이 제대로 됐다’는 증거다. 발견은 개선의 시작이지 실패의 증거가 아니다.

사례를 읽을 때 한 가지 더 당부하자면, ‘우리는 저 정도는 아니다’라고 성급히 넘기지 말기를 바란다. 자기 사이트의 문제는 늘 ‘남의 것보다 가벼워 보인다’. 매일 보던 화면이라 익숙해진 탓이다. 그래서 사례를 읽을 때는 ‘우리는 아니겠지’가 아니라 ‘혹시 우리도?’ 하는 마음으로, 실제로 우리 사이트의 해당 페이지를 열어 색 코드를 찍어 확인해보는 게 좋다. 위 사례들은 특정 기관의 흠이 아니라 ‘공공웹 어디에나 있는 전형’이라, 십중팔구 우리 사이트에서도 비슷한 장면을 찾게 될 것이다. 못 찾는 게, 다시 말해 ‘안 보이는 게’ 더 위험하다.

■ 발견한 문제를 어떤 순서로 고칠 것인가 — 채택률 끌어올리기 실행법

점검으로 ‘아니오’를 잔뜩 찾았다면, 이제 고칠 차례다. 그런데 여기서 가장 흔한 실수가 ‘모든 색을 한 번에 다 고치려는 것’이다. 페이지 수백 개의 색을 전부 토큰으로 바꾸는 일은 끝이 안 보이고, 중간에 지쳐 ‘역시 무리’라며 통째로 포기하게 된다. 채택률은 한 번에 100을 만드는 게 아니라, 단계적으로 수렴시키는 것이다. 현실적인 순서를 권한다.

1순위, ‘앞으로 만드는 것부터’ 지킨다. 가장 먼저 할 일은 기존 페이지 수정이 아니라, ‘오늘 이후 새로 만드는 모든 것은 토큰을 따른다’는 약속을 세우는 것이다. 새 페이지, 새 배너, 새 표 — 앞으로 추가되는 모든 것이 토큰을 지키기 시작하면, 채택률은 시간이 갈수록 ‘저절로’ 올라간다. 반대로 이 약속 없이 기존 것만 고치면, 고치는 속도보다 새로 어긋나는 속도가 빨라 밑 빠진 독에 물 붓기가 된다. 그래서 1순위는 ‘과거 청소’가 아니라 ‘미래 차단’이다. 새는 곳을 먼저 막아야 청소가 의미를 갖는다.

2순위, ‘가장 자주 보이는 곳’부터 고친다. 기존 페이지를 정리할 때는 ‘방문자가 가장 많이 보는 색’부터 손댄다. 메인의 헤더 파랑, 모든 페이지에 깔리는 주요 버튼색, 사이트 전역의 기본 글자색·링크색 — 이런 ‘전역 요소’의 색은 한 번 토큰으로 바로잡으면 사이트 전체에 효과가 퍼진다. 반대로 구석진 안내 페이지의 색 하나를 고치는 건 ‘티는 안 나고 품은 똑같이 드는’ 비효율이다. 같은 노력이면 많은 사람이 보는 곳, 모든 페이지에 영향을 주는 곳부터. 이게 채택률을 가장 빠르게 끌어올리는 길이다. 여기엔 ‘공통으로 쓰이는 부분일수록 토큰 한 번 바로잡기의 파급이 크다’는 단순한 원리가 깔려 있다. 헤더나 버튼처럼 모든 페이지가 공유하는 요소는, 그 색 하나만 토큰으로 정리해도 수백 페이지가 한꺼번에 정돈된다. 반대로 한 페이지에만 있는 색은 고쳐봐야 그 페이지 하나만 좋아진다. 그러니 정리 순서는 ‘넓게 깔린 것부터, 좁게 박힌 것은 나중에’가 원칙이다. 한정된 시간과 인력을 가장 큰 효과가 나는 곳에 먼저 투입하는 것 — 그게 현실적인 개선의 지혜다.

3순위, ‘회색을 정리’한다. 앞서 회색이 채택률의 숨은 구멍이라고 했다. 전역 요소를 잡았다면, 그다음은 사이트 곳곳에 흩어진 ‘제각각 회색’을 손볼 차례다. 글자 회색은 몇 가지, 테두리 회색은 몇 가지, 배경 회색은 몇 가지로 ‘정해진 토큰 회색’에 수렴시킨다. 회색은 종류가 많아 보이지만, 실제 사이트에 필요한 회색은 생각보다 적다. 글자용 진한 회색 한둘, 보조 텍스트용 중간 회색 하나, 테두리용 연한 회색 하나, 배경용 아주 연한 회색 하나 정도면 대부분의 화면을 덮는다. 수십 가지로 흩어진 회색을 이 몇 가지로 모으는 것만으로 채택률이 눈에 띄게 오른다. 회색 정리가 효과 대비 가장 ‘남는 장사’인 이유는, 회색이 워낙 많이 쓰이는 만큼 그걸 토큰으로 모으면 채택률 숫자가 크게 움직이기 때문이다. 게다가 회색은 글자 가독성과도 직결돼서, 흐린 배경 위에 흐린 회색 글자가 떠 있던 페이지가 정리되면 저시력 사용자의 읽기 편의까지 함께 좋아진다. 한 번의 정리로 채택률과 접근성을 동시에 챙기는 셈이다. 그러니 시간이 빠듯하다면, 전역 요소 다음으로 회색 정리에 우선순위를 두길 권한다.

4순위, ‘예외 색을 제거’한다. 마지막으로, 점검에서 ‘이 색은 왜 여기 있지’ 싶었던 출처 불명의 색들을 정리한다. 캠페인 잔재, 외주가 박은 튀는 색, 한때의 실험이 박제된 색 — 이것들을 하나씩 ‘우리 토큰 중 가장 가까운 색’으로 바꾸거나, 정말 필요한 색이면 ‘새 토큰으로 정식 등록’한다. 여기서 중요한 건, 모든 예외를 무작정 없애는 게 아니라 ‘필요한 예외는 토큰으로 승격시키는’ 유연함이다. 사이트가 자라면 새 색이 필요해질 때도 있다. 그럴 땐 즉석에서 박지 말고, 토큰 목록에 정식으로 추가해 ‘이름 붙은 색’으로 만든다. 그래야 다음 사람도 같은 색을 꺼내 쓸 수 있다. 예외 색을 정리할 때 한 가지 더 챙기면 좋은 건 ‘왜 그 색이 생겼는지’를 짧게 적어두는 것이다. ‘이 주황은 작년 봄 캠페인 잔재’ ‘이 보라는 외부 위젯 기본색’처럼 출처를 메모해두면, 다음 점검 때 같은 색을 두고 또 ‘이거 뭐였지’ 하며 헤매지 않는다. 색의 ‘이력’을 남기는 셈인데, 이게 쌓이면 우리 사이트만의 작은 색 관리 노하우가 된다.

이 네 순서를 따르면, 채택률은 무리한 ‘대공사’ 없이도 분기마다 꾸준히 오른다. 핵심은 ‘완벽’이 아니라 ‘방향’이다. 오늘 62%였던 채택률이 다음 분기에 70%, 그다음에 78%로 오르는 추세 — 그 우상향 곡선 자체가 사이트가 건강해지고 있다는 증거다. 100%에 집착하다 지쳐 포기하느니, 매 분기 몇 퍼센트씩 꾸준히 올리는 쪽이 결국 더 멀리 간다.

한 가지 더, 고치는 작업을 혼자 떠안지 말자. 채택률을 깎는 게 ‘사이트에 손대는 모든 사람’이듯, 끌어올리는 것도 함께여야 한다. 콘텐츠 담당자에게는 ‘표나 강조 박스를 만들 때 새 색을 고르지 말고, 정해진 회색·파랑 중에서 골라 쓰라’고 안내한다. 외주 업체에는 계약서나 작업 지시서에 ‘색은 반드시 전달받은 토큰 값을 사용한다’를 명문화한다. 이 두 가지만 자리 잡아도 채택률 누수의 8할은 막힌다. 결국 채택률 관리는 기술 문제이기 전에 ‘약속과 소통’의 문제다.

한 가지 흔한 걱정을 미리 풀어주자. ‘색을 토큰으로 통일하면 우리 사이트가 다 똑같이 밋밋해지는 거 아니냐’는 우려다. 정반대다. 토큰은 ‘쓸 수 있는 색을 정해두는 것’이지 ‘한 가지 색만 쓰라는 것’이 아니다. 잘 짜인 토큰 체계엔 진한 파랑부터 연한 파랑, 강조용 색, 경고용 색, 여러 단계의 회색까지 충분히 풍부한 색이 다 들어 있다. 화가가 정해진 팔레트 안에서도 얼마든지 다채로운 그림을 그리듯, 토큰이라는 팔레트 안에서도 표현은 자유롭다. 오히려 토큰이 없을 때가 더 위험하다. 무한정 색을 쓸 수 있으니 ‘선택의 자유’가 있는 것 같지만, 실제로는 매번 ‘어떤 색을 쓸지’ 고민하느라 시간을 쓰고, 그 결과물이 제각각이 된다. 정해진 팔레트는 자유를 빼앗는 게 아니라, ‘색 고민’이라는 불필요한 짐을 덜어 정작 중요한 콘텐츠에 집중하게 해준다.

또 자주 나오는 질문이 ‘그럼 새로운 디자인 시도는 못 하느냐’이다. 할 수 있다. 다만 방식이 다르다. 즉석에서 화면에 색을 박는 게 아니라, ‘이런 색이 필요하다’는 제안을 모아 팔레트(토큰) 자체를 정식으로 넓히는 것이다. 새 색이 토큰으로 정식 등록되면, 그 색은 이제 ‘아무나 즉흥적으로 쓴 색’이 아니라 ‘모두가 공유하는 약속된 색’이 된다. 이렇게 하면 새로움과 일관성을 동시에 얻는다. 변화는 막지 않되, 그 변화가 ‘기록되고 공유되게’ 만드는 것 — 이게 토큰 체계가 일관성을 지키면서도 굳지 않는 비결이다. 사이트는 계속 자라야 하고, 토큰 체계도 그에 맞춰 함께 자란다.

마지막으로, 채택률을 끌어올리는 작업에서 ‘완료’라는 종착점은 없다는 걸 받아들이자. 색의 일관성은 한 번 정리하면 영원히 유지되는 게 아니라, 끊임없이 관리해야 하는 ‘상태’다. 정원과 비슷하다. 한 번 잘 가꿔놔도 손을 놓으면 잡초가 자란다. 그러나 이걸 부담으로 느낄 필요는 없다. 앞으로 만드는 것부터 토큰을 지키는 습관과, 분기에 한 번 채택률을 재는 루틴 — 이 두 가지만 자리 잡으면 관리는 거의 ‘자동’에 가까워진다. 새는 곳을 막아두면, 정원은 큰 손질 없이도 대체로 깔끔하게 유지된다. 가끔 자라는 잡초만 분기 점검 때 뽑아주면 된다.

■ 점검 결과를 기록하고 다음 분기로 이어가는 법

점검의 가치는 ‘발견’이 아니라 ‘기록’에서 완성된다. 오늘 4단계 자가 점검과 사례 대조로 ‘우리 사이트 색의 현재 상태’에 대한 감을 잡았다면, 그걸 반드시 적어두자. 며칠만 지나도 ‘분명 회색이 제각각이었는데 어디였더라’가 된다. 거창한 양식은 필요 없다. 메모장에 다음 세 가지만 적으면 충분하다.

첫째, ‘오늘의 대략 채택률 느낌’. 정확한 숫자가 아니어도 좋다. ‘파랑은 대체로 일관, 회색이 제각각, 예외 색 6군데 발견’처럼 한두 줄로 현재 상태를 적는다. 이게 다음 분기에 ‘좋아졌나 나빠졌나’를 비교할 기준점이 된다.

둘째, ‘발견한 누수 지점 목록’. ‘공지사항 표 머리행 회색 제각각’ ‘새 사업 안내 페이지 파랑 미묘하게 다름’ ‘이벤트 잔재 주황 버튼 2개’처럼, 어디서 무엇이 새는지를 한 줄씩 적는다. 이 목록이 그대로 ‘고칠 일 목록(작업 지시서)’이 된다. 점검과 수정 사이의 다리는 이 기록이다.

셋째, ‘다음 점검 날짜’. 분기에 한 번, 같은 다섯 페이지로 같은 4단계를 반복하기로 날을 정해 적어둔다. 캘린더에 반복 일정으로 걸어두면 더 좋다. 채택률은 ‘추세’로 봐야 의미가 있고, 추세는 ‘같은 방법으로 반복해 재야’ 보인다. 매번 다른 페이지, 다른 방식으로 재면 비교가 안 된다. 그리고 점검을 ‘담당자 한 사람의 일’로 두지 말고, 가능하면 팀의 공유 문서에 기록을 쌓아가길 권한다. 담당자는 바뀌기 마련이고, 사람이 바뀌면 그동안의 점검 기록도 함께 사라지기 쉽다. 공유 문서에 분기별 채택률과 누수 목록이 남아 있으면, 새 담당자가 와도 ‘우리 사이트 색이 어떤 흐름으로 변해왔는지’를 한눈에 이어받을 수 있다. 기록은 개인이 아니라 ‘조직’에 남아야 오래간다.

이렇게 기록을 남기면, 자가 점검이 ‘일회성 이벤트’에서 ‘우리 기관의 정기 점검 루틴’으로 자리 잡는다. 그리고 이 루틴이 쌓이면, 어느 순간 ‘우리 사이트 색이 1년 전보다 확실히 정돈됐다’고 데이터로 말할 수 있게 된다. 막연한 ‘좋아진 것 같아요’가 아니라, 분기별 채택률 추이라는 근거를 들고서.

물론 손으로 하는 자가 점검에는 명확한 한계가 있다. 우리 눈은 미세하게 다른 회색 수십 가지를 정확히 구분하지 못하고, 페이지 수백 개를 일일이 다 볼 수도 없으며, ‘채택률 62%’ 같은 정확한 숫자를 손으로 뽑아낼 수도 없다. 자가 점검은 ‘빠르고 거칠게’ 전체 윤곽을 잡는 일이고, 정밀한 수치 산출은 도구의 몫이다. 둘은 대체 관계가 아니라 역할 분담이다. 자가 점검으로 감을 잡고, 정밀 진단으로 확정하는 순서 — 오늘 글이 권하는 흐름이 바로 이것이다.

■ 자가 점검의 한계를 넘어 — 정밀 채택률 측정은 무엇이 다른가

손으로 하는 점검이 ‘대략 어느 수준인가’를 알려준다면, 정밀 측정은 ‘정확히 몇 퍼센트이고, 어느 색이, 어느 페이지에서, 몇 번 어긋났는가’까지 짚어준다. 이 차이가 왜 중요한지 짚어보자. 자가 점검과 정밀 측정은 대체 관계가 아니라 ‘짝’이다. 자가 점검 없이 정밀 측정만 받으면 ‘숫자는 나왔는데 그게 무슨 의미인지 모르는’ 상태가 되고, 정밀 측정 없이 자가 점검만 믿으면 ‘눈에 안 보이는 깊은 누수’를 놓친다. 둘을 함께 써야 ‘감과 근거’가 모두 갖춰진다.

첫째, 사람 눈은 ‘미세한 회색의 차이’를 못 잡는다. 앞서 회색이 채택률의 숨은 구멍이라고 했는데, 정작 그 미세한 차이를 사람 눈으로 구분하기란 거의 불가능하다. ‘연한 회색’ 두 가지가 아주 조금 다를 때, 우리는 ‘둘 다 그냥 연한 회색’으로 본다. 하지만 색을 코드 단위로 비교하는 도구는 이 둘을 ‘명백히 다른 두 색’으로 정확히 세어낸다. 그래서 정밀 측정을 돌려보면, 사람 눈으로는 ‘대체로 일관’이라 느꼈던 회색이 실제로는 수십 가지로 흩어져 있었다는 사실이 드러나곤 한다. 게다가 사람 눈은 ‘피로’의 영향도 받는다. 같은 회색을 오래 보면 점점 둔감해져, 처음엔 다르게 보이던 색도 나중엔 ‘다 비슷해 보이는’ 착각에 빠진다. 도구는 지치지 않으니 첫 번째 색이든 천 번째 색이든 똑같은 기준으로 정확히 잰다. 이 ‘일관된 엄격함’이 사람과 도구의 결정적 차이다.

둘째, ‘전수 점검’이 가능하다. 자가 점검은 대표 페이지 다섯을 보는 게 한계지만, 사이트엔 수십, 수백, 때론 수천 페이지가 있다. 정작 색이 제일 많이 어긋나는 곳은 담당자가 잘 안 들어가는 ‘오래된 구석 페이지’일 때가 많다. 정밀 측정은 이런 페이지까지 빠짐없이 훑어 ‘사이트 전체의 진짜 채택률’을 낸다. 다섯 페이지만 보고 ‘우리 괜찮네’ 한 것이, 전수 점검에선 전혀 다른 결과로 나오는 경우가 적지 않다. 특히 공공 사이트는 수년에 걸쳐 여러 사업과 캠페인 페이지가 쌓이면서, 메인은 깔끔해도 깊숙한 안내 페이지로 들어갈수록 색이 흐트러지는 경향이 있다. 사용자는 검색을 통해 그 깊숙한 페이지로 ‘바로’ 들어오기도 하므로, 구석 페이지의 색이라고 무시할 수 없다. 그 페이지가 누군가에겐 우리 사이트의 ‘첫 화면’일 수 있기 때문이다. 전수 점검은 이렇게 ‘안 보이던 구석’까지 비추어, 우리가 평소 못 보던 사각지대를 드러낸다.

셋째, ‘근거가 있는 숫자’가 나온다. 윗선에 보고하거나 예산을 요청할 때, ‘제 느낌엔 색이 좀 어수선합니다’로는 설득이 안 된다. ‘색 토큰 채택률이 62%이고, 미준수 색이 N가지, 가장 많이 어긋난 페이지는 어디어디입니다’라는 근거 있는 숫자가 있어야 움직인다. 정밀 측정은 막연한 인상을 ‘보고 가능한 데이터’로 바꿔준다.

넷째, ‘변화를 추적’할 수 있다. 자가 점검은 그때그때의 느낌이라 ‘지난번보다 나아졌는지’를 정확히 비교하기 어렵다. 하지만 정밀 측정으로 매 분기 같은 방식의 숫자를 뽑으면, ‘1분기 62% → 2분기 68% → 3분기 74%’ 같은 추이가 선으로 그려진다. 이 추이선은 그 자체로 강력한 보고 자료다. 개선 활동이 실제로 효과를 내고 있다는 걸 누구도 부정할 수 없는 그래프로 보여주기 때문이다. 반대로 추이선이 내려가고 있다면, 어디선가 새로운 누수가 생겼다는 조기 경보가 된다. 느낌으로는 절대 잡아낼 수 없는 신호다.

여기서 ViewCheck 이야기를 잠깐 하려 한다. 오늘 소개한 자가 점검은 ‘감을 잡는’ 단계이고, 그다음 ‘정확히 재는’ 단계를 도구가 맡는다. ViewCheck는 공공 사이트를 KRDS 기준으로 자동 진단하는 서비스다. 색을 다루는 부분으로 보면, 디자인 시스템(DS) 영역에서 사이트가 실제로 쓰는 색을 토큰 기준과 대조해 ‘디자인 토큰 채택률’을 수치로 보여준다. 사람 눈으로는 놓치는 미세한 회색의 차이, 구석 페이지의 어긋난 색까지 코드 단위로 비교해 ‘정확히 몇 퍼센트가 토큰을 따르고, 어디서 새고 있는지’를 짚어준다.

진단을 받는 방법도 간단하다. 우리 기관 사이트 주소(URL) 하나만 넣으면 된다. 별도의 설치나 복잡한 설정 없이, 사이트를 자동으로 둘러보며 색을 비롯한 여러 항목을 점검하고 결과를 화면으로 보여준다. 색 부분은 디자인 시스템 탭의 ‘디자인 토큰 채택률’에서 확인할 수 있는데, 사이트가 실제로 쓴 색들이 토큰 기준과 얼마나 일치하는지를 한눈에 보여준다. 분석이 끝나면 화면 상단에 점수 카드가 뜨는데, 여기서 우리 사이트가 영역별로 어느 수준인지 빠르게 가늠할 수 있다. 오늘 손으로 세어본 ‘대략의 감’을, 이 점수 카드의 정확한 숫자와 맞춰보면 점검의 신뢰도가 한층 올라간다.

그리고 ViewCheck가 보는 건 색 하나만이 아니다. KRDS 846규칙 — 디자인 시스템 120개(DS), 컴포넌트 446개(CP), 기본 패턴 108개(BP), 서비스 패턴 172개(SP) — 전체를 한 번에 점검한다. 색 토큰은 그 846규칙 중에서도 디자인 시스템(DS)의 핵심 갈래다. 색이 일관되는지를 보는 동시에, 그 위에 올라가는 버튼·입력칸 같은 부품(CP)이 제대로 만들어졌는지, 신청·검색 같은 흐름(BP·SP)이 매끄러운지까지 함께 본다. 거기에 행정안전부 「전자정부 웹사이트 품질관리 지침」의 7대 영역(호환성·접근성·개방성·접속성·편의성·효율성·신뢰성)과 웹접근성 KWCAG 33항목까지 — 색의 일관성을 사이트 전체 품질이라는 큰 그림 속에서 진단한다. 색은 그 그림의 ‘바탕’이라, 색이 정돈되면 그 위의 많은 항목이 함께 좋아진다.

마지막으로 한 가지 더. 자동 진단 결과지를 처음 받아 든 담당자들이 가장 흔히 하는 말이 ‘숫자는 많은데 뭘 봐야 할지 모르겠다’이다. 그런데 오늘처럼 직접 파랑을 찾아보고 회색을 세어본 경험이 있으면, 같은 결과지가 다르게 읽힌다. ‘채택률 62%’라는 숫자가 ‘아, 아까 흔들리던 그 파랑, 제각각이던 그 회색이 이거였구나’로 살아 움직인다. 도구는 ‘무엇이 문제인지’를 정확히 알려주지만, 그 문제가 ‘왜 문제인지’를 아는 건 결국 사람의 몫이다. 오늘 자가 점검은 바로 그 ‘왜’를 몸으로 익히는 과정이었다. 그러니 자동 진단을 돌리기 전에 오늘 배운 4단계를 먼저 해보길 권한다. 감을 잡고 도구를 만나면, 같은 결과지에서 훨씬 많은 걸 읽어낼 수 있다.

■ 오늘부터 바로 적용하는 세 가지 습관

지금까지 ‘재고, 사례를 보고, 고치고, 기록하는’ 큰 흐름을 봤다. 그런데 점검과 개선이 일회성 행사로 끝나지 않으려면, 일상에 녹아드는 ‘작은 습관’으로 바뀌어야 한다. 거창한 프로젝트가 아니라, 오늘 당장 시작할 수 있는 세 가지 습관을 권한다. 이 세 가지만 몸에 붙으면, 채택률은 따로 관리하지 않아도 서서히 오른다.

첫째, ‘색을 고를 땐 먼저 물어보는’ 습관이다. 표를 만들든, 박스를 강조하든, 버튼을 새로 만들든 — 색을 정할 때마다 0.5초만 멈춰 ‘이거, 우리가 정해둔 색 중에 있나?’ 하고 자문하는 것이다. 답이 ‘있다’면 그걸 꺼내 쓰고, ‘모르겠다’면 즉석에서 새 색을 박는 대신 디자인 담당이나 가이드를 확인한다. 이 짧은 멈춤 하나가 ‘제멋대로 색’이 사이트에 스며드는 걸 입구에서 막는다. 채택률이 새는 건 대단한 결정이 아니라 ‘별생각 없이 고른 색’의 누적이라고 했다. 그 ‘별생각 없음’ 자리에 ‘한 번 묻기’를 끼워 넣는 것 — 이게 가장 강력한 습관이다. 처음엔 의식적으로 멈춰야 하지만, 몇 주만 지나면 색을 고를 때 자동으로 ‘토큰에 있나?’부터 떠오르게 된다.

둘째, ‘새 페이지를 올리기 전 한 번 비교하는’ 습관이다. 새로 만든 페이지를 공개하기 직전, 그 페이지를 기존 메인 페이지와 나란히 띄워 ‘색이 자연스럽게 이어지는지’ 30초만 눈으로 확인한다. 파랑이 같은 파랑인지, 회색이 튀지 않는지, 어디서 갑자기 낯선 색이 나오지 않는지. 이 30초 점검은 ‘공개 후에 발견해 고치는 것’보다 비교할 수 없이 싸다. 한 번 공개된 색은 시간이 지날수록 ‘원래 그랬던 색’으로 굳어 손대기 어려워진다. 그러니 공개 ‘전’이 색을 바로잡을 가장 좋은, 어쩌면 마지막 타이밍이다. 외주에 맡긴 페이지일수록 이 비교를 꼭 하길 권한다. 외주는 우리 사이트의 색 맥락을 우리만큼 알지 못하기 때문이다.

셋째, ‘분기에 한 번 다 같이 재보는’ 습관이다. 개인의 습관을 넘어, 팀 차원의 정기 점검을 분기 일정에 박아두는 것이다. 분기마다 같은 대표 페이지 다섯으로 같은 4단계 자가 점검을 돌리고, 가능하면 자동 진단으로 정확한 채택률 숫자까지 뽑아 ‘지난 분기 대비 올랐나 내렸나’를 함께 본다. 혼자 하면 미뤄지지만, 일정으로 묶고 여럿이 함께 보면 빠지지 않는다. 그리고 ‘우리 채택률이 지난 분기 65%에서 이번 71%로 올랐다’는 작은 성취를 팀이 함께 확인하는 경험은, 색 관리를 ‘귀찮은 잔소리’가 아니라 ‘함께 가꾸는 보람’으로 바꿔준다. 숫자가 오르는 걸 눈으로 보면 사람은 계속하고 싶어진다.

이 세 습관은 어렵지도, 시간이 많이 들지도 않는다. 색 고를 때 0.5초, 새 페이지 공개 전 30초, 분기에 한 번 10분. 다 합쳐도 얼마 안 되는 시간이다. 그런데 이 작은 시간들이 쌓여, ‘색 하나 바꾸는 데 며칠 걸리던 사이트’를 ‘토큰 하나만 손대면 전체가 따라오는 사이트’로 바꾼다. 그리고 무엇보다, 사용자가 우리 사이트에 들어선 0.1초의 첫인상을 ‘여기 정돈됐다, 믿을 만하다’로 만든다. 작은 습관이 만드는 큰 차이다.

【 마무리 】

오늘 이야기를 짧게 정리하자. 색상 토큰 채택률은 ‘우리가 정한 색을 우리가 얼마나 잘 지키고 있나’를 보여주는 숫자다. 이 숫자 하나가 사용자의 신뢰, 앞으로의 유지보수 비용, 그리고 접근성까지 한꺼번에 비춘다. 그래서 디자인 담당이 아니어도, 사이트에 손대는 사람이라면 누구나 ‘우리 색이 지금 어떤 상태인지’를 가늠하는 감각을 갖출 가치가 있다.

점검은 어렵지 않다. 대표 페이지 다섯을 나란히 열고, 파랑의 일관성을 보고, 숨은 회색을 세고, 출처 불명의 예외 색을 꼽아본다. 5분에서 10분이면 ‘우리 색이 잘 정돈된 편인지 제각각인지’ 감이 잡힌다. 그리고 ‘아니오’를 찾았다면, 한 번에 다 고치려 들지 말고 — 앞으로 만드는 것부터 토큰을 지키게 하고, 가장 자주 보이는 곳부터, 회색을 정리하고, 예외 색을 처리하는 순서로 — 분기마다 채택률을 조금씩 끌어올리면 된다. 완벽보다 방향, 한 번의 대공사보다 꾸준한 우상향.

기억할 건 하나다. 채택률을 깎는 것도, 끌어올리는 것도 ‘작고 사소한 습관’의 누적이다. 색을 고를 때마다 ‘이거, 정해진 토큰에 있는 색인가?’ 하고 한 번 묻는 습관 — 그 작은 질문이 사이트의 색을 지킨다. 그리고 그 점검 결과를 메모로 남겨 분기마다 같은 방법으로 반복하면, 어느 순간 ‘우리 사이트 색이 1년 전보다 확실히 정돈됐다’고 데이터로 말할 수 있게 된다.

그리고 잊지 말자. 색은 디자인 시스템의 ‘입구’이지 전부가 아니다. 색의 일관성을 보는 눈을 길러두면, 자연스럽게 글꼴의 일관성, 간격의 규칙성, 버튼·입력칸 같은 부품의 통일성까지 보이기 시작한다. 오늘 색 채택률을 점검한 경험은 그 자체로도 가치 있지만, 더 나아가 ‘우리 사이트 전체의 일관성’을 따져보는 첫걸음이기도 하다. 색이 정돈되기 시작하면, 그 위에 올라가는 모든 것이 따라서 정돈되기 쉬워진다. 바탕이 반듯해야 그 위의 그림도 반듯하게 그려진다.

오늘 점검에서 ‘아니오’가 많이 나왔다고 너무 무겁게 받아들이지 말자. 앞서 말했듯, 잘 만든 사이트도 시간이 지나면 색이 흐트러진다. 그건 누구의 잘못도 아니고, 거의 모든 공공 사이트가 똑같이 겪는 일이다. 중요한 건 ‘흐트러졌다는 걸 알아챘고, 이제 정리할 방향을 안다’는 것이다. 거기까지 왔다면 이미 절반은 해결된 셈이다. 나머지 절반은 오늘 배운 순서대로, 서두르지 않고 분기마다 조금씩 채워가면 된다. 색의 정돈은 단거리 경주가 아니라, 매 분기 한 걸음씩 나아가는 오래달리기다.

색을 다루는 일은 결국 ‘사용자를 위한 일’이라는 걸 마지막으로 짚어두고 싶다. 토큰을 지키고 채택률을 올리는 건 디자인 욕심이나 보고용 숫자 채우기가 아니다. 색이 일관된 사이트는 사용자가 길을 덜 잃고, 버튼을 더 쉽게 찾고, 글자를 더 편하게 읽고, ‘이 사이트는 믿을 만하다’고 느낀다. 채택률이라는 숫자 뒤에는 늘 ‘우리 사이트를 쓰는 사람들의 편의’가 있다. 그 사실을 잊지 않으면, 색 정리는 귀찮은 잔업이 아니라 보람 있는 서비스 개선으로 다가온다.

손으로 하는 자가 점검으로 감을 잡았다면, 이제 정확한 숫자로 확인할 차례다. 사람 눈이 놓치는 미세한 회색의 차이, 평소 안 들어가는 구석 페이지의 어긋난 색까지 — 우리 사이트의 색 토큰 채택률이 정확히 몇 퍼센트이고 어디서 새고 있는지 궁금하다면, krds.viewcheck.co.kr에서 진단을 받아볼 수 있다. URL 하나만 넣으면 디자인 시스템 탭에서 ‘디자인 토큰 채택률’을 수치로 확인할 수 있고, 색뿐 아니라 KRDS 846규칙 전체를 기준으로 우리 사이트가 어디쯤 와 있는지 한눈에 보인다. 오늘 직접 세어본 그 감이, 정확한 숫자를 만나는 순간 훨씬 또렷해질 것이다. 거창한 개편 계획을 세우기 전에, 먼저 ‘지금 우리 색이 얼마나 정돈돼 있는지’부터 알아보자. 모든 정리는 ‘현재를 아는 것’에서 시작한다.

이번 한 주, 색상 토큰이라는 한 가지 주제를 월·수·금 세 번에 나눠 다뤘다. 월요일엔 ‘토큰이 무엇인가’를, 수요일엔 ‘토큰 없이 가면 어떻게 어긋나는가’를, 그리고 오늘 금요일엔 ‘우리 사이트의 토큰 채택률을 어떻게 점검하고 끌어올리는가’를 봤다. 개념에서 시작해 문제의식을 거쳐 실천법까지, 한 바퀴를 돈 셈이다. 이제 남은 건 읽은 걸 ‘해보는’ 것뿐이다. 오늘 당장 우리 사이트 다섯 페이지를 나란히 열어 파랑과 회색을 세어보는 것 — 그 5분이 ‘우리 사이트를 제대로 보기’의 첫걸음이 된다. 작게 시작해도 좋다. 시작이 곧 절반이다.

키워드/태그: #KRDS #공공웹 #디자인토큰 #색상토큰 #토큰채택률 #디자인시스템 #디자인일관성 #웹접근성 #전자정부 #공공웹품질 #자가점검 #ViewCheck

ViewCheck — KRDS 자동 준수 검증 서비스
krds.viewcheck.co.kr