간격 들쭉날쭉, 아마추어처럼 보이는 이유

간격 들쭉날쭉, 아마추어처럼 보이는 이유

---

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

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

【 공감·문제제기 】

월요일 글에서 ‘디자인 일관성’이 왜 공공 사이트의 신뢰와 직결되는지를 큰 틀에서 이야기했다. 오늘은 그 일관성을 가장 조용히, 가장 끈질기게 갉아먹는 범인 하나를 콕 집어 보려 한다. 바로 ‘간격’이다.

솔직히 고백하면, 나도 한동안 간격을 우습게 봤다. 색이 제각각이면 한눈에 ‘아 이거 망했다’ 싶고, 글꼴이 다섯 종 섞여 있으면 ‘정신 사납다’가 바로 느껴진다. 그런데 간격은 다르다. 들쭉날쭉해도 ‘딱히 뭐가 문제인지’ 꼬집기가 어렵다. 그냥 ‘어딘가 좀 어수선한데?’, ‘왜인지 모르게 아마추어 느낌이 나는데?’ 정도로만 스쳐 지나간다. 그래서 더 무섭다. 문제가 있다는 걸 인식조차 못 하니까.

생각해 보자. 어떤 사이트는 들어가자마자 ‘아, 여기 잘 만들었네’ 하는 느낌이 든다. 또 어떤 사이트는 분명 큰 결함도 없고 색도 무난한데 ‘왠지 허접하다’는 인상을 준다. 이 차이의 절반 이상은 사실 간격이 만든다. 요소와 요소 사이가 어떤 곳은 너무 붙고 어떤 곳은 너무 떨어져 있으면, 사람 눈은 그걸 ‘정렬이 안 맞는다’고 읽는다. 정렬이 안 맞으면 ‘대충 만들었다’고 느끼고, 대충 만들었다고 느끼면 ‘이 기관이 주는 정보도 대충일까’ 하는 의심으로 번진다. 간격은 미관이 아니라 신뢰의 문제다.

이 글을 쓰는 이유가 여기 있다. 간격은 너무 작아서 무시당하지만, 너무 자주 보여서 인상을 좌우한다. 페이지 어디를 봐도 여백은 있다. 글자와 글자 사이, 문단과 문단 사이, 카드 안쪽, 버튼 주변, 표의 칸 안쪽 — 화면의 거의 모든 픽셀이 사실은 ‘간격으로 이루어진 빈 공간과 채워진 공간의 리듬’이다. 그 리듬이 규칙적이면 화면이 음악처럼 정돈돼 들리고, 제멋대로면 소음처럼 들린다.

오늘 글은 ‘왜 들쭉날쭉한 간격이 아마추어처럼 보이는가’를 끝까지 파고든다. 그리고 그걸 막는 가장 검증된 방법, ‘8pt 그리드’가 뭔지, 왜 8이라는 숫자인지, 현장에서 어떻게 적용하는지를 익명 사례와 함께 풀어보려 한다.

사실 나는 이 주제를 ‘가장 좋아하는 주제’ 중 하나로 꼽는다. 이유가 있다. 간격은 ‘노력 대비 효과’가 가장 큰 영역이기 때문이다. 디자인을 처음부터 다시 하거나, 비싼 도구를 사거나, 천재적 감각이 있어야 하는 게 아니다. ‘앞으로 간격은 8의 배수로 통일한다’는 약속 하나, 그리고 그 약속을 지키는 약간의 규율이면 된다. 이 작은 변화 하나로 사이트의 인상이 ‘아마추어’에서 ‘프로’로 바뀐다. 이렇게 적은 투자로 이렇게 큰 변화를 주는 영역은 흔치 않다. 그래서 ‘어디서부터 손대야 할지 막막하다’는 분들께 나는 늘 ‘간격부터’라고 답한다. 가장 쉽고, 가장 효과가 빠르고, 가장 오래 가는 개선이기 때문이다. 미리 말해두자면, 오늘 다룰 이야기들은 특정 기관의 흠을 들추려는 게 아니다. 공공 사이트를 점검하다 보면 규모·예산·기관 종류와 무관하게 반복적으로 만나는 ‘전형적인 간격 붕괴 패턴’들이다. 가상의 ○○시, A광역지자체, 한중앙부처, B공공기관, C기관의 이야기로 익명화해서 보여주되, 그 안에서 벌어지는 일은 현장에서 실제로 너무 자주 보는 장면이다.

한 가지 미리 약속하고 싶은 게 있다. 이 글은 누구를 탓하려는 글이 아니다. 간격이 들쭉날쭉한 사이트가 만들어지는 건 담당자가 게을러서도, 외주가 실력이 없어서도 아니다. ‘간격을 정하는 공유된 규칙이 없는 상태에서 여러 사람이 오랜 시간 손을 대면’ 자연스럽게 일어나는 일이다. 규칙이 없으니 각자 눈대중으로 ‘이 정도면 적당하지’ 하고 띄우는데, 그 ‘이 정도’가 사람마다 다르고, 같은 사람도 그날 기분에 따라 다르다. 그렇게 ‘각자의 적당함’이 수백 번 쌓이면 사이트가 어수선해진다. 그러니 ‘우리 사이트가 딱 저렇네’ 싶은 대목이 나와도 자책할 필요 없다. 원인을 알면 고칠 수 있고, 고치는 출발점은 이 패턴을 ‘이름 붙여’ 인식하는 거다.

그리고 또 하나. 간격 문제는 ‘조용한 손해’를 낸다. 큰 사고처럼 빨간불이 켜지는 게 아니라, 사용자가 ‘뭔가 좀 불편한데 왜인지는 모르겠네’ 하고 그냥 떠나버리는 식으로 손해가 난다. 민원이 들어오는 것도 아니고, 통계에 ‘간격이 들쭉날쭉해서 이탈했습니다’라고 찍히지도 않는다. 그래서 담당자 입장에선 문제가 있다는 걸 인지하기조차 어렵다. 오늘 이 글의 목적은 그 조용한 손해를 눈에 보이게 만드는 거다. 보이기 시작해야 고칠 마음이 생긴다.

【본론 1 — 간격이라는, 가장 과소평가된 디자인 요소】

■ ‘간격’은 디자인의 침묵하는 절반이다

디자인을 ‘보이는 것들’의 배치라고 생각하기 쉽다. 버튼, 글자, 이미지, 카드. 하지만 좋은 디자인의 절반은 ‘안 보이는 것들’, 즉 빈 공간이 결정한다. 요소 사이의 여백, 문단 위아래의 거리, 카드 안쪽의 패딩, 섹션과 섹션을 나누는 큰 틈 — 이 빈 공간들이 화면의 ‘숨 쉴 자리’를 만든다.

빈 공간이 규칙적이면 화면이 정돈돼 보인다. 사용자는 ‘어디부터 어디까지가 한 덩어리인지’를 무의식적으로 파악한다. 가까이 붙은 것들은 ‘관련 있는 정보’로, 멀리 떨어진 것들은 ‘다른 정보’로 읽는다. 이걸 디자인에서는 ‘근접성의 원리’라고 부른다. 가까우면 한 묶음, 멀면 다른 묶음. 이 단순한 규칙 덕분에 우리는 복잡한 화면도 ‘덩어리’로 끊어 읽을 수 있다.

문제는 간격이 제멋대로일 때다. 어떤 제목과 그 본문 사이는 5픽셀, 다른 제목과 본문 사이는 22픽셀이라고 해보자. 사용자 눈에는 두 번째 본문이 제목과 ‘덜 관련 있어’ 보인다. 실제로는 똑같이 관련된 정보인데도 말이다. 간격이 잘못된 신호를 보내는 셈이다. 이게 쌓이면 사용자는 화면을 ‘덩어리’로 못 읽고, 매번 ‘이게 저거랑 한 묶음인가 아닌가’를 다시 판단하느라 미세하게 지친다. 한두 번이면 모르지만, 페이지를 넘길 때마다 이 작은 피로가 쌓이면 ‘이 사이트는 보기 피곤하다’는 총평이 된다.

그래서 나는 간격을 ‘디자인의 침묵하는 절반’이라고 부른다. 말은 안 하지만 늘 일하고 있고, 잘못 일하면 화면 전체를 어수선하게 만든다. 색과 글꼴이 ‘목소리’라면 간격은 ‘말 사이의 호흡’이다. 호흡이 엉망인 발표는 내용이 좋아도 듣기 힘들다. 화면도 똑같다.

조금 더 풀어보자. 우리가 잘 정돈된 페이지를 보고 ‘시원하다’, ‘깔끔하다’고 느끼는 순간을 떠올려 보면, 사실 그 페이지가 특별히 화려한 색을 쓴 것도, 멋진 일러스트를 박아 넣은 것도 아닌 경우가 많다. 그냥 요소들이 ‘있어야 할 자리에 적당한 거리를 두고’ 놓여 있을 뿐이다. 제목 아래에 본문이 너무 붙지도 않고 너무 떨어지지도 않게, 카드들이 일정한 간격으로 줄을 맞춰, 섹션과 섹션이 명확한 틈으로 구분되어. 이 ‘적당함의 반복’이 곧 안정감이다. 사람의 뇌는 패턴을 좋아한다. 일정한 리듬을 발견하면 ‘예측 가능하다’고 느끼고, 예측 가능하면 편안해한다. 음악의 박자가 일정하면 몸이 자연스럽게 끄덕여지듯, 화면의 간격이 일정하면 눈이 자연스럽게 흐른다.

반대로 간격이 제각각이면 뇌는 패턴을 못 찾는다. 박자가 어긋난 음악을 들을 때처럼 어딘가 불편하다. ‘왜 불편한지’는 모르는데 ‘불편하다’는 건 확실히 안다. 이게 간격 문제의 교묘함이다. 사용자는 정확한 원인을 짚지 못하면서도 ‘이 사이트는 어딘가 미덥지 않다’는 인상을 받는다. 그리고 인상은 행동으로 이어진다. 미덥지 않으면 머무는 시간이 줄고, 깊이 읽지 않고, 신청 같은 ‘마음먹어야 하는 행동’을 주저한다. 화면의 호흡이 사용자의 행동까지 바꾸는 거다.

여백을 ‘낭비’로 여기는 오해도 짚고 넘어가자. 화면에 빈 공간이 많으면 ‘공간을 못 채웠다’, ‘아깝다’고 생각하는 경우가 의외로 많다. 그래서 정보를 빽빽이 욱여넣는다. 하지만 빈 공간은 낭비가 아니라 ‘정보를 돋보이게 하는 무대’다. 미술관이 작품 사이를 넓게 띄우는 건 벽이 모자라서가 아니라, 작품 하나하나에 집중하게 하려는 거다. 화면도 똑같다. 중요한 버튼 주변을 넉넉히 비워두면 그 버튼이 더 눈에 들어온다. 핵심 메시지 위아래를 충분히 띄우면 그 메시지가 더 또렷하게 읽힌다. 여백은 ‘비어 있는’ 게 아니라 ‘일하고 있는’ 공간이다. 공공 정보처럼 ‘정확히 전달돼야 하는’ 내용일수록, 빽빽함보다 적절한 여백이 전달력을 높인다.

■ ‘아마추어처럼 보인다’의 정체

우리가 어떤 화면을 보고 ‘아마추어 같다’고 느낄 때, 그 정체를 분석해 보면 십중팔구 간격 문제다. 색이 촌스러워서가 아니라, 요소들이 ‘안 맞아서’다.

구체적으로 이런 것들이다. 버튼 위쪽 여백은 12픽셀인데 아래쪽 여백은 9픽셀이라 글자가 살짝 위로 쏠려 보인다. 카드 세 개가 나란히 있는데 첫 번째 카드 안쪽 여백만 다른 두 개와 미묘하게 다르다. 입력칸과 그 위 라벨 사이가 어떤 폼에선 4픽셀, 다른 폼에선 14픽셀이다. 이런 ‘미묘하게 안 맞음’이 화면 곳곳에 흩어져 있으면, 사람 눈은 정확히 뭐가 틀렸는지 못 짚으면서도 ‘뭔가 어설프다’를 정확히 감지한다.

흥미로운 건, 사람 눈이 ‘맞음/안 맞음’에 대해 무서울 정도로 예민하다는 점이다. 1~2픽셀 차이도 ‘딱 안 떨어진다’고 느낀다. 반면 ‘얼마나 맞아야 충분한지’에 대해서는 둔감하다. 8픽셀이든 16픽셀이든, 일관되게만 쓰면 둘 다 ‘정돈됐다’고 느낀다. 즉 사람 눈이 싫어하는 건 ‘특정 간격값’이 아니라 ‘들쭉날쭉함’ 그 자체다. 이 사실이 오늘 이야기의 핵심 열쇠다. 간격을 ‘예술적으로 완벽하게’ 정할 필요는 없다. 그저 ‘일관되게’ 정하면 된다. 그리고 일관되게 정하는 가장 쉬운 방법이 바로 ‘공통 단위’를 쓰는 거다.

■ 프로와 아마추어를 가르는 건 ‘기준선’이다

전문가가 만든 화면과 아마추어가 만든 화면을 나란히 놓고 차이를 분석하면, 결국 ‘기준선이 있느냐 없느냐’로 정리된다. 전문가의 화면은 보이지 않는 격자(그리드) 위에 모든 요소가 가지런히 놓여 있다. 여백이 8, 16, 24, 32처럼 일정한 단위의 배수로 떨어진다. 아마추어의 화면은 7, 13, 19, 22처럼 ‘그때그때 눈대중으로 띄운’ 값들이 섞여 있다.

이 차이는 결과물을 보면 극명하다. 기준선 위에 놓인 화면은 들쭉날쭉함이 없으니 ‘깔끔하다’. 기준선이 없는 화면은 아무리 색이 예쁘고 글꼴이 좋아도 ‘어수선하다’. 그래서 디자인 실력의 상당 부분은 ‘예쁘게 그리는 능력’이 아니라 ‘기준을 정하고 끝까지 지키는 규율’이다. 화려한 감각보다 지루한 일관성이 결과를 가른다.

여기서 한 가지 오해를 풀고 가자. ‘기준선’이라고 하면 디자이너만의 영역, 전문 디자인 도구가 있어야 가능한 일이라고 생각하기 쉽다. 그런데 사실 기준선의 핵심은 ‘도구’가 아니라 ‘약속’이다. 값비싼 디자인 소프트웨어가 있어도 약속이 없으면 들쭉날쭉하고, 약속만 분명하면 단순한 도구로도 정돈된 화면을 만든다. 실제로 잘 정돈된 사이트를 만드는 팀과 그렇지 못한 팀의 차이는 ‘얼마나 좋은 도구를 쓰느냐’가 아니라 ‘간격을 어떻게 줄지 미리 정해놓고 모두가 지키느냐’에서 갈린다. 그래서 이 글이 강조하는 건 거창한 리뉴얼이 아니라 ‘간격에 대한 한 장짜리 약속표’ 같은 것이다. 그 약속표 한 장이 사이트의 인상을 바꾼다.

또 하나 짚을 점. 기준선이 있으면 ‘협업’이 쉬워진다. 공공 사이트는 한 사람이 처음부터 끝까지 만드는 경우가 거의 없다. 여러 담당자, 여러 외주, 여러 시기가 얽힌다. 이렇게 손이 여럿일수록 ‘공유된 기준선’의 가치가 커진다. 새로 합류한 사람이 ‘우리는 간격을 8의 배수로 준다’는 약속표 한 장만 받으면, 별다른 설명 없이도 기존 화면과 어울리는 결과를 낸다. 기준선은 결국 ‘말로 설명하지 않아도 통하는 공통 언어’다. 사람이 바뀌어도 화면이 흔들리지 않게 해주는, 일종의 보험인 셈이다.

그리고 이건 공공 사이트에 특히 중요하다. 공공 사이트는 ‘멋’을 부릴 자리가 아니다. 정확하고, 읽기 쉽고, 믿을 만해 보여야 한다. 화려한 디자인보다 ‘잘 정돈된 디자인’이 훨씬 더 가치 있다. 그리고 잘 정돈됨의 8할은 간격의 규칙성에서 온다. 다행히 이 ‘기준선 만들기’는 천재적 감각이 필요한 일이 아니다. 누구나 따라 할 수 있는 단순한 규칙 하나로 해결된다. 그게 바로 다음에 이야기할 8pt 그리드다.

【본론 2 — 8pt 그리드란 무엇인가】

■ 8이라는 숫자의 정체

‘8pt 그리드’는 말 그대로 ‘모든 간격을 8의 배수로 맞추자’는 약속이다. 여백은 8, 16, 24, 32, 40, 48… 이런 식으로만 쓴다. 7이나 13, 22 같은 어중간한 값은 안 쓴다. 패딩도, 마진도, 요소 사이의 틈도 전부 8의 배수로 통일한다.

처음 들으면 ‘왜 하필 8이지?’ 싶다. 이유는 의외로 실용적이다. 첫째, 8은 짝수라 절반(4)과 그 절반(2)으로 깔끔하게 나뉜다. 좁은 자리에 8이 너무 크면 4를 쓰면 되고, 더 좁으면 2를 쓴다. 둘째, 오늘날의 화면 해상도가 대부분 8로 나누어떨어지게 설계돼 있어, 8의 배수로 맞추면 다양한 화면에서 픽셀이 흐릿하게 깨지지 않고 또렷하게 떨어진다. 셋째, 그리고 이게 가장 중요한데, 8의 배수만 쓰기로 하면 ‘선택지’가 확 줄어든다. 7부터 50까지 아무 값이나 쓸 수 있을 때는 매번 ‘몇 픽셀로 할까’를 고민해야 하지만, ‘8의 배수만’이라고 정하면 사실상 8, 16, 24, 32 정도 안에서 고르게 된다. 고민이 줄고, 사람마다 고르는 값이 비슷해진다.

즉 8pt 그리드의 진짜 힘은 ‘8이라는 숫자가 마법이라서’가 아니라 ‘선택지를 제한해서 일관성을 강제로 만들어내기’ 때문이다. 앞에서 사람 눈은 ‘특정 값’이 아니라 ‘들쭉날쭉함’을 싫어한다고 했다. 8pt 그리드는 들쭉날쭉할 여지 자체를 없앤다. 모두가 같은 사다리(8, 16, 24…)에서 칸을 고르니, 누가 만들어도 정렬된 결과가 나온다.

■ ‘제약’이 오히려 자유를 준다

처음 8pt 그리드를 권하면 디자이너나 담당자들이 종종 거부감을 보인다. ‘8의 배수만 쓰라니, 너무 빡빡한 거 아니냐’, ‘섬세한 조정이 안 되는 거 아니냐’는 거다. 충분히 이해한다. 그런데 막상 써보면 정반대다. 제약이 오히려 일을 편하게 만든다.

왜냐하면 ‘무한한 선택지’는 자유가 아니라 부담이기 때문이다. 0부터 100까지 아무 픽셀이나 쓸 수 있다는 건, 매번 ‘몇이 정답일까’를 새로 결정해야 한다는 뜻이다. 결정에는 에너지가 들고, 결정이 쌓이면 피로해지고, 피로하면 대충 결정하게 된다. 그 ‘대충 결정한 값들’이 모여 들쭉날쭉함이 된다. 반면 ‘8의 배수 중에서만’이라고 제한하면, 결정이 ‘8이냐 16이냐’ 정도로 단순해진다. 고민이 줄어드니 오히려 본질적인 일—내용을 잘 전달하는 일—에 집중할 수 있다.

비유하자면 글쓰기에서 ‘맞춤법’과 비슷하다. 맞춤법이 글쓰기의 자유를 빼앗는가? 아니다. 모두가 같은 맞춤법을 쓰기 때문에 우리는 글의 내용에 집중할 수 있다. 만약 사람마다 띄어쓰기와 철자를 제멋대로 쓴다면, 읽는 사람은 매 문장을 해독하느라 정작 내용에 집중하지 못할 거다. 8pt 그리드는 ‘간격의 맞춤법’이다. 규칙이 있기에 오히려 자유로워진다.

‘결정 피로’라는 말을 들어봤을 거다. 사람이 하루에 내릴 수 있는 좋은 결정의 양에는 한계가 있어서, 사소한 결정을 많이 하면 정작 중요한 결정에 쓸 에너지가 바닥난다는 개념이다. 어떤 이들이 매일 같은 옷을 입는 이유도 ‘무엇을 입을까’라는 사소한 결정을 줄여 더 중요한 일에 집중하기 위해서라고 한다. 간격도 똑같다. ‘이 여백을 몇 픽셀로 할까’는 그 자체로는 사소한 결정이지만, 화면 하나에 그런 결정이 수십 개씩 들어간다. 페이지가 수백 개면 수천, 수만 번의 사소한 결정이 쌓인다. 8pt 그리드는 이 결정의 대부분을 ‘미리 한 번에’ 처리해 버린다. ‘앞으로 간격은 8의 배수’라고 한 번 정하면, 그 뒤로는 매번 새로 고민할 필요가 없다. 작업자는 그 에너지를 ‘내용을 어떻게 더 명확하게 전달할까’ 같은 진짜 중요한 일에 쓸 수 있다.

그리고 제약은 ‘속도’도 준다. 선택지가 무한할 때는 결정이 느리다. 0부터 100까지 다 가능하면 ‘이게 맞나, 저게 맞나’를 한참 재본다. 반면 ‘8, 16, 24 중 하나’로 좁혀지면 결정이 순식간이다. 이건 특히 마감에 쫓기는 공공 사이트 운영 현실에서 큰 도움이 된다. 새 공지를 급히 올려야 하는데 간격까지 고민할 여유가 없을 때, ‘우리는 기본이 16’이라는 약속이 있으면 고민 없이 빠르게, 그러면서도 정돈된 결과를 낸다. 제약이 일을 느리게 만들 것 같지만, 실제로는 일을 빠르고 안정적으로 만든다. 이게 ‘제약이 주는 자유’의 실체다.

■ 4pt 보조 단위와 ‘반 칸’의 활용

8pt 그리드를 엄격하게만 쓰면 가끔 답답할 때가 있다. 아주 좁은 자리—예를 들어 아이콘과 그 옆 글자 사이—에는 8픽셀도 넓을 수 있다. 그래서 실무에서는 8의 절반인 4를 ‘보조 단위’로 함께 쓴다. 큰 간격은 8의 배수로, 아주 작은 미세 조정만 4 단위로. 이렇게 하면 8pt 그리드의 일관성은 유지하면서도 좁은 자리의 섬세함을 챙길 수 있다.

핵심은 ‘아무 값이나 쓰지 않는다’는 원칙을 지키는 거다. 4와 8의 배수라는 ‘허용된 사다리’ 안에서만 고른다. 7이나 13 같은 ‘사다리 밖 값’은 쓰지 않는다. 이 단순한 규율 하나가 화면을 정돈한다. 그리고 이 규율은 디자인 토큰으로 묶어두면 더 강력해진다. ‘간격-소(4)’, ‘간격-중(8)’, ‘간격-대(16)’, ‘간격-특대(24)’처럼 이름 붙은 변수로 관리하면, 작업자는 픽셀 숫자를 외울 필요 없이 ‘여긴 중간 간격’ 하고 역할로 고르면 된다. 색에 의미를 붙이듯, 간격에도 의미를 붙이는 거다. 이렇게 하면 나중에 ‘우리 사이트 전체 간격을 조금 더 넉넉하게 바꾸자’는 결정도 변수 몇 개 수정으로 끝난다.

【본론 3 — 흔한 간격 붕괴 패턴 (익명 사례)】

이제 점검 현장에서 거의 매번 만나는 ‘간격 붕괴 패턴’들을 보자. 다섯 가지 패턴은 따로 떨어진 게 아니라 대개 함께 나타난다. 한 패턴이 보이면 ‘나머지도 있겠구나’ 하고 같이 점검하는 게 효율적이다. 반대로 말하면, 8pt 그리드 하나를 제대로 도입하면 이 다섯 가지가 동시에 좋아진다. 원인이 하나니까 처방도 하나로 통한다. 아래 사례는 전부 익명 처리한 것이고, 특정 기관을 흉보려는 게 아니라 어디서나 반복되는 ‘전형’을 보여주려는 거다.

■ 붕괴 패턴 1: ○○시 — ‘눈대중 여백’이 만든 누더기 메인

가상의 ○○시 사이트를 점검한다고 해보자. 메인 페이지를 열면 첫인상은 나쁘지 않다. 색도 무난하고 글꼴도 그럭저럭 통일돼 있다. 그런데 ‘왠지 어수선하다’. 자세히 들여다보면 범인이 보인다. 상단 배너와 그 아래 ‘주요 서비스’ 영역 사이는 40픽셀쯤 떨어져 있는데, ‘주요 서비스’와 ‘공지사항’ 사이는 19픽셀밖에 안 된다. 또 ‘공지사항’과 ‘바로가기’ 사이는 51픽셀이다. 큰 틀의 섹션 간격이 40, 19, 51로 제멋대로다.

왜 이렇게 됐을까. 메인 페이지는 보통 여러 부서·여러 시기에 ‘영역 하나씩’ 추가된다. 어떤 영역은 2년 전 개편 때 만들어졌고, 어떤 건 작년 새 사업으로 붙었고, 어떤 건 최근 급하게 끼워 넣었다. 각 영역을 만든 사람이 다르고, 그때마다 ‘위 영역이랑 적당히 띄우자’ 하고 눈대중으로 여백을 줬다. 누구도 ‘섹션 사이는 32픽셀’ 같은 약속을 공유하지 않았으니, 각자의 ‘적당히’가 40, 19, 51로 흩어진 거다.

이게 왜 문제냐면, 사용자는 이 들쭉날쭉한 간격을 ‘잘못된 신호’로 읽는다. 19픽셀로 너무 붙은 ‘주요 서비스’와 ‘공지사항’은 ‘한 덩어리’처럼 보여서, 사용자는 둘을 같은 영역으로 착각한다. 반대로 51픽셀로 너무 떨어진 ‘바로가기’는 ‘페이지가 끝났나?’ 싶은 인상을 준다. 간격이 정보의 구조를 흐리는 거다. 처방은 단순하다. 섹션 사이 큰 간격을 ‘48’ 하나로 통일하고, 영역 안쪽 작은 간격을 ‘16’으로 통일하면, 같은 콘텐츠가 거짓말처럼 정돈돼 보인다. 손댄 건 ‘숫자 몇 개를 같게 맞춘 것’뿐인데 인상이 완전히 달라진다.

이 ○○시 사례에서 더 주목할 점은, ‘아무도 일부러 망치지 않았다’는 거다. 각 영역을 만든 담당자는 그 순간 ‘위 영역이랑 적당히 띄웠으니 됐다’고 생각했다. 개별로 보면 다 그럴듯하다. 문제는 ‘다 같이 봤을 때’ 생긴다. 각자의 ‘적당함’이 40, 19, 51로 다르니, 합쳐놓으면 어긋나는 거다. 그래서 메인 페이지처럼 ‘여러 사람·여러 시기가 한 화면에 모이는’ 곳이 가장 먼저 무너진다. 메인은 사이트의 얼굴인데, 하필 그 얼굴이 가장 누더기가 되기 쉬운 구조인 셈이다. 이걸 막으려면 ‘영역을 추가하는 규칙’ 자체에 간격 약속을 박아둬야 한다. 새 영역을 붙일 때 ‘위와 48 띄운다’가 기본값으로 정해져 있으면, 누가 언제 붙여도 메인이 흐트러지지 않는다.

그리고 한 가지 더. 이런 ‘섹션 간격 난립’은 고치기가 의외로 쉽다는 점도 강조하고 싶다. 메인 페이지의 큰 섹션은 보통 몇 개 안 된다. 대여섯 개 섹션의 위아래 간격만 같은 값으로 맞춰도 인상이 확 달라진다. 들이는 노력 대비 효과가 가장 큰, ‘가성비 좋은 개선’이다. 그래서 간격 정비를 시작할 때 나는 늘 ‘메인의 큰 섹션 간격부터 통일하라’고 권한다. 적은 손질로 가장 눈에 띄는 부분(얼굴)을 정돈하니, 담당자도 ‘오, 진짜 달라지네’ 하고 동기를 얻는다. 그 작은 성공이 다음 정비로 이어진다.

■ 붕괴 패턴 2: A광역지자체 — 카드 안쪽 패딩이 카드마다 다른 목록

가상의 A광역지자체 사이트에는 정책·사업을 카드 형태로 나열한 목록 페이지가 있다. 카드가 열두 개쯤 나란히 놓여 있는데, 자세히 보면 카드마다 안쪽 여백이 미묘하게 다르다. 어떤 카드는 글자가 테두리에 거의 붙어 있고(패딩 8), 어떤 카드는 글자 주변이 넉넉하다(패딩 20). 또 어떤 카드는 위쪽만 넉넉하고 아래쪽은 좁다.

이건 ‘카드를 만든 시점과 사람이 다르기 때문’이다. 처음 만든 카드 디자인이 문서로 정리되지 않으니, 새 카드를 추가할 때마다 ‘대충 비슷하게’ 만들었고, 그 ‘비슷하게’가 조금씩 어긋나 누적됐다. 사용자 눈에는 카드들이 ‘같은 종류인데 왠지 들쑥날쑥한’ 어색한 줄로 보인다. 같은 정보 단위인데 어떤 건 답답하고 어떤 건 헐렁해서, 전체가 정렬 안 된 느낌을 준다.

카드는 ‘반복되는 요소’라 간격 붕괴가 특히 도드라진다. 한 개일 때는 안 보이던 차이가, 열두 개가 나란히 놓이면 비교 대상이 생겨 확 드러난다. 처방은 ‘카드 부품을 하나로 표준화’하는 거다. 카드 안쪽 패딩을 ‘16’으로 고정한 표준 카드를 하나 만들고, 모든 목록이 그 부품을 가져다 쓰게 하면 된다. 그러면 카드를 백 개를 깔아도 전부 똑같이 정돈된 여백을 갖는다. 이게 ‘부품(컴포넌트)을 표준화한다’는 말의 실제 효과다.

여기서 ‘반복되는 요소일수록 표준화의 이득이 크다’는 원리를 기억해 두면 좋다. 한 번만 쓰는 요소는 조금 어긋나도 티가 덜 난다. 하지만 카드·목록·표처럼 같은 모양이 여러 번 반복되는 요소는, 그 안의 작은 차이가 반복될수록 증폭된다. 카드 하나의 패딩이 4픽셀 어긋난 건 안 보여도, 그런 카드 열두 개가 줄지어 있으면 ‘줄이 안 맞는다’가 명확히 보인다. 그래서 표준화는 ‘반복되는 것부터’ 하는 게 효율적이다. 카드 한 종류를 표준으로 정리하면, 그 카드를 쓰는 모든 목록 페이지가 한꺼번에 정돈된다. 한 곳을 고쳐 여러 곳이 좋아지는, 지렛대 같은 작업이다.

또 이 A광역지자체 사례에서 흔히 따라오는 문제가 ‘카드 높이 들쭉날쭉’이다. 카드마다 안쪽 패딩이 다르고 제목 줄 수가 다르면, 카드 높이가 제각각이 되어 줄이 울퉁불퉁해진다. 어떤 카드는 키가 크고 어떤 카드는 작아서, 나란히 놓인 줄이 ‘이가 빠진 것처럼’ 보인다. 이것도 결국 간격(패딩)의 일관성 문제로 거슬러 올라간다. 패딩을 통일하고, 제목이 길어도 카드 높이가 깨지지 않게 처리하면, 카드 줄이 가지런해진다. 목록은 사용자가 ‘훑어보며 고르는’ 화면이라 정렬감이 특히 중요하다. 줄이 가지런하면 눈이 빠르게 흐르며 비교가 쉽고, 울퉁불퉁하면 매 카드에서 눈이 걸려 피로해진다.

■ 붕괴 패턴 3: 한중앙부처 — 폼 라벨과 입력칸 사이가 들쭉날쭉

가상의 한중앙부처 민원 신청 폼을 보자. 입력 항목이 열 개쯤 되는데, 라벨(‘이름’, ‘생년월일’ 같은 안내 글자)과 그 아래 입력칸 사이의 간격이 항목마다 다르다. 어떤 항목은 라벨과 입력칸이 4픽셀로 바짝 붙어 있고, 어떤 항목은 18픽셀로 떨어져 있다. 또 항목과 항목 사이의 간격도 일정하지 않아서, 어떤 두 항목은 너무 붙어 ‘한 항목인가’ 싶고, 어떤 둘은 너무 떨어져 ‘섹션이 바뀌었나’ 싶다.

폼에서 간격은 단순한 미관 문제가 아니다. ‘어떤 라벨이 어떤 입력칸에 속하는지’를 알려주는 핵심 신호다. 라벨이 위 입력칸에 붙었는지 아래 입력칸에 붙었는지가 간격으로 결정되기 때문이다. 라벨과 입력칸 사이가 항목 간 간격보다 더 넓어지는 ‘역전’이 일어나면, 사용자는 라벨이 엉뚱한 입력칸을 가리킨다고 착각한다. 이름 칸인데 생년월일 라벨이 붙은 것처럼 보이는 식이다. 신청 정보를 잘못 입력하게 만드는, 꽤 실질적인 사고다.

폼의 간격 원칙은 명확하다. ‘관련된 것은 가깝게, 다른 것은 멀게.’ 라벨과 그 입력칸은 가깝게(예: 8), 항목과 항목 사이는 그보다 멀게(예: 24) 띄운다. 이 ‘가깝고/멀고’의 관계만 일관되게 지켜도 폼은 훨씬 명료해진다. 8pt 그리드로 ‘라벨-입력칸=8, 항목-항목=24’처럼 정해두면 누가 폼을 만들어도 같은 구조가 나온다. 공공 폼은 신청·민원의 관문이라, 여기서의 혼란은 곧 ‘신청 실패’와 ‘민원 폭주’로 이어진다. 간격 통일이 그래서 중요하다.

폼의 간격을 더 깊이 보면, ‘오류 메시지’의 위치까지 간격으로 결정된다. 잘못 입력했을 때 ‘올바른 형식으로 입력해 주세요’ 같은 안내가 뜨는데, 이 메시지가 어느 입력칸에 속하는지도 간격이 알려준다. 메시지가 위 입력칸에 너무 붙으면 ‘위 칸의 안내’로 보이고, 아래로 너무 떨어지면 ‘아래 항목의 안내’로 착각된다. 라벨-입력칸-오류메시지가 ‘하나의 묶음’으로 가깝게 모이고, 그 묶음과 다음 항목 묶음이 멀게 떨어져야, 사용자가 ‘어디가 틀렸는지’를 정확히 안다. 신청 정보를 다루는 공공 폼에서 이 명료함은 단순한 편의가 아니라 ‘정확한 행정 처리’의 토대다. 엉뚱한 칸을 수정하느라 같은 실수를 반복하면, 사용자도 지치고 처리 담당자도 잘못된 정보를 받게 된다.

그리고 폼은 ‘세로로 긴 화면’이라 간격 누적의 영향이 크다. 항목이 열 개, 스무 개씩 이어지는데 항목 간 간격이 들쭉날쭉하면, 위에서 아래로 내려갈수록 ‘리듬이 어긋난’ 느낌이 커진다. 어떤 부분은 빽빽하고 어떤 부분은 휑해서, 폼 전체가 ‘설계된’ 게 아니라 ‘급조된’ 인상을 준다. 반대로 항목 간격을 24 하나로 통일하면, 아무리 긴 폼도 일정한 박자로 흐른다. 사용자는 ‘한 항목 채우고, 다음, 다음’ 하며 리듬을 타고 끝까지 간다. 긴 폼일수록 이 리듬감이 ‘끝까지 작성하게 만드는 힘’이 된다. 중도 포기율이 높은 공공 신청 폼에서, 간격의 리듬은 생각보다 큰 차이를 만든다.

■ 붕괴 패턴 4: B공공기관 — 모바일에서 무너지는 간격

가상의 B공공기관 사이트는 PC에서는 그럭저럭 봐줄 만하다. 그런데 휴대폰으로 열면 인상이 확 달라진다. 요소들이 화면 가장자리에 바짝 붙어 답답하고, 어떤 영역은 위아래로 너무 떨어져 ‘빈 화면’처럼 보인다. 버튼끼리 너무 붙어 있어서 손가락으로 누르면 옆 버튼이 같이 눌린다.

이건 ‘PC 화면 기준으로만 간격을 정하고, 모바일을 따로 챙기지 않은’ 전형적 사례다. PC에서 좋아 보이던 여백이 좁은 화면에서는 전혀 다른 의미가 된다. 큰 화면에서 ‘적당한’ 좌우 여백이 작은 화면에선 ‘텅 빈 낭비’가 되거나, 반대로 큰 화면에서 ‘넉넉한’ 요소 간격이 작은 화면에선 화면을 다 잡아먹는다. 그래서 좋은 디자인 시스템은 화면 크기별로 간격을 단계적으로 조정하는 규칙까지 포함한다. 작은 화면에선 큰 간격을 한 단계 줄이고(예: 48→32), 좌우 여백은 손가락이 닿지 않게 최소선을 지키는 식이다.

특히 버튼 간격은 모바일에서 안전 문제다. 손가락으로 누르는 환경에선 버튼과 버튼 사이에 충분한 틈이 있어야 ‘오터치’가 안 난다. 공공 사이트는 어르신을 비롯해 디지털에 익숙하지 않은 사용자가 많이 쓴다. 버튼이 다닥다닥 붙어 있어 엉뚱한 걸 누르면, 그 사용자는 ‘내가 잘못했나’ 하고 위축되거나 신청을 포기한다. 간격은 모바일에서 ‘누를 수 있느냐 없느냐’를 가르는 접근성 요소이기도 하다.

여기서 ‘터치 타깃’이라는 개념을 짚자. 손가락 끝이 누르는 영역은 마우스 포인터보다 훨씬 크고 둔하다. 그래서 누를 수 있는 요소(버튼·링크)는 충분한 크기와 충분한 간격을 확보해야 한다. 작은 화면에서 버튼을 욱여넣다 보면 이 최소선이 무너지기 쉽다. 표준은 ‘누를 수 있는 요소는 일정 크기 이상, 서로 일정 간격 이상’이라는 최소 기준을 정해두어, 누가 만들어도 ‘손가락으로 정확히 누를 수 있는’ 화면이 나오게 한다. 간격을 8pt 그리드로 관리하면 이 ‘버튼 사이 최소 틈’도 자연스럽게 규칙 안에 들어온다. 버튼 사이를 ‘8 이상’으로 정해두면, 좁은 화면에서도 오터치가 줄어든다.

B공공기관 사례가 주는 더 큰 교훈은 ‘하나의 간격 약속이 화면 크기마다 다르게 적용돼야 한다’는 점이다. PC와 모바일에서 똑같은 간격을 쓰면 둘 중 하나는 반드시 어색해진다. 그래서 성숙한 디자인 시스템은 ‘화면이 좁아지면 큰 간격은 한 단계 줄이고, 작은 간격은 유지한다’ 같은 단계 규칙을 함께 가진다. 예를 들어 큰 섹션 간격을 PC에선 48, 모바일에선 32로 자동 전환하는 식이다. 이렇게 하면 ‘하나의 일관된 사다리’를 유지하면서도 각 화면에 맞는 호흡을 준다. 모바일을 ‘PC를 축소한 것’으로 다루면 무너지고, ‘별도로 호흡을 설계한 것’으로 다루면 정돈된다. 공공 사이트 이용자의 상당수가 모바일로 접속한다는 현실을 생각하면, 모바일 간격을 따로 챙기는 건 선택이 아니라 필수다.

■ 붕괴 패턴 5: C기관 — 외부 콘텐츠가 끌고 들어온 ‘이질적 간격’

마지막으로 가상의 C기관 사례. 이 사이트의 본문은 대체로 정돈돼 있는데, 보도자료나 외부에서 가져온 표·게시물이 들어간 페이지만 유독 어수선하다. 외부에서 복사해온 콘텐츠가 자기 고유의 간격(워드 문서의 줄 간격, 다른 사이트 표의 칸 여백)을 그대로 끌고 들어왔기 때문이다. 사이트의 표준 간격과 외부 콘텐츠의 간격이 한 페이지에서 충돌하면서 ‘여기만 이질적인’ 인상을 만든다.

이건 ‘처음 디자인’보다 ‘운영 중 관리’의 문제다. 콘텐츠를 올릴 때 외부 스타일을 우리 기준으로 덮어쓰는 처리가 없으면, 시간이 갈수록 이런 이질적 영역이 늘어난다. 처방은 ‘콘텐츠 영역에도 표준 간격이 강제로 적용되게’ 만드는 거다. 본문 영역에 표준 스타일을 입혀, 어떤 콘텐츠가 들어와도 우리 사이트의 간격 규칙을 따르게 한다. 이렇게 해두면 담당자가 매번 손으로 간격을 맞출 필요 없이, 붙여넣기만 해도 정돈된 화면이 나온다. 운영의 부담을 줄이는 게 결국 일관성을 오래 유지하는 비결이다.

C기관 사례가 특히 중요한 이유는, 이게 ‘끝없이 재발하는’ 문제이기 때문이다. 메인 페이지나 폼은 한번 정돈하면 한동안 유지되지만, 보도자료·공지·게시물은 매일같이 새로 올라온다. 그래서 ‘처음 한 번 잘 만들기’로는 절대 해결되지 않는다. 매일 들어오는 콘텐츠가 매일 사이트의 간격을 흐트러뜨릴 수 있기 때문이다. 이걸 사람이 매번 손으로 막는 건 불가능하다. 담당자가 보도자료 하나 올릴 때마다 ‘이 표의 칸 간격을 우리 기준으로 다시 맞추고, 이 문단의 줄 간격을 조정하고…’를 할 수는 없다. 그래서 ‘자동으로 덮어쓰는 처리’가 답이다. 콘텐츠 영역 자체에 ‘여기 들어오는 모든 것은 우리 간격을 따른다’는 규칙을 박아두면, 담당자는 내용만 신경 쓰고 간격은 시스템이 알아서 맞춘다. 운영 부담을 줄이는 것이야말로 ‘오래 유지되는 일관성’의 핵심이다.

다섯 가지 패턴을 다 보고 나면 한 가지가 분명해진다. 간격 붕괴는 ‘디자인 감각의 부족’이 아니라 ‘공유된 약속의 부재’에서 온다는 점이다. ○○시도, A광역지자체도, 한중앙부처도, B공공기관도, C기관도, 누구 하나 일부러 망친 사람이 없다. 다들 그 순간 최선을 다해 ‘적당한’ 간격을 줬을 뿐이다. 문제는 그 ‘적당함’의 기준이 사람마다, 페이지마다, 시기마다 달랐다는 거다. 그러니 해법도 ‘더 감각 있는 사람을 뽑는 것’이 아니라 ‘모두가 공유할 약속(8pt 그리드)을 정하는 것’이다. 약속이 있으면 평범한 사람도 정돈된 화면을 만들고, 약속이 없으면 뛰어난 사람도 시간이 지나면 누더기를 만든다. 디자인 일관성은 천재의 일이 아니라 약속의 일이다.

【본론 4 — 왜 간격이 무너지면 사이트 전체가 무너지는가】

■ 기초(DS)가 흔들리면 위층이 다 흔들린다

KRDS의 846규칙은 네 층으로 나뉜다. 디자인 스타일(DS) 120개, 컴포넌트(CP) 446개, 기본 패턴(BP) 108개, 서비스 패턴(SP) 172개. 색·글꼴·간격 같은 가장 작은 약속이 DS, 그 약속을 가져다 만든 버튼·카드·입력칸 같은 부품이 CP, 부품을 조합한 폼·목록 같은 패턴이 BP, 패턴을 이어 붙인 신청·검색 같은 서비스 흐름이 SP다. 아래에서 위로 쌓아 올리는 구조다.

간격은 이 중 가장 아래층인 DS에 속한다. 그리고 가장 아래층이 흔들리면 위층이 전부 흔들린다는 게 핵심이다. 카드(CP)의 안쪽 여백은 DS의 간격 단위를 빌려온다. 그 카드들로 만든 목록(BP)의 카드 사이 간격도 DS 단위를 빌려온다. 그 목록을 이어 만든 신청 흐름(SP)의 단계 사이 여백도 마찬가지다. 그러니 DS의 간격 약속이 들쭉날쭉하면, 그 위에 쌓은 모든 게 자동으로 들쭉날쭉해진다.

비유하자면 건물의 기초 공사다. 기초가 삐뚤면 1층은 약간 기울고, 2층은 더 기울고, 옥상은 위험할 만큼 기운다. 그래서 현장에서 사이트를 점검할 때, 사용자가 “신청 흐름이 너무 불편하다”고 호소해도 우리는 가장 먼저 ‘간격 같은 기초 약속이 있는지’부터 본다. 증상은 위(신청 흐름)에서 터지지만, 원인은 아래(간격 약속의 부재)에 있을 때가 많기 때문이다.

■ 부분 수리가 안 먹히는 이유

간격이 흔들린 사이트는 ‘부분 수리’가 잘 안 먹힌다. 눈에 띄는 페이지 하나만 예쁘게 고쳐도, 옆 페이지로 넘어가면 다시 누더기다. 사용자는 사이트를 페이지 단위로 보지 않고 ‘하나의 경험’으로 본다. 그래서 한 페이지만 잘 만들면 오히려 다른 페이지와의 격차가 도드라져서, ‘여기는 새로 만들었나 본데 저기는 왜 이래’ 하는 인상을 준다.

진짜 해결은 간격의 기준(8pt 그리드)을 정해두고 모든 페이지가 그 기준을 공유하게 만드는 거다. 이게 디자인을 ‘페이지 디자인’이 아니라 ‘시스템’이라고 부르는 이유다. 한 페이지를 고치는 게 아니라, 모든 페이지가 따를 ‘공통의 자(尺)’를 만드는 일이다. 자를 한번 만들어두면, 그 뒤로 만드는 모든 페이지가 같은 자로 재어진다. 그래서 ‘기초부터’라는 말이 처음엔 답답해도, 멀리 보면 가장 빠른 길이다. 급할수록 자를 먼저 만드는 게 낫다.

■ 간격은 ‘디자인 부채’의 이자를 가장 조용히 키운다

‘디자인 부채’라는 말이 있다. 빚처럼 처음엔 작지만 시간이 갈수록 이자가 붙어 커지는 디자인의 부실을 가리킨다. 간격 부채는 이 중에서도 가장 ‘조용히’ 자란다. 색이나 글꼴은 그래도 눈에 띄어 ‘이거 정리 좀 해야겠다’는 자각이라도 생기는데, 간격은 들쭉날쭉해도 ‘그냥 좀 어수선하네’ 하고 넘어가기 때문이다. 그래서 아무도 손대지 않고, 페이지가 늘어날 때마다 새 페이지도 ‘제각각 간격’을 따라 만들어져 부채가 한 단계씩 쌓인다.

이 부채는 ‘변경이 필요한 순간’ 청구서로 날아온다. ‘우리 사이트 전체를 좀 더 넉넉하고 시원하게 바꾸자’는 단순한 요청이, 간격이 제각각인 상태에서는 ‘수백 군데에 흩어진 여백 값을 일일이 찾아 바꾸는’ 대공사가 된다. 반면 8pt 그리드와 간격 토큰으로 한 곳에서 관리하던 사이트라면, 변수 몇 개 수정으로 전체가 시원해진다. 평소엔 안 보이던 차이가 바로 이 순간 ‘부채의 이자’로 드러난다.

그리고 간격 부채에는 ‘숨은 이자’가 하나 더 있다. 담당자의 피로다. 간격 기준이 없으면 새 페이지 하나 올릴 때마다 ‘이 영역은 위랑 얼마나 띄우지’를 매번 고민해야 한다. 고민이 쌓이면 지친다. 잘 정리된 8pt 그리드 하나가 담당자에게 주는 가장 큰 선물은, 어쩌면 ‘매번 고민하지 않아도 되는 편안함’일지 모른다. 기준이 있으면 ‘8의 배수 중 하나’만 고르면 되니, 결정의 무게가 확 줄어든다.

【본론 5 — 그래서 어떻게 시작하는가: 실전 적용법】

■ 1단계: ‘우리 사이트의 간격 사다리’를 정한다

8pt 그리드를 도입하는 첫걸음은 거창하지 않다. ‘앞으로 우리 사이트는 이 값들만 쓴다’는 사다리를 정하는 거다. 예를 들어 4(미세 조정), 8(요소 안쪽 좁은 간격), 16(요소 안쪽 기본 간격), 24(요소 사이), 32(작은 섹션 사이), 48(큰 섹션 사이) — 이렇게 예닐곱 개의 단계를 정한다. 이 사다리 밖의 값(7, 13, 19, 22 같은)은 ‘쓰지 않는다’는 원칙을 함께 세운다.

중요한 건 ‘완벽한 값’을 찾으려 애쓰지 않는 거다. 앞에서 말했듯 사람 눈은 ‘특정 값’이 아니라 ‘일관성’을 본다. 8 기반의 합리적인 사다리면 충분하다. 며칠씩 고민할 일이 아니다. 정하고, 적고, 공유한다. 이 ‘적고 공유한다’가 핵심이다. 머릿속에만 있으면 사람이 바뀌는 순간 사라진다. 문서로 남겨 ‘조직의 기억을 사람 바깥에 저장’해야 한다.

■ 2단계: 간격에 ‘이름’을 붙여 토큰으로 만든다

숫자만 정해두면 작업자가 매번 ‘여긴 24였나 32였나’를 외우거나 찾아야 한다. 그래서 한 단계 더 나아가, 간격에 의미 있는 이름을 붙인다. ‘간격-소’, ‘간격-중’, ‘간격-대’, ‘섹션-간격’처럼. 이렇게 이름 붙은 변수가 바로 디자인 토큰이다. 작업자는 픽셀 숫자 대신 역할로 고른다. ‘여긴 항목 사이니까 간격-중’ 하는 식이다.

토큰으로 만들면 두 가지 이득이 생긴다. 첫째, 일관성이 강제된다. 모두가 같은 토큰 목록에서 고르니 들쭉날쭉할 여지가 없다. 둘째, 변경이 쉬워진다. ‘우리 사이트 전체 간격을 한 단계 넉넉하게’ 하고 싶으면 토큰 정의 몇 개만 바꾸면 사이트 전체에 반영된다. 색 토큰이 ‘브랜드 색을 한 번에 바꾸는 힘’을 주듯, 간격 토큰은 ‘사이트의 호흡을 한 번에 조절하는 힘’을 준다. 토큰 이야기는 워낙 깊은 주제라 별도로 더 다룰 만하지만, 핵심은 ‘간격도 색처럼 의미를 가진 약속으로 관리할 수 있다’는 거다.

■ 3단계: ‘지금 상태’부터 객관적으로 파악한다

여기서 현실적인 벽에 부딪힌다. ‘좋다, 8pt 그리드를 도입하자. 그런데 지금 우리 사이트가 얼마나 어긋나 있는지부터 알아야 어디를 고칠 거 아닌가?’ 맞는 말이다. 수백 페이지에 흩어진 간격 값을 사람이 일일이 재서 ‘이건 그리드에 맞고 저건 안 맞고’를 가려내는 건 사실상 불가능하다. 그래서 필요한 게 ‘자동 진단’이다.

이 지점에서 우리 ViewCheck 이야기를 잠깐 하려 한다. 홍보처럼 들릴까 조심스럽지만, 오늘 주제와 정확히 맞물리는 기능이라 솔직하게 소개한다.

【본론 6 — ViewCheck로 간격·토큰 상태를 한눈에 본다】

■ ‘토큰 채택률’이라는 숫자

ViewCheck는 공공 웹사이트를 KRDS 846규칙(DS 120 + CP 446 + BP 108 + SP 172) 기준으로 자동 진단하는 SaaS다. 이 중 오늘 주제와 직접 연결되는 게 ‘디자인 시스템(DS)’ 분석, 그 안에서도 ‘디자인 토큰 채택률’이라는 지표다.

토큰 채택률이란 쉽게 말해 ‘우리 사이트가 표준 토큰(정해진 색·글꼴·간격 단위)을 얼마나 따르고 있는가’를 백분율로 보여주는 숫자다. 간격으로 좁혀 말하면, 화면에 쓰인 여백 값들 중 ‘8pt 그리드 같은 표준 단위’를 따르는 비율이 얼마인지를 알려준다. 채택률이 높으면 ‘기준을 잘 지키는 정돈된 사이트’, 낮으면 ‘눈대중 값이 난립하는 어수선한 사이트’라는 뜻이다.

이 숫자가 왜 강력하냐면, ‘어수선하다’는 막연한 느낌을 ‘객관적 수치’로 바꿔주기 때문이다. 앞에서 간격 문제의 가장 큰 적은 ‘인지조차 안 된다’는 점이라고 했다. 토큰 채택률은 그 보이지 않던 문제에 숫자를 붙인다. 채택률 42%라는 결과를 받아 들면, 담당자도 윗선도 ‘아, 우리 사이트의 절반 이상이 기준 밖 값을 쓰고 있구나’를 비로소 ‘알게’ 된다. 막연한 불편함이 ‘고쳐야 할 과제’로 바뀌는 순간이다.

숫자가 주는 또 다른 힘은 ‘설득’이다. 공공 사이트 개선은 혼자 결정하는 일이 아니다. 예산을 받으려면 윗선을 설득해야 하고, 외주를 주려면 근거를 대야 한다. 그런데 ‘우리 사이트가 좀 어수선해 보여서 정비가 필요합니다’는 주관적이라 설득력이 약하다. ‘디자인 일관성이 중요하다는 건 알겠는데, 지금 꼭 해야 하나?’라는 반문에 막힌다. 반면 ‘디자인 토큰 채택률이 42%로, 표준 미준수 비율이 절반을 넘습니다’는 객관적 근거가 된다. 숫자는 말보다 강하다. 진단 결과 화면을 그대로 보고 자료에 넣으면, ‘느낌’이 아니라 ‘데이터’로 개선의 필요성을 설명할 수 있다. 그리고 개선 후에 다시 진단해 ‘42%에서 78%로 올랐습니다’를 보여주면, 그 작업의 성과까지 숫자로 증명된다. 시작할 때도 끝낼 때도, 숫자가 든든한 근거가 되어준다.

그리고 토큰 채택률은 ‘추상적인 디자인 품질’을 ‘추적 가능한 관리 지표’로 바꾼다는 점에서 의미가 크다. 매출이나 방문자 수처럼, 정기적으로 재고 추이를 지켜볼 수 있는 숫자가 생기는 거다. 분기마다 진단을 돌려 채택률이 떨어지지 않는지, 새로 추가된 페이지들이 기준을 잘 따르는지 점검하면, 사이트가 다시 누더기로 돌아가는 걸 미리 막을 수 있다. 디자인 부채는 ‘쌓이기 전에 막는’ 게 가장 싸다고 했는데, 토큰 채택률이라는 지표가 바로 그 ‘쌓이기 전에 알아채는’ 경보기 역할을 한다. 한 번 정비하고 끝이 아니라, 꾸준히 좋은 상태를 유지하는 운영 도구가 되는 셈이다.

■ 페이지별·전체 진단으로 ‘어디가 문제인지’까지

ViewCheck의 진단은 단일 페이지에 그치지 않는다. 사이트 전체를 여러 페이지 돌며 분석하고, 그 결과를 합산해 ‘사이트 단위’의 그림을 보여준다. 이게 중요한 이유는, 앞의 ○○시 사례처럼 ‘메인은 그래도 낫고 보도자료 페이지가 엉망’인 경우, 한 페이지만 봐서는 진짜 상태를 알 수 없기 때문이다. 여러 페이지를 함께 봐야 ‘우리 사이트의 약한 고리’가 드러난다.

그래서 진단 결과를 받으면 ‘토큰 채택률 전체 평균’만 보는 게 아니라, ‘어느 페이지가 평균을 깎아먹는지’, ‘어떤 유형의 간격이 가장 많이 어긋나는지’까지 파악할 수 있다. 이건 단순히 점수를 매기는 데서 그치지 않고, ‘고칠 순서’를 정하는 데 직접 쓰인다. 채택률이 가장 낮은 페이지부터, 가장 자주 어긋나는 패턴부터 손대면 적은 노력으로 큰 개선을 얻는다. 막연히 ‘다 고쳐야지’가 아니라 ‘여기부터 이렇게’라는 구체적 출발점을 준다는 게, 진단의 진짜 가치다.

■ 행안부 7대 영역과의 연결

ViewCheck의 진단은 디자인 일관성만 보는 게 아니다. 행정안전부 「전자정부 웹사이트 품질관리 지침」의 7대 영역(호환성·접근성·개방성·접속성·편의성·효율성·신뢰성)을 폭넓게 짚고, 웹접근성은 KWCAG 33항목 기준으로 점검한다. 오늘 이야기한 간격·토큰은 그중 ‘일관성 있는 디자인’과 ‘접근성(터치 타깃 크기, 가독성)’에 두루 걸쳐 있다.

이렇게 여러 기준을 한 번에 보는 게 왜 좋냐면, 앞에서 봤듯이 간격 문제는 미관에서 끝나지 않고 접근성·신뢰성으로 번지기 때문이다. 버튼 간격이 좁으면 모바일 접근성 문제가 되고, 폼 라벨 간격이 어긋나면 신청 오류라는 신뢰성 문제가 된다. 한 화면에서 ‘디자인 점수’와 ‘접근성 점수’를 나란히 보면, 간격 하나가 여러 영역에 어떻게 영향을 주는지가 한눈에 보인다.

진단 결과를 받아 보면, 오늘 글에서 다룬 다섯 가지 패턴이 우리 사이트의 어디에 숨어 있는지가 구체적으로 드러난다. ‘아, 이 목록 페이지의 카드 패딩이 제각각이었구나’, ‘이 신청 폼의 항목 간격이 들쭉날쭉했구나’ 하는 식으로 말이다. 막연히 ‘어수선하다’가 아니라 ‘여기 이 부분이, 이렇게’라는 구체적인 지점으로 좁혀진다. 그러면 고치는 일도 막막하지 않다. 가장 점수가 낮은 곳, 가장 자주 어긋나는 패턴부터 하나씩 손대면 된다. 한 번에 다 고칠 필요도 없다. 오늘 이야기한 ‘메인의 큰 섹션 간격 통일’ 같은 가성비 좋은 작업부터 시작해, 작은 성공을 쌓아가며 점점 범위를 넓히면 된다. 진단은 그 ‘어디서부터, 어떤 순서로’를 알려주는 지도 역할을 한다.

【 마무리 】

오늘 이야기를 한 줄로 줄이면 이렇다. ‘들쭉날쭉한 간격은 사이트를 아마추어처럼 보이게 하고, 그 해법은 8pt 그리드라는 단순한 규칙이다.’

다시 짚어보자. 간격은 디자인의 침묵하는 절반이다. 색과 글꼴이 목소리라면 간격은 말 사이의 호흡이고, 호흡이 엉망이면 내용이 좋아도 듣기 힘들다. 우리가 어떤 화면을 보고 ‘아마추어 같다’고 느낄 때, 그 정체는 대부분 ‘안 맞는 간격’이다. 사람 눈은 들쭉날쭉함에 무섭게 예민하다. 그러니 해법은 ‘예술적으로 완벽한 간격’이 아니라 ‘일관된 간격’이고, 일관성을 가장 쉽게 강제하는 방법이 8pt 그리드다.

8pt 그리드는 마법의 숫자라서가 아니라 ‘선택지를 제한해 일관성을 강제하기’ 때문에 작동한다. 제약은 자유를 빼앗는 게 아니라, 매번 새로 결정하는 부담을 덜어 본질에 집중하게 해준다. 글쓰기의 맞춤법처럼, 간격의 맞춤법인 셈이다. 거기에 4 단위 보조와 간격 토큰까지 더하면, 섬세함과 일관성을 둘 다 챙길 수 있다.

현장의 붕괴 패턴들도 결국 하나의 원인으로 모인다. ○○시의 눈대중 섹션 간격, A광역지자체의 제각각 카드 패딩, 한중앙부처의 어긋난 폼 라벨 간격, B공공기관의 모바일 붕괴, C기관의 외부 콘텐츠 이질감 — 다섯 패턴 모두 ‘공유된 간격 약속이 없다’는 한 뿌리에서 자란다. 뿌리가 하나니, 8pt 그리드 하나를 제대로 심으면 다섯 가지가 함께 좋아진다.

그리고 이 모든 일의 출발점은 ‘지금 우리 사이트가 얼마나 어긋나 있는지를 아는 것’이다. 보이지 않던 문제는 고칠 마음이 안 생긴다. 숫자로 보이는 순간 비로소 과제가 된다. 그 숫자를 가장 빠르게 확인하는 길이 ViewCheck의 디자인 토큰 채택률 진단이다. 거창한 개편 계획을 세우기 전에, 먼저 우리 사이트 주소를 한 번 넣어보길 권한다. URL 하나만 넣으면, 상단 점수 카드에서 우리 사이트의 디자인 일관성 상태가 펼쳐진다. 디자인 시스템 영역으로 들어가 ‘토큰 채택률’ 숫자를 확인하는 것, 거기서부터 시작하면 된다. 오늘 본 다섯 가지 패턴 중 우리 사이트에 몇 개가 해당되는지, 어느 페이지부터 손대야 하는지 — 막연하던 것들이 구체적인 할 일 목록으로 바뀔 것이다.

마지막으로 한 가지만 덧붙이고 싶다. 간격을 정비하는 일은 ‘티 안 나는 노동’이다. 색을 바꾸면 누구나 ‘오 바뀌었네’ 하지만, 간격을 가지런히 맞춘 작업은 정작 ‘원래 그랬던 것처럼’ 자연스러워서 칭찬받기 어렵다. 하지만 바로 그 ‘원래 그랬던 것처럼’이 최고의 디자인이다. 사용자가 ‘이 사이트 잘 만들었네’라고 콕 집어 말하지 않더라도, 머무는 시간이 길어지고, 신청을 끝까지 마치고, ‘믿을 만한 곳’이라는 인상을 받는다면 — 그게 간격이 조용히 해낸 일이다. 보이지 않게 일하지만 분명히 일하는 것, 그게 좋은 간격이다. 그러니 칭찬받지 못해도 묵묵히 간격을 챙기는 담당자분들께, 이 글이 작은 응원이 되었으면 한다.

다음 글에서는 오늘 잠깐씩 스쳤던 ‘디자인 토큰’ 자체를 더 깊이 파고들 예정이다. 색·글꼴·간격을 ‘이름 붙은 약속’으로 묶어두면 사이트 운영이 어떻게 달라지는지, 토큰이라는 ‘디자인 언어’가 왜 강력한지를 익명 사례와 함께 풀어보겠다. 오늘은 여기까지. 우리 사이트의 간격이, 오늘부터 조금 더 가지런해지길 바란다.

키워드/태그: #KRDS #공공웹 #디자인시스템 #8pt그리드 #간격 #디자인토큰 #토큰채택률 #웹접근성 #KWCAG #전자정부 #디자인일관성 #ViewCheck

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