title: 「디자인의 좋고 나쁨」을 기계로 판정하기. 바닥(결정적 게이트)과 천장(심미성)을 구분한다

tags: [디자인, AI, ClaudeCode, 디자인 시스템, 접근성]

private: true

AI에게 광고의 러프(컴프)나 슬라이드를 만들게 하면, 완성된 결과물을 보고 "뭔가 다르다"고 느낄 때가 있습니다. 색이 너무 연해서 읽기 힘들거나, 제목과 본문의 차이가 없어 평면적이거나, 글자가 절단선에 아슬아슬하게 걸쳐 있는 경우 등입니다. 이러한 "파탄(破綻)"은 사실 기계로 YES/NO 판정이 가능한 경우가 많습니다. 반면 "아름다운가" 혹은 "시선이 기분 좋게 흐르는가"는 기계가 결정할 수 없습니다.

이 기사는 디자인의 질을 **바닥(기계로 판정 가능한 최저선)**과 **천장(사람의 심미적 판단)**으로 나누고, 바닥만을 결정적인 게이트(Gate)로 고정하는 사고방식과, 그 바닥을 스스로 학습하여 넓혀가는 메커니즘을 정리합니다. 코드를 작성하는 루프에서 말하는 "테스트라는 요새"를 디자인에 도입하는 이야기입니다.

소프트웨어의 자기 검증 루프에서는 LLM의 느슨한 자기 채점을 pytest나 tsc --noEmit와 같은 **결정적 게이트(Deterministic Gate)**로 묶습니다(모델이 변명할 수 없는 자동 판정 = 요새). 디자인에도 이와 같은 요새를 만들 수 있는 부분이 있습니다.

바닥(FLOOR) = 결정적 게이트로 만들 수 있음: 대비(Contrast), 글자 크기의 계층(점프율, Jump rate), 넘침, 인쇄 세이프 에어리어(Safe area), 행의 길이, 여백의 그리드(Grid). 모두 수치로 YES/NO를 가릴 수 있습니다.

천장(CEILING) = 사람/심미성에 남김: 정렬의 묘미, 근접성을 통한 그룹감, 배색의 조화, 시선 유도(Z/F 패턴), 구도의 균형. 문맥과 의도에 의존하며, 기하학적 요소만으로는 결정되지 않습니다.

바닥을 기계로 고정하면 "파탄 제로"까지는 자동으로 보장할 수 있습니다. 그 위에 사람(혹은 심미성을 보는 별도의 판정자)이 올라탑니다. 바닥은 기계, 천장은 사람이라는 역할 분담입니다.

실제로 결정적 게이트화한 것들 (opt-in 방식으로, 기준을 만족하는 key가 있을 때만 실행되는 형태):

{
"canvas": { "width": 1080, "height": 1080 },
"required_text": ["문의하기", "0120-000-000"],
...

대비(Contrast): WCAG 2.x의 상대 휘도비. #999 글자가 너무 연하면 탈락합니다. 투명도(opacity)나 그라데이션 배경도 포함하여 판정합니다.

점프율(Jump rate): 제목과 본문의 크기 비율. 본문을 "가장 많은 글자 수를 차지하는 크기"로 기준으로 삼아, 전부 같은 크기인 평면적인 디자인을 걸러냅니다. 디자인 교재에서 "150~200%"라고 하는 계층 구조의 수치 버전입니다.

행의 길이(Measure): 1행의 폭 ÷ 폰트 크기(em). 행이 너무 길면 다음 행의 시작 부분을 놓치게 됩니다. WCAG 1.4.8은 1행당 80자(일본어 등의 경우 40자) 이하를 권장하며, 두 경우 모두 사실 약 40em 내외로 수렴합니다 (일본어는 전각=약 1em, 영문은 약 0.5em이므로 글자 수가 절반이라도 폭은 비슷함). 따라서 하나의 임계값(Threshold)으로 두 언어를 모두 볼 수 있습니다.

8포인트 그리드(8-point grid): 여백(margin/padding/gap)을 8의 배수로 통일하는 Material Design / Apple HIG 유래의 규율. 선언된 여백 값만을 보기 때문에, 콘텐츠에 의해 결정되는 높이(텍스트 행수에 따라 변함)를 오검출하지 않습니다.

처음부터 모든 게이트를 떠올릴 수는 없습니다. 그래서 디자인의 기초를 배울 때마다 바닥을 한 단계씩 넓히는 **반복 루프(Iterative Loop)**를 구축했습니다.

배울 대상을 떠오르는 대로 선택하면 체계에 구멍이 생깁니다. 그래서 미대(예술대학)의 그래픽/시각 전달 디자인 커리큘럼(무사시노 미술대학, 타마 미술대학, RISD, SVA, 바우하우스 유래의 기초 조형)을 참조하여, 망라적인 토픽 표를 만들고 미습득 유닛을 순차적으로 자동 선택합니다 (기초 조형 → 색채 → 타이포그래피 → 레이아웃 → 제판/DTP → 논리).

토픽마다 두 가지 출처를 통해 검증합니다.

해설 기사 = WHAT (원칙 그 자체): 무엇이 원칙이며 왜 효과적인가, 구체적인 수치(점프율 150~200%, 배색비 70:25:5 등).

GitHub = HOW (선행 구현): 그 원칙이 어떻게 기계화되어 있는가. 대비라면 WCAG 상대 휘도, 여백이라면 8pt 그리드 토큰. 독립적인 구현이 여러 개 있다면 "바닥으로 만들 수 있다"는 강력한 징후입니다. 기사에만 존재하고 구현체를 찾을 수 없다면 "천장에 가깝다"는 징후입니다.

양쪽 모두의 뒷받침이 없는 주장은 게이트(gate)로 삼지 않는다. 이는 단순히 떠오른 생각만으로 바닥(floor)을 만들지 않기 위한 제어 장치이다.

구현한 사람(나)이 스스로 "OK"라고 말하면 기준이 느슨해지기 쉽다. 그래서 builder ≠ checker 원칙을 적용한다. 구현은 한쪽 모델이 담당하고, 검증은 다른 쪽(별도의 벤더 AI)에게 **결함 찾기(defect finding)**를 시킨다. 지적 사항을 확인하여 수정하고, 합격할 때까지 반복한다. 같은 모델끼리는 동일한 맹점을 공유하므로, 계통을 넘나드는 것이 핵심이다.

이 루프를 통해 얻은 가장 큰 수확은 새로운 게이트가 늘어난 것이 아니라, 무엇을 기계화할 수 없는지 판별할 수 있게 되었다는 점이다.

정렬(alignment)은 천장이다. "왼쪽 끝이 불과 몇 px 어긋나 있다"를 검출하는 게이트를 만들고, 별도의 계통 AI에게 8라운드 검증을 시켰더니 매번 다른 구성에서 허점이 발견되었다. 중앙 정렬의 단일 요소, 같은 위치로 어긋난 두 요소, padding과 수동 오프셋의 구분, 불가시 래퍼(invisible wrapper), 루트 요소의 padding 등등…; 요컨대 왼쪽 끝 정렬은 렌더링 후의 기하학적 정보만으로는 결정 불가능하며, 어떤 정의를 내려도 이면에 허점이 존재한다. 그래서 미련 없이 포기하고 천장으로 되돌렸다.

행의 길이(measure)는 바닥이다. 마찬가지로 여러 라운드의 지적이 나왔으나, 이 경우는 고정 높이의 박스, 단 구성(column), 위첨자, transform:scale과 같은 개별적인 버그였으며, 수정하면 고정되었다. WCAG라는 건전한 핵심(core)이 있기 때문에 수렴했다.

여기서 하나의 판별법이 나온다. 별도의 계통 AI에게 몇 라운드를 검증시켜도 허점이 계속 나올 때, 핵심이 건전하다면 수렴하고, 핵심이 불가능하다면 수렴하지 않는다. 수렴하지 않는다면 그것은 바닥이 아니라 천장이다.

"신뢰할 수 없는 바닥"을 출하할 바에는 게이트가 없는 편이 낫다(거짓된 안도감은 해가 된다). 따라서 수렴하지 않는 것은 버리고, 대장에 "왜 기계화할 수 없는가"를 한 줄 남긴 뒤 다시는 들춰내지 않는다.

디자인의 질은
**바닥(기계적 판정 YES/NO로 접지할 수 있는 것)과천장(심미성·문맥·의도)**으로 나뉜다.

• 바닥으로 구축된 것: 대비(contrast), 점프율, 행의 길이, 8포인트 그리드, 세이프 에어리어(safe area), 넘침(overflow), 팔레트 수 등.
• 구축하지 못한 것: 정렬, 근접, 배색의 조화, 시선 유도, 구도의 균형.
  "전부 기계화"하는 것은 오류이며, YES/NO로 접지할 수 있는 것만이 바닥이 된다.
• 바닥을 확장하는 메커니즘은,
  커리큘럼 접지를 통해 토픽을 빠짐없이 선정하고, 기사(WHAT) + GitHub(HOW)로 이중 접지하며, 별도의 계통 AI로 적대적 검증을 수행하여 채택 여부를 결정한다.
• 바닥을 아무리 넓혀도,
  심미성의 천장은 사람(혹은 심미성을 판단하는 판정자)에게 남는다. 기계는 "파탄 없는 바닥"까지를 보증하는 도구이다.

디자인에 국한되지 않고, "품질을 기계로 담보하고 싶을" 때, 우선 무엇을 YES/NO로 떨어뜨릴 수 있고, 무엇을 떨어뜨릴 수 없는지를 분류하는 것이 출발점이 된다. 떨어뜨릴 수 있는 것은 결정적 게이트로 다지고, 떨어뜨릴 수 없는 것은 솔직하게 사람에게 맡긴다. 그 경계선이야말로 설계의 본체라고 생각한다.

• WCAG 2.1 Understanding SC 1.4.8 Visual Presentation (1행의 길이 "no more than 80 characters or glyphs (40 if CJK)") https://www.w3.org/WAI/WCAG21/Understanding/visual-presentation.html
• 8포인트 그리드 / 여백 설계 (Material Design · Apple HIG 계보) https://www.designsystems.com/space-grids-and-layouts/
• 디자인의 4원칙 / 시선 유도 (N · F · Z 패턴) https://321web.link/design-4principles/ , https://321web.link/readers-pattern/
• 점프율 https://dezasuta.com/columns/jump-rate/
• 배색 70:25:5 https://www.furi-ten.com/color-combinations-3-colors-70-25-5-rule/
• CRAP 원칙 https://designlab.wisc.edu/resources/design-tips-and-tricks/crap-principles/
• 미대 커리큘럼 참조: 무사시노 미술대학 시각전달디자인학과 / 다마 미술대학 그래픽디자인학과 / RISD BFA Graphic Design / SVA BFA Design