09-W4 금편 — 간격·정렬 점검표

09-W4 금편 — 간격·정렬 점검표

---

ViewCheck 마케팅 홍보 — 2026년 9월 · W4 간격·8pt 그리드 (9/28~10/4)

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

【 공감·문제제기 】

이번 주는 내내 ‘간격’ 이야기를 했다. 월요일엔 왜 간격이 디자인의 뼈대인지, 수요일엔 8pt 그리드가 정확히 뭘 뜻하는지를 풀었다. 오늘 금요일은 가장 손에 잡히는 글이다. 우리 사이트의 간격과 정렬이 ‘지금 어떤 상태인지’를 담당자가 직접, 그것도 디자인 전공자가 아니어도 자기 눈과 손으로 점검할 수 있는 체크리스트를 만들었다.

솔직히 말하면, 간격이라는 주제는 ‘별것 아닌 것처럼 보여서’ 자꾸 뒤로 밀린다. 색이 틀어지면 누구나 “어, 색이 좀 이상한데?” 하고 금방 알아챈다. 글자가 깨지면 바로 신고가 들어온다. 그런데 여백이 8px이어야 할 자리에 6px이 들어가 있거나, 카드 사이 간격이 페이지마다 11px·13px·16px로 제각각인 건… 아무도 “신고”하지 않는다. 대신 사용자는 ‘뭔지 모르게 어수선하다’ ‘좀 허접해 보인다’ ‘신뢰가 안 간다’는 막연한 인상만 안고 떠난다. 정확히 어디가 문제인지는 본인도 설명 못 한다. 그게 간격 문제의 무서운 점이다. 비명을 지르지 않고, 조용히 신뢰를 깎는다.

나도 처음 공공웹 화면을 들여다보기 시작했을 땐 간격을 우습게 봤다. ‘여백이야 뭐 적당히 띄우면 되는 거 아냐?’ 했다. 그런데 잘 만든 사이트와 어수선한 사이트를 나란히 띄워놓고 비교하다 보니, 결국 차이를 가르는 건 화려한 그래픽이 아니라 ‘간격이 규칙적이냐 아니냐’더라. 잘 만든 사이트는 요소들이 보이지 않는 격자 위에 딱딱 얹혀 있어서, 눈이 편하게 흐른다. 어수선한 사이트는 요소마다 여백이 미세하게 어긋나 있어서, 의식하진 못해도 눈이 계속 ‘덜컹덜컹’한다. 그 덜컹거림이 쌓이면 사람은 피로를 느끼고, 피로한 사용자는 떠난다.

재미있는 건, 사용자에게 ‘이 사이트 왜 별로예요?’라고 물으면 대부분 ‘간격이 어긋나서요’라고 답하지 않는다는 점이다. 그냥 ‘뭔가 옛날 사이트 같아요’ ‘좀 불편해요’ ‘믿음이 안 가요’라고 한다. 정작 원인은 간격인데, 사용자는 그걸 ‘간격’이라는 단어로 짚어내지 못하고 ‘느낌’으로만 말한다. 그래서 간격 문제는 ‘티는 안 나는데 평가는 깎이는’ 가장 억울한 영역이다. 콘텐츠를 아무리 알차게 채우고 기능을 아무리 잘 만들어도, 간격이 흐트러져 있으면 그 모든 노력이 ‘왠지 허접해 보이는’ 인상에 가려진다. 반대로 말하면, 간격만 잘 잡아도 같은 콘텐츠가 훨씬 ‘공들인 것처럼’ 보인다는 뜻이기도 하다. 적은 노력으로 큰 인상 변화를 만들 수 있는, 가성비 좋은 영역이 바로 간격이다.

오늘 점검표를 따라오기 전에 한 가지만 분명히 해두자. 이건 846개 규칙을 다 따지는 정밀 진단이 아니다. 그건 사람 손으로 할 수 있는 일이 아니다. 오늘 다루는 건 ‘간격과 정렬’이라는 한 영역에 집중해, 가장 자주 어긋나고 영향이 큰 항목만 추린 ‘자가 건강 체크’다. 정밀 검사는 도구에 맡기되, 그 전에 ‘대충 어디가 안 좋은지’ 감을 잡는 용도다. 그래서 어렵지 않다. 준비물은 우리 기관 사이트, 스마트폰 하나, 그리고 ‘예/아니오’를 적을 메모지면 충분하다.

왜 디자인 담당자도 아닌 내가 이런 걸 해야 하나 싶을 수 있다. 하지만 공공 사이트의 품질은 디자이너 한 사람이 만드는 게 아니다. 콘텐츠를 올리는 사람, 신청 양식을 기획하는 사람, 외주를 관리하는 사람 — 사이트에 손대는 모두가 조금씩 품질을 만든다. 게다가 간격과 정렬은 ‘전문 지식 없이도 눈으로 보이는’ 영역이다. 오히려 매일 그 화면을 보는 담당자보다, 가끔 들어오는 일반 사용자의 눈이 더 정확할 때가 많다. 익숙함이 눈을 가리기 때문이다. 그러니 오늘만큼은 ‘처음 온 까다로운 사용자’의 눈으로 우리 사이트를 한 바퀴 돌아봐 주길 바란다.

그리고 이 점검은 돈이 안 든다. 컨설팅을 부르거나 도구를 사기 전에, 지금 당장 5분이면 시작할 수 있다. 결재도, 누구의 허락도 필요 없다. 거창한 개편 계획을 세우기 전에 ‘지금 우리가 어떤 상태인지’ 아는 것 — 모든 개선은 거기서 출발한다. 마음가짐 하나만 다잡자. 이건 ‘시험’이 아니라 ‘건강검진’이다. ‘아니오’가 많이 나올수록 점검을 잘한 거다. 문제를 많이 찾았다는 건 고칠 거리를 그만큼 확보했다는 뜻이고, 그건 사이트가 좋아질 여지가 그만큼 크다는 뜻이니까. 자, 시작하자.

본격적인 항목으로 들어가기 전에, 오늘 점검표의 ‘쓰는 법’을 한 번 더 짚자. 이 체크리스트는 다섯 묶음(A~E)으로 되어 있고, 각 묶음에 ‘예/아니오’로 답하는 항목 서너 개씩이 들어 있다. 마음 가는 대로 이것저것 건너뛰며 보면 분명 어떤 묶음은 통째로 빼먹게 되니, A부터 E까지 차례대로, 각 묶음을 다 끝내고 다음으로 넘어가는 식으로 진행하길 권한다. 특히 뒤로 갈수록 ‘눈에 잘 안 띄지만 중요한’ 묶음(D 일관성, E 토큰화)이라 자꾸 미뤄지기 쉬운데, 정작 사이트의 운명을 가르는 게 그 둘일 때가 많다. 그러니 5분이 조금 넘더라도 빠짐없이 한 바퀴 도는 게, ‘대충 많이 보는 것’보다 낫다.

그리고 ‘예/아니오’가 애매한 항목이 분명 나올 거다. ‘이게 예인가 아니오인가’ 싶을 땐 망설이지 말고 ‘아니오’로 적길 권한다. 점검의 목적은 좋은 점수를 받는 게 아니라 ‘고칠 곳을 찾는 것’이기 때문이다. 후하게 채점해서 ‘우리 괜찮네’ 하고 넘기면, 정작 손봐야 할 곳을 놓친다. 의심스러우면 사용자 편에 서서 더 엄격하게 보는 게, 결국 사용자에게도 우리에게도 이득이다. 좋은 점검자는 자기 사이트에 엄격하다. 이 글을 따라오는 동안만큼은, 우리 사이트를 ‘처음 온 까다로운 사용자’의 눈으로 봐주길 바란다.

■ 1. 간격이 왜 ‘일관성’의 핵심인가 — 8pt 그리드의 정체

본격적인 점검에 앞서 ‘우리가 뭘 점검하는지’를 30초만 정리하고 가자. 그래야 ‘예/아니오’를 적을 때 기준이 흔들리지 않는다.

8pt 그리드는 거창한 이론이 아니다. ‘화면의 모든 간격과 크기를 8의 배수로 맞추자’는 단순한 약속이다. 8px, 16px, 24px, 32px, 40px… 이런 식으로. 작은 곳에선 8을 반으로 쪼갠 4px까지 쓰기도 한다. 왜 하필 8이냐고? 8은 2로도, 4로도 딱 떨어져서 쪼개기 좋고, 요즘 화면 해상도 대부분이 8의 배수로 설계돼 있어 흐릿하게 번지지 않는다. 무엇보다 ‘8의 배수’라는 단순한 규칙 하나만 공유하면, 디자이너가 열 명이어도 결과물의 간격이 자연스럽게 들어맞는다. 11px이냐 12px이냐를 매번 고민하지 않아도 되니, 의사결정이 빨라지고 결과물이 일관돼진다.

핵심은 ‘일관성’이라는 단어다. 사람의 눈은 규칙을 귀신같이 알아챈다. 카드 사이 간격이 전부 16px이면 눈은 ‘아, 이건 같은 묶음이구나’ 하고 편하게 묶어 읽는다. 그런데 어떤 건 14px, 어떤 건 18px이면, 눈은 ‘이건 같은 건가 다른 건가’ 하고 매번 미세하게 멈칫한다. 그 멈칫거림이 모이면 ‘어수선하다’는 인상이 된다. 반대로 간격이 규칙적이면, 사용자는 그걸 의식하지 못한 채 ‘여기 정돈됐네, 믿을 만하네’라고 느낀다. 좋은 간격은 칭찬받지 못한다. 그저 ‘불편하지 않을’ 뿐이다. 하지만 그 ‘불편하지 않음’이야말로 공공 서비스가 줘야 할 가장 기본적인 신뢰다.

여기서 한 발 더 들어가면 ‘디자인 토큰’이 나온다. 토큰은 쉽게 말해 ‘이름표가 붙은 약속값’이다. ‘카드와 카드 사이는 spacing-16’, ‘섹션과 섹션 사이는 spacing-48’ 이런 식으로, 자주 쓰는 간격에 이름을 붙여 한곳에 모아두는 거다. 그러면 페이지를 만들 때마다 ‘몇 px 띄울까’ 고민하지 않고 ‘spacing-16’이라는 이름표만 가져다 쓴다. 모두가 같은 이름표를 쓰니 결과가 저절로 들어맞는다. 그리고 나중에 ‘카드 간격을 16에서 20으로 바꾸자’가 되면, 토큰 한 곳만 고치면 그걸 쓰는 모든 페이지가 한꺼번에 바뀐다. 이게 토큰의 힘이다.

토큰을 ‘레시피의 계량’에 빗대면 이해가 빠르다. 음식점에서 요리사 열 명이 각자 ‘소금을 적당히’ 넣으면, 같은 메뉴인데도 손님은 매번 다른 맛을 본다. 어떤 날은 짜고 어떤 날은 싱겁다. 그런데 ‘소금 5g’이라고 계량을 정해두면, 누가 만들어도 같은 맛이 난다. 디자인 토큰이 바로 이 ‘계량표’다. ‘여백 적당히’를 ‘여백 16px’로 못 박아, 누가 페이지를 만들어도 같은 리듬이 나오게 한다. 공공 사이트처럼 여러 부서, 여러 외주가 오랜 세월에 걸쳐 손대는 곳일수록 이 계량표의 가치가 크다. 사람은 바뀌어도 계량표는 남기 때문이다.

한 가지 짚어둘 게 있다. 토큰은 ‘디자이너만의 도구’가 아니다. 콘텐츠 담당자가 게시판 글을 올릴 때도, 신청 양식을 기획하는 담당자가 폼을 짤 때도, 결국 ‘얼마나 띄울까’를 마주한다. 그때 머릿속의 눈대중 대신 ‘우리 사이트는 항목 사이를 16px 띄운다’는 공유된 약속이 있으면, 비전공자도 일관된 결과를 낸다. 그래서 토큰은 ‘디자인 부서가 알아서 할 일’이 아니라 ‘사이트에 손대는 모두가 함께 쓰는 공용어’에 가깝다. 오늘 점검의 E 묶음에서 이 이야기를 본격적으로 다룬다.

행정안전부가 KRDS(디지털 정부 서비스 디자인 시스템)를 통해 색·글꼴·간격을 토큰으로 정리해 둔 이유도 정확히 여기에 있다. 전국의 수많은 기관이 각자 눈대중으로 사이트를 만들면, 국민은 기관을 옮길 때마다 ‘낯선 사이트’를 새로 익혀야 한다. 그런데 모두가 같은 토큰을 공유하면, 한 기관에서 익힌 사용법이 다른 기관에서도 통한다. 간격·정렬의 일관성은 한 사이트 안의 문제이기도 하지만, 더 크게는 ‘대한민국 공공 서비스 전체의 일관성’이라는 문제이기도 하다. 우리 사이트의 토큰을 챙기는 일이, 결국 국민이 공공 서비스를 더 쉽게 쓰게 만드는 일로 이어지는 셈이다.

오늘 점검은 결국 이 질문 하나로 요약된다. “우리 사이트는 보이지 않는 격자 위에 정돈돼 있는가, 아니면 각자 눈대중으로 띄운 여백들이 모여 어수선해졌는가?” 이 질문을 머리에 박아두고, 이제 하나씩 따져보자.

■ 2. 점검 전 ‘준비운동’ — 어떻게 봐야 진짜 문제가 보이나

간격 점검은 색이나 글자 점검과 결이 좀 다르다. 색은 ‘빨강인가 파랑인가’처럼 한눈에 딱 보이지만, 간격은 ‘이게 16인지 14인지’를 눈대중으로 가늠하기 어렵다. 그래서 점검 방법 자체에 약간의 요령이 필요하다. 본 점검에 들어가기 전에 ‘준비운동’ 삼아 세 가지 방법을 익혀두자.

첫째, ‘곁눈질’이다. 화면을 정면으로 또렷이 보지 말고, 일부러 눈을 살짝 가늘게 뜨거나 화면에서 한 걸음 물러나 흐릿하게 본다. 그러면 글자나 그림 같은 ‘내용’이 흐려지고 ‘덩어리와 여백’만 남는다. 이 상태에서 화면을 보면, 여백이 들쭉날쭉한 곳이 의외로 또렷이 드러난다. 정면으로 볼 땐 내용에 정신이 팔려 못 보던 ‘리듬의 어긋남’이 흐릿하게 볼 때 비로소 보인다. 디자이너들이 실제로 쓰는 오래된 요령이다.

둘째, ‘스크롤 흐름 보기’다. 페이지를 위에서 아래로 천천히 한 번 스크롤하면서, 섹션과 섹션 사이의 ‘쉼’이 일정한지 느껴본다. 잘 정돈된 페이지는 스크롤할 때 ‘숨 쉬는 리듬’이 일정하다. 어수선한 페이지는 어떤 섹션은 답답하게 붙어 있고 어떤 섹션은 휑하게 떠 있어서, 스크롤이 ‘덜컹덜컹’한다. 이 ‘덜컹거림’의 느낌만 잘 잡아도 간격 문제의 절반은 찾는다.

셋째, ‘나란히 띄워 비교하기’다. 메인 페이지, 목록 페이지, 상세 페이지, 신청 페이지를 각각 다른 탭에 띄워놓고 탭을 빠르게 오가며 본다. 같은 ‘카드’인데 페이지마다 간격이 다른지, 같은 ‘제목과 본문 사이’인데 여백이 들쭉날쭉한지는, 한 페이지만 봐서는 절대 안 보인다. 여러 화면을 빠르게 오가야 비로소 ‘아, 페이지마다 따로 노는구나’가 한눈에 들어온다. 간격의 균열은 ‘화면을 넘나들 때’ 가장 잘 드러나기 때문이다.

이 셋만 익혀두면, 디자인 전공자가 아니어도 간격 문제를 80%는 잡아낼 수 있다. 나머지 20%, 즉 ‘이게 정확히 몇 px 틀어졌나’ 같은 정밀한 수치는 어차피 사람 눈으로 잴 수 없다. 그건 뒤에서 이야기할 자동 진단 도구의 몫이다. 우리가 오늘 할 일은 ‘어디가 이상한지’를 손가락으로 가리킬 수 있을 만큼만 찾아내는 것이다. 그 정도면 충분하다.

네 번째 방법을 하나 더 보태자면 ‘동료의 눈 빌리기’다. 매일 우리 사이트를 보는 우리는 이미 화면에 익숙해져서, 어지간히 어긋난 여백도 그냥 넘긴다. 그런데 우리 사이트를 처음 보는 동료나 가족에게 ‘이 페이지 좀 봐줘, 어디가 어수선해?’라고 물으면, 의외로 우리가 못 보던 걸 콕 집어낸다. ‘여기 글자가 너무 붙어서 답답해’ ‘이 버튼들은 왜 이렇게 다닥다닥해?’ 같은 말이 곧 점검 항목이 된다. 익숙함은 점검의 가장 큰 적이다. 그래서 ‘낯선 눈’을 한 번 빌리는 것만으로도, 혼자 한 시간 들여다본 것보다 많은 걸 찾기도 한다.

그리고 점검을 시작하기 전에 ‘비교 기준’이 될 좋은 사례를 하나 머릿속에 띄워두면 도움이 된다. 평소 ‘이 사이트는 깔끔하다’고 느끼던 곳을 떠올려, 그곳의 여백과 정렬이 어떻게 정돈돼 있는지를 잠깐 본 뒤 우리 사이트를 보는 거다. 비교 대상이 있으면 ‘어수선함’이 훨씬 또렷이 보인다. 사람의 눈은 절대적인 수치보다 ‘상대적인 차이’에 훨씬 민감하기 때문이다. 단, 그 좋은 사례를 그대로 베끼라는 게 아니라 ‘정돈됐다는 게 어떤 느낌인지’를 눈에 새기라는 뜻이다.

그리고 점검할 땐 꼭 ‘아니오’ 옆에 한 줄짜리 메모를 남기자. 이를테면 ‘D-2 아니오 — 신청 페이지 카드 간격이 메인보다 좁아 답답함’처럼. 이 한 줄이 나중에 ‘무엇을 고쳐야 하는지’를 정확히 짚어주는 작업 지시서가 된다. 점검만 하고 적어두지 않으면, 며칠 지나 ‘분명 뭔가 아니오가 많았는데 뭐였더라’가 된다. 점검의 가치는 ‘발견’이 아니라 ‘기록’에서 완성된다.

■ 3. A. 여백·간격 점검 (가장 기본)

이제 본격적으로 들어간다. 첫 묶음은 ‘여백과 간격’ 그 자체다. 가장 기초이자 가장 많이 어긋나는 영역이다. 아래 항목을 보며 ‘예/아니오’를 적어보자.

A-1. 같은 종류의 요소(카드·목록 항목·버튼)들 사이 간격이 페이지 안에서 일정한가?

→ 자주 보이는 문제: 첫 번째와 두 번째 카드는 16px 떨어져 있는데 세 번째는 12px만 붙어 있다. 손으로 하나씩 배치하다 어긋난 경우다. 미세하지만 눈은 분명히 ‘덜컹’한다.

A-2. 제목과 본문, 본문과 그 아래 요소 사이 ‘위아래 여백’에 규칙이 있는가?

→ 자주 보이는 문제: 어떤 단락은 제목에 본문이 바짝 붙어 있고, 어떤 단락은 휑하게 떨어져 있다. ‘제목 아래는 항상 8px’ 같은 규칙이 없을 때 흔하다.

A-3. 콘텐츠 영역과 화면 가장자리 사이 ‘바깥 여백’이 좌우 대칭인가?

→ 자주 보이는 문제: 왼쪽 여백은 넉넉한데 오른쪽은 콘텐츠가 화면 끝에 닿을 듯 붙어 있다. 모바일에서 특히 자주 깨진다.

A-4. 섹션과 섹션을 가르는 ‘큰 여백’이 작은 요소 사이 여백보다 확실히 큰가?

→ 자주 보이는 문제: 큰 묶음 사이 간격과 작은 요소 사이 간격이 비슷해, 어디서 한 덩어리가 끝나고 다음이 시작되는지 모호하다.

이 네 항목은 ‘리듬’에 관한 것이다. 좋은 간격은 작은 여백·중간 여백·큰 여백이 ‘계단’처럼 명확히 구분된다. 가까이 있어야 할 것(제목과 그 본문)은 가깝게, 떨어져 있어야 할 것(다른 섹션)은 확실히 멀게. 이 계단이 무너지면 사용자는 ‘무엇이 한 묶음인지’를 직관적으로 못 읽고, 화면 전체를 글자 그대로 ‘읽어내려’ 가야 한다. 그건 피곤한 일이다.

A 영역에서 ‘아니오’가 나왔다면 십중팔구 원인은 하나다. ‘간격 규칙이 머릿속에만 있고, 화면 어디에도 적혀 있지 않다’는 것. 페이지를 만들 때마다 담당자나 외주가 ‘대충 이 정도면 보기 좋겠지’ 하고 눈대중으로 여백을 박는다. 그런데 머릿속의 ‘적당한 여백’은 사람마다 다르고, 같은 사람도 그날 기분에 따라 다르다. 이렇게 ‘각자의 눈대중’으로 만든 결과물이 모이면, 개별로는 다 그럴듯한데 전체로는 제각각인 사이트가 된다. 그래서 A 영역의 해법은 ‘여백을 더 잘 고르는 것’이 아니라 ‘8의 배수라는 규칙을 화면 밖으로 꺼내 모두가 같은 걸 보고 쓰게 하는 것’이다. 바로 8pt 그리드이고, 디자인 토큰이다.

여기서 현실적인 조언 하나. A 영역에서 ‘아니오’가 잔뜩 나왔다고 모든 페이지의 여백을 한 번에 다 고치려 들지 말자. 그건 끝이 안 보이는 일이고, 도중에 지쳐 포기하기 십상이다. 대신 ‘앞으로 만드는 것부터 8의 배수를 지키게’ 하고, 기존 페이지는 방문이 많은 것부터 천천히 정리하는 게 현실적이다. 간격은 한 번에 다 잡는 게 아니라, 기준을 세워두고 점진적으로 수렴시키는 영역이다. 새 페이지가 모두 같은 간격 토큰을 쓰기 시작하면, 시간이 지날수록 사이트는 저절로 정돈된다. A 영역의 ‘아니오’는 ‘지금 당장 큰일’이라기보다 ‘이제 간격 기준을 세울 때가 됐다’는 신호에 가깝다.

A 영역에서 의외로 자주 놓치는 게 ‘큰 여백의 가치’다. 사람들은 여백이 많으면 ‘공간 낭비’라고 여겨 자꾸 채우려 한다. 그래서 섹션과 섹션을 바짝 붙이고, 빈 곳에 배너 하나라도 더 끼워 넣는다. 그런데 여백은 낭비가 아니라 ‘쉼표’다. 글에 쉼표와 마침표가 없으면 숨이 차듯, 화면에 여백이 없으면 눈이 숨 쉴 곳을 잃는다. 특히 섹션을 가르는 큰 여백은 ‘여기서 한 묶음이 끝났다’는 신호라, 이게 충분치 않으면 사용자는 어디까지가 한 덩어리인지 헷갈린다. 그러니 A 영역을 점검할 때 ‘여백이 너무 많은 거 아냐?’라는 의심이 들면, 오히려 ‘이 정도는 있어야 숨통이 트인다’ 쪽으로 마음을 돌려보길 권한다. 잘 만든 사이트일수록 ‘비워두는 용기’가 있다.

한 가지 사례를 익명으로 들어보자. 한 광역지자체(A광역지자체) 사이트를 살펴보니, 메인 페이지는 여백이 넉넉해 보기 좋았는데 부서별 하위 페이지로 들어갈수록 여백이 점점 줄어 답답해졌다. 알고 보니 메인은 본청에서 외부 업체에 맡겨 정성껏 만들었고, 하위 페이지는 부서 담당자들이 그때그때 직접 채운 것이었다. 메인을 만든 업체의 ‘여백 감각’이 하위 페이지엔 전해지지 않은 거다. 이건 어느 한 사람의 잘못이 아니라 ‘공유된 간격 규칙이 없었던’ 구조의 문제다. 이런 사례는 규모가 크든 작든, 예산이 많든 적든 거의 똑같이 나타난다. 읽으면서 ‘우리도 저런데’ 싶어도 자책할 필요는 없다. 대부분이 겪는 일이고, 대부분이 ‘공유된 간격 토큰을 세우는’ 같은 방법으로 풀어왔다.

■ 4. B. 정렬·줄맞춤 점검

여백이 ‘얼마나 띄웠나’의 문제라면, 정렬은 ‘선이 맞나’의 문제다. 둘은 짝꿍이라 함께 봐야 한다.

B-1. 위아래로 놓인 요소들의 ‘왼쪽 시작선’이 한 줄로 맞아 있는가?

→ 자주 보이는 문제: 제목은 약간 들어가 있고 본문은 더 들어가 있고 버튼은 또 다르게 들어가 있다. 보이지 않는 세로 기준선이 없을 때다. 곁눈질로 보면 들쭉날쭉한 ‘계단’이 보인다.

B-2. 카드나 박스 안의 내용(아이콘·제목·설명)이 안쪽에서 일정한 여백을 두고 정렬돼 있는가?

→ 자주 보이는 문제: 어떤 카드는 내용이 위쪽에 몰려 있고 어떤 카드는 가운데 떠 있다. 카드 안쪽 여백(패딩)이 제각각이다.

B-3. 표(테이블)의 칸 안에서 숫자는 오른쪽, 글자는 왼쪽처럼 정렬 규칙이 일관되는가?

→ 자주 보이는 문제: 숫자가 가운데 정렬돼 있어 자릿수 비교가 어렵다. 금액·인원 같은 숫자는 오른쪽 정렬이 읽기 좋다.

B-4. 나란히 놓인 요소들의 ‘높이’나 ‘세로 중심’이 맞아 있는가?

→ 자주 보이는 문제: 옆으로 늘어선 카드들의 아래쪽 끝이 들쭉날쭉하다. 내용 길이가 달라 높이가 안 맞은 채로 방치된 경우다.

정렬은 ‘보이지 않는 선’의 문제다. 화면 어디에도 실제로 선이 그어져 있진 않지만, 사용자의 눈은 무의식중에 요소들의 가장자리를 이어 ‘가상의 선’을 그린다. 그 가상의 선이 깔끔하게 맞아떨어지면 ‘정돈됐다’고 느끼고, 군데군데 어긋나면 ‘덜 다듬어졌다’고 느낀다. 신기하게도, 단 하나의 요소만 왼쪽으로 3px 튀어나와 있어도 전체가 어수선해 보인다. 정렬은 ‘대부분 맞고 하나만 틀린’ 게 ‘전부 조금씩 틀린’ 것보다 더 눈에 거슬릴 때가 많다. 튄 하나가 ‘실수’처럼 보이기 때문이다.

정렬 점검의 가장 쉬운 방법은 ‘손가락이나 종이 가장자리를 화면에 대보는’ 것이다. 세로로 곧은 가장자리를 요소들의 왼쪽 시작선에 가져다 대보면, 어느 것이 그 선에서 벗어나 있는지 바로 보인다. 디지털로는 화면을 캡처해 그림판에 붙인 뒤 직선 도구로 기준선을 그어봐도 된다. 이렇게 ‘기준선’을 실제로 그어보면, 눈대중으로는 ‘대충 맞는 것 같던’ 요소들이 사실은 미세하게 어긋나 있다는 걸 알게 된다.

B-4의 ‘높이 맞추기’는 특히 카드형 레이아웃에서 자주 깨진다. 카드 세 개를 나란히 놓았는데 안의 글자 수가 달라 높이가 제각각이면, 아래쪽 끝이 들쭉날쭉해진다. 이건 사용자가 콘텐츠를 ‘비교’할 때 특히 거슬린다. 같은 줄에 있는 것들은 ‘같은 위상’이라고 읽히는데, 높이가 어긋나면 그 ‘같은 위상’이라는 신호가 흔들리기 때문이다. 좋은 사이트는 옆으로 늘어선 카드의 높이를 자동으로 맞춰 아래 끝선을 가지런히 정리한다. 작은 디테일 같지만, 이게 맞느냐 아니냐가 ‘공들인 사이트’와 ‘대충 만든 사이트’를 가른다.

정렬 점검에서 한 가지 더 챙기면 좋은 게 ‘아이콘과 글자의 세로 중심’이다. 메뉴나 버튼에서 아이콘 옆에 글자가 붙는 경우가 많은데, 이 둘의 세로 가운데가 안 맞으면 글자가 아이콘보다 살짝 위나 아래로 떠 보인다. 한두 px의 어긋남인데도, 사람 눈은 이걸 ‘뭔가 어색하다’고 귀신같이 잡아낸다. 곁눈질로 메뉴 줄을 쭉 훑어 ‘글자가 아이콘과 한 줄에 가지런히 누워 있는지’를 보면, 이런 미세한 어긋남이 드러난다. 이 정도 디테일까지 맞아 있는 사이트는 사용자에게 ‘여기는 정말 꼼꼼하게 만들었구나’라는 인상을 준다. 신뢰는 이런 작은 정렬의 누적에서 쌓인다.

정렬이 잘 맞는다는 것의 본질은 ‘사용자의 눈이 일을 덜 하게 만드는 것’이다. 시작선이 가지런하면 눈은 다음 줄을 찾으려 헤매지 않는다. 같은 묶음이 한 기준선에 정렬돼 있으면 ‘이것들은 한 덩어리’임을 따로 설명하지 않아도 안다. 정렬은 사용자에게 ‘무엇과 무엇이 연결돼 있는지’를 말 없이 알려주는 언어다. 그래서 정렬이 흐트러진 화면은 ‘읽기 어렵다’를 넘어 ‘무엇이 무엇과 관련되는지 헷갈리는’ 화면이 된다. 정렬은 미관이기 이전에 ‘정보의 구조를 보여주는 도구’인 셈이다.

정렬이 흐트러지는 원인 역시 간격과 똑같다. ‘기준선이 약속돼 있지 않아서’다. 페이지를 만드는 사람마다 ‘왼쪽 여백 몇 px에서 시작할지’를 그때그때 정하면, 페이지가 늘어날수록 시작선이 제각각이 된다. 그래서 정렬도 결국 ‘레이아웃 그리드’라는 약속, 즉 ‘콘텐츠는 항상 이 기준선에서 시작한다’는 규칙을 정해 모두가 지킬 때 비로소 잡힌다. 간격 토큰과 레이아웃 그리드는 한 묶음이다. 둘 다 ‘눈대중을 약속으로 바꾸는’ 일이다.

정렬을 점검할 때 ‘텍스트 정렬 방식’도 함께 보면 좋다. 공공웹에서 의외로 자주 보이는 게 ‘본문 가운데 정렬’이다. 제목이라면 모를까, 여러 줄짜리 본문을 가운데 정렬하면 줄마다 시작 위치가 들쭉날쭉해져서 눈이 다음 줄의 시작점을 찾느라 헤맨다. 읽는 속도가 눈에 띄게 느려진다. 본문은 거의 항상 왼쪽 정렬이 정답이다. 줄의 시작점이 한 줄로 가지런해야 눈이 ‘다음 줄’로 자연스럽게 떨어지기 때문이다. 안내문이나 공지처럼 ‘정중해 보이려고’ 가운데 정렬한 본문이 있다면, 그건 오히려 읽기를 방해하고 있을 가능성이 높다.

정렬의 어긋남이 특히 위험한 곳이 ‘표(테이블)’다. 공공 서비스는 통계, 일정, 요금 같은 표가 많은데, 표는 정렬 규칙이 조금만 흐트러져도 ‘읽을 수 없는 표’가 된다. 숫자가 가운데나 왼쪽에 정렬돼 있으면 자릿수가 안 맞아 ‘1,000과 900 중 뭐가 큰지’를 한눈에 비교하기 어렵다. 숫자는 오른쪽 정렬해야 같은 자릿수끼리 세로로 줄이 맞아 비교가 쉬워진다. 반대로 ‘성명·부서명’ 같은 글자는 왼쪽 정렬이 읽기 좋다. 이 ‘숫자는 오른쪽, 글자는 왼쪽’이라는 단순한 규칙 하나만 표 전체에 일관되게 적용해도, 같은 데이터가 훨씬 또렷하게 읽힌다. 표의 정렬은 ‘미관’이 아니라 ‘정보 전달의 정확성’ 문제다.

■ 5. C. 반응형·모바일에서의 간격 점검

데스크탑에선 멀쩡하던 간격이 모바일에선 와르르 무너지는 경우가 정말 많다. 그래서 C 묶음은 반드시 ‘진짜 스마트폰’으로 확인해야 한다. 브라우저의 화면 축소 기능만 믿지 말고, 손에 폰을 들고 보자.

C-1. 모바일에서 콘텐츠 좌우 여백이 충분해 글자가 화면 끝에 닿지 않는가?

→ 자주 보이는 문제: 데스크탑 여백을 그대로 가져와 모바일에선 글자가 화면 가장자리에 바짝 붙어 답답하다. 반대로 여백이 과해 정작 읽을 영역이 좁아지기도 한다.

C-2. 버튼·링크 사이 간격이 손가락으로 누르기에 충분한가? (오누름 방지)

→ 자주 보이는 문제: 버튼들이 너무 붙어 있어 옆 버튼을 잘못 누른다. 손가락 끝은 마우스 포인터보다 훨씬 둔하다.

C-3. 데스크탑에서 옆으로 늘어서던 요소들이 모바일에선 위아래로 잘 쌓이며, 그때 위아래 간격이 적절한가?

→ 자주 보이는 문제: 가로 배치가 세로로 바뀌면서 요소들이 너무 붙거나 너무 떠버린다.

C-4. 표나 넓은 콘텐츠가 모바일 화면을 ‘옆으로 삐져나가게’ 만들지 않는가?

→ 자주 보이는 문제: 표가 화면보다 넓어 가로 스크롤이 생기고, 그 바람에 전체 레이아웃이 틀어진다.

C-5. 모바일에서 위아래로 쌓인 카드·목록의 간격이 ‘너무 붙지도, 너무 뜨지도’ 않게 적절한가?

→ 자주 보이는 문제: 항목 사이가 너무 붙어 어디까지가 한 항목인지 헷갈리거나, 반대로 너무 떠서 스크롤이 끝없이 길어진다.

C-4의 ‘가로 스크롤’은 모바일에서 특히 골치 아픈 문제다. 화면보다 넓은 표 하나가 끼어 있으면, 그 표뿐 아니라 페이지 전체가 옆으로 밀려 본문 글자까지 화면을 삐져나간다. 사용자는 글을 읽으려고 자꾸 좌우로 손가락을 끌어야 한다. 공공 서비스는 통계표·요금표가 많아 이 문제가 유독 잦다. 잘 만든 사이트는 좁은 화면에서 표를 ‘옆으로 스크롤되는 작은 박스’ 안에 가두거나, 아예 항목을 위아래로 풀어 카드 형태로 바꿔 보여준다. 이렇게 하면 표 하나 때문에 페이지 전체가 틀어지는 일을 막을 수 있다. 모바일 점검에서 ‘옆으로 손가락이 끌리는 곳’이 있다면, 십중팔구 그 자리에 화면보다 넓은 무언가가 끼어 있는 것이다.

C-2의 ‘손가락 간격’은 단순한 미관이 아니라 접근성 문제다. 행정안전부의 「전자정부 웹사이트 품질관리 지침」이 담은 7대 영역(호환성·접근성·개방성·접속성·편의성·효율성·신뢰성) 중 접근성, 그리고 웹접근성 지침 KWCAG 33항목과도 직결된다. 손이 불편한 사용자, 화면이 작은 폰을 쓰는 사용자, 흔들리는 버스 안에서 신청하는 사용자 — 이들에게 버튼 사이 간격은 ‘되고 안 되고’를 가르는 문제다. 누르려던 ‘신청’ 대신 옆의 ‘취소’가 눌려 작성하던 내용이 날아간다면, 그건 단순한 불편이 아니라 서비스 실패다.

반응형에서 간격이 깨지는 근본 원인은 ‘데스크탑 간격을 모바일에 그대로 복사’하기 때문이다. 데스크탑에서 24px이 적당했다고 모바일에서도 24px이 적당한 건 아니다. 화면이 좁아지면 여백의 ‘비율’이 달라진다. 그래서 잘 설계된 디자인 토큰은 화면 크기에 따라 간격이 단계적으로 바뀌도록 설계된다. 예를 들어 큰 화면에선 섹션 간격 48px, 작은 화면에선 32px로 줄어드는 식이다. 이게 바로 토큰을 ‘약속값’으로 관리할 때 얻는 이득이다. 화면 크기마다 일일이 손보는 게 아니라, 토큰 하나에 ‘이 크기에선 이 값’이라는 규칙을 담아두면 모든 페이지가 알아서 따라온다.

C 영역은 ‘우리 사이트에서 사람들이 가장 많이 하는 일’을 모바일로 직접 해보는 게 최선이다. 요즘 공공 서비스는 모바일 이용 비중이 데스크탑을 넘어선 곳이 많다. 그러니 ‘우리 신청 흐름을 내 폰으로, 진짜 사용자처럼’ 처음부터 끝까지 밟아보라. 그 한 번의 완주가 데스크탑 점검 열 번보다 많은 걸 알려준다. 그리고 그 과정에서 ‘아, 여기서 손가락이 자꾸 미끄러지네’ ‘여기 글자가 너무 붙었네’ 싶은 지점이 곧 가장 먼저 고쳐야 할 곳이다.

모바일 점검에서 흔히 빠뜨리는 게 ‘가로 모드’와 ‘큰 글자 설정’이다. 사용자는 폰을 세로로만 쓰지 않는다. 가로로 돌렸을 때 레이아웃이 무너지지 않는지, 그리고 시력이 약한 사용자가 시스템 글자 크기를 크게 키웠을 때 간격이 깨져 글자가 서로 겹치거나 화면을 삐져나가지 않는지도 봐야 한다. 특히 ‘큰 글자’ 설정은 고령 사용자가 많은 공공 서비스에서 매우 흔한 환경인데, 의외로 많은 사이트가 이때 레이아웃이 와르르 무너진다. 글자만 키웠는데 버튼이 잘려 안 눌리거나, 줄과 줄이 겹쳐 읽을 수 없게 되는 식이다. 이건 접근성의 핵심 항목이라 KWCAG 점검에서도 비중 있게 다뤄진다. 우리 폰의 글자 크기를 한 단계 키워놓고 사이트를 한 바퀴 도는 것만으로도, 평소 안 보이던 문제가 잔뜩 드러난다.

또 하나, 모바일에서는 ‘엄지손가락이 닿는 범위’를 생각해야 한다. 한 손으로 폰을 쥐었을 때 엄지가 자연스럽게 닿는 영역이 있고, 화면 위쪽 끝처럼 손이 잘 안 가는 영역이 있다. 자주 누르는 핵심 버튼(다음·제출·검색)이 손이 안 닿는 곳에 있으면, 사용자는 폰을 고쳐 쥐거나 두 손을 써야 한다. 작은 불편 같지만 이런 게 쌓이면 ‘쓰기 불편한 사이트’라는 인상이 된다. 그래서 모바일 점검은 단순히 ‘간격이 충분한가’를 넘어 ‘이 손가락으로 편하게 닿는가’까지 봐야 한다. 책상 앞에서 마우스로 보는 점검과, 실제로 폰을 한 손에 쥐고 걸으면서 해보는 점검은 결과가 완전히 다르다.

■ 6. D. 화면 전체의 ‘일관성’ 점검 — 페이지를 넘나들며 보기

앞의 A·B·C가 ‘한 페이지 안’의 점검이었다면, D는 ‘페이지와 페이지 사이’의 점검이다. 사실상 오늘 글의 핵심이다. 디자인 일관성이라는 게 결국 ‘여러 페이지가 같은 규칙을 따르는가’의 문제이기 때문이다.

D-1. 메인·목록·상세·신청 페이지에서 ‘카드 사이 간격’이 동일한가?

→ 자주 보이는 문제: 같은 모양의 카드인데 메인에선 16px, 목록에선 12px, 상세에선 20px 간격. 부서별·시기별로 따로 만든 흔적이다.

D-2. 모든 페이지에서 콘텐츠의 ‘왼쪽 시작선’이 같은 위치인가?

→ 자주 보이는 문제: 페이지마다 콘텐츠가 시작되는 좌측 기준이 미묘하게 달라, 페이지를 옮길 때마다 화면이 ‘살짝 움찔’한다.

D-3. 제목·소제목·본문의 위아래 간격 규칙이 모든 페이지에서 동일한가?

→ 자주 보이는 문제: 어떤 페이지는 제목 아래가 넉넉하고 어떤 페이지는 바짝 붙어, 같은 사이트 안에서도 ‘리듬’이 다르다.

D-4. 페이지를 빠르게 오갈 때 헤더·푸터·여백이 ‘제자리’에 있어 화면이 출렁이지 않는가?

→ 자주 보이는 문제: 페이지마다 헤더 높이나 여백이 미세하게 달라, 탭을 옮길 때 화면이 위아래로 덜컹인다.

D 영역은 앞서 말한 ‘나란히 띄워 비교하기’가 진가를 발휘하는 곳이다. 한 페이지씩 따로 보면 다 ‘이 정도면 괜찮은데’ 싶다. 그런데 여러 페이지를 탭에 띄워놓고 빠르게 오가 보면, ‘아, 이 사이트는 페이지마다 따로 노는구나’가 한눈에 들어온다. 특히 D-4의 ‘출렁임’은 사용자가 의식적으로 알아채진 못해도 ‘이 사이트 어딘가 불안정하다’는 인상을 남긴다. 페이지를 옮길 때마다 화면이 미세하게 점프하는 사이트는, 마치 발걸음마다 바닥이 살짝 기우는 것 같은 불안감을 준다.

여기서 강조하고 싶은 게 있다. 일관성은 ‘각 페이지가 예쁜가’보다 훨씬 중요하다. 페이지 하나하나가 아무리 잘 만들어졌어도, 페이지마다 규칙이 다르면 사용자는 ‘이 사이트는 통일성이 없다, 관리가 안 된다’고 느낀다. 반대로 각 페이지가 화려하지 않아도 모든 페이지가 같은 간격·같은 정렬 규칙을 따르면, 사용자는 ‘아, 이 사이트는 체계가 잡혀 있구나’ 하고 신뢰한다. 공공 서비스에서 이 신뢰는 곧 ‘이 기관이 일을 꼼꼼히 한다’는 인상으로 이어진다. 그래서 D 영역의 ‘아니오’는 미관 문제가 아니라 기관 신뢰도의 문제다.

일관성이 깨지는 가장 흔한 시나리오는 이렇다. 처음엔 한 업체가 사이트를 통째로 만들어 어느 정도 일관됐다. 그런데 몇 년 지나며 새 서비스가 추가되고, 그때마다 다른 담당자, 다른 외주가 ‘그때그때’ 페이지를 붙였다. 각자 나름대로 잘 만들었지만, 공유된 간격 규칙이 없으니 페이지마다 미묘하게 달라졌다. 5년쯤 지나면 ‘한 사이트인데 다섯 사이트가 모인’ 것처럼 돼버린다. 이게 거의 모든 노후 공공웹의 공통된 사연이다. 그러니 D 영역에서 ‘아니오’가 많이 나와도 자책할 필요 없다. 대부분이 겪는 일이고, 대부분이 ‘공유된 간격 토큰을 세우는’ 같은 방법으로 풀어왔다.

여기서 한 가지 익명 사례를 더 보자. 한 공공기관(B공공기관)은 본 사이트와 별개로 ‘민원 신청’ 부분만 다른 시기에 다른 업체가 만들었다. 그 결과 본 사이트에서 신청 페이지로 넘어가는 순간, 콘텐츠 시작선이 왼쪽으로 12px쯤 옮겨가고 카드 간격도 달라져 화면이 ‘툭’ 점프했다. 사용자는 그 점프를 의식적으로 알아채진 못해도, ‘방금 다른 사이트로 넘어온 건가?’ 하는 미묘한 불안을 느낀다. 그리고 그 불안은 ‘여기서 결제·신청 정보를 넣어도 안전한가’ 하는 신뢰의 균열로 번진다. 간격의 일관성이 단순한 미관이 아니라 ‘신뢰’의 문제라는 게 이런 데서 드러난다. 사용자는 ‘일관된 사이트’를 ‘잘 관리되는, 믿을 만한 사이트’로 읽기 때문이다.

D 영역의 점검 결과를 정리할 땐 ‘어느 페이지가 기준에서 가장 벗어나 있는가’를 찾는 데 집중하자. 모든 페이지를 다 같은 수준으로 끌어올리는 건 어렵지만, ‘가장 튀는 페이지’ 몇 개만 기준에 맞춰도 전체 인상은 크게 좋아진다. 사용자는 ‘평균’을 보는 게 아니라 ‘가장 거슬리는 것’을 기억하기 때문이다. 잘 정돈된 페이지가 아흔아홉 개여도, 유독 어수선한 한 페이지에서 사용자가 좌절하면 그 인상이 사이트 전체의 평가가 된다. 그래서 일관성 작업은 ‘평균 올리기’가 아니라 ‘바닥 올리기’, 즉 가장 못난 페이지부터 끌어올리는 방향이 효율적이다.

■ 7. E. ‘토큰화’ 점검 — 규칙이 화면 밖에 적혀 있는가

마지막 묶음은 조금 다르다. 화면을 보는 게 아니라 ‘우리 조직의 작업 방식’을 점검한다. 앞의 모든 문제의 뿌리가 여기에 있기 때문이다.

E-1. 우리 사이트에 ‘간격은 8의 배수로 한다’ 같은 공유된 규칙 문서가 있는가?

→ 자주 보이는 문제: 규칙이 디자이너 한 사람의 머릿속에만 있고, 문서로 적힌 게 없다. 그 사람이 떠나면 규칙도 사라진다.

E-2. 새 페이지를 만들 때 ‘정해진 간격값(토큰)’을 가져다 쓰는가, 매번 눈대중으로 정하는가?

→ 자주 보이는 문제: 매번 ‘대충 이 정도’로 px을 직접 박는다. 그래서 같은 의도인데 페이지마다 값이 다르다.

E-3. ‘간격을 16에서 20으로 바꾸자’가 됐을 때, 한 곳만 고치면 전체에 반영되는가?

→ 자주 보이는 문제: 값이 페이지마다 흩어져 있어, 바꾸려면 모든 페이지를 일일이 손봐야 한다. 그래서 아무도 안 바꾼다.

E-4. 외주 업체에 작업을 맡길 때 ‘우리 토큰을 쓰라’고 명확히 요구하는가?

→ 자주 보이는 문제: 사양서에 디자인 토큰 요구가 없어, 업체가 자기 방식대로 만들어 일관성이 또 깨진다.

E 영역은 ‘오늘만의 문제’가 아니라 ‘앞으로도 계속될 문제’를 다룬다. A·B·C·D에서 아무리 많은 걸 고쳐도, E가 ‘아니오’면 같은 문제가 반년 뒤 또 생긴다. 규칙이 화면 밖, 즉 모두가 보고 쓸 수 있는 곳에 적혀 있지 않으면, 결국 ‘각자의 눈대중’으로 돌아가기 때문이다. 그래서 E는 ‘근본 치료’에 해당한다. A~D가 증상을 잡는 거라면, E는 그 증상이 다시 안 생기게 하는 체질 개선이다.

여기서 오늘의 홍보 훅인 ‘토큰 채택률 리포트’ 이야기를 잠깐 하자. 디자인 토큰을 도입했다고 해서 끝이 아니다. 진짜 중요한 건 ‘실제로 얼마나 쓰이고 있는가’다. 토큰을 만들어두고도 담당자들이 여전히 눈대중으로 px을 박고 있다면, 토큰은 장식일 뿐이다. 그래서 ‘우리 사이트가 정해진 토큰을 실제로 몇 %나 쓰고 있는지’를 수치로 보는 게 핵심이다. 이게 토큰 채택률이다. 예를 들어 ‘간격값 중 80%가 정의된 토큰을 쓰고 20%는 임의의 px을 직접 박았다’는 식으로 나오면, 그 20%가 곧 ‘일관성이 새는 구멍’이다. 이 숫자를 알면 ‘어디부터 정리할지’가 명확해진다.

E 영역의 점검은 사실 화면을 안 봐도 된다. 우리 팀에게 이 질문들을 던져보면 답이 나온다. “우리 간격 규칙 문서 어디 있어요?” “새 페이지 만들 때 간격은 어떻게 정해요?” 이 질문에 누군가 “음… 그냥 보기 좋게요”라고 답한다면, E는 거의 다 ‘아니오’다. 그리고 그건 부끄러운 게 아니라 ‘이제 토큰을 세울 때가 됐다’는 가장 정확한 신호다.

토큰 채택률이라는 개념이 왜 ‘리포트’의 형태로 쓸모 있는지 조금 더 풀어보자. 우리가 ‘토큰을 도입했다’고 말할 때, 그 말은 사실 두 가지로 갈린다. 하나는 ‘토큰 문서를 만들어뒀다’이고, 다른 하나는 ‘실제 화면이 그 토큰을 따른다’이다. 이 둘은 전혀 다른 이야기다. 멋진 토큰 문서를 만들어두고도, 정작 페이지들은 여전히 임의의 px을 박고 있는 경우가 허다하다. 문서는 책장에 꽂혀 있고, 현장은 옛날 방식대로 굴러간다. 토큰 채택률은 바로 이 ‘말과 현실의 간극’을 숫자로 드러낸다. ‘채택률 60%’라는 건 ‘우리가 정한 토큰을 실제로는 절반 조금 넘게만 쓰고, 나머지 40%는 여전히 눈대중’이라는 뜻이다. 그 40%가 곧 일관성이 새는 구멍이고, 다음에 손볼 1순위 목록이다.

그리고 이 숫자는 ‘진척을 증명’하는 데 강력하다. 디자인 일관성 개선은 성과가 눈에 잘 안 띄는 일이라, 윗선에 보고하기 까다롭다. ‘여백을 좀 정리했습니다’는 와닿지 않는다. 그런데 ‘토큰 채택률을 지난 분기 61%에서 이번 분기 79%로 18%p 올렸습니다’라고 하면, 추상적이던 ‘정돈 작업’이 또렷한 숫자가 된다. 노력이 보이고, 방향이 보이고, 다음 목표가 보인다. 막연한 ‘열심히’를 ‘측정 가능한 진전’으로 바꾸는 것 — 그게 토큰 채택률 리포트가 실무 담당자에게 주는 가장 큰 무기다. 오늘 손으로 한 점검이 ‘느낌’을 줬다면, 이 리포트는 그 느낌을 ‘보고할 수 있는 숫자’로 바꿔준다.

E 영역을 마무리하며 강조하고 싶은 건, 토큰화는 ‘완벽’이 목표가 아니라는 점이다. 채택률 100%를 단번에 만들 필요는 없다. 중요한 건 ‘방향’이다. 오늘 60%라면, 다음 분기에 70%, 그다음에 80%로 ‘올라가고 있다’는 사실이 100%라는 숫자 자체보다 의미 있다. 사이트는 계속 변하니 채택률은 늘 출렁인다. 그 출렁임 속에서도 ‘추세가 우상향’이면, 그 사이트는 분명히 좋아지고 있는 것이다. 그러니 E 영역의 ‘아니오’를 두려워하지 말자. 그건 출발선을 확인한 것뿐이고, 출발선이 있어야 얼마나 나아갔는지도 잴 수 있다.

■ 8. 점검 결과를 ‘행동’으로 — 어디부터 손댈까

이제 ‘예/아니오’를 다 적었을 거다. ‘아니오’가 한 다발 나왔다고 막막해할 필요 없다. 모든 걸 한 번에 고치는 건 불가능하고, 그럴 필요도 없다. 우선순위를 정해 하나씩 가면 된다. 내가 권하는 순서는 이렇다.

먼저 ‘E 영역’부터다. 의외라고 느낄 수 있다. 화면에 안 보이는 영역인데 왜 먼저냐고. 이유는 간단하다. E를 안 잡으면 A·B·C·D를 고쳐봤자 도로 어긋나기 때문이다. 그러니 가장 먼저 ‘간격은 8의 배수로 한다, 자주 쓰는 간격은 토큰으로 정해 공유한다’는 약속을 문서로 만들고 팀이 공유한다. 거창한 디자인 시스템 문서를 만들라는 게 아니다. A4 한 장에 ‘우리 사이트 간격 규칙’만 정리해도 시작으로 충분하다. 이 한 장이 앞으로 만드는 모든 페이지의 기준이 된다.

그 A4 한 장에 뭘 적어야 할지 막막하다면, 이렇게 시작해보자. ‘간격은 8의 배수(8·16·24·32·48)만 쓴다’ ‘작은 요소 사이는 8, 카드 사이는 16, 섹션 사이는 48’ ‘콘텐츠 왼쪽 시작선은 한 기준에서 출발한다’ ‘본문은 왼쪽 정렬, 숫자는 오른쪽 정렬’ — 이 정도 다섯 줄이면 충분한 출발점이다. 처음부터 완벽한 규칙집을 만들 필요는 없다. 일단 다섯 줄로 시작해, 작업하다 ‘이건 정해두면 좋겠다’ 싶은 게 나올 때마다 한 줄씩 보태면 된다. 중요한 건 ‘완성도’가 아니라 ‘규칙이 머릿속이 아닌 종이 위에 존재한다’는 사실 그 자체다. 종이 위에 있어야 동료와 공유되고, 외주에게 전달되고, 다음 담당자에게 인계된다.

다음은 ‘앞으로 만드는 것부터 지키기’다. 기존 페이지를 다 뜯어고치는 건 나중 일이다. 일단 오늘 이후 새로 만드는 모든 페이지가 정해진 간격 토큰을 쓰게 한다. 이것만 지켜도 사이트는 시간이 지날수록 저절로 정돈된다. 새 페이지가 늘어날수록 ‘일관된 영역’이 넓어지기 때문이다.

그다음 ‘방문이 많은 페이지부터 정리하기’다. 기존 페이지를 손볼 땐 메인, 가장 인기 있는 신청 페이지, 자주 찾는 정보 페이지 순으로 간다. 어차피 사용자 대부분은 몇 개의 핵심 페이지에 몰린다. 그 핵심 페이지의 간격과 정렬만 잡아도 ‘체감 품질’은 크게 올라간다. 구석진 페이지까지 완벽하게 만드는 건 그다음이다.

마지막은 ‘외주 사양서에 못 박기’다. 다음에 외부 업체에 작업을 맡길 때, 사양서에 ‘우리 디자인 토큰과 간격 규칙을 따를 것’을 명시한다. 이게 빠지면 업체가 또 자기 방식대로 만들어 일관성이 깨진다. 한 줄 추가하는 것만으로 앞으로의 균열을 크게 줄일 수 있다.

이 순서의 핵심은 ‘기준을 먼저, 정리는 나중’이다. 많은 기관이 반대로 한다. 눈에 보이는 어긋난 여백부터 부랴부랴 고치고, 정작 ‘왜 어긋났는지’의 뿌리인 규칙 부재는 그대로 둔다. 그러면 고치는 속도보다 새로 어긋나는 속도가 빨라, 영원히 따라잡지 못한다. 기준 한 장을 먼저 세우는 게, 결국 가장 빠른 길이다.

또 하나, 점검 결과를 ‘혼자 안고 있지 말라’고 권하고 싶다. 손에 쥔 점검표 한 장은 미뤄지던 개선 논의를 시작하게 만드는 방아쇠다. ‘우리 사이트 좀 별로인 것 같아요’라는 막연한 말로는 누구도 움직이지 않는다. 반면 ‘제가 다섯 묶음을 점검해봤더니 일관성(D)과 토큰화(E)에서 아니오가 일곱 개 나왔습니다. 특히 신청 페이지 카드 간격이 메인과 달라 화면이 점프합니다’라고 하면, 막연하던 불만이 구체적인 안건이 된다. 점검은 ‘문제를 말로 꺼낼 수 있게’ 만들어주는 도구다. 그러니 오늘 적은 ‘아니오’ 목록을, 다음 회의 때 한 장으로 정리해 들고 가보길 권한다.

그리고 개선을 진행할 땐 ‘작은 성공’을 먼저 만드는 게 좋다. 가장 눈에 띄고 가장 쉽게 고칠 수 있는 항목 하나를 골라 먼저 손보고, 그 ‘전후 비교’를 팀에 보여주는 거다. ‘이 페이지, 카드 간격만 8의 배수로 맞췄더니 이렇게 깔끔해졌습니다’ 같은 작은 사례 하나가, 백 마디 설명보다 강하게 사람을 움직인다. 일관성 개선은 길고 지루한 싸움이라, 도중에 동력을 잃기 쉽다. 그래서 초반에 ‘눈에 보이는 작은 승리’를 만들어 분위기를 띄우는 게, 끝까지 가는 데 의외로 큰 힘이 된다.

■ 9. 사람 눈의 한계, 그리고 도구의 역할

여기까지 따라왔다면 우리 사이트의 간격·정렬이 ‘대충 어느 수준인지’ 감이 왔을 거다. 그런데 솔직히 인정할 게 있다. 사람 눈으로 하는 점검에는 명확한 한계가 있다.

첫째, 정확한 수치를 못 잰다. ‘이 간격이 14px인지 16px인지’를 눈으로 정확히 가늠하는 건 불가능하다. ‘어수선하다’는 느낌은 잡아도, ‘정확히 어디가 몇 px 틀어졌나’는 못 짚는다. 그래서 사람 점검은 ‘방향’은 알려주지만 ‘정밀한 진단서’는 못 만든다.

둘째, 페이지가 많으면 손을 든다. 오늘 점검은 메인·목록·상세·신청 같은 ‘대표 페이지 몇 개’를 본 것이다. 그런데 실제 공공 사이트는 페이지가 수백, 수천 개다. 그걸 사람이 다 눈으로 점검하는 건 현실적으로 불가능하다. 우리가 본 ‘대표 페이지’가 멀쩡해도, 구석진 페이지에서 간격이 와르르 무너져 있을 수 있다.

셋째, 객관적 근거를 못 남긴다. ‘제가 보기엔 좀 어수선한데요’는 윗선이나 외주를 설득하는 데 약하다. ‘느낌’은 사람마다 다르고, 반박당하기 쉽다. 개선을 밀어붙이려면 ‘토큰 채택률 80%, 임의 간격값 152건 발견’처럼 ‘숫자로 된 근거’가 필요하다.

넷째, 매번 같은 기준으로 보기 어렵다. 사람은 컨디션에 따라, 그날 본 다른 사이트에 따라 ‘엄격함’이 달라진다. 어제는 후하게 봤다가 오늘은 깐깐하게 보면, 두 점검 결과를 나란히 비교할 수 없다. 그런데 ‘좋아지고 있는지’를 알려면 같은 잣대로 잰 두 시점의 결과가 필요하다. 도구는 늘 똑같은 기준으로 재기 때문에, ‘지난번보다 나아졌는지’를 정확히 비교할 수 있다. 사람 점검이 ‘오늘의 인상’을 준다면, 도구는 ‘시간에 걸친 추세’를 준다. 이 추세야말로 개선 작업이 제대로 가고 있는지를 판단하는 가장 믿을 만한 신호다.

이 세 가지 한계를 메우는 게 바로 자동 진단 도구의 역할이다. 도구는 사람이 못 하는 일을 한다. 모든 페이지를 빠짐없이 훑고, 간격값을 px 단위로 정확히 재고, ‘정의된 토큰을 쓴 비율’을 수치로 뽑는다. 우리가 만드는 ViewCheck가 하는 일이 정확히 이거다. 행정안전부 「전자정부 웹사이트 품질관리 지침」의 7대 영역과 KRDS 846규칙을 기준으로, 사이트를 자동으로 분석한다. 846규칙은 기초가 되는 디자인 시스템(DS) 120개, 버튼·폼 같은 부품(CP) 446개, 신청·검색 같은 기본 흐름(BP) 108개, 로그인·정책 같은 서비스 패턴(SP) 172개로 짜여 있다. 오늘 우리가 손으로 점검한 간격·정렬·토큰은 그중 DS 120개 영역의 핵심이다.

특히 오늘의 주제인 ‘토큰 채택률’은 ViewCheck의 디자인 시스템 탭에서 한눈에 본다. ‘우리 사이트가 정의된 디자인 토큰을 실제로 몇 %나 쓰고 있는지’를 수치로 보여준다. 채택률이 낮다면, 그만큼 ‘각자 눈대중으로 박은 임의 값’이 많다는 뜻이고, 그게 곧 일관성이 새는 구멍이다. 손으로 한 오늘의 점검이 ‘방향’을 잡아줬다면, 이 리포트는 ‘정확한 좌표’를 찍어준다. 둘은 대체 관계가 아니라 짝이다. 자가 점검으로 감을 잡고, 도구로 확정한다.

여기서 ‘자가 점검과 도구는 어떻게 역할이 갈리나’를 한 번 더 분명히 해두자. 둘은 건강에 빗대면 이해가 쉽다. 자가 점검은 ‘요즘 좀 피곤한데 어디가 문제지’ 하고 스스로 살펴보는 것이고, 도구 진단은 병원의 정밀 검사다. 자가 점검 없이 바로 정밀 검사만 받으면 ‘숫자는 나왔는데 뭘 봐야 할지 모르는’ 상태가 된다. 자동 진단 리포트를 처음 받아 든 담당자들이 가장 흔히 하는 말이 ‘숫자는 많은데 뭘 봐야 할지 모르겠다’이다. 그런데 오늘처럼 직접 화면을 곁눈질하고 간격을 손으로 짚어본 경험이 있으면, 같은 리포트가 ‘아, 그때 그 어수선하던 게 이 항목이구나’로 살아 움직인다. 도구는 ‘무엇이 문제인지’를 알려주지만, 그 문제가 ‘왜 문제인지’를 몸으로 아는 건 결국 사람의 몫이다. 오늘의 자가 점검은 바로 그 ‘왜’를 익히는 과정이었다.

ViewCheck가 보는 건 토큰 채택률 하나만이 아니다. 행정안전부 「전자정부 웹사이트 품질관리 지침」의 7대 영역 전반과 KRDS 846규칙, 그리고 웹접근성 KWCAG 33항목을 함께 분석해, 사이트의 상태를 ‘점수 카드’ 형태로 한눈에 보여준다. 그래서 오늘 우리가 손으로 본 간격·정렬·일관성은 물론, 색·글꼴 같은 다른 기초, 버튼·폼 같은 부품, 신청·검색 같은 흐름까지 ‘어디가 통과고 어디가 미달인지’를 빠짐없이 확인할 수 있다. 사람 눈으로는 대표 페이지 몇 개가 한계지만, 도구는 사이트 전체를 훑어 ‘우리가 못 본 구석’까지 들여다본다. 자가 점검이 ‘내가 사는 동네 한 바퀴’라면, 도구 진단은 ‘위성에서 내려다본 전체 지도’인 셈이다.

■ 10. 작은 점검의 큰 힘 — 정기적으로 반복하기

마지막으로 강조하고 싶은 건 ‘반복’이다. 오늘 한 점검은 ‘한 번 하고 끝’이 아니라 ‘정기적으로 반복’할 때 진짜 힘을 낸다.

사이트는 살아 있는 생물 같다. 콘텐츠가 추가되고 페이지가 늘어나면서 계속 변한다. 오늘 ‘예’였던 항목이 반년 뒤엔 ‘아니오’가 되어 있을 수 있다. 새 담당자가 새 페이지를 붙이면서, 또는 외주 업체가 자기 방식대로 작업하면서, 어렵게 잡아둔 일관성이 슬그머니 다시 무너진다. 그래서 분기에 한 번쯤 같은 점검표로 다시 보면, 사이트가 좋아지고 있는지 나빠지고 있는지 ‘추세’가 보인다. 오늘의 점검은 그 첫 번째 기준점을 찍는 일이다.

그리고 자동 진단 도구를 함께 쓰면 이 ‘추세 보기’가 훨씬 쉬워진다. 사람은 매번 점검하기 번거롭지만, 도구는 정기적으로 같은 기준으로 분석해 ‘지난번엔 토큰 채택률 72%였는데 이번엔 81%로 올랐다’처럼 변화를 숫자로 보여준다. 이 숫자가 쌓이면 ‘우리 사이트가 점점 좋아지고 있다’는 걸 객관적으로 증명할 수 있고, 그건 담당자에게도 윗선에도 든든한 근거가 된다. 막연한 ‘열심히 했어요’가 아니라 ‘채택률을 9%p 올렸습니다’라고 말할 수 있게 되는 거다.

반복의 또 다른 가치는 ‘기준이 점점 또렷해진다’는 데 있다. 처음 점검할 땐 ‘이게 어긋난 건지 아닌지’ 판단이 흐릿하다. 그런데 두 번, 세 번 같은 점검표로 보다 보면, ‘우리 사이트의 정돈된 상태’가 어떤 모습인지 눈에 새겨진다. 그러면 어느 날 새 페이지가 그 기준에서 벗어났을 때, 예전 같으면 그냥 넘겼을 어긋남이 ‘어, 이거 좀 이상한데’ 하고 바로 걸린다. 점검을 반복할수록 ‘우리 사이트를 보는 눈’ 자체가 정교해지는 것이다. 이건 도구만으로는 얻을 수 없는, 사람 점검만의 고유한 가치다. 도구가 ‘숫자’를 준다면, 반복된 자가 점검은 ‘안목’을 길러준다. 그리고 그 안목을 가진 담당자가 한 명이라도 팀에 있으면, 사이트는 쉽게 무너지지 않는다.

다시 처음으로 돌아가 보자. 간격은 비명을 지르지 않는다. 조용히 신뢰를 깎는다. 그래서 아무도 챙기지 않으면 가장 먼저 무너지고, 누군가 챙기면 가장 먼저 사이트를 ‘정돈된 곳’으로 바꿔놓는 영역이다. 오늘 5분의 점검이 그 ‘챙김’의 첫걸음이다. 거창한 개편 예산도, 디자인 전공 지식도 필요 없다. 그저 ‘우리 사이트의 여백이 규칙적인가’를 사용자의 눈으로 한 번 돌아보는 것 — 거기서 모든 개선이 시작된다.

【 마무리 】

오늘 우리는 다섯 묶음을 봤다. 여백·간격(A), 정렬·줄맞춤(B), 반응형·모바일(C), 페이지 간 일관성(D), 그리고 가장 뿌리인 토큰화(E). 이 다섯을 차례로 보면 우리 사이트의 간격이 ‘보이지 않는 격자 위에 정돈돼 있는지’를 빠짐없이 훑게 된다. 핵심만 다시 추리면 이렇다. 간격은 8의 배수로, 정렬은 보이지 않는 기준선에 맞춰, 그 규칙을 화면 밖 토큰으로 꺼내 모두가 공유하라. 그리고 한 번에 다 고치려 말고, 기준을 먼저 세운 뒤 새 페이지부터 지키며 점진적으로 수렴시켜라.

하지만 솔직히 말하면, 손으로 하는 점검은 거기까지다. 정확한 수치, 모든 페이지, 객관적 근거 — 이 셋은 도구의 몫이다. 우리 사이트의 ‘토큰 채택률’이 정확히 몇 %인지, 어느 페이지의 간격이 가장 많이 어긋나 있는지, 846규칙 중 무엇이 통과하고 무엇이 미달인지를 5분 만에 자동으로 확인하고 싶다면, ViewCheck에서 무료로 진단을 확인 할 수 있다. krds.viewcheck.co.kr 에 우리 사이트 주소를 넣으면, 디자인 시스템 탭에서 토큰 채택률을 비롯한 상단 점수 카드를 바로 받아볼 수 있다. 오늘 손으로 잡은 ‘감’이 도구의 ‘숫자’와 만나는 순간, 막연하던 ‘어수선함’이 ‘여기 152건, 여기부터 고치자’는 구체적인 할 일 목록으로 바뀐다.

거창하게 시작할 것 없다. 오늘 이 글을 닫기 전에, 우리 사이트 메인과 신청 페이지를 나란히 띄워 곁눈질로 한 번만 봐주시길. 여백이 ‘덜컹’하는 곳이 보인다면, 그게 바로 첫 출발점이다. 작은 점검이 큰 차이를 만든다. 다음 주에 또 다른 실무 이야기로 찾아오겠다.

키워드/태그: #KRDS #공공웹 #디자인시스템 #디자인토큰 #8pt그리드 #간격정렬 #토큰채택률 #웹접근성 #KWCAG #전자정부 #자가점검체크리스트 #ViewCheck

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