토큰 도입 첫걸음 체크리스트

토큰 도입 첫걸음 체크리스트

---

ViewCheck 마케팅 홍보 — 2026년 9월 · W1 디자인 토큰이란 (9/7~9/13)

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

【 공감·문제제기 】

이번 주 월요일엔 디자인 토큰이라는 게 도대체 뭔지, 수요일엔 토큰이 없을 때 사이트가 어떻게 조금씩 어긋나는지를 다뤘다. 오늘은 가장 손에 잡히는 이야기다. ‘그래서 우리 기관에 토큰을 어떻게 들이느냐’, 그것도 디자인 전문가가 아닌 담당자가 ‘월요일 아침에 자리에 앉아 당장 뭘 해야 하는지’를 단계별로 짚어보려 한다.

솔직히 말하면, 토큰이라는 단어 자체가 진입 장벽이다. ‘토큰’이라고 하면 무슨 블록체인 같은 거 떠올리는 분도 있고, 개발팀이 쓰는 어려운 용어처럼 들려서 ‘이건 우리가 건드릴 영역이 아니다’ 하고 지레 손을 떼는 경우도 많다. 그런데 정작 토큰의 정체는 허무할 만큼 단순하다. ‘우리 기관이 쓰는 파랑은 정확히 이 색이다’ ‘본문 글자 크기는 16이다’ ‘요소 사이 기본 간격은 8단위다’ — 이렇게 ‘우리는 이걸 쓴다’고 한 번 정해서, 그 약속에 이름을 붙여 모두가 같이 꺼내 쓰게 만든 것. 그게 전부다. 거창한 기술이 아니라 ‘약속을 적어두는 일’에 가깝다.

그래서 오늘 글은 개념 설명보다 실행에 무게를 둔다. 읽고 나서 ‘아 그렇구나’로 끝나는 게 아니라, 자리로 돌아가 체크리스트를 펴 들고 ‘우리는 지금 몇 단계쯤 와 있지’를 가늠하고, ‘그럼 다음 한 걸음은 이거구나’를 정할 수 있게 만드는 게 목표다. 그래서 항목 하나하나를 ‘예/아니오’로 답할 수 있게 다듬었고, ‘아니오’가 나왔을 때 무엇부터 손대면 되는지도 함께 적었다.

미리 한 가지 안심시켜 두고 싶다. 토큰 도입은 ‘전면 개편’이 아니다. 사이트를 다 뜯어고치고, 외주를 새로 부르고, 예산을 따로 잡아야 하는 큰일이 아니라는 뜻이다. 오히려 그 반대다. 토큰은 ‘이미 흩어져 있는 결정들을 한곳에 모으는’ 정리 작업에 가깝다. 우리 사이트엔 이미 색이 있고 글꼴이 있고 간격이 있다. 다만 그것들이 ‘각자의 머릿속과 각자의 코드 속’에 흩어져 있을 뿐이다. 토큰 도입의 첫걸음은 그 흩어진 것들을 ‘모아서 이름을 붙이고, 한 군데 적어두는’ 일이다. 새로 만드는 게 아니라 ‘있던 걸 정돈하는’ 일이라, 생각보다 부담이 작다.

준비물도 단출하다. 우리 기관 사이트, 화면을 캡처할 수 있는 도구, 그리고 색을 찍어 값을 알려주는 간단한 스포이드 도구(브라우저 개발자 도구나 무료 색상 추출 확장 프로그램이면 충분하다) 정도다. 디자인 전공이 필요한 것도 아니고, 코드를 짤 줄 알아야 하는 것도 아니다. ‘지금 우리가 뭘 쓰고 있는지’를 들여다보고 적어두는 게 첫 단계라, 누구나 시작할 수 있다.

한 가지 더, 토큰 도입을 망설이게 하는 가장 큰 오해를 풀고 가자. ‘우리 기관은 디자이너가 따로 없어서 이런 건 못 한다’는 생각이다. 결론부터 말하면, 디자이너가 없어도 토큰의 첫 단계는 충분히 시작할 수 있다. 오히려 토큰의 진짜 가치는 ‘디자이너가 없는 조직’에서 더 빛난다. 디자인 전문가가 늘 옆에서 봐주는 조직이라면 그 사람의 감각으로 일관성이 어느 정도 유지된다. 하지만 대부분의 공공기관은 그렇지 않다. 콘텐츠 담당자가, 행정 담당자가, 가끔은 신입 직원이 페이지를 만진다. 이런 조직일수록 ‘감각’이 아니라 ‘적어둔 기준’에 의존해야 한다. 토큰은 바로 그 ‘적어둔 기준’이다. 디자이너의 머릿속에 있던 감각을 누구나 따를 수 있는 값으로 꺼내 적어두는 것 — 그래서 토큰은 디자이너가 없는 조직을 위한 ‘디자이너 대신’에 가깝다.

또 하나 자주 듣는 걱정이 ‘우리 사이트는 너무 오래되고 복잡해서 손댈 엄두가 안 난다’는 것이다. 이 걱정도 이해는 간다. 수년에 걸쳐 여러 부서가, 여러 외주가 손댄 사이트는 그야말로 ‘색의 박물관, 글꼴의 동물원’이 되어 있다. 그런데 바로 그렇기 때문에 토큰이 더 절실하다. 이미 복잡한 사이트를 ‘지금 이대로’ 두면 시간이 갈수록 더 복잡해진다. 새 페이지가 또 새로운 색을 더하고, 또 다른 글꼴을 들여온다. 토큰을 도입하는 건 그 ‘점점 더 복잡해지는 흐름’에 제동을 거는 일이다. 이미 복잡한 걸 단번에 단순하게 만들 순 없어도, ‘더 복잡해지는 걸 멈추는’ 건 오늘 당장 할 수 있다. 그리고 그게 사실 가장 중요한 첫걸음이다.

마지막으로 마음가짐 하나. 토큰 도입은 ‘한 번에 완성하는 프로젝트’가 아니라 ‘서서히 수렴시키는 습관’이다. 오늘 당장 모든 페이지의 색을 통일할 필요는 없다. 그건 가능하지도 않고, 그렇게 접근하면 십중팔구 중간에 지쳐 포기한다. 대신 ‘기준을 하나 세우고, 그날 이후 새로 만드는 것부터 그 기준을 따르게’ 하면 된다. 그러면 시간이 흐를수록 사이트는 ‘저절로’ 한 몸이 되어 간다. 오늘 우리가 할 일은 그 첫 기준점을 찍는 것, 딱 거기까지다. 그러니 너무 거창하게 마음먹지 말고, 가벼운 정리정돈을 시작한다는 기분으로 따라와 주면 좋겠다.

자, 그럼 ‘우리 기관 토큰 도입 첫걸음 체크리스트’를 단계별로 펼쳐 보자. 읽으면서 우리 사이트를 떠올리고, ‘우리는 지금 몇 단계쯤일까’를 가늠해보면 훨씬 와닿을 것이다.

【본론 1 — 개념·왜 ‘체크리스트’부터인가】

■ 왜 ‘큰 계획’ 대신 ‘작은 체크리스트’로 시작해야 하나

토큰을 들이려는 담당자들이 가장 먼저 빠지는 함정이 있다. ‘제대로 하려면 디자인 시스템 전체를 먼저 설계해야 한다’는 생각이다. 색 체계부터 글꼴 위계, 간격 규칙, 컴포넌트 라이브러리까지 한꺼번에 그려놓고 시작하려 한다. 그러다 보면 시작도 하기 전에 일이 산더미처럼 보이고, ‘이건 우리 인력으로는 무리’라는 결론에 도달해 그냥 덮어버린다. 좋은 의도가 완벽주의에 발목 잡혀 한 발짝도 못 떼는 전형적인 장면이다.

체크리스트로 시작하자는 건, 바로 이 함정을 피하자는 제안이다. 완벽한 설계도를 그리는 대신, ‘지금 우리가 어디에 서 있는지’를 먼저 진단하고, ‘바로 손댈 수 있는 가장 작은 한 걸음’을 찾자는 것이다. 거대한 계획은 마비를 부르지만, 작은 체크 항목은 행동을 부른다. ‘색 체계를 전면 재설계하라’는 막막하지만, ‘우리가 메인에서 쓰는 파랑이 정확히 무슨 값인지 찍어서 적어보라’는 5분이면 한다. 시작이 작을수록 실제로 시작된다.

또 하나, 체크리스트는 ‘진행 상황을 눈에 보이게’ 만들어준다. 토큰 도입은 며칠 만에 끝나는 일이 아니라 몇 달에 걸쳐 조금씩 나아가는 일이다. 이렇게 긴 일은 ‘얼마나 왔는지’가 안 보이면 동력을 잃는다. 체크리스트가 있으면 ‘지난달엔 1단계였는데 이번 달엔 3단계까지 왔네’가 눈에 들어온다. 그 눈에 보이는 진척이 다음 한 걸음을 떼게 만드는 연료가 된다. 특히 윗선이나 다른 부서에 ‘우리 이만큼 했습니다’를 설명할 때, 막연한 말보다 체크된 항목 목록 하나가 훨씬 설득력이 있다.

마지막으로, 체크리스트는 ‘담당자가 바뀌어도 이어갈 수 있게’ 해준다. 공공기관은 인사이동이 잦다. 한 사람의 머릿속에만 있는 계획은 그 사람이 떠나면 사라지지만, 적어둔 체크리스트는 후임자가 그대로 이어받을 수 있다. ‘여기까지 했고, 다음은 이거다’가 문서로 남아 있으면, 사람이 바뀌어도 일이 처음으로 돌아가지 않는다. 토큰 도입처럼 호흡이 긴 일에서는 이 ‘이어달리기 가능성’이 의외로 결정적이다.

그리고 체크리스트에는 ‘심리적인 효과’도 있다. 막연히 ‘우리 사이트 디자인 좀 정리해야 하는데’ 하는 부담은 머릿속에서 점점 커진다. 손에 안 잡히는 일은 실제보다 훨씬 거대하고 막막하게 느껴지기 때문이다. 그런데 그 막연한 부담을 ‘예/아니오로 답할 수 있는 작은 항목들’로 쪼개 적어두는 순간, 일이 갑자기 ‘할 만한 크기’로 줄어든다. 항목 하나에 체크를 하는 작은 성취감이 다음 항목으로 손을 뻗게 만든다. 거대한 산을 통째로 오르려면 엄두가 안 나지만, 계단을 하나씩 밟는 건 누구나 할 수 있다. 체크리스트는 그 ‘산’을 ‘계단’으로 바꿔주는 도구다. 이 심리적 전환이, 사실 토큰 도입에서 가장 중요한 첫 장벽을 넘게 해준다.

■ 토큰의 정체를 다시 한번, 아주 쉽게

본론에 들어가기 전에, 토큰이 뭔지 한 번 더 쉬운 말로 짚고 가자. 월·수요일 글을 못 본 분도 있을 테니까.

토큰은 ‘이름이 붙은 디자인 값’이다. 예를 들어 우리 기관 대표 색이 진한 파랑이라고 하자. 이걸 페이지마다 ‘그 진한 파랑’을 눈대중으로 다시 고르는 게 아니라, ‘기본/주색/파랑’이라는 이름표를 딱 붙여서 한 군데 정의해 둔다. 그다음부터는 색을 직접 고르는 게 아니라 그 ‘이름’을 불러서 쓴다. 글꼴 크기도 마찬가지다. ‘본문은 16, 작은 글씨는 14, 제목은 24’ 이렇게 이름을 붙여두면, 새 페이지를 만들 때 숫자를 새로 정하는 게 아니라 정해둔 이름을 가져다 쓴다. 간격도 똑같다. ‘기본 간격은 8, 그 두 배는 16’ 식으로 단계에 이름을 붙인다.

이렇게 하면 뭐가 좋은가. 첫째, 모두가 ‘같은 걸’ 쓴다. 누가 만들든 ‘우리 파랑’은 한 가지 값이다. 둘째, ‘한 군데만 바꾸면 전부 바뀐다’. 기관 대표 색이 바뀌어도, 토큰 정의 한 줄만 고치면 그 색을 쓰던 모든 화면이 동시에 따라온다. 셋째, ‘말로 소통이 된다’. ‘여기 색 좀 우리 주색으로 바꿔주세요’라고 하면, 받는 사람이 ‘그 주색이 뭐지’ 고민할 필요 없이 정해진 값을 꺼낸다. 결국 토큰은 ‘디자인을 말로 다룰 수 있게 만드는 공용어’다.

행정안전부의 KRDS가 색·글꼴·간격 같은 기초를 토큰으로 정리해 둔 것도 바로 이 때문이다. 모든 공공 사이트가 ‘각자의 파랑, 각자의 글자 크기’를 쓰면 국민 입장에선 사이트마다 처음부터 다시 적응해야 한다. 그런데 기준이 되는 토큰 체계가 있으면, 어느 기관 사이트에 가든 ‘익숙한 결’을 느끼게 된다. 토큰은 한 기관 안의 일관성을 넘어, 공공 서비스 전체의 일관성을 떠받치는 바닥돌인 셈이다.

여기서 토큰이 ‘디자인 값’에만 머무르지 않는다는 점도 짚어두자. 토큰의 사고방식은 색·글꼴·간격을 넘어, ‘우리가 반복해서 내리는 모든 결정’에 적용할 수 있다. 버튼의 모서리를 얼마나 둥글릴지, 그림자를 얼마나 줄지, 화면이 좁아질 때 몇 픽셀에서 레이아웃을 바꿀지 — 이런 ‘매번 새로 정하기 귀찮은’ 결정들을 한 번 정해 이름 붙여두면, 그게 다 토큰이 된다. 그래서 토큰을 들이는 일은 단순히 ‘색을 통일하는’ 일이 아니라, ‘우리가 같은 결정을 매번 다르게 내리던 습관’ 자체를 바로잡는 일이다. 한번 이 사고방식에 익숙해지면, 사이트뿐 아니라 보고서 양식, 안내문 문구, 민원 답변 틀 같은 ‘반복되는 일’ 전반에 ‘기준을 정해 공유한다’는 토큰적 사고를 적용하게 된다. 토큰은 디자인 기법이기 이전에 ‘일을 정돈하는 사고법’인 셈이다.

토큰이 주는 또 하나의 숨은 이득은 ‘소통 비용의 절감’이다. 토큰이 없을 때 색 하나를 바꾸려면 어떤 대화가 오가는지 떠올려 보라. ‘여기 파랑 좀 더 진하게요’ ‘얼마나 진하게요?’ ‘그 메인에 있는 파랑이요’ ‘메인 어디요?’ — 이런 식의 끝없는 핑퐁이 벌어진다. 말로는 색을 정확히 전달할 수 없기 때문이다. 그런데 토큰이 있으면 ‘이 버튼을 주색으로 바꿔주세요’ 한마디로 끝난다. ‘주색’이라는 이름이 정확히 무슨 값인지 모두가 알기 때문이다. 이렇게 토큰은 디자인을 ‘말로 정확히 다룰 수 있는 공용어’로 만들어, 부서 간·내부와 외주 간의 소통에서 새던 시간과 오해를 크게 줄여준다. 일관성은 결과물이고, 소통 비용 절감은 그 과정에서 따라오는 덤이다.

【본론 2 — 단계별 실행 체크리스트】

지금부터가 오늘 글의 핵심이다. 토큰 도입을 다섯 단계로 나눴다. 각 단계마다 ‘예/아니오’로 답할 자가 점검 항목과, ‘아니오라면 무엇부터’를 함께 적었다. 순서대로 따라오되, 우리 기관 상황에 맞춰 속도는 조절하면 된다.

■ 1단계 — 현황 파악: ‘우리는 지금 뭘 쓰고 있나’ 적어보기

토큰 도입의 첫 삽은 ‘새로 정하기’가 아니라 ‘지금 쓰는 걸 알아내기’다. 의외로 많은 기관이 자기 사이트가 무슨 색을, 무슨 글꼴을, 무슨 간격을 쓰는지 ‘정확히’ 모른다. ‘대략 파랑 계열’ 정도는 알지만 그 파랑이 정확히 어떤 값인지, 한 가지인지 여러 가지인지는 모른다. 그래서 1단계는 ‘우리 현황을 숫자로 적어내려가는’ 일이다.

1-1. 우리 메인 페이지에서 ‘주요 색’ 다섯 개를 스포이드로 찍어 값을 적어봤는가?

→ 자주 보이는 문제: 찍어보니 ‘비슷하지만 미묘하게 다른 파랑’이 서너 개 나온다. 다 같은 파랑인 줄 알았는데 실은 제각각이었던 것이다.

1-2. 한 화면 안에서 쓰이는 글꼴 종류와 글자 크기를 세어봤는가?

→ 자주 보이는 문제: 본문·제목·표·버튼·외부 위젯이 다 다른 글꼴에 크기도 제각각. ‘크기 종류만 여덟 가지’ 같은 경우가 흔하다.

1-3. 요소 사이 간격(여백)에 일정한 규칙이 있는지 살펴봤는가?

→ 자주 보이는 문제: 8, 10, 12, 13, 15… 규칙 없이 들쭉날쭉. ‘눈대중으로 띄운’ 흔적이다.

이 단계에서 ‘아니오’가 나온다고 실망할 필요는 전혀 없다. 오히려 정상이다. 토큰을 안 쓰던 사이트는 거의 다 이런 상태다. 중요한 건 ‘지금 상태를 정직하게 숫자로 적어두는’ 것이다. 이 기록이 ‘출발선’이 된다. 나중에 토큰을 도입하고 나서 ‘우리 색이 다섯 개에서 하나로 줄었네’를 확인하려면, 처음의 ‘다섯 개’가 적혀 있어야 한다. 그래서 1단계는 화려하진 않아도 가장 중요하다. 측정 없이는 개선도 없기 때문이다.

현황 파악을 할 때 요령 하나. 메인 한 페이지만 보지 말고, 성격이 다른 페이지 서너 개를 골라서 함께 보라. 메인, 부서 소개, 목록(게시판), 신청 폼, 이렇게 종류가 다른 페이지를 같이 들여다보면 ‘페이지마다 색과 크기가 얼마나 갈리는지’가 한눈에 드러난다. 한 페이지만 보면 ‘이 정도면 괜찮은데’ 싶다가도, 네 페이지를 나란히 놓으면 ‘같은 파랑이라고 우겼지만 사실 전부 다른 파랑’이라는 게 도드라진다. 토큰이 필요한 이유가 바로 이 ‘페이지 간 균열’에 있으니, 현황도 여러 페이지를 함께 봐야 제대로 잡힌다.

그리고 적을 때는 ‘느낌’이 아니라 ‘값’으로 적자. ‘파랑’ ‘진한 파랑’ ‘좀 더 진한 파랑’ 이런 식으로 적으면 나중에 아무 쓸모가 없다. 스포이드로 찍어서 나오는 정확한 색 값, 글자 크기의 정확한 숫자, 간격의 정확한 픽셀 수를 적어야 한다. 디자인은 ‘느낌의 영역’이라고들 하지만, 토큰의 세계에선 모든 게 ‘값’이다. 느낌을 값으로 바꾸는 것, 그게 토큰 도입의 본질이다. 1단계에서 이 ‘값으로 적는 습관’을 들여두면 이후 단계가 한결 수월해진다.

현황을 적다 보면 ‘생각보다 종류가 너무 많아서’ 당황하는 순간이 온다. 색만 해도 스무 가지가 넘게 나오고, 글자 크기는 열 종이 넘는다. 이때 ‘이걸 언제 다 정리하나’ 하고 막막해하기보다, ‘아, 그동안 이렇게 흩어져 있었으니 사이트가 어수선했구나’ 하고 받아들이면 된다. 종류가 많다는 건 정리의 여지가 그만큼 크다는 뜻이고, 정리 후의 효과도 그만큼 극적이라는 뜻이다. 그리고 막상 추려보면, 스무 가지 색 중 ‘실제로 자주 쓰이는 건 네댓 개뿐’인 경우가 대부분이다. 나머지는 어쩌다 한 번 박힌 ‘유령 색’들이다. 그러니 현황 목록을 보며 ‘자주 쓰는 것’과 ‘어쩌다 쓴 것’을 구분해 두면, 다음 단계에서 ‘무엇을 정식 토큰으로 삼을지’ 고르기가 한결 쉬워진다.

현황 파악의 마지막 요령은 ‘모바일 화면도 함께 보기’다. 우리는 흔히 데스크탑 화면만 보고 점검을 끝내는데, 요즘 공공 사이트 방문자의 절반 이상이 스마트폰으로 들어온다. 그런데 데스크탑에선 가지런하던 색과 간격이 모바일에선 와르르 무너지는 경우가 적지 않다. 데스크탑용 값과 모바일용 값이 따로 박혀 있어, 한쪽만 정리되고 다른 쪽은 방치된 탓이다. 그러니 현황을 적을 때 ‘데스크탑/모바일’ 두 칸을 나눠, 양쪽에서 각각 무슨 값을 쓰는지 함께 기록해 두자. 토큰은 화면 크기가 달라져도 ‘같은 약속’을 유지하게 해주는 도구이니, 출발선부터 두 화면을 같이 보는 습관을 들이는 게 좋다.

■ 2단계 — 핵심 토큰 정의: ‘가장 자주 쓰는 것’부터 이름 붙이기

현황을 적었다면, 이제 ‘그중에서 우리가 앞으로 쓸 것’을 골라 이름을 붙일 차례다. 여기서 핵심은 ‘전부 정의하려 들지 말기’다. 처음부터 색 수십 개, 크기 열몇 개를 다 정의하려 하면 끝이 안 보인다. 대신 ‘가장 자주 쓰는, 영향이 큰 것’ 몇 개만 먼저 정한다.

2-1. 우리 기관 ‘대표 색(주색)’ 하나를 단 하나의 값으로 확정했는가?

→ 자주 보이는 문제: ‘우리 파랑이 뭐냐’를 물으면 부서마다 답이 다르다. 이걸 회의 한 번으로 ‘이게 우리 주색’이라고 못 박는 게 2단계의 핵심이다.

2-2. 글자 크기를 ‘본문/작은 글씨/소제목/제목’ 정도의 단계로 묶어 값을 정했는가?

→ 자주 보이는 문제: 크기를 정하지 않아 페이지마다 본문 크기가 14였다 16이었다 한다. 단계를 정하면 ‘본문은 무조건 16’이 된다.

2-3. 기본 간격 단위(예: 8단위)를 정하고, 그 배수만 쓰기로 약속했는가?

→ 자주 보이는 문제: 간격이 정해지지 않아 ‘대충 띄우기’가 반복된다. 8단위 같은 기준을 정하면 여백이 저절로 가지런해진다.

핵심 토큰을 정의할 때 가장 큰 걸림돌은 기술이 아니라 ‘합의’다. ‘우리 주색을 뭐로 할 것인가’는 디자인 문제처럼 보이지만 실은 ‘부서 간 합의’ 문제다. 그래서 이 단계는 짧은 회의 한 번으로 매듭짓는 걸 권한다. 너무 오래 끌면 ‘이 파랑이 좋다, 저 파랑이 낫다’로 논쟁이 길어진다. 중요한 건 ‘완벽한 색’이 아니라 ‘모두가 따를 하나의 색’이다. 적당히 좋은 색 하나로 빨리 합의하고, 그걸 모두가 지키는 게, 완벽한 색을 두고 한 달을 다투는 것보다 백번 낫다. 일관성의 가치는 ‘무엇을 고르느냐’보다 ‘하나로 정하느냐’에 있다.

이름을 붙일 때도 요령이 있다. ‘파랑1’ ‘파랑2’처럼 색 이름을 그대로 쓰기보다, ‘주색’ ‘보조색’ ‘경고색’처럼 ‘쓰임’으로 이름을 붙이는 게 좋다. 왜냐하면 색은 언젠가 바뀔 수 있어도 ‘쓰임’은 잘 안 바뀌기 때문이다. ‘주색’이라는 이름은 그대로 두고 그 값만 다른 파랑으로 바꾸면, 사이트 전체의 주색이 한 번에 바뀐다. 만약 ‘파랑’이라는 이름을 붙였는데 나중에 주색이 초록으로 바뀌면, ‘파랑이라는 이름의 초록’이라는 우스운 상황이 된다. 이름은 ‘무슨 색인가’가 아니라 ‘무슨 역할인가’로 붙이는 것 — 이게 토큰 이름 짓기의 첫 번째 원칙이다.

핵심 토큰을 고를 때 ‘몇 개가 적당한가’를 묻는 분이 많다. 정답은 ‘처음엔 적을수록 좋다’이다. 색은 주색·보조색·배경색·글자색·경고색 다섯 정도, 글자 크기는 본문·작은 글씨·소제목·제목 네 단계 정도, 간격은 8단위를 기준으로 한 배·두 배·세 배 정도면 시작으로 충분하다. ‘이걸로 모든 경우를 다 표현할 수 있나’ 걱정될 텐데, 의외로 이 정도면 페이지 대부분이 만들어진다. 종류가 적으면 ‘선택의 고민’이 줄어 오히려 일이 빨라지고, 일관성도 자연히 높아진다. 부족하다 싶은 게 생기면 그때 하나씩 늘리면 된다. 처음부터 넉넉하게 만들어두면 ‘안 쓰는 토큰’만 잔뜩 생겨 도리어 헷갈린다. 토큰은 ‘많아서’가 아니라 ‘적고 분명해서’ 힘을 낸다.

토큰 값을 정할 때 ‘KRDS가 권장하는 기준을 출발점으로 삼기’도 좋은 방법이다. 색 대비나 글자 크기에는 ‘읽기 편하고 접근성에 어긋나지 않는’ 권장 범위가 있다. 예컨대 본문 글씨가 너무 작으면 노년층이나 시력이 약한 분들이 읽기 어렵고, 글자색과 배경색의 대비가 약하면 흐릿해서 안 보인다. 우리 기관 토큰을 정할 때 이런 권장 기준을 참고하면, ‘우리 취향대로 정했더니 접근성에 걸리더라’ 하는 일을 피할 수 있다. 토큰은 ‘우리가 좋아하는 값’이 아니라 ‘모두가 편히 읽을 수 있는 값’이어야 한다. 디자인 일관성과 접근성은 따로 노는 게 아니라, 좋은 토큰 안에서 자연스럽게 만난다.

2단계를 마치면 ‘우리 기관 기본 토큰 표’ 한 장이 생긴다. 주색은 무슨 값, 본문 크기는 몇, 기본 간격은 몇 — 이걸 한 장으로 정리해 두면, 그게 곧 우리 기관 디자인의 ‘헌법 1조’가 된다. 이 한 장이 있느냐 없느냐가, 앞으로 만드는 모든 페이지의 일관성을 가른다. 거창한 디자인 시스템 문서가 아니어도 좋다. A4 한 장이면 충분하다. 그 한 장을 만들었다면, 토큰 도입의 절반은 이미 한 셈이다.

■ 3단계 — 적용 범위 정하기: ‘어디부터 바꿀까’

토큰을 정의했다고 사이트가 저절로 바뀌진 않는다. 정한 토큰을 ‘실제 화면에 적용’해야 한다. 그런데 여기서 또 한 번 ‘다 바꾸려는’ 유혹이 온다. 참아야 한다. 3단계의 핵심은 ‘어디부터’를 현명하게 고르는 것이다.

3-1. ‘새로 만드는 페이지부터’ 토큰을 적용하기로 정했는가?

→ 자주 보이는 문제: 기존 페이지 전부를 먼저 고치려다 일이 끝없이 늘어져 결국 포기한다. 새것부터 적용하면 부담 없이 시작된다.

3-2. 기존 페이지 중 ‘방문자가 가장 많은 페이지’를 우선순위로 잡았는가?

→ 자주 보이는 문제: 손대기 쉬운 구석 페이지부터 고치느라, 정작 많은 사람이 보는 메인·핵심 신청 페이지가 뒤로 밀린다.

3-3. ‘한 번에 다 안 해도 된다’는 걸 팀과 윗선이 합의했는가?

→ 자주 보이는 문제: ‘하려면 완벽하게’라는 압박 때문에 시작 자체를 못 한다. ‘점진적으로’를 공식 방침으로 정해두는 게 중요하다.

적용 범위를 정하는 가장 현실적인 원칙은 ‘새것은 무조건, 옛것은 자주 쓰는 것부터’다. 앞으로 새로 만드는 모든 페이지는 예외 없이 정한 토큰을 쓴다. 이건 추가 비용이 거의 안 든다. 어차피 만들 거, 정해진 값을 쓰기만 하면 되니까. 반면 이미 있는 페이지는 다 고치려면 비용과 시간이 든다. 그러니 ‘방문자 수’를 기준으로 우선순위를 매겨, 많이 보는 페이지부터 조금씩 정리한다. 이렇게 하면 ‘들이는 노력 대비 가장 많은 사용자가 혜택을 보는’ 순서로 일이 진행된다.

여기서 꼭 짚어둘 게 있다. 토큰 도입을 ‘프로젝트’가 아니라 ‘기본 방침’으로 못 박아야 한다는 점이다. ‘이번 분기에 토큰 도입 프로젝트를 합니다’라고 하면, 그 프로젝트가 끝나는 순간 다시 예전 방식으로 돌아간다. 대신 ‘앞으로 우리 기관 페이지는 모두 정한 토큰을 쓴다’를 ‘상시 규칙’으로 만들어야, 프로젝트가 끝난 뒤에도 일관성이 유지된다. 토큰은 ‘한 번 하는 일’이 아니라 ‘계속 지키는 약속’이라는 걸, 3단계에서 조직 차원으로 확정하는 게 핵심이다.

외주 업체에 맡기는 경우라면 더더욱 이 단계가 중요하다. 발주서나 과업지시서에 ‘우리 기관 토큰 표를 준수할 것’을 명시적으로 넣어야 한다. 이게 빠지면 업체는 ‘자기들이 늘 쓰던 색과 크기’로 만든다. 업체에 악의가 있어서가 아니라, 기준을 못 받았으니 자기 방식대로 한 것뿐이다. 그러니 토큰 표 한 장을 발주 단계에서 건네고 ‘이걸 지켜달라’고 명시하는 것 — 이 작은 한 줄이 ‘새로 만든 페이지가 또 제각각이 되는’ 사고를 막는다. 토큰을 정의만 해두고 외주에 안 건네면, 그 토큰은 서랍 속 종이일 뿐이다.

적용 우선순위를 정할 때 ‘방문자 수’ 외에 한 가지 기준을 더 보면 좋다. 바로 ‘틀어졌을 때 피해가 큰 페이지’다. 단순 안내 페이지는 색이 좀 어긋나도 큰 탈이 없지만, 신청·결제·본인인증처럼 ‘사용자가 끝까지 가야 하는’ 페이지는 작은 혼란도 이탈로 이어진다. 그래서 ‘방문자가 많은 페이지’와 ‘실패하면 안 되는 페이지’ 두 축으로 우선순위를 매기면, 한정된 시간을 가장 효과적으로 쓸 수 있다. 둘 다 해당하는 페이지(많이 보고, 실패하면 안 되는)가 있다면 그게 0순위다. 거기서부터 시작하면, 적은 노력으로 가장 많은 사용자에게 가장 큰 차이를 만들 수 있다.

3단계에서 흔히 놓치는 게 ‘적용을 누가, 언제 하느냐’를 정해두는 일이다. ‘점진적으로 하자’는 말은 좋은데, 구체적인 담당과 시점을 안 정하면 ‘언젠가 하자’가 되고, 그 ‘언젠가’는 영원히 오지 않는다. 그래서 ‘매달 둘째 주에 방문자 상위 다섯 페이지를 점검해 토큰에 맞춘다’처럼, 작더라도 반복되는 일정으로 못 박아두는 게 좋다. 큰 덩어리를 한 번에 옮기려 하지 말고, 작은 짐을 정기적으로 나르는 식으로. 이렇게 ‘리듬’을 만들어두면, 토큰 적용이 ‘특별한 프로젝트’가 아니라 ‘일상 업무의 한 칸’으로 자리 잡는다. 그게 점진적 접근이 실제로 굴러가게 만드는 비결이다.

■ 4단계 — 검증과 측정: ‘잘 적용됐는지’ 확인하기

토큰을 정의하고 적용하기 시작했다면, 이제 ‘제대로 됐는지’ 확인할 차례다. 사람이 ‘잘 적용된 것 같은데’ 하고 느끼는 것과, ‘실제로 토큰을 따르는 비율이 몇 퍼센트인지’ 측정하는 것은 전혀 다른 이야기다. 4단계는 그 ‘느낌’을 ‘숫자’로 바꾸는 단계다.

4-1. 토큰을 적용한 페이지에서, 색·글꼴·간격이 정한 값을 ‘실제로’ 따르는지 확인했는가?

→ 자주 보이는 문제: 토큰을 정해놓고도 페이지에선 여전히 ‘옛날 값’이 박혀 있다. 정의와 적용 사이에 구멍이 있는 것이다.

4-2. 사이트 전체에서 ‘정한 토큰을 따르는 비율(채택률)’을 가늠해봤는가?

→ 자주 보이는 문제: ‘대충 적용했다’는 느낌만 있고, ‘얼마나 적용됐는지’ 숫자는 아무도 모른다.

4-3. 토큰을 안 따르고 ‘제멋대로 박힌 값’이 새로 늘어나고 있지 않은지 점검하는가?

→ 자주 보이는 문제: 처음엔 잘 지키다가 시간이 지나며 ‘급해서 그냥 색을 직접 박는’ 일이 슬금슬금 다시 늘어난다.

검증 단계에서 가장 중요한 개념이 바로 ‘채택률’이다. 채택률은 ‘우리 사이트가 쓰는 디자인 값 중에서, 정해진 토큰을 따르는 비율’이다. 예를 들어 색을 100군데 쓰는데 그중 70군데가 정한 주색·보조색을 쓰고 30군데가 ‘제멋대로 박힌 색’이면 색 채택률은 70퍼센트다. 이 숫자가 토큰 도입의 ‘진척도’를 가장 정직하게 보여준다. 채택률이 올라가면 사이트가 한 몸이 되어 가는 거고, 떨어지면 다시 흩어지는 거다.

채택률이라는 지표의 진짜 가치는 ‘느낌을 숫자로 바꿔준다’는 데 있다. 토큰을 도입하다 보면 ‘이만큼 했으니 좀 나아졌겠지’ 하는 막연한 만족에 빠지기 쉽다. 하지만 그 ‘나아졌겠지’는 검증되지 않은 믿음이다. 실제로 재보면 ‘생각보다 훨씬 적게’ 적용돼 있는 경우가 허다하다. 토큰 표는 만들었지만 정작 페이지엔 옛날 값이 그대로 남아 있는, ‘정의와 적용 사이의 구멍’ 때문이다. 채택률은 바로 이 구멍의 크기를 정확히 알려준다. ‘우리가 정한 건 100인데 실제 따르는 건 60’이라는 숫자를 보면, ‘아, 정의만 하고 적용을 덜 했구나’가 분명해진다. 막연한 만족을 객관적인 점검으로 바꾸는 것 — 그게 채택률 측정의 핵심이다.

또 채택률은 ‘목표를 함께 보게’ 만든다. ‘디자인을 일관성 있게 하자’는 추상적인 구호로는 팀이 같은 곳을 보기 어렵다. 하지만 ‘이번 분기에 색 토큰 채택률을 70퍼센트까지 올리자’는 구체적인 목표가 되면, 모두가 같은 숫자를 향해 움직인다. 숫자로 된 목표는 ‘달성했는지 아닌지’가 분명해서, 일이 흐지부지되지 않게 막아준다. 채택률은 점검의 도구이자, 팀을 한 방향으로 모으는 깃발이기도 하다.

한 가지 덧붙이면, 채택률이 낮게 나왔다고 해서 자책하거나 숨길 일은 전혀 아니다. 오히려 ‘솔직한 출발선’을 확보했다는 점에서 다행스러운 일이다. 진짜 위험한 건 낮은 채택률이 아니라 ‘낮은 줄도 모르는 상태’다. 모르면 손도 못 댄다. 그러니 처음 진단에서 30퍼센트, 40퍼센트가 나와도 ‘이제 알았으니 올리면 된다’고 받아들이면 된다. 모든 잘 정돈된 사이트도 한때는 낮은 채택률에서 출발했다. 중요한 건 그 숫자를 마주하고, 다음 분기에 조금이라도 올리는 것이다. 낮은 점수는 부끄러움이 아니라 ‘개선의 여지’다.

문제는 이 채택률을 ‘사람 손으로’ 재기가 거의 불가능하다는 점이다. 페이지가 수십, 수백 개인 공공 사이트에서, 모든 색과 글꼴과 간격을 일일이 찍어 ‘토큰을 따르나 안 따르나’를 세는 건 사람이 할 수 있는 일이 아니다. 한 페이지 세는 데만 한참인데, 사이트 전체를 분기마다 다시 센다? 현실적으로 불가능하다. 그래서 채택률 측정만큼은 ‘자동 진단 도구’의 도움이 필요하다. 도구는 사이트의 모든 화면을 훑어 ‘어떤 값이 토큰을 따르고 어떤 값이 벗어났는지’를 한 번에 집계해준다.

채택률을 ‘추세’로 보는 것도 중요하다. 한 시점의 채택률 한 숫자보다, ‘지난 분기 60퍼센트 → 이번 분기 75퍼센트’ 같은 변화가 훨씬 많은 걸 말해준다. 올라가고 있으면 우리 방식이 잘 작동하는 거고, 제자리거나 떨어지면 어딘가에서 토큰이 안 지켜지고 있다는 신호다. 그래서 채택률은 ‘한 번 재고 끝’이 아니라 ‘정기적으로 재서 추세를 보는’ 지표로 다뤄야 한다. 분기마다 같은 도구로 재서 그래프를 그려두면, 사이트가 좋아지는지 나빠지는지가 한눈에 들어온다.

채택률 숫자를 볼 때 한 가지 주의할 점은 ‘100퍼센트를 목표로 삼지 말 것’이다. 의외로 들리겠지만, 현실의 사이트에서 채택률 100퍼센트는 거의 불가능하고, 굳이 추구할 필요도 없다. 외부에서 가져온 위젯, 지도, 첨부 문서처럼 ‘우리가 통제할 수 없는 요소’가 늘 섞여 있기 때문이다. 그러니 ‘남은 몇 퍼센트를 잡겠다고’ 막대한 노력을 쏟기보다, ‘핵심 화면에서 충분히 높은 채택률’을 안정적으로 유지하는 쪽이 훨씬 합리적이다. 80퍼센트를 90퍼센트로 올리는 것보다, 한번 올린 80퍼센트가 다시 떨어지지 않게 ‘지키는’ 게 더 중요할 때가 많다. 채택률은 ‘만점 받는 시험’이 아니라 ‘건강하게 유지하는 체온’에 가깝다.

채택률을 측정할 때 ‘색·글꼴·간격을 따로 나눠 보는’ 것도 큰 도움이 된다. 셋을 뭉뚱그려 ‘전체 채택률 70퍼센트’라고만 보면 ‘무엇이 약한지’가 안 보인다. 그런데 ‘색은 85퍼센트인데 간격은 50퍼센트’처럼 쪼개 보면, ‘아, 우리는 색은 어느 정도 잡혔는데 간격이 여전히 들쭉날쭉이구나’가 분명해진다. 그러면 다음에 손댈 곳도 명확해진다. 자동 진단 도구가 채택률을 항목별로 쪼개 보여주는 게 바로 이래서 유용하다. ‘어디가 약한지’를 알아야 ‘어디부터 고칠지’를 정할 수 있으니까. 두루뭉술한 한 숫자보다, 쪼개진 여러 숫자가 행동을 부른다.

■ 5단계 — 유지와 확산: ‘계속 지켜지게’ 만들기

마지막 단계는 ‘오늘 잘해놓은 걸 내일도, 내년에도 지켜지게’ 하는 일이다. 토큰 도입에서 가장 어려운 게 사실 이 ‘유지’다. 처음엔 의욕적으로 시작했다가, 담당자가 바뀌고 일이 바빠지면서 슬그머니 옛날 방식으로 돌아가는 경우가 정말 많다.

5-1. 토큰 표가 ‘찾기 쉬운 곳’에 공유되어 있고, 새 담당자도 바로 볼 수 있는가?

→ 자주 보이는 문제: 토큰 표가 누군가의 개인 폴더에만 있어, 그 사람이 떠나면 함께 사라진다.

5-2. 새 페이지를 만들 때 ‘토큰을 썼는지 확인하는 절차’가 업무 흐름에 들어 있는가?

→ 자주 보이는 문제: 점검 절차가 없어, 토큰을 안 써도 아무도 모르고 넘어간다.

5-3. 채택률을 ‘정기적으로’ 다시 재서 추세를 추적하는가?

→ 자주 보이는 문제: 처음 한 번 재고는 다시 안 재서, 사이트가 다시 흩어져도 알아채지 못한다.

유지의 핵심은 ‘개인의 의지’에 기대지 않는 것이다. ‘담당자가 신경 쓰면 잘 지켜지고, 안 쓰면 무너지는’ 구조는 반드시 무너진다. 사람은 바뀌고, 바쁘고, 잊는다. 그러니 토큰 준수를 ‘사람의 성실함’이 아니라 ‘업무 절차’와 ‘자동 점검’에 맡겨야 한다. 새 페이지를 만들 때 ‘토큰 점검’이 발주·검수 절차의 한 칸으로 들어가 있고, 분기마다 자동 도구가 채택률을 재서 알려준다면, 담당자가 바뀌어도 일관성은 유지된다. 시스템이 사람을 대신해 ‘잊지 않고 챙겨주는’ 구조를 만드는 것 — 그게 5단계의 목표다.

이 ‘절차에 심기’를 실제로 하는 방법은 생각보다 단순하다. 예를 들어 새 페이지를 올리기 전 검수 체크리스트에 ‘색·글꼴·간격이 토큰 표를 따르는가’ 한 줄을 추가하는 것이다. 외주 검수서에도 같은 항목을 넣는다. 이 한 줄이 있으면, 누군가 깜빡하고 옛날 값을 박아 넣어도 검수 단계에서 걸러진다. ‘잘하자’는 다짐은 잊히지만, ‘체크리스트의 한 칸’은 잊히지 않는다. 사람의 기억이 아니라 절차의 관성에 일을 맡기는 것 — 작아 보이는 이 한 줄이, 시간이 지나도 토큰이 살아 있게 하는 가장 든든한 안전장치다. 거창한 시스템을 새로 짤 필요 없이, 이미 있는 검수 절차에 한 줄을 더하는 것만으로 유지의 절반은 해결된다.

유지 단계에서 ‘토큰 표를 살아 있게 두는’ 것도 중요하다. 토큰은 한 번 정하면 영원히 그대로인 게 아니다. 기관 브랜드가 바뀌거나, 새 서비스가 생기거나, 접근성 기준이 강화되면 토큰도 따라 손봐야 한다. 그래서 토큰 표에는 ‘언제, 누가, 왜 바꿨는지’를 함께 적어두는 게 좋다. 이 기록이 없으면 나중에 ‘이 색은 왜 이렇게 정했더라’를 아무도 기억 못 해, 또 처음부터 논쟁이 벌어진다. 토큰 표를 ‘박제된 문서’가 아니라 ‘갱신되는 기록’으로 다루면, 시간이 지나도 그 안의 결정들이 ‘왜 그런지’ 설명 가능한 상태로 남는다. 살아 있는 토큰 표는 조직의 디자인 판단을 차곡차곡 쌓아두는 ‘기억 저장소’가 된다.

확산도 5단계의 일부다. 처음엔 한 부서, 한 사이트에서 시작한 토큰이 잘 정착하면, 그걸 다른 부서·다른 사이트로 넓혀가는 게 자연스러운 흐름이다. 이때 ‘우리가 먼저 해보니 이렇더라’는 경험과 토큰 표가 그대로 전파 자산이 된다. 한 곳에서 검증된 토큰 체계는 다른 곳에서 ‘처음부터 다시’ 만들 필요가 없다. 가져다 조금 손보면 된다. 이렇게 토큰은 ‘잘 만든 한 번’이 ‘여러 번의 절약’으로 돌아오는, 드물게 효율적인 투자다.

확산할 때 한 가지 조심할 점은 ‘남의 토큰을 그대로 강요하지 않기’다. 우리 부서에서 잘 통한 토큰이 다른 부서의 서비스 성격엔 안 맞을 수 있다. 그러니 ‘이게 정답이니 무조건 따라라’보다는 ‘우리는 이렇게 해서 이런 효과를 봤으니, 참고해서 너희 상황에 맞게 다듬어보라’는 태도가 확산을 부드럽게 만든다. 토큰의 핵심은 ‘똑같이 만들기’가 아니라 ‘각자 안에서 일관되기’다. 기관 전체가 큰 틀(예: 공통 주색 계열, 같은 글자 위계 원칙)은 공유하되, 세부는 각 서비스가 자기 맥락에 맞게 조정하는 — 그 ‘느슨한 통일’이 현실에서 가장 오래간다. 너무 빡빡하게 통일하려 들면 반발이 생기고, 너무 풀어두면 다시 흩어진다. 그 사이의 균형을 찾는 게 확산의 기술이다.

【본론 3 — 흔한 함정과 현실적인 조언】

■ 토큰 도입에서 자주 걸려 넘어지는 다섯 가지

체크리스트를 따라가다 보면 분명 막히는 지점이 온다. 그동안 여러 기관의 담당자들과 이야기 나누며 본 ‘반복되는 함정’들을 익명으로 정리해 둔다. 미리 알아두면 같은 돌부리에 안 걸린다.

첫째, ‘완벽주의의 함정’이다. 한 B공공기관 담당자는 토큰 체계를 ‘교과서처럼 완벽하게’ 설계하려다, 색 분류 체계만 두 달을 붙잡고 있었다. 색을 주색·보조색으로 나눌지, 더 잘게 쪼갤지, 단계는 몇 개로 할지를 고민하느라 정작 ‘사이트에 적용’은 한 페이지도 못 했다. 토큰은 완벽한 설계가 목적이 아니라 ‘일관성’이 목적이다. 적당히 좋은 체계로 빨리 시작해서 ‘쓰면서 다듬는’ 게, 완벽한 설계를 두고 시작을 미루는 것보다 훨씬 낫다.

둘째, ‘정의만 하고 적용 안 하는 함정’이다. 한 A광역지자체는 멋진 토큰 표를 만들어 문서로 정리해 두고는, 정작 실제 페이지엔 적용하지 않았다. 토큰 표는 서랍 속에서 잠자고, 페이지는 여전히 제각각이었다. 토큰은 ‘정의’가 아니라 ‘적용’에서 가치가 생긴다. 표를 만드는 데 들인 노력의 절반이라도 ‘실제 화면에 적용’에 쓰여야 한다.

셋째, ‘외주에 안 건네는 함정’이다. 한 C기관은 토큰을 잘 정해놓고도 외주 발주서에 그걸 명시하지 않았다. 결과는 뻔했다. 새로 납품된 페이지는 또 ‘업체가 늘 쓰던 색’으로 만들어져, 애써 정한 토큰을 무시한 채 사이트에 또 다른 균열을 더했다. 토큰은 ‘우리만 아는 약속’이 아니라 ‘만드는 모든 사람이 공유하는 약속’이어야 한다. 외주든 내부든, 페이지를 만드는 손에 토큰 표가 닿아 있어야 한다.

넷째, ‘측정 안 하는 함정’이다. 한 기관은 토큰을 도입했다고 믿었지만, ‘얼마나 적용됐는지’를 한 번도 재보지 않았다. 그래서 시간이 지나며 ‘급해서 그냥 박은 값’이 슬금슬금 늘어나는데도 아무도 몰랐다. 1년 뒤 측정해보니 채택률은 도입 초기보다 오히려 떨어져 있었다. 측정하지 않으면 후퇴해도 모른다. 채택률을 정기적으로 재는 것만으로도 ‘다시 흩어지는’ 걸 일찍 알아채 막을 수 있다.

다섯째, ‘한 사람에게만 맡기는 함정’이다. 토큰 도입을 한 담당자가 혼자 떠안으면, 그 사람이 인사이동으로 자리를 옮기는 순간 모든 게 멈춘다. 후임자는 ‘이게 뭔지’ 모르고, 토큰 표가 어디 있는지도 모른다. 그래서 토큰은 ‘조직의 자산’으로 만들어야 한다. 표는 공용 공간에 두고, 점검은 업무 절차에 넣고, 측정은 자동 도구에 맡겨, 누가 와도 이어갈 수 있게 해야 한다.

여섯째, 덧붙이자면 ‘이름을 엉성하게 짓는 함정’도 흔하다. 토큰에 ‘색1, 색2, 파랑A, 진한파랑새거’ 같은 이름을 붙여두면, 정작 쓸 때 ‘이게 뭐였더라’ 헷갈려 결국 안 쓰게 된다. 이름은 ‘주색, 보조색, 배경색’처럼 쓰임이 분명하고, 누가 봐도 같은 뜻으로 읽히게 지어야 한다. 토큰의 절반은 ‘값’이고 절반은 ‘이름’이다. 값을 아무리 잘 정해도 이름이 헷갈리면 아무도 안 꺼내 쓴다. 좋은 이름은 ‘설명 없이도 무엇에 쓰는지 짐작되는’ 이름이다. 이름 짓기에 잠깐 더 공을 들이는 것만으로, 토큰이 ‘실제로 쓰이느냐 방치되느냐’가 갈린다.

■ ‘작게 시작해서 꾸준히’가 정답인 이유

지금까지의 이야기를 한 문장으로 줄이면 ‘작게 시작해서 꾸준히 넓혀라’다. 이게 토큰 도입의 핵심 철학이다. 왜 이게 정답인지 조금 더 풀어보자.

토큰은 ‘복리’처럼 쌓인다. 처음 한 페이지에 토큰을 적용하면 그 페이지 하나가 가지런해진다. 별것 아닌 것 같다. 그런데 그다음 만드는 모든 페이지가 같은 토큰을 쓰기 시작하면, 시간이 갈수록 ‘가지런한 페이지’의 비율이 자연히 늘어난다. 1년이면 새로 만든 페이지 대부분이 토큰을 따르고, 거기에 기존 페이지를 자주 쓰는 것부터 조금씩 정리하면, 어느새 사이트 전체가 한 몸이 되어 있다. 처음의 작은 한 걸음이 시간을 만나 큰 변화로 불어나는 것 — 그게 토큰의 복리 효과다.

반대로 ‘한 번에 다 하려는’ 접근은 거의 항상 실패한다. 수백 페이지를 동시에 고치는 건 인력으로도 예산으로도 무리고, 그 와중에 새 콘텐츠는 계속 올라오니 ‘고치는 속도’가 ‘어긋나는 속도’를 못 따라잡는다. 밑 빠진 독에 물 붓기가 된다. 그래서 ‘새것부터 막는’ 게 먼저다. 독의 구멍(새로 어긋나는 것)을 먼저 막고, 그다음 고인 물(기존 어긋난 것)을 천천히 퍼내는 순서. 이 순서를 지키면 토큰 도입은 ‘끝없는 노동’이 아니라 ‘점점 쉬워지는 일’이 된다.

‘작게 시작하기’가 좋은 또 다른 이유는 ‘배우면서 고칠 수 있어서’다. 처음 정한 토큰이 완벽할 리 없다. 막상 써보면 ‘이 색은 너무 진해서 글씨가 안 보이네’ ‘이 간격은 모바일에서 너무 좁네’ 하는 문제가 나온다. 그런데 작게 시작했다면 이런 시행착오를 ‘조금만 고치면’ 된다. 반대로 처음부터 사이트 전체에 한 토큰을 일괄 적용해버렸다면, 문제를 발견했을 때 이미 모든 페이지에 퍼져 있어 되돌리기가 끔찍하게 어렵다. 작게 시작하면 ‘틀려도 싸게 고친다’. 토큰은 한 번에 완성하는 정답이 아니라, 쓰면서 다듬어가는 ‘진행형 약속’이라는 걸 잊지 말자. 처음의 토큰은 ‘초안’이고, 실제 사용이 그걸 ‘완성본’으로 다듬어준다.

그리고 ‘꾸준히’의 힘을 믿어야 한다. 분기마다 채택률을 재고, 새 페이지 점검을 빠뜨리지 않고, 토큰 표를 최신으로 유지하는 — 이 ‘별것 아닌 반복’이 쌓여 사이트의 품질을 떠받친다. 화려한 한 방의 개편보다, 지루해 보이는 꾸준한 관리가 결국 더 좋은 사이트를 만든다. 토큰 도입은 단거리 경주가 아니라 오래 걷는 산책에 가깝다. 빨리 가려 하지 말고, 멈추지 않는 게 중요하다.

■ 토큰 도입의 효과를 ‘상급자에게 설명하는’ 법

현장에서 토큰 도입을 가로막는 진짜 장벽은 기술이 아니라 ‘설득’인 경우가 많다. 담당자는 필요성을 느끼는데, 정작 예산과 시간을 쥔 윗선은 ‘색 좀 통일하는 게 뭐가 그리 중요하냐’고 여긴다. 그래서 토큰 도입을 추진하려면 ‘이게 왜 중요한지’를 의사결정자의 언어로 옮길 줄 알아야 한다.

윗선을 설득할 때 ‘예뻐진다’는 말은 잘 안 통한다. 대신 ‘비용’과 ‘위험’으로 번역해야 한다. 토큰이 없으면 페이지 하나를 만들 때마다 색과 글꼴을 새로 정하느라 시간이 더 들고, 그렇게 만든 결과물이 제각각이라 나중에 통일하려면 또 비용이 든다. 즉 ‘토큰 없음’은 ‘지금도 비용, 나중에도 비용’인 상태다. 반대로 토큰을 들이면 ‘새로 만들 때 고민이 줄어 빨라지고’, ‘나중에 통일할 비용이 안 생긴다’. 이걸 ‘일관성’이 아니라 ‘반복 작업 시간 절감’과 ‘재작업 비용 예방’으로 설명하면, 숫자에 민감한 의사결정자도 고개를 끄덕인다.

또 하나 강력한 설득 도구가 ‘객관적인 진단 점수’다. ‘제 생각엔 우리 사이트가 좀 어수선합니다’는 주관적인 의견이라 무게가 가볍다. 하지만 ‘자동 진단을 돌려보니 우리 디자인 토큰 채택률이 50퍼센트대이고, 행정안전부 품질관리 지침 기준에서도 디자인 일관성 항목이 약하게 나옵니다’는 객관적인 근거가 된다. 의견은 반박당하지만 측정값은 반박하기 어렵다. 그래서 토큰 도입을 제안하기 전에, 먼저 우리 사이트를 한번 진단해 ‘출발선 숫자’를 손에 쥐는 게 설득의 첫 단추다. 그 숫자가 ‘지금 이 상태가 문제다’와 ‘이만큼 좋아질 수 있다’를 동시에 보여주기 때문이다.

마지막으로, 작은 성공 사례를 먼저 만들어 보여주는 것도 효과적이다. 전사적으로 ‘토큰 도입 프로젝트를 하겠습니다’라고 크게 벌이기보다, 방문자가 많은 핵심 페이지 한두 개에 토큰을 적용해 ‘전·후’를 나란히 보여주면 설득력이 다르다. ‘말’이 아니라 ‘눈에 보이는 결과’가 의사결정자를 움직인다. 작게 시작해 성과를 증명하고, 그 증거를 들고 확산을 제안하는 — 이 순서가 현실에서 가장 잘 먹힌다.

【본론 4 — 그래서 도구가 필요한 지점】

여기까지 읽고 ‘다 좋은데, 채택률은 대체 어떻게 재라는 거지’ 하는 의문이 들었다면 정확히 짚은 거다. 1~3단계(현황 파악, 토큰 정의, 적용 범위)는 사람이 회의와 손으로 할 수 있다. 그런데 4단계(검증·측정)와 5단계(유지·추세 추적)는 사람 손만으로는 한계가 분명하다. 바로 이 지점에서 자동 진단 도구가 필요해진다.

생각해보자. 우리 기관 사이트가 50페이지라고 치자. 각 페이지마다 색이 수십 군데, 글꼴이 여러 종, 간격이 곳곳에 쓰인다. 이걸 사람이 일일이 스포이드로 찍어 ‘토큰을 따르나 안 따르나’를 세려면, 한 페이지에 한 시간씩 잡아도 50시간이다. 그것도 한 번에. 분기마다 다시 잰다면 1년에 200시간이다. 거기에 페이지는 계속 늘어난다. 도저히 사람이 감당할 일이 아니다. 그래서 ‘측정’만큼은 기계에 맡기는 게 합리적이다.

행정안전부의 「전자정부 웹사이트 품질관리 지침」이 정한 7대 영역(호환성·접근성·개방성·접속성·편의성·효율성·신뢰성)도 마찬가지다. 이 일곱 가지를 사람이 페이지마다 손으로 점검한다는 건 비현실적이다. 자동 도구가 사이트를 훑어 ‘어느 영역이 어디서 어긋나는지’를 한 번에 집계해줘야, 담당자는 ‘무엇을 먼저 고칠지’ 판단에만 집중할 수 있다. 도구는 ‘무엇이 문제인지’를 찾아주고, 사람은 ‘어떻게 고칠지’를 정한다. 이 역할 분담이 핵심이다.

특히 토큰 채택률처럼 ‘사이트 전체를 봐야 의미가 있는’ 지표는 자동화가 필수다. 한 페이지의 색이 토큰을 따르는지는 사람이 봐도 알 수 있다. 하지만 ‘사이트 전체에서 몇 퍼센트가 따르는지’는 모든 페이지를 다 봐야 나오는 숫자다. 사람이 페이지 몇 개만 보고 ‘대충 이 정도일 것 같다’고 추정하면, 그건 측정이 아니라 짐작이다. 짐작에 기대 개선 방향을 정하면, 정작 가장 어긋난 영역을 놓치기 쉽다. 그래서 ‘전체를 빠짐없이, 같은 기준으로, 반복해서’ 재는 일만큼은 사람보다 도구가 압도적으로 낫다. 사람은 한 페이지를 깊이 보는 데, 도구는 모든 페이지를 빠르게 훑는 데 각각 강하다. 둘을 합치면 ‘넓고 깊게’ 본다.

여기서 우리 ViewCheck 이야기를 솔직하게 꺼내본다. ViewCheck는 바로 이 ‘사람이 못 하는 측정’을 대신하기 위해 만든 공공웹 KRDS 자동 진단 도구다. KRDS의 846개 규칙(기초 DS 120개, 부품 CP 446개, 흐름 중 기본 BP 108개, 서비스 SP 172개)을 사이트의 모든 페이지에 자동으로 대조해, ‘어디가 어떤 기준에서 어긋나는지’를 한 번에 짚어준다. 오늘 이야기한 ‘토큰 채택률’도 그중 하나다. 디자인 시스템 탭에서 ‘우리 사이트가 정해진 색·글꼴·간격 토큰을 얼마나 따르고 있는지’를 비율로 보여준다. 사람이 50시간 들여 셀 걸, 도구가 몇 십분 만에 집계해 ‘토큰 채택률 리포트’로 내놓는 것이다.

ViewCheck 분석 결과 화면의 디자인 시스템 탭이다. 위쪽 점수 카드(OverviewCards)에 기초·부품·흐름·서비스 네 영역의 점수가 한눈에 뜨고, 디자인 시스템 탭으로 들어가면 ‘색 토큰 채택률 몇 퍼센트, 글꼴 토큰 채택률 몇 퍼센트, 간격 토큰 채택률 몇 퍼센트’가 항목별로 펼쳐진다. 오늘 4단계에서 ‘사람 손으로는 못 잰다’고 했던 그 채택률이, 바로 이 화면에서 숫자로 나온다. 그리고 채택률이 낮은 항목을 누르면 ‘어느 페이지, 어느 요소가 토큰을 벗어났는지’ 구체적인 위치까지 짚어준다. ‘어디부터 고쳐야 하지’의 답이 바로 여기 있는 셈이다.

오해는 말자. 도구가 토큰을 ‘대신 정해주거나’ ‘대신 적용해주는’ 건 아니다. 무슨 주색을 쓸지, 어느 페이지부터 고칠지는 여전히 사람이 정한다. 도구가 하는 건 ‘지금 어떤 상태인지’를 정직한 숫자로 비춰주고, ‘어디가 어긋났는지’를 콕 짚어주는 것까지다. 거울 같은 역할이다. 거울이 화장을 대신 해주진 않지만, 거울 없이 화장하긴 어렵다. 토큰 도입에서 도구는 그 거울이다. 우리 사이트의 현재 모습을 정확히 비춰줘야, 무엇을 고칠지 판단할 수 있다.

도구를 ‘출발선’과 ‘결승선’ 양쪽에 쓰는 걸 권한다. 토큰 도입을 시작하기 전에 한 번 진단해 ‘지금 우리 채택률이 몇 퍼센트인지’ 출발선을 찍는다. 그리고 토큰을 적용한 뒤 다시 진단해 ‘얼마나 올랐는지’ 결승선을 확인한다. 이 ‘전·후 비교’가 있으면, 우리가 들인 노력이 실제로 효과가 있었는지를 숫자로 증명할 수 있다. 노력의 결과가 눈에 보이면 다음 단계로 나아갈 힘이 생기고, 윗선에 ‘우리가 이만큼 개선했습니다’를 보여줄 근거도 된다. 측정 없는 개선은 ‘했다고 믿는 것’에 그치지만, 전·후 측정이 있으면 ‘했다는 증거’가 남는다. 그 증거가 다음 분기의 예산과 동력을 끌어온다.

그리고 이런 진단을 ‘분석가 한 명’이 아니라 ‘담당 누구나’ 돌릴 수 있어야 지속된다. 진단이 특정 전문가만 할 수 있는 일이면, 그 사람이 바빠지거나 떠나는 순간 측정이 멈춘다. 반대로 URL만 넣으면 누구나 결과를 받아보는 구조라면, 담당이 바뀌어도 점검은 이어진다. 토큰 도입을 ‘조직의 습관’으로 만들려면, 측정도 ‘누구나 할 수 있는 일’이어야 한다. 그래서 좋은 진단 도구의 조건은 ‘정확함’만이 아니라 ‘쉬움’이기도 하다.

【 마무리 】

오늘은 ‘토큰을 어떻게 우리 기관에 들이느냐’를 다섯 단계 체크리스트로 풀어봤다. 마지막으로 한 번 더 짧게 정리하자.

1단계, 현황 파악 — ‘지금 우리가 쓰는 색·글꼴·간격’을 값으로 적어 출발선을 찍는다. 2단계, 핵심 토큰 정의 — 가장 자주 쓰는 것부터 ‘쓰임’으로 이름 붙여 한 장으로 정리한다. 3단계, 적용 범위 — ‘새것은 무조건, 옛것은 자주 쓰는 것부터’, 그리고 ‘점진적으로’를 조직 방침으로 못 박는다. 4단계, 검증과 측정 — 토큰 채택률을 숫자로 재서 정의와 적용 사이의 구멍을 찾는다. 5단계, 유지와 확산 — 사람의 의지가 아니라 절차와 도구에 맡겨, 담당자가 바뀌어도 이어지게 한다.

이 다섯 단계의 바탕에 흐르는 한 가지 원칙은 ‘작게 시작해서 꾸준히’다. 완벽하게 하려다 시작을 못 하는 것보다, 적당히 시작해서 멈추지 않는 게 백번 낫다. 토큰은 복리처럼 쌓인다. 오늘 찍은 작은 기준점 하나가, 1년 뒤 ‘한 몸처럼 정돈된 사이트’로 돌아온다. 그러니 이 글을 덮고 나면, 거창한 계획 대신 ‘오늘 할 수 있는 가장 작은 한 걸음’ 하나만 골라보길 권한다. 메인 페이지의 주색을 스포이드로 찍어 적어보는 것, 그것만으로도 토큰 도입은 이미 시작된 거다.

오늘 다룬 다섯 단계를 굳이 한꺼번에 다 하려 하지 않아도 된다. 이번 주엔 1단계 현황 파악만, 다음 주엔 2단계 토큰 정의만 — 이렇게 한 단계씩 천천히 밟아도 충분하다. 중요한 건 ‘속도’가 아니라 ‘방향’이다. 느려도 같은 방향으로 꾸준히 가면, 사이트는 분명히 좋아진다. 반대로 아무리 의욕적으로 시작해도 중간에 멈추면, 들인 노력만큼의 절반도 못 건진다. 그러니 무리하지 말고, 멈추지만 말자. 그 ‘멈추지 않음’이 토큰 도입의 진짜 비결이다.

그리고 그 첫걸음을 떼기 전에, ‘우리 사이트가 지금 어디쯤인지’ 한 번 객관적으로 비춰보고 싶다면, krds.viewcheck.co.kr 에 우리 기관 사이트 주소를 넣으면, KRDS 846규칙 기준으로 기초·부품·흐름·서비스 네 영역의 점수와 함께, 오늘 이야기한 ‘디자인 토큰 채택률’을 숫자로 확인할 수 있다. 손으로 50시간 셀 걸 몇 분 만에, 그것도 무료로 가늠해볼 수 있으니, 토큰 도입의 ‘출발선 찍기(1단계)’에 이만한 도구가 없다. 측정이 있어야 개선이 있고, 출발선이 있어야 얼마나 왔는지가 보인다.

끝으로 한 번 더 강조하고 싶은 건, ‘오늘 안 하면 내일은 더 어려워진다’는 점이다. 사이트는 가만히 둬도 매일 페이지가 늘고 콘텐츠가 쌓인다. 그 말은, 토큰 없이 보내는 하루하루마다 ‘정리할 거리’가 조금씩 더 쌓인다는 뜻이다. 그래서 토큰 도입에 ‘가장 좋은 때’는 언제나 ‘지금’이다. 완벽한 계획이 설 때까지, 인력이 충원될 때까지, 예산이 잡힐 때까지 기다리면 그 사이에도 사이트는 계속 어긋난다. 거창한 준비 없이, 오늘 메인 페이지 색 하나를 값으로 적어보는 것 — 그 작은 행동이 ‘점점 어려워지는 흐름’을 ‘점점 쉬워지는 흐름’으로 뒤집는 분기점이 된다.

다음 주에도 디자인 일관성과 토큰을 더 깊이 파보겠다. 우리 기관 사이트가 ‘쓰는 사람에게 친절한, 한 몸 같은 사이트’가 되는 그 길을, 함께 한 걸음씩 걸어가 보자.

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

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