8pt 그리드가 만드는 정돈된 레이아웃

8pt 그리드가 만드는 정돈된 레이아웃

---

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

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

【 공감·문제제기 】

“이 페이지, 뭔가 어수선한데 정확히 뭐가 문제인지 모르겠어요.”

공공 사이트 개편 검수 회의에서 가장 자주 나오는 말이다. 화면을 띄워놓고 다 같이 들여다보는데, 분명 색도 맞췄고 글꼴도 통일했는데 뭔가 ‘정돈이 안 된’ 느낌이 든다. 누군가는 “여백이 좀 답답해요”라 하고, 또 누군가는 “버튼이 붕 떠 보여요”라 한다. 다들 불편함은 느끼는데, 그 불편함의 정체를 짚어내지 못한다. 그래서 결국 “좀 더 깔끔하게 정리해 주세요”라는 두루뭉술한 피드백으로 회의가 끝난다. 그리고 업체는 ‘깔끔하게’가 뭔지 자기 나름대로 해석해서 또 조금 다른 결과물을 가져온다. 이 무한 반복을 겪어본 담당자라면 지금 무슨 얘긴지 바로 알 거다.

나도 이런 회의를 수도 없이 겪었다. 처음엔 ‘내 디자인 감각이 부족해서 그런가’ 자책도 했다. 그런데 여러 사이트를 점검하다 보니, 이 ‘어수선함’의 정체가 의외로 단순한 데 있다는 걸 알게 됐다. 색이나 글꼴 같은, 눈에 확 띄는 요소의 문제가 아니었다. 진짜 범인은 ‘간격’이었다. 요소와 요소 사이의 빈 공간, 그러니까 여백이 제멋대로일 때 화면 전체가 어수선해 보이는 거였다.

여백이라니, 너무 사소한 얘기 같은가? 그런데 한번 이렇게 생각해보자. 책을 펼쳤는데 어떤 문단은 줄 간격이 빽빽하고 어떤 문단은 휑하게 떨어져 있다면, 글자 자체는 멀쩡해도 읽기 불편할 거다. 방을 정리할 때도 마찬가지다. 물건 자체는 좋은 물건인데, 간격 없이 아무렇게나 쌓여 있으면 어수선해 보인다. 화면도 똑같다. 요소 하나하나는 멀쩡한데, 그 사이의 간격이 들쭉날쭉하면 전체가 불안정해 보인다. 16픽셀이었다가 14픽셀이었다가 19픽셀이었다가… 이렇게 미세하게 어긋난 간격들이 모이면, 사람 눈은 그걸 ‘정렬이 안 맞는다’고 느낀다. 정확히 몇 픽셀이 틀렸는지는 몰라도, ‘뭔가 불편하다’는 감각만은 또렷하게 전달된다.

이 글은 바로 그 ‘간격’ 이야기다. 더 정확히는, 공공 디자인 표준인 KRDS가 권하는 ‘8pt 그리드’라는 규칙에 관한 이야기다. 이름만 들으면 뭔가 어려운 개발 용어 같지만, 막상 알고 나면 ‘이렇게 단순한 거였어?’ 싶을 만큼 쉽다. 그리고 이 단순한 규칙 하나가 화면의 인상을 얼마나 크게 바꾸는지 알게 되면, 앞으로 어떤 화면을 보든 ‘아, 이래서 정돈돼 보이는구나’ 혹은 ‘아, 이래서 어수선했구나’가 보이기 시작할 거다.

이 글은 이번 주 주제를 처음 접하는 공공웹 담당자를 위한 입문 글이다. 디자인 전공자가 아니어도, 픽셀이니 그리드니 하는 말이 낯설어도 괜찮다. 사이트 하나 운영해본 사람, 검수 회의에 한 번이라도 들어가 본 사람이라면 충분히 따라올 수 있도록, 어려운 용어는 전부 일상의 비유로 풀어 쓰려고 한다. 먼저 ‘그리드’와 ‘8pt’가 각각 무슨 뜻인지를 떼어서 설명하고, 왜 하필 8이라는 숫자인지, 이 규칙을 지키면 화면이 어떻게 달라지는지를 차근차근 짚는다. 그다음 실무에서 간격이 어긋나는 전형적인 상황들을 익명 사례로 보여주고, 마지막으로 ‘그래서 우리는 무엇부터 점검하면 되는지’를 단계별로 정리한다.

한 가지 더 솔직한 이야기를 보태자면, 나는 ‘간격’이라는 주제가 이렇게 한 편의 글이 될 만큼 깊은 줄 처음엔 몰랐다. 색이나 글꼴은 ‘디자인의 꽃’ 같아서 자연스레 신경을 쓰지만, 간격은 ‘그냥 비워둔 공간’ 정도로만 여겼다. 그런데 여러 사이트를 들여다보고, 잘 만든 화면과 어수선한 화면을 비교하다 보니, 둘을 가르는 결정적 차이가 바로 이 ‘비워둔 공간을 어떻게 비웠는가’에 있다는 걸 깨달았다. 잘 만든 화면은 여백조차 계획돼 있었다. 어수선한 화면은 여백이 그냥 ‘남은 자리’였다. 이 차이를 한번 알아채고 나면, 다시는 간격을 ‘그냥 빈 공간’으로 볼 수 없게 된다. 이 글이 여러분에게 그런 ‘눈이 트이는 경험’을 주면 좋겠다.

미리 한 가지 약속하자면, 이 글은 ‘또 하나의 숙제’를 안기려는 글이 아니다. 오히려 반대다. 8pt 그리드를 알면 ‘간격을 매번 새로 고민하는 일’이 사라진다. 결정의 횟수가 줄고, 검수의 기준이 생기고, 업체와의 대화가 구체적으로 바뀐다. 부담을 더하는 규칙이 아니라, 부담을 더는 도구로 8pt 그리드를 바라봐 주면 좋겠다. 자, 그럼 ‘간격’이라는 작지만 강력한 세계로 들어가 보자.

【본론 1 — 개념·왜 중요한가】

■ 먼저 ‘그리드’라는 말부터 풀어보자

‘그리드(grid)’를 우리말로 옮기면 ‘격자’ 혹은 ‘눈금판’이다. 모눈종이를 떠올리면 가장 쉽다. 어릴 때 그래프 그리던 그 모눈종이 말이다. 가로세로로 일정한 간격의 선이 그어져 있어서, 그 선을 기준으로 그림을 그리거나 글씨를 쓰면 삐뚤어지지 않고 가지런해진다. 자유롭게 백지에 그릴 때보다 모눈종이 위에 그릴 때 결과물이 훨씬 정돈돼 보이는 경험, 다들 있을 거다.

디자인에서 말하는 그리드도 똑같은 원리다. 화면 위에 눈에 보이지 않는 격자를 깔아두고, 모든 요소를 그 격자에 맞춰 배치하는 것이다. 버튼도, 글자도, 카드도, 이미지도 전부 이 보이지 않는 눈금에 맞춰 정렬한다. 그러면 요소들이 제각기 떠 있는 게 아니라, ‘하나의 질서’ 안에서 정렬된 것처럼 보인다. 사람 눈은 이 숨은 질서를 무의식적으로 알아챈다. 격자에 맞아떨어진 화면을 보면 ‘정돈됐다’고 느끼고, 격자에서 벗어난 화면을 보면 ‘어수선하다’고 느낀다. 정작 그 자리에 격자가 그어져 있다는 건 의식하지 못하면서 말이다.

여기서 중요한 점. 이 격자는 ‘출력되는 선’이 아니다. 디자인 단계에서만 참고하는 ‘기준선’이고, 실제 사용자에게 보이는 화면에는 그 선이 나타나지 않는다. 모눈종이 위에 그림을 그린 다음 그림만 오려내면, 모눈은 사라지고 가지런한 그림만 남는 것과 같다. 그리드는 어디까지나 ‘만드는 사람을 위한 보조선’이다. 그래서 사용자는 그리드의 존재를 모르지만, 그리드 덕분에 정돈된 화면의 혜택은 고스란히 누린다.

조금 더 비유를 밀어보자. 도시의 도로망을 떠올려도 좋다. 계획 없이 자연발생적으로 생긴 골목길의 도시는 길이 구불구불하고 어디가 어딘지 헷갈린다. 반면 바둑판처럼 도로를 계획한 신도시는 처음 가도 길 찾기가 수월하다. ‘몇 블록 가서 오른쪽’ 식으로 위치를 직관적으로 파악할 수 있기 때문이다. 그리드는 화면에 이 바둑판 도로망을 까는 일이다. 사용자가 화면 위에서 길을 잃지 않게, 시선이 자연스럽게 흐르도록 도로를 깔아주는 셈이다.

그런데 그리드라고 하면 보통 ‘가로 칸 나누기’, 즉 화면을 12칸이나 16칸으로 나누는 레이아웃 그리드를 떠올린다. 물론 그것도 중요하다. 하지만 오늘 이야기의 주인공은 조금 다르다. 가로 배치보다 더 근본적이고, 모든 화면에 빠짐없이 작동하는 ‘간격의 그리드’, 바로 8pt 그리드다.

두 그리드의 차이를 잠깐 정리하고 가자. 가로 그리드(레이아웃 그리드)는 ‘화면을 좌우로 어떻게 나눌까’를 다룬다. 본문 영역과 사이드 영역의 비율, 카드를 한 줄에 몇 개 놓을지 같은 ‘큰 골격’의 문제다. 반면 8pt 그리드는 ‘요소와 요소 사이를 얼마나 띄울까’, 즉 ‘여백의 단위’를 다룬다. 둘은 충돌하는 개념이 아니라 함께 쓰는 개념이다. 가로 그리드가 ‘방의 구획’을 나눈다면, 8pt 그리드는 ‘그 방 안 가구 사이의 간격’을 정한다. 큰 골격은 가로 그리드로, 그 안의 미세한 호흡은 8pt 그리드로 잡는 식이다. 오늘 우리가 집중하는 건 후자, 즉 ‘모든 화면에서 빠짐없이 작동하는 여백의 단위’ 쪽이다. 왜냐하면 어떤 화면이든, 가로를 몇 칸으로 나누든, 요소 사이에는 반드시 ‘간격’이 존재하기 때문이다. 간격이 없는 화면은 없다. 그래서 8pt 그리드는 가장 보편적으로, 가장 빠짐없이 적용되는 규칙이다.

■ ‘8pt’의 정체 — 왜 하필 8인가

8pt에서 pt는 ‘포인트(point)’의 약자로, 화면에서 길이를 재는 단위 중 하나다. 너무 정밀하게 따질 필요 없이, 일단은 ‘픽셀과 비슷한, 화면상의 길이 단위’ 정도로 이해하면 충분하다. 8pt는 그 길이가 8만큼이라는 뜻이다.

8pt 그리드의 규칙은 한 문장으로 요약된다. “화면의 모든 간격과 크기를 8의 배수로 맞춘다.” 요소와 요소 사이의 여백도 8, 16, 24, 32, 40, 48… 이렇게 8씩 늘려가며 정한다. 버튼의 높이도, 카드 안쪽의 안여백도, 글자와 글자 사이의 줄 간격도 가능한 한 8의 배수로 맞춘다. 이게 전부다. 규칙 자체는 이렇게 단순하다.

자, 그럼 핵심 질문. 왜 하필 8일까? 7도 아니고 10도 아니고 왜 8인가? 여기엔 꽤 합리적인 이유가 몇 가지 있다.

첫째, 8은 ‘나누기 좋은 숫자’다. 8은 2로도, 4로도 깔끔하게 나뉜다. 디자인을 하다 보면 ‘이 간격의 절반’ ‘이 간격의 절반의 절반’이 필요한 경우가 많은데, 8을 기준으로 하면 8의 절반은 4, 그 절반은 2로 떨어진다. 만약 기준을 5나 7로 잡으면 절반이 2.5나 3.5처럼 소수가 되어 어중간해진다. 8은 쪼개도 정수가 유지되니 다루기 편하다.

둘째, 다양한 화면 크기에 잘 들어맞는다. 요즘 사람들이 쓰는 기기의 화면 해상도는 대부분 8로 나누어떨어지는 값들로 설계돼 있다. 그래서 간격을 8의 배수로 맞추면 여러 기기에서 요소가 흐릿하거나 어긋나 보일 가능성이 줄어든다. 어중간한 숫자를 쓰면 화면을 확대·축소하는 과정에서 경계선이 뭉개지거나 0.5픽셀처럼 애매한 위치에 걸리는 일이 생기는데, 8의 배수는 이런 문제에서 비교적 자유롭다.

셋째, 그리고 이게 실무에서 가장 체감되는 이유인데, ‘선택지를 줄여준다’는 점이다. 간격을 정할 때 ‘1부터 100까지 아무 숫자나 가능’하다면, 누구는 14를 쓰고 누구는 15를 쓰고 또 누구는 17을 쓴다. 사람마다, 페이지마다 제각각이 된다. 그런데 ‘8의 배수만 쓴다’고 약속하면 선택지가 8, 16, 24, 32 정도로 확 줄어든다. 고민할 거리가 줄고, 누가 만들어도 비슷한 결과가 나온다. 앞서 말한 ‘결정의 횟수를 줄이는’ 디자인 시스템의 철학이, 간격이라는 가장 작은 단위에서 그대로 작동하는 것이다.

정리하면 8이라는 숫자는 ‘수학적으로 다루기 좋고, 기술적으로 안정적이며, 실무적으로 선택지를 줄여주는’ 삼박자가 맞아떨어진 결과다. 어디서 누가 그냥 정한 임의의 숫자가 아니라, 오랜 디자인 실무의 경험이 수렴한 합리적인 약속인 셈이다. 그래서 KRDS뿐 아니라 세계의 수많은 디자인 시스템이 8을 간격의 기준 단위로 채택하고 있다.

여기서 한 가지 흔한 오해를 풀고 가자. “그럼 8의 배수가 아닌 값은 절대 쓰면 안 되는 거냐”고 묻는 분들이 있다. 그렇지 않다. 8pt 그리드는 ‘철칙’이라기보다 ‘기본값’에 가깝다. 대부분의 간격은 8의 배수로 잡되, 정말 필요한 경우에는 그 절반인 4를 ‘반 칸’처럼 쓰기도 한다. 예를 들어 아이콘과 글자처럼 아주 가까이 붙여야 하는 요소 사이에는 8이 너무 넓을 수 있는데, 그럴 때 4를 쓴다. 핵심은 ‘아무 숫자나 마구 쓰지 않고, 8을 중심으로 한 정해진 단계 안에서 고른다’는 데 있다. 8, 16, 24, 32라는 큰 단계에 4라는 보조 단계까지 더하면, 거의 모든 상황을 정돈된 체계 안에서 처리할 수 있다. ‘예외 없는 규칙’이 아니라 ‘예외도 규칙 안에 있는’ 체계인 셈이다.

또 하나 자주 나오는 질문. “간격뿐 아니라 요소의 크기도 8의 배수로 해야 하나?” 그렇게 하면 더 좋다. 8pt 그리드의 진가는 ‘간격’과 ‘크기’가 같은 박자로 움직일 때 나온다. 버튼 높이가 40(8의 배수)이고, 그 위아래 간격이 16(8의 배수)이고, 안쪽 여백이 8이라면, 화면 전체가 하나의 일관된 격자 위에서 숨 쉬게 된다. 반대로 간격만 8의 배수로 맞추고 요소 크기는 제멋대로면, 절반의 효과밖에 못 낸다. 그래서 8pt 그리드는 ‘간격 규칙’이라기보다 ‘화면 전체를 8의 박자로 통일하는 규칙’이라고 이해하는 게 더 정확하다.

마지막으로, ‘왜 굳이 숫자로 약속까지 해야 하나, 디자이너 감각에 맡기면 안 되나’라는 생각도 있을 수 있다. 한 사람이 처음부터 끝까지 만든다면 감각만으로도 어느 정도 통일감이 나올 수 있다. 문제는 공공 웹 현장에서 그런 경우가 거의 없다는 것이다. 여러 부서, 여러 업체, 여러 시기에 걸쳐 화면이 만들어진다. 각자의 감각은 조금씩 다르고, 시간이 지나면 같은 사람의 감각조차 미묘하게 달라진다. ‘감각’은 사람마다 다르고 시간에 따라 변하지만, ‘8의 배수’라는 숫자 약속은 누가 언제 적용해도 똑같다. 일관성을 ‘운’에 맡기지 않고 ‘규칙’으로 보장하는 것 — 이게 숫자로 약속하는 진짜 이유다.

■ 간격이 만드는 ‘리듬’ — 음악으로 이해하기

8pt 그리드를 좀 더 깊이 이해하려면 ‘리듬’이라는 개념을 가져오면 좋다. 음악에서 박자가 일정해야 듣기 편한 것처럼, 화면에서도 간격이 일정한 ‘박자’를 이뤄야 보기 편하다.

생각해보자. 노래를 부르는데 박자가 들쭉날쭉하면, 노래 자체가 좋아도 듣는 사람이 불편하다. 어디서 박자를 끊어야 할지 예측이 안 되니까 긴장하게 된다. 반대로 박자가 규칙적이면, 듣는 사람은 다음 박자를 자연스럽게 예측하면서 편안하게 흐름을 탄다. 화면의 간격도 똑같다. 8, 16, 24처럼 일정한 배수로 간격이 반복되면, 사용자의 눈은 그 ‘시각적 박자’를 따라 자연스럽게 화면을 읽어 내려간다. 어디서 한 덩어리가 끝나고 어디서 새 덩어리가 시작되는지를 무의식적으로 예측하게 되는 것이다.

이걸 ‘수직 리듬’이라고도 부른다. 위에서 아래로 콘텐츠를 읽어 내려갈 때, 제목과 본문 사이, 문단과 문단 사이, 섹션과 섹션 사이의 간격이 일정한 규칙을 따르면, 마치 잘 짜인 악보처럼 시선이 막힘없이 흐른다. 반대로 이 간격이 제멋대로면, 눈은 매번 ‘여기서 끊어야 하나, 이어야 하나’를 새로 판단하느라 미세하게 피로해진다. 사용자는 자기가 왜 피곤한지 모른 채 그냥 ‘이 사이트는 보기 불편하다’고 느낀다.

이 피로는 생각보다 무섭다. 한 번의 미세한 피로는 사소하지만, 페이지를 스크롤하며 수십 번 반복되면 쌓인다. 그리고 그 누적된 피로는 ‘이 사이트는 쓰기 힘들다’는 인상으로 굳어진다. 더 나아가, 민원 신청처럼 여러 단계를 거쳐야 하는 흐름에서는 이 피로가 ‘중도 포기’로 이어지기도 한다. 사용자는 ‘왜 그만뒀는지’ 논리적으로 설명하지 못하지만, 몸은 이미 ‘이 과정이 불편하다’를 느끼고 멈춘다. 공공 서비스에서 사용자가 신청을 끝까지 마치지 못하는 건 단순한 불편을 넘어 ‘필요한 혜택을 못 받는’ 실질적 손해다. 일정한 간격 리듬이 이탈을 줄이고 완수율을 높이는, 보이지 않지만 분명한 역할을 한다.

악보 비유를 한 발 더 밀어보자. 좋은 음악에는 ‘일정한 박자’만 있는 게 아니라 ‘강약의 위계’도 있다. 4박자 안에서 첫 박이 강하고 나머지가 약한 식이다. 간격도 마찬가지다. 모든 간격이 똑같으면 오히려 단조롭고 어디가 중요한지 알 수 없다. 작은 단위(8)는 ‘긴밀히 붙은 것’을, 중간 단위(16, 24)는 ‘느슨히 묶인 것’을, 큰 단위(48)는 ‘완전히 다른 덩어리’를 나타낸다. 이렇게 간격에 강약의 위계를 두면, 사용자는 간격만 보고도 화면의 구조를 읽는다. 8pt 그리드는 이 강약을 ‘제멋대로의 강약’이 아니라 ‘배수로 정돈된 강약’으로 만들어준다. 박자도 일정하고 강약도 체계적인, 잘 작곡된 음악 같은 화면이 그렇게 만들어진다.

또 하나 중요한 개념이 ‘근접성’이다. 사람은 가까이 붙어 있는 것들을 ‘한 무리’로, 멀리 떨어진 것들을 ‘다른 무리’로 인식한다. 이건 우리 뇌가 정보를 처리하는 기본 방식이다. 그래서 서로 관련 있는 요소들(예를 들어 제목과 그 설명문)은 간격을 좁게 두고, 관련 없는 요소들(예를 들어 한 섹션과 다음 섹션)은 간격을 넓게 둬야 한다. 그래야 사용자가 ‘이건 한 덩어리, 저건 다른 덩어리’를 직관적으로 구분한다.

문제는, 간격에 기준이 없으면 이 ‘무리 짓기’가 엉망이 된다는 거다. 관련 있는 것끼리 멀고 관련 없는 것끼리 가까우면, 사용자는 정보의 묶음을 잘못 읽는다. 제목이 위 섹션에 붙은 건지 아래 본문에 붙은 건지 헷갈리고, 어디까지가 한 항목인지 모호해진다. 8pt 그리드는 이 ‘무리 짓기’를 체계적으로 만들어준다. ‘같은 무리 안은 8, 무리와 무리 사이는 24’ 같은 규칙을 정해두면, 화면 어디서나 일관된 간격 위계가 작동하고, 사용자는 정보의 구조를 한눈에 파악하게 된다.

이쯤 되면 ‘간격’이라는 게 단순한 미적 취향의 문제가 아니라는 게 보일 거다. 간격은 ‘정보의 구조를 시각적으로 전달하는 언어’다. 어떤 것이 한 묶음이고 어떤 것이 별개인지, 어떤 것이 더 중요하고 어떤 것이 부차적인지를 간격으로 말한다. 8pt 그리드는 이 언어를 ‘아무나 알아들을 수 있는 표준 문법’으로 정리한 것이다.

조금 더 풀어보자. 우리가 책을 읽을 때 문단 사이에 한 줄을 비우는 건 ‘여기서 한 생각이 끝나고 새 생각이 시작된다’는 신호다. 만약 모든 문단이 똑같은 간격으로 다닥다닥 붙어 있으면, 어디서 생각이 끊기는지 알 수 없어 읽기가 힘들다. 화면도 똑같다. 간격은 ‘여기서 끊어 읽으세요’ ‘이건 한 호흡으로 보세요’라고 말없이 알려주는 안내판이다. 그런데 이 안내판이 페이지마다 제멋대로면, 사용자는 매번 새로운 규칙을 익혀야 한다. 8pt 그리드로 간격의 안내판을 통일하면, 사용자는 한 번 익힌 규칙으로 사이트 전체를 편하게 읽어 내려간다. 학습 비용이 ‘페이지마다’에서 ‘사이트당 한 번’으로 줄어드는 셈이다.

그리고 이 ‘무리 짓기’는 단순히 보기 편한 차원을 넘어, 정보를 제대로 ‘이해’하게 만드는 문제이기도 하다. 예를 들어 신청 화면에서 ‘이름’이라는 라벨과 그 입력칸이 멀리 떨어져 있고, 오히려 아래의 ‘전화번호’ 입력칸과 가까이 붙어 있다면, 사용자는 이름 라벨이 어느 입력칸에 붙는지 헷갈린다. 이건 미관의 문제가 아니라 ‘정보를 잘못 입력하게 만드는’ 실질적 오류의 원인이다. 간격의 위계가 무너지면, 사용자는 엉뚱한 칸에 엉뚱한 값을 넣는다. 특히 고령층이나 디지털에 서툰 사용자일수록 이런 ‘간격이 주는 단서’에 더 많이 의존한다. 간격을 정돈하는 일이 곧 접근성을 챙기는 일과 이어지는 이유다.

■ KRDS가 8pt 그리드를 권하는 맥락

여기서 잠깐, 이 8pt 그리드가 KRDS 안에서 어디쯤 위치하는지 짚고 가자. KRDS는 크게 네 영역, 즉 DS·CP·BP·SP로 이루어진다. 디자인 기반 요소를 다루는 DS가 약 120개, 화면 부품을 다루는 CP가 약 446개, 작은 흐름을 다루는 BP가 약 108개, 전체 서비스 여정을 다루는 SP가 약 172개. 다 합치면 120 더하기 446 더하기 108 더하기 172, 정확히 846개다. KRDS를 ‘846규칙’이라 부르는 이유다.

8pt 그리드와 간격 체계는 이 중 가장 기초가 되는 DS 영역에 속한다. DS는 색·글꼴·간격·그림자·모서리 둥글기처럼 ‘시각의 기본 단위’를 다루는 영역인데, 간격 체계는 그중에서도 화면 전체의 짜임새를 떠받치는 뼈대다. DS는 눈에 잘 안 띄지만 모든 걸 떠받치는 영역이라고들 하는데, 간격이야말로 그 표현에 딱 맞는다. 사용자는 ‘간격’을 의식하지 않지만, 간격이 무너지면 화면 전체가 무너진다.

흥미로운 건, DS 영역의 규칙 수가 약 120개로 네 영역 중 가장 적다는 점이다. 가장 적은데도 가장 중요하다. 왜냐하면 DS는 ‘적은 수의 기본 규칙이 나머지 모든 화면에 영향을 미치는’ 구조이기 때문이다. CP의 446개 부품 규칙도, BP의 108개 패턴 규칙도, SP의 172개 서비스 규칙도, 결국 DS가 정한 색과 간격이라는 기본 단위 위에서 작동한다. 그러니 DS의 간격 하나가 어긋나면, 그 위에 올라간 수백 개 규칙이 한꺼번에 미세하게 흔들린다. 적은 규칙이 큰 파급을 가지는 구조 — 이게 DS 영역을, 그리고 그 안의 간격 체계를 ‘가장 먼저 잡아야 할 기초’로 만드는 이유다. 집을 지을 때 기초 콘크리트가 전체 면적에서 차지하는 비중은 작지만, 그게 흔들리면 건물 전체가 흔들리는 것과 똑같은 이치다.

그리고 여기서 KRDS의 영리한 점이 드러난다. KRDS는 간격을 ‘그때그때 정하는 수치’가 아니라 ‘토큰’이라는 정해진 변수로 관리하도록 권한다. 토큰이란 쉽게 말해 ‘이름이 붙은 약속된 값’이다. 예를 들어 ‘간격-작게는 8, 간격-보통은 16, 간격-크게는 24’처럼 이름과 값을 한 번 정해두고, 디자인할 때마다 그 이름을 가져다 쓰는 방식이다. 이렇게 하면 ‘이 여백 얼마로 하지?’를 매번 새로 고민할 필요가 없다. ‘여기는 보통 간격’이라고만 정하면, 그게 자동으로 16이 된다.

토큰의 진짜 위력은 ‘한 번 바꾸면 전체가 바뀐다’는 데 있다. 만약 나중에 ‘보통 간격을 16에서 20으로 늘리자’고 결정하면, 토큰의 값 하나만 바꾸면 그 토큰을 쓴 모든 화면의 간격이 일제히 바뀐다. 토큰 없이 일일이 숫자를 박아넣었다면, 수백 개 화면을 하나하나 찾아 고쳐야 한다. 토큰은 간격의 일관성을 ‘유지’하는 동시에 ‘수정’도 쉽게 만들어주는, 일석이조의 장치다. 8pt 그리드와 토큰은 그래서 짝꿍처럼 함께 다닌다. 8pt 그리드가 ‘어떤 값을 쓸지’의 규칙이라면, 토큰은 ‘그 값을 어떻게 관리할지’의 방법이다.

토큰을 ‘이름’으로 관리한다는 점도 곱씹어볼 만하다. ‘16’이라는 숫자에는 의미가 없다. 하지만 ‘보통 간격’이라는 이름에는 의미가 있다. 디자인할 때 ‘여기 16을 넣어주세요’가 아니라 ‘여기 보통 간격을 써주세요’라고 말하면, 그 자리가 ‘어떤 성격의 자리인지’가 함께 전달된다. 숫자는 ‘얼마’만 말하지만, 이름은 ‘왜’까지 말한다. 그래서 토큰으로 관리된 화면은 단순히 일관될 뿐 아니라 ‘의도가 읽히는’ 화면이 된다. 나중에 다른 사람이 봐도 ‘아, 여기는 보통 간격을 쓴 자리구나’를 알 수 있으니, 함부로 다른 값으로 바꾸지 않게 된다. 이름이 곧 약속이고, 그 약속이 화면을 지킨다.

그리고 이 토큰 개념은 간격에만 머물지 않는다. 색도 토큰으로, 글꼴 크기도 토큰으로, 모서리 둥글기도 토큰으로 관리하는 게 KRDS의 방식이다. 다음 달에는 이 ‘토큰’ 자체를 한 달 내내 깊이 다룰 예정인데, 오늘 간격을 통해 토큰의 맛을 미리 본 셈이다. 간격이라는 가장 단순하고 직관적인 예로 토큰을 이해해두면, 다른 영역의 토큰도 훨씬 쉽게 받아들여진다. 간격은 토큰을 처음 배우기에 가장 좋은 입구다.

마지막으로, 8pt 그리드는 앞서 말한 KRDS의 ‘레이어 구조’에서 가장 아래층을 단단하게 만드는 일이기도 하다. DS라는 기초 위에 CP라는 부품이 올라가고, 부품이 모여 BP라는 패턴이 되고, 패턴이 이어져 SP라는 서비스가 된다. 가장 아래의 간격 체계가 흔들리면, 그 위에 올라가는 모든 것이 미세하게 어긋난다. 버튼(CP)의 안여백이 제각각이면 버튼들이 들쭉날쭉해 보이고, 폼 흐름(BP)의 단계 간격이 제각각이면 흐름이 끊겨 보이고, 신청 서비스(SP) 전체가 어수선해 보인다. 그러니 8pt 그리드를 잡는 일은 ‘작은 디테일’을 챙기는 게 아니라 ‘건물의 기초’를 다지는 일에 가깝다.

【본론 2 — 흔한 실수·사례 (익명)】

개념을 들으면 ‘그래서 실제로 뭐가 문제인데?’ 싶을 수 있다. 그래서 실무에서 간격 때문에 자주 벌어지는 상황을 익명으로 풀어보겠다. 미리 양해를 구하자면, 아래 사례에는 어떤 실제 기관명도, 도메인도, 식별 가능한 정보도 들어 있지 않다. 모두 여러 사이트를 점검하다 보면 패턴처럼 반복되는 ‘유형’을 익명으로 재구성한 것이다. 읽다가 ‘어, 우리 사이트 얘긴가?’ 싶은 대목이 있다면, 그건 그만큼 흔한 문제라는 뜻이지 특정 기관만의 문제가 아니다.

그리고 이 사례들을 읽을 때 한 가지를 염두에 두면 좋겠다. 모든 사례의 ‘증상’은 달라 보여도, ‘원인’은 결국 하나로 모인다는 점이다. 바로 ‘간격을 정하는 공통 기준이 없었다’는 것이다. 부서마다 따로 만들었든, 사람이 손으로 밀어 맞췄든, 모바일을 놓쳤든, 그 밑바닥에는 ‘기준의 부재’가 공통으로 깔려 있다. 그래서 해법도 결국 하나로 모인다. ‘공통 기준을 세우고, 그 기준이 지켜졌는지 측정하는 것.’ 증상은 다양하지만 처방은 같다는 것 — 이게 8pt 그리드가 이렇게 강력한 이유다. 하나의 단순한 약속이 이토록 많은 문제를 한꺼번에 예방한다.

■ 사례 하나: 다 맞췄는데 왜 어수선할까

한 광역지자체, 편의상 A광역지자체라 하자. A광역지자체의 새 홈페이지 시안을 검수하는 자리였다. 색은 KRDS 권장 팔레트에 맞췄고, 글꼴도 통일했고, 버튼 모양도 가지런했다. 그런데 다들 ‘뭔가 정돈이 덜 됐다’고 입을 모았다. 정확히 짚지는 못하면서 말이다.

화면을 자로 재듯 뜯어보니 원인이 드러났다. 카드와 카드 사이 간격이 어떤 데는 18, 어떤 데는 22, 어떤 데는 15였다. 제목과 본문 사이 여백도 페이지마다 조금씩 달랐다. 한두 픽셀 차이라 한눈에 ‘틀렸다’고 보이진 않지만, 그 미세한 어긋남이 누적되니 화면 전체가 ‘느슨하게 흔들리는’ 인상을 줬다. 색과 글꼴이라는 ‘큰 요소’는 맞췄는데, 간격이라는 ‘작은 요소’가 제멋대로였던 것이다.

이 사례가 보여주는 건, 간격의 문제가 ‘티는 안 나는데 분위기는 망치는’ 종류라는 점이다. 색이 틀리면 누구나 바로 안다. “여기 색 왜 달라요?” 한마디면 끝난다. 그런데 간격은 ‘틀렸다’고 콕 집기 어렵다. 그저 ‘어수선하다’는 막연한 느낌으로만 다가온다. 그래서 더 위험하다. 원인을 못 찾으니 “좀 더 깔끔하게”라는 헛도는 피드백만 반복되고, 정작 진짜 범인인 간격은 끝까지 손대지 못한 채 넘어간다. 8pt 그리드라는 ‘기준’이 있으면, 이 막연한 느낌이 “카드 간격이 8의 배수에서 벗어났습니다”라는 구체적인 지적으로 바뀐다.

이 사례에서 한 가지 더 짚고 싶은 게 있다. A광역지자체의 디자이너는 결코 일을 못한 사람이 아니었다는 점이다. 오히려 색과 글꼴을 꼼꼼히 맞출 만큼 성실했다. 그런데도 간격이 어긋난 건, ‘간격을 어디에 맞춰야 하는지’에 대한 기준 자체가 그에게 주어지지 않았기 때문이다. 매 화면을 만들 때마다 ‘이 정도면 보기 좋겠지’라는 그날그날의 눈대중으로 간격을 잡으니, 같은 사람이 만들어도 화면마다 미세하게 달라졌다. 이건 개인의 실력 문제가 아니라 ‘기준의 부재’ 문제다. 아무리 성실한 사람도 기준 없이 눈대중으로만 작업하면 일관성을 유지할 수 없다. 반대로 말하면, 기준만 주어지면 누구나 일관성을 지킬 수 있다는 뜻이기도 하다. 8pt 그리드가 하는 일이 바로 그 ‘기준 제공’이다.

■ 사례 둘: 한 페이지 안에서 따로 노는 영역들

이번엔 한 공공기관, B공공기관의 사례라 치자. B공공기관 메인 페이지는 여러 부서에서 보내온 콘텐츠 블록이 한데 모여 있었다. 공지사항 영역, 행사 안내 영역, 자료실 영역, 민원 안내 영역… 그런데 각 영역의 ‘안쪽 여백’이 제각각이었다. 어떤 영역은 안쪽이 넉넉하게 비어 있어 여유로워 보이는데, 바로 옆 영역은 빽빽하게 들어차 답답해 보였다.

이유는 단순했다. 영역마다 만든 시점이 다르고, 손댄 사람이 달랐기 때문이다. 각자 자기 기준대로 여백을 잡으니, 한 페이지 안에서도 ‘리듬’이 깨졌다. 사용자 입장에서는 한 화면을 위에서 아래로 훑는데 어떤 구간은 빠르게 어떤 구간은 답답하게 읽히니, 흐름이 자꾸 끊겼다. 음악으로 치면 한 곡 안에서 박자가 계속 바뀌는 셈이다.

이 사례의 핵심은 ‘부분 최적화의 함정’이다. 각 영역만 따로 보면 다들 그럴듯하다. 그런데 합쳐놓으면 충돌한다. 간격에 ‘조직 공통의 기준’이 없으면, 아무리 각 부서가 열심히 만들어도 전체로는 어긋난다. 8pt 그리드와 토큰이 빛을 발하는 지점이 바로 여기다. ‘우리 조직은 영역 안여백을 24, 영역 사이는 48’처럼 공통 토큰을 정해두면, 누가 어느 시점에 만들든 같은 리듬이 유지된다. 개인의 감각에 기대지 않고, 조직의 약속으로 일관성을 보장하는 것이다.

■ 사례 셋: 모바일에서 무너지는 간격

C기관 사이트는 PC 화면에서는 그럭저럭 정돈돼 보였다. 그런데 휴대폰으로 열어보니 인상이 확 달라졌다. 요소들이 화면 가장자리에 너무 바짝 붙어 답답했고, 어떤 곳은 두 요소가 거의 붙다시피 해서 무엇이 무엇인지 구분이 안 됐다. 손가락으로 누르려는데 버튼끼리 너무 가까워 잘못 누르기 십상이었다.

원인은 ‘PC 기준으로만 간격을 잡고 모바일을 따로 챙기지 않은’ 데 있었다. PC의 넓은 화면에서는 적당해 보이던 간격이, 좁은 모바일 화면에서는 비율이 무너졌다. 특히 손가락으로 조작하는 모바일에서는 간격이 단순한 미관 문제가 아니라 ‘제대로 누를 수 있느냐’의 문제가 된다. 버튼과 버튼 사이가 충분히 떨어져 있지 않으면, 사용자는 옆 버튼을 잘못 누르고 엉뚱한 페이지로 가게 된다.

8pt 그리드는 이 모바일 문제에도 답을 준다. 일관된 배수 체계로 간격을 관리하면, 화면이 좁아질 때 ‘간격을 한 단계씩 줄이는’ 식의 규칙적인 대응이 가능하다. ‘PC에서 24였던 간격을 모바일에서는 16으로’처럼 배수 체계 안에서 단계적으로 조절하면, 좁은 화면에서도 리듬이 깨지지 않는다. 어중간한 숫자로 잡아둔 간격은 화면이 줄어들 때 같이 어중간하게 무너지지만, 8의 배수로 잡힌 간격은 줄어들어도 여전히 8의 배수 안에서 정돈을 유지한다.

이 세 사례를 관통하는 교훈은 하나다. 간격은 ‘있어도 그만 없어도 그만인 디테일’이 아니라, ‘있어야 화면이 서는 뼈대’라는 것이다. 그리고 그 뼈대를 일관되게 세우는 가장 쉬운 방법이 바로 8의 배수라는 단순한 약속, 8pt 그리드다.

■ 사례 넷: ‘1픽셀씩 손으로 밀어 맞춘’ 화면

조금 다른 종류의 사례도 있다. 어떤 사이트는 겉보기엔 간격이 그럭저럭 맞아 보였다. 그런데 화면을 만든 과정을 들여다보니, 디자이너가 ‘눈으로 보기 좋을 때까지’ 요소를 1픽셀씩 손으로 밀어가며 맞춘 결과였다. 그래서 어떤 간격은 17, 어떤 건 19, 어떤 건 21처럼 ‘보기엔 좋지만 아무 규칙도 없는’ 값들로 채워져 있었다.

이게 왜 문제일까? 한 화면만 보면 문제가 없다. 디자이너가 공들여 맞췄으니 그 화면은 예쁘다. 문제는 ‘다음’이다. 다른 담당자가 이 화면에 새 요소를 추가하려 할 때, 기준이 없으니 어떤 간격을 써야 할지 알 수가 없다. ‘17이었나 19였나’를 일일이 재봐야 하고, 결국 또 자기 눈대중으로 새 값을 만들어낸다. 화면이 수정될 때마다 규칙 없는 값이 하나씩 늘어나고, 시간이 지날수록 간격은 점점 더 누더기가 된다. 처음엔 예뻤던 화면이 ‘유지보수를 거치며 망가지는’ 전형적인 경로다.

8pt 그리드는 바로 이 ‘유지보수의 함정’을 막는다. 모든 간격이 8의 배수라는 명확한 규칙을 따르면, 나중에 누가 손대더라도 ‘여기는 16, 저기는 24’를 규칙으로 알 수 있다. 재느라 시간 쓸 필요도, 새 값을 만들 필요도 없다. 화면은 ‘공들여 한 번 만들고 끝’이 아니라 ‘여러 사람이 오래 함께 가꾸는’ 것이다. 그 긴 수명을 견디게 해주는 게 바로 ‘규칙으로 정돈된 간격’이다. 예쁜 화면보다 ‘오래 예쁠 수 있는 화면’이 진짜 잘 만든 화면이고, 8pt 그리드는 그 지속 가능성을 떠받친다.

■ 사례 다섯: 간격이 깨지니 접근성까지 흔들렸다

마지막 사례는 간격과 접근성이 맞물리는 지점을 보여준다. 한 기관의 신청 화면에서, 입력 항목들 사이의 간격이 들쭉날쭉했다. 어떤 항목 묶음은 너무 가까이 붙어 있고, 어떤 묶음은 너무 멀리 떨어져 있었다. 일반 사용자에게도 헷갈렸지만, 화면 낭독기를 쓰는 시각장애 사용자나, 한 번에 한 영역에 집중하는 게 중요한 사용자에게는 더 큰 장벽이 됐다.

간격은 ‘이것들이 한 묶음’이라는 시각적 신호인데, 그 신호가 무너지면 ‘무엇과 무엇이 한 세트인지’를 파악하기 어려워진다. 비장애인은 다른 단서로 어찌어찌 추측하지만, 정보 단서가 적은 사용자일수록 간격이라는 단서에 더 많이 기댄다. 그래서 간격이 깨진 화면은 ‘가장 약한 고리’의 사용자에게 가장 먼저, 가장 크게 불편을 준다.

앞서 ‘공공 서비스는 가장 약한 고리에 맞춰 설계해야 한다’고 했다. 간격은 그 원칙이 가장 미세한 단위에서 작동하는 지점이다. 8의 배수로 간격의 위계를 또렷하게 세우면, 정보의 묶음이 분명해지고, 그 분명함은 결국 모든 사용자, 특히 가장 도움이 필요한 사용자에게 가닿는다. 간격을 정돈하는 일이 단순한 ‘보기 좋게’를 넘어 ‘누구나 쓸 수 있게’로 이어지는 이유다. 작은 규칙 하나가 미관과 사용성과 접근성을 동시에 끌어올리는 셈이다.

【본론 3 — 그래서 무엇부터 시작할까】

이제 가장 실용적인 질문으로 넘어가자. “좋아, 8pt 그리드가 중요한 건 알겠어. 그래서 우리는 뭘 어떻게 시작하면 돼?” 입문자가 당장 적용해볼 수 있는 단계로 정리해보겠다.

■ 1단계: 현황부터 ‘재본다’

뭔가를 고치려면 먼저 지금 상태를 알아야 한다. 의외로 많은 담당자가 자기 사이트의 간격이 어떤 상태인지 모른다. ‘대충 괜찮아 보이는데’ 정도로만 안다. 첫걸음은 현황을 객관적으로 ‘재보는’ 것이다.

직접 자로 재라는 얘기가 아니다. 주요 페이지 몇 개를 띄워놓고, 카드 사이 간격이 균일한지, 제목과 본문 사이 여백이 페이지마다 일관된지, 모바일에서 요소가 가장자리에 붙지는 않는지를 ‘의식적으로’ 살펴보는 것만으로도 출발이 된다. 평소엔 그냥 지나치던 ‘간격’에 눈을 두는 연습이다. 한번 이 눈이 트이면, 어느 화면을 보든 어긋난 간격이 보이기 시작한다. 일종의 직업병이지만, 담당자에겐 유용한 직업병이다.

■ 2단계: ‘간격 토큰’ 목록을 정한다

다음은 우리 조직이 쓸 간격의 ‘메뉴판’을 만드는 일이다. 8의 배수 중에서 실제로 자주 쓸 값들을 추려 이름을 붙인다. 예를 들면 이렇다. 아주 좁게 8, 좁게 16, 보통 24, 넓게 32, 아주 넓게 48. 이렇게 대여섯 개 정도면 대부분의 상황을 커버한다. 더 많이 만들 필요 없다. 오히려 선택지가 너무 많으면 또 제각각이 되니, ‘적게, 명확하게’가 원칙이다.

이 목록이 곧 앞에서 말한 ‘토큰’이다. 한 번 정해두면, 이후 모든 화면은 이 메뉴판 안에서만 간격을 고른다. ‘여기는 보통 간격’이라고만 말하면 자동으로 24가 된다. ‘이 여백 얼마로 할까’를 매번 고민하던 일이, ‘이 자리는 어느 단계 간격이 어울릴까’를 메뉴판에서 고르는 일로 바뀐다. 고민의 성격이 완전히 달라진다.

■ 3단계: 업체와의 대화에 기준을 끼워 넣는다

실제 제작은 외주 업체가 하는 경우가 많다. 그렇다면 이 간격 기준을 ‘요구사항’과 ‘검수 기준’에 명시적으로 넣어야 한다. “간격은 8pt 그리드를 따르고, 사전 합의한 간격 토큰 목록만 사용한다”는 문장을 산출물 기준에 박아두는 것이다. 이렇게 하면 검수 회의의 풍경이 바뀐다. “좀 더 깔끔하게”가 아니라 “이 카드 간격이 토큰 목록에 없는 값인데 확인 부탁드린다”라고 구체적으로 말할 수 있다. 모호한 요구가 검증 가능한 요구로 바뀌는 순간이다.

업체 입장에서도 이게 더 편하다. ‘깔끔하게’라는 막연한 주문보다, ‘8의 배수, 정해진 토큰 안에서’라는 명확한 규칙이 작업을 수월하게 한다. 재작업도 줄어든다. 기준이 분명하면, 통과 여부도 분명해지기 때문이다.

■ 4단계: 한꺼번에 다 바꾸려 하지 않는다

마지막으로 가장 중요한 마음가짐. 기존 사이트의 모든 간격을 하루아침에 다 바꿀 필요는 없다. 그건 현실적이지도 않고 무리한 욕심이다. 가장 많이 보는 페이지, 가장 자주 쓰는 화면부터 손대는 게 정석이다. 메인 페이지, 자주 가는 민원 신청 화면, 검색 결과 화면처럼 사용자 트래픽이 몰리는 곳부터 간격을 정돈하면, 적은 노력으로 가장 큰 인상 개선을 얻는다. 그리고 다음 개편이나 부분 수정 시점마다 점진적으로 토큰을 적용해 나가면 된다. 완벽을 한 번에 노리지 말고, 방향을 정해 꾸준히 가는 게 답이다.

■ 5단계: 한 번 정한 기준을 ‘기록’으로 남긴다

네 단계까지 했다면 한 가지를 더 챙기자. 정한 기준을 ‘사람 머릿속’이 아니라 ‘문서’에 남기는 일이다. 흔히 일어나는 일이 있다. 어렵게 간격 토큰을 합의해놓고, 그걸 담당자 한 사람의 기억에만 의존하는 것이다. 그 담당자가 자리를 옮기거나 휴직하면, 다음 사람은 ‘왜 여기는 16이고 저기는 24였는지’ 이유를 모른 채 또 자기 식대로 바꾸기 시작한다. 그렇게 어렵게 세운 일관성이 인사이동 한 번에 무너진다.

그래서 간격 토큰 목록과 ‘이걸 왜 이렇게 정했는지’를 짧게라도 문서로 남겨야 한다. 거창한 가이드북일 필요 없다. ‘우리 조직 간격 규칙: 8/16/24/32/48, 아이콘 옆은 4 허용, 영역 사이는 48’ 같은 한 장짜리 메모라도 충분하다. 핵심은 ‘기준이 사람에게 묶이지 않고 조직에 박혀 있게’ 하는 것이다. 공공기관처럼 담당자 교체가 잦은 곳에서는 이 ‘기록’이 일관성을 지키는 마지막 안전장치다. 디자인 시스템의 세 층위(원칙·자산·문서) 중 ‘문서’가 빠지면 시스템이 아니라고 했던 것을 떠올려보자. 간격 기준도 문서로 남아야 비로소 ‘시스템’이 된다.

덧붙이자면, 이 다섯 단계는 순서대로 한 번에 다 해치워야 하는 ‘프로젝트’가 아니다. 1단계인 ‘현황 보기’만 해도 당장 오늘 해볼 수 있고, 그것만으로도 보는 눈이 달라진다. 그다음 단계들은 다음 개편이나 부분 수정 시점마다 하나씩 얹어 가면 된다. 중요한 건 ‘완벽한 계획’이 아니라 ‘첫걸음을 떼는 것’이다. 간격이라는 가장 작은 단위부터 정돈하기 시작하면, 그 정돈됨이 부품으로, 패턴으로, 서비스 전체로 차근차근 번져 나간다. 작은 곳에서 시작한 질서가 큰 그림을 바꾸는 것 — 그게 8pt 그리드가 가진 조용하지만 확실한 힘이다.

이 다섯 단계를 관통하는 정신은 ‘거창하게 시작하지 말고, 작게 그러나 일관되게 시작하라’는 것이다. 8pt 그리드는 그 자체로 ‘작게, 일관되게’의 화신 같은 규칙이다. 8이라는 작은 단위를, 모든 화면에서 일관되게. 그게 전부고, 그게 정돈된 레이아웃의 비밀이다. 그리고 그 일관성을 기억이 아니라 기록과 도구에 맡길 때, 비로소 사람이 바뀌어도 흔들리지 않는 진짜 정돈됨이 완성된다.

【본론 4 — 간격을 ‘측정’한다는 것】

여기까지 읽고 나면 한 가지 현실적인 벽에 부딪힐 거다. “좋아, 우리가 간격 기준을 정했다 치자. 그런데 그게 실제로 수백 개 페이지에 제대로 지켜졌는지 어떻게 확인하지?”

이게 핵심이다. 앞에서도 잠깐 짚었지만, ‘기준이 있다’는 것과 ‘기준이 지켜진다’는 건 전혀 다른 문제다. 아무리 멋진 간격 토큰 목록을 만들어도, 실제 사이트 화면 하나하나가 그 기준을 따르고 있는지 확인하지 않으면, 그 기준은 그냥 문서함에 잠든 문서일 뿐이다. 그리고 이 확인 작업이야말로, 사람 손으로는 도저히 감당이 안 되는 일이다.

생각해보자. 공공 사이트 하나가 페이지 수백 개로 이루어져 있는 경우가 흔하다. 각 페이지에는 수십 개의 요소가 있고, 요소마다 위아래 간격, 안쪽 여백, 요소 사이 거리가 있다. 이걸 사람이 하나하나 자로 재서 ‘8의 배수가 맞는지’ 확인한다? 한 페이지만 해도 반나절이 걸릴 거고, 수백 페이지면 평생 해도 못 끝낸다. 게다가 사람 눈은 18과 16의 2픽셀 차이를 정확히 잡아내지 못한다. ‘대충 비슷하네’ 하고 넘어간다. 정밀한 측정은 애초에 사람의 영역이 아니다.

그래서 등장하는 게 ‘자동 진단’이다. 화면을 컴퓨터가 읽어 들여서, 각 요소의 실제 간격과 크기를 픽셀 단위로 정밀하게 재고, 그 값이 8의 배수 체계와 정해진 토큰을 따르는지 기계적으로 대조하는 것이다. 사람이 ‘어수선하다’고 막연히 느끼던 것을, 기계는 ‘이 카드 간격은 18픽셀로, 8의 배수에서 2만큼 벗어났습니다’라고 정확한 숫자로 짚어준다. 막연한 느낌이 구체적인 데이터로 바뀌는 순간이다.

이 자동 진단이 가능해지면, 8pt 그리드 준수 여부가 ‘느낌’이 아니라 ‘점수’가 된다. 우리 사이트의 간격 일관성이 몇 퍼센트나 기준을 따르고 있는지, 어느 페이지의 어느 요소가 기준에서 벗어났는지를 목록으로 받아볼 수 있다. 그러면 검수도, 개선도, 보고도 전부 객관적인 근거 위에서 이뤄진다. 윗선에 “정돈해 놓았습니다”라고 말하는 대신 “간격 기준 준수율을 몇 퍼센트에서 몇 퍼센트로 끌어올렸습니다”라고 숫자로 보고할 수 있게 된다. 공공기관 보고 문화에서 ‘숫자로 말할 수 있다’는 건 엄청난 무기다.

여기서 ‘측정’이 가지는 또 다른 가치를 짚고 싶다. 측정은 ‘개선의 방향’을 알려줄 뿐 아니라 ‘개선의 진척’도 보여준다. 한 번 진단해서 현재 상태를 숫자로 잡아두면, 몇 달 뒤 다시 진단했을 때 ‘우리가 정말 나아졌는지’를 같은 잣대로 비교할 수 있다. 막연히 ‘예전보다 깔끔해진 것 같다’가 아니라 ‘준수율이 분명히 올랐다’고 확인하는 것이다. 이 ‘전후 비교’는 담당자 자신에게도 큰 동기부여가 된다. 눈에 안 보이던 노력이 숫자로 증명되니, 더 챙기게 된다. 그리고 이 숫자는 다음 사업 예산을 따낼 때, 개편의 필요성을 설득할 때도 객관적 근거가 된다. ‘느낌’으로는 예산을 못 따지만, ‘숫자’로는 딸 수 있다.

또 하나, 측정의 자동화는 ‘공정함’을 만든다. 사람이 검수하면 그날의 컨디션, 검수자의 취향, 업체와의 관계 같은 변수가 끼어든다. 같은 화면도 누가 보느냐에 따라 통과되기도 하고 반려되기도 한다. 그런데 기계가 ‘8의 배수인가 아닌가’를 따지면, 그 판정에는 사심도 기분도 없다. 통과 기준이 명확하고 일관되니, 업체와의 분쟁도 줄고 검수의 신뢰도 올라간다. ‘객관적 기준에 따른 판정’이라는 한마디가, 검수 회의의 불필요한 감정 소모를 크게 덜어준다.

한 가지 더, 측정의 자동화는 ‘반복 가능성’을 준다. 사람이 하는 검수는 매번 처음부터 다시 해야 하고, 검수자가 바뀌면 기준도 미묘하게 바뀐다. 반면 자동 진단은 ‘버튼 한 번’으로 언제든 똑같은 잣대로 다시 잴 수 있다. 사이트를 수정한 직후 바로 다시 진단해, 내 수정이 정말 기준에 맞게 됐는지 즉시 확인할 수 있다. 이 ‘즉각적인 피드백 고리’가 있으면, 담당자는 ‘고치고 → 재고 → 확인하고 → 또 고치는’ 빠른 개선 사이클을 돌릴 수 있다. 한 달에 한 번 외부 점검을 기다리는 게 아니라, 작업하는 그 자리에서 바로바로 품질을 챙기는 것이다. 측정이 빠르고 쉬워지면, 품질 관리는 ‘특별한 행사’가 아니라 ‘일상의 습관’이 된다. 이게 자동 진단이 가져오는 진짜 변화다.

그리고 바로 이 지점이, 우리가 만드는 ViewCheck가 일하는 방식과 정확히 맞닿아 있다.

【ViewCheck — 간격까지 숫자로 보여주는 진단】

ViewCheck는 공공 웹사이트가 KRDS 기준을 얼마나 지키고 있는지를 자동으로 진단하는 서비스다. 앞에서 설명한 KRDS 846규칙, 즉 DS 120개·CP 446개·BP 108개·SP 172개 전체를 기준으로, 입력한 사이트의 화면을 분석해 ‘무엇을 지켰고 무엇이 어긋났는지’를 보여준다.

오늘 주제인 간격과 8pt 그리드는 이 중 DS 영역의 핵심이다. ViewCheck는 화면의 각 요소가 실제로 어떤 간격과 크기로 그려졌는지를 픽셀 단위로 읽어 들이고, 그 값들이 8의 배수 체계와 KRDS가 권하는 간격 토큰에 부합하는지를 기계적으로 대조한다. 사람이 자로 재느라 평생 걸릴 일을, 화면을 읽어 들여 순식간에 처리한다. 그리고 그 결과를 ‘디자인 토큰 채택률’이라는 형태로 정리해 보여준다. 우리 사이트가 KRDS가 권하는 표준 토큰을 얼마나 따르고 있는지, 반대로 기준에 없는 제멋대로의 값을 얼마나 쓰고 있는지를 한눈에 보여주는 지표다.

이 ‘토큰 채택률’이 왜 중요한가. 앞에서 본 다섯 가지 사례를 떠올려 보자. ‘다 맞췄는데 어수선한’ 화면, ‘한 페이지 안에서 따로 노는’ 영역들, ‘모바일에서 무너지는’ 간격, ‘손으로 1픽셀씩 밀어 맞춰 규칙이 없는’ 화면, ‘간격이 깨져 접근성까지 흔들린’ 화면 — 이 모든 문제의 뿌리가 ‘기준에 없는 값을 제각각 쓴 것’이다. 토큰 채택률은 바로 이 ‘제각각 정도’를 숫자로 보여준다. 채택률이 낮다는 건 곧 ‘간격이 제멋대로’라는 뜻이고, 그게 바로 어수선함의 원인이다. ViewCheck는 그 막연한 어수선함을 ‘채택률 몇 퍼센트’라는 진단으로 바꿔, 어디서부터 손대야 할지를 명확히 알려준다.

채택률을 본다는 건 단순히 한 숫자를 받는 게 아니다. ‘우리 사이트가 KRDS가 정한 간격 단계 안에서 노는 비율’과 ‘기준 밖의 제멋대로 값을 쓰는 비율’을 함께 보는 것이다. 채택률이 높으면, 비록 디자인이 화려하지 않더라도 ‘정돈된 기본기를 갖춘 사이트’라는 뜻이다. 반대로 채택률이 낮으면, 겉이 아무리 그럴듯해도 ‘기초가 흔들리는 사이트’다. 그리고 그 흔들림은 시간이 지나며, 화면이 수정되며 점점 더 커진다. 채택률은 ‘지금의 상태’만이 아니라 ‘앞으로 무너질 위험’까지 가늠하게 해주는 지표인 셈이다. 건물로 치면 외장이 아니라 ‘기초 공사가 제대로 됐는지’를 보는 검사에 가깝다.

진단 결과는 분석 화면 상단의 점수 카드로 가장 먼저 요약된다. 카테고리별 준수 수준이 한눈에 들어오고, 그 아래로 내려가면 디자인 시스템 탭에서 토큰 채택률을 비롯한 세부 항목을 확인할 수 있다. 어느 항목이 기준을 따랐고 어느 항목이 벗어났는지, 벗어났다면 무엇을 어떻게 고쳐야 하는지까지 함께 제시된다. 담당자는 이 결과를 그대로 검수 기준으로, 개선 계획으로, 보고 자료로 활용할 수 있다.

물론 ViewCheck가 간격만 보는 건 아니다. KRDS 846규칙 전반은 물론이고, 행정안전부 「전자정부 웹사이트 품질관리 지침」이 정한 7대 영역(호환성·접근성·개방성·접속성·편의성·효율성·신뢰성)과 웹접근성 KWCAG 33항목까지 폭넓게 진단한다. 다만 오늘은 ‘간격’이라는 주제에 집중했으니, 8pt 그리드와 토큰 채택률이 ViewCheck 안에서 어떻게 측정되고 보여지는지에 초점을 맞춘 것이다. 간격이라는 가장 작은 단위조차 숫자로 짚어내는 도구라면, 그보다 큰 요소들은 말할 것도 없다.

한 가지 강조하고 싶은 건, ViewCheck의 목적이 ‘점수로 줄 세우기’가 아니라는 점이다. 진단의 진짜 가치는 ‘다음에 뭘 하면 되는지’를 알려주는 데 있다. 어수선한 화면 앞에서 막막했던 담당자가, 진단 결과를 받아 들고 ‘아, 이 페이지의 이 간격부터 8의 배수로 맞추면 되겠구나’ 하고 구체적인 다음 걸음을 떼는 것 — 그게 우리가 ViewCheck로 만들고 싶은 장면이다. 도구는 디테일을 측정하고, 사람은 그 측정을 바탕으로 더 나은 결정을 내린다. 앞에서 운전 비유로 말한 ‘사람은 방향을 잡고 도구는 디테일을 챙긴다’는 역할 분담이, ViewCheck 안에서 실제로 작동한다.

【 마무리 】

긴 이야기를 했지만, 핵심은 단 한 문장으로 줄어든다. “화면의 모든 간격을 8의 배수로 맞추면, 화면이 정돈된다.” 8pt 그리드는 이 단순한 약속이고, 그 단순함이 곧 힘이다.

오늘 우리는 ‘그리드’가 화면에 깔리는 보이지 않는 모눈종이라는 것, ‘8’이라는 숫자가 나누기 좋고 기술적으로 안정적이며 선택지를 줄여주는 합리적 약속이라는 것, 그리고 일정한 간격이 음악의 박자처럼 ‘시각적 리듬’을 만들어 화면을 읽기 편하게 한다는 것을 보았다. 또 간격이 무너질 때 실무에서 어떤 어수선함이 벌어지는지를 다섯 가지 익명 사례로 짚었고, 현황 측정부터 토큰 목록 정하기, 업체와의 기준 합의, 점진적 적용, 기준의 기록까지 시작하는 다섯 단계를 정리했다. 마지막으로, 그 모든 기준이 실제로 지켜졌는지를 ‘느낌’이 아니라 ‘숫자’로 확인하는 일이 왜 중요한지, 그리고 그 측정을 자동화하는 것이 표준의 실효성을 떠받치는 또 하나의 축임을 이야기했다.

간격은 사소해 보인다. 그래서 가장 자주 방치된다. 하지만 사소한 것들이 일관되게 쌓일 때 비로소 ‘정돈됨’이라는 인상이 완성된다. 반대로 사소한 것들이 제각각이면, 아무리 큰 요소를 잘 맞춰도 화면은 어딘가 흔들려 보인다. 8pt 그리드는 그 사소한 것들에 질서를 주는 가장 쉬운 약속이다. 어렵지 않다. 8씩 늘려가며 간격을 정하고, 그걸 토큰으로 관리하고, 모든 화면에서 일관되게 지키면 된다.

만약 지금 ‘우리 사이트는 간격이 어떤 상태일까’가 궁금해졌다면, 직접 확인해보는 것이 가장 빠르다. krds.viewcheck.co.kr에서 사이트 주소만 넣으면, KRDS 846규칙을 기준으로 한 자동 진단을 확인 할 수 있다. 디자인 시스템 탭의 토큰 채택률을 보면, 오늘 이야기한 간격과 토큰이 우리 사이트에서 얼마나 지켜지고 있는지 ‘숫자’로 만나게 된다. 막연히 ‘어수선한 것 같은데’ 하고 넘기던 그 느낌의 정체가, 구체적인 데이터로 손에 잡힐 거다. 거기서부터 시작하면 된다. 작게, 그러나 일관되게. 8pt 그리드가 만드는 정돈된 레이아웃은, 바로 그 한 걸음에서 시작된다.

키워드/태그: #KRDS #공공웹 #8pt그리드 #디자인토큰 #디자인시스템 #간격 #레이아웃 #웹접근성 #전자정부 #UI일관성 #공공디자인 #ViewCheck

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