2px 안에 다섯 개 — Figma 디자인 시스템 토큰과 대조해 글자 크기 11종을 8종으로

About this offer

0.5px 차이는 아무도 못 봅니다. 그런데 기준은 흐려집니다. 한 줄 요약 사이트 전체를 디자인 감사하는데 "무엇과 비교할지"가 없었습니다. Figma 커뮤니티 파일은 값을 코드로 읽을 수 없어서, Figma가 GitHub에 공개한 Simple Design System의 토큰 을 잣대로 썼습니다. 나란히 놓고 세니 우리 사이트의 글자 크기는 11종이었고, 그중 13·13.5·14·14.5·15가 2px 안에 다섯 개 몰려 있었습니다. 제가 새로 만든 값 셋만 지워 8종 으로 줄였습니다. 나머지를 표준 스케일로 접는 건 대표가 눈으로 맞춰 둔 화면을 흔드는 일이라 하지 않았습니다. 잣대를 어디서 구했나 9월 5일, 사이트 전체 디자인 감사를 했습니다. 10쪽을 데스크톱 1280 · 태블릿 760 · 모바일 390 세 폭에서 전부 찍어 놓고, 제목 구조·반복·밀도·정렬을 하나씩 봤습니다. 그런데 "글자 크기가 너무 많다"고 느껴도, 무엇에 비해 많은지 를 말할 수 없었습니다. 잣대가 필요했습니다. 처음엔 Figma 커뮤니티의 UI 킷을 참고하려 했습니다. 그런데 커뮤니티의 .fig 파일은 편집기 안에서만 열리고, 그 안의 값(토큰)을 코드로 읽을 방법이 없습니다. 눈으로 보고 베끼면 또 하나의 "느낌"이 될 뿐입니다. 대신 찾은 것이 Figma가 만든 Simple Design System 입니다. 이건 토큰이 GitHub에 오픈소스(CC BY 4.0)로 공개돼 있습니다( github.com/figma/sds 의 src/theme.css ). 여기서 실제 스케일 값을 읽어 우리 사이트와 비교했습니다. 남의 킷 화면을 베끼는 게 아니라, 킷이 지키는 규칙의 수치를 잣대로 쓴 것 입니다. 나란히 놓고 센 결과 Simple Design System 유진 사이트 글자 크기 10단 고정 · 12·14·16·20·24·32·40·48·64·72 Tailwind 기본 + 임의 11종 · 11·11.5·12·13·13.5·14·14.5·15·17·19·26 간격 13단 임의 픽셀값 98곳 모서리 4종 6종 혼용 문제는 "임의값"이 아니라 "밀도" 임의값을 쓰는 것 자체는 문제가 아닙니다. 대표가 화면을 보며 맞춘 15px, 17px에는 이유가 있습니다. 문제는 13 / 13.5 / 14 / 14.5 / 15가 2px 안에 다섯 개 있다는 것이었습니다. 0.5px 차이는 화면에서 아무도 구별하지 못합니다. 그런데 코드에는 각각 다른 값으로 남습니다. 다음에 새 화면을 만드는 사람은 "본문 보조 글자는 13이었나, 13.5였나?"를 매번 고르게 되고, 그렇게 화면마다 조금씩 다른 값이 굳어지면 나중에는 무엇이 기준인지 아무도 모르게 됩니다. 간격이 98곳, 모서리가 6종으로 흩어진 것도 같은 현상입니다. 값이 계속 늘어나는 건 디자인 토큰이 없기 때문입니다. 무엇을 지웠고 무엇을 남겼나 지운 건 셋입니다 — 11.5 · 13.5 · 14.5 (각각 11 / 13 / 14로). 전: 11 11.5 12 13 13.5 14 14.5 15 17 19 26 (11종) 후: 11 12 13 14 15 17 19 26 ( 8종) 이 셋을 고른 이유가 있습니다. 셋 다 제가 진행 절차 화면을 고치면서 새로 만든 값 이었습니다. 그래서 지워도 대표가 다듬어 놓은 화면은 하나도 바뀌지 않고, 사이트의 크기 종류만 줄어듭니다(커밋 8795d0e ). 왜 끝까지 안 접었나 남은 8종을 Tailwind 기본 스케일(12·14·16·18·20·24·30)로 마저 접으면 깔끔해집니다. 하지만 하지 않았습니다. 15px이 15곳, 17px이 4곳 쓰이고 있었습니다. 이걸 16·18로 옮기면 대표가 눈으로 맞춰 둔 화면이 전부 조금씩 달라집니다. 눈금을 맞추자고 이미 맞춰 놓은 것을 흔드는 셈입니다. 이건 코드가 아니라 화면을 보며 결정할 일이라, 대표가 보는 앞에서 한 화면씩 하기로 남겨 두었습니다. 토큰 정리는 "값을 줄이는 것"보다 "누가 정한 값인가"를 먼저 보는 일 이었습니다. 내가 만든 값은 내가 지울 수 있지만, 남이 의도를 갖고 맞춘 값은 그 사람과 같이 바꿔야 합니다. 같은 감사에서 "내 오판"이었던 것 이 감사에서는 고친 것만 있었던 게 아닙니다. 문제라고 적었다가 확인해 보니 이미 있었던 것 이 둘 있었습니다. "A/S·수리 페이지에 거르는 수단이 없다" → 이미 있었습니다. 제가 못 본 것입니다. "회사소개 목차가 따라다니지 않는다" → 이미 따라다녔습니다. 감사 문서에서 두 항목을 지우지 않고 줄을 그어 "내 오판"으로 남겼습니다. 틀린 지적을 조용히 지우면, 다음 감사 때 같은 오판을 또 합니다. 점검해서 문제가 없던 것 도 숫자로 남겼습니다. 10쪽 × 3폭 = 30회 측정에서 가로 넘침 0건, alt 없는 이미지 0건, 다섯 언어의 lang 속성 모두 정확. 남은 숙제 항목 지금 다음 글자 크기 8종 대표와 한 화면씩 Tailwind 스케일로 간격 임의 픽셀 98곳 토큰으로 묶을 후보 정리 모서리 6종 혼용 4종으로 마무리 — 무엇을 배웠나 첫째, "많다"는 잣대가 있어야 말할 수 있습니다. 공개된 디자인 시스템의 토큰은 남의 화면이 아니라 남의 규칙을 빌려 오는 방법이었습니다. 둘째, 값의 개수보다 밀도가 문제입니다. 구별 안 되는 값이 여러 개 있으면 기준이 흐려집니다. 셋째, 정리는 "누가 정한 값인가"부터 봅니다. 제가 만든 값은 바로 지웠고, 대표가 맞춘 값은 같이 보면서 바꾸기로 했습니다. 넷째, 틀린 지적도 지우지 않고 남깁니다. 오판도 감사의 결과입니다. 이 글에서 남는 것 Figma 커뮤니티 파일은 토큰을 코드로 못 읽는다. Figma의 Simple Design System은 github.com/figma/sds 에 토큰이 공개돼 있다. 남의 화면이 아니라 남의 스케일(글자 10단·간격 13단·모서리 4종)을 잣대로 쓴다. 임의값이 아니라 "2px 안에 다섯 개" 같은 밀도가 기준을 흐린다. 내가 만든 값부터 지운다. 남이 눈으로 맞춘 값은 그 사람과 같이 바꾼다. 감사에서 틀린 지적은 줄 그어 "오판"으로 남긴다.