AI 디자인, 보는 눈만 있으면 고칠 수 있다

바이브코딩으로 만든 화면에서 AI 냄새를 지우는 법. 도구는 질문 4개면 충분합니다.

바이브코딩 하다 보면 다들 이런 화면 받아보셨죠. line-height가 무너져 있고, 카드가 남발되고, 그림자가 겹겹이 쌓이고, 이모지가 아이콘 자리를 차지한 화면. AI 디자인은 어딘가 티가 납니다.

문제는 이걸 고치는 방식이에요. 기능은 "이런 에러가 있어, 고쳐줘"라고 구체적으로 요청하면서, 디자인은 "좀 구린데? 다시 만들어봐"라고 추상적으로 요청하죠. 이러면 AI는 복불복으로 다시 만들 수밖에 없습니다.

"여백이 너무 커서 어벙벙해 보여. 여백 크기를 전반적으로 줄여줘" 이렇게 기능 요청처럼 구체적으로 가야 합니다. 그러려면 뭐가 문제인지 볼 줄 알아야 하고요. 이 글은 그 보는 눈을 장착하는 글입니다.

진단이 필요 없는 것부터 걷어내기

일부 문제는 진단할 필요도 없습니다. AI가 남기는 지문이라 묻지도 따지지도 않고 제거하면 됩니다.

• 장식 강박. 카드 좌측 색 border, eyebrow 라벨(제목 위 작은 태그), chip(알약 모양 태그) 좌측 dot, 카드 안 그라데이션, 과한 radius(모서리 둥글기), 카드 천지 레이아웃
• 색 남용. 색을 마구 여러 군데 사용, 이유 없는 보라색 편애
• 타이포 붕괴. 크기 제각각, 너무 작은 폰트, UI인데 긴 설명 텍스트
• 카피 지문. em-dash와 가운뎃점 남발, 이모지 남발, "~해보세요!" 식 과잉 텐션 카피

이 블랙리스트는 CLAUDE.md 같은 규칙 파일에 금지 목록으로 한 번 써두면 끝입니다. 판단이 필요한 문제는 그다음이죠.

최소 노력으로 바닥부터 올리기

보는 눈 얘기 전에, 노력 없이 퀄리티의 하방을 방어하는 도구가 두 가지 있습니다.

DESIGN.md는 좋아 보이는 브랜드의 비주얼 언어(색, 타이포, 여백, radius, Do/Don't)를 AI가 읽을 수 있게 정리한 파일입니다. designmd.ai, designmd.me, getdesign.md, neuform.ai 같은 곳에서 받아 프로젝트 루트에 넣고, CLAUDE.md에 "UI 작업 시 DESIGN.md 먼저 읽기" 한 줄만 추가하면 됩니다. 화면마다 스타일이 널뛰는 걸 막아주죠.

스킬은 범용 디자인 감각을 주입하는 패키지입니다. npx skills add <owner/repo@skill> 한 줄이면 설치되고, UI 작업 시 자동으로 발동합니다. 공식 소스 두 개부터 시작하세요. anthropics의 frontend-design(설치 69만+), vercel-labs의 web-design-guidelines(48만+)입니다.

도구가 바닥을 올리고, 보는 눈이 천장을 올립니다. 이 둘을 깔아도 남는 문제를 스스로 진단하는 것, 그게 이제부터의 이야기입니다.

보는 눈의 도구, CRAP

로빈 윌리엄스의 The Non-Designer's Design Book(1994)은 비디자이너를 위해 디자인 원리를 4개로 압축한 30년 고전입니다. 화면에 던지는 질문 4개로 쓰면 됩니다.

Contrast(대비), 강조될 것이 강조되는가

크기, 색, 두께, 간격의 강도를 만집니다. 핵심 규칙은 하나예요. "어중간하게 비슷한 것을 피하라. 다르게 할 거면 확실히 다르게."

가독성 대비에는 수치가 있습니다. WCAG 기준으로 본문 텍스트는 배경과 4.5:1 이상, 20px 안팎의 큰 텍스트는 3:1 이상. 수치라서 규칙 파일에 써둘 수 있죠. 단, 위계만은 파일에 못 씁니다. 이 화면의 1순위가 뭔지는 제품을 아는 사람만 압니다.

Repetition(반복), 통일성이 있는가

색, 형태, border, 폰트의 가짓수를 만집니다. 같은 요소를 반복해 통일성을 얻고, 가짓수를 줄여 혼란을 없앱니다.

왜 4의 배수냐고요? 4, 8, 12, 16, 24는 더하고 나눠도 다시 4의 배수라 화면 전체에 같은 박자가 흐릅니다. @2x, @3x 배율에서 반픽셀도 안 생기고요. 가장 중요한 이유는 따로 있습니다. 선택지를 제한하는 것 자체가 일관성입니다. 13px, 17px을 애초에 못 고르게 만드는 거죠. iOS와 Android 가이드라인, Tailwind(1 = 4px)가 전부 이 체계입니다.

Alignment(정렬), 질서가 있는가

선을 만집니다. 모든 요소를 의도를 가지고 배치해 보이지 않는 선으로 시각적 연결을 만듭니다. 어긋난 만큼 신뢰가 깎이니까요.

12컬럼이 표준인 이유는 약수가 많아서입니다. 2, 3, 4, 6분할이 전부 딱 떨어지죠. Bootstrap 이후 웹 표준이 됐고, Tailwind의 grid-cols-12가 그대로 이겁니다.

Proximity(근접), 그룹이 구분되는가

거리를 만집니다. 가까이 두면 관계가 생기고, 여백을 벌리면 분리됩니다. 제목과 라벨은 반드시 자기 내용 곁에 둬야 하고요.

정렬과 근접은 목적이 같고(정돈) 도구가 다릅니다(선 vs 거리). 정렬은 완벽한데 라벨이 필드 사이 정중앙에 붕 떠 있으면 A 성공, P 실패인 거죠.

AI가 만든 화면이 왜 구린지 아세요? CRAP이 없어서요.

디자인 시스템은 CRAP의 답을 규칙으로 만든 것

CRAP 질문들에 대한 적절한 답을 규칙으로 정리한 것이 디자인 시스템입니다. 토큰은 Repetition 담당이에요. "간격은 4의 배수만"이 space-2/4/6 토큰이 되고, "폰트는 네 단계만"이 text-sm/base/lg/2xl 토큰이 되는 식이죠.

토큰은 많다고 좋은 게 아닙니다. 내가 인지하고 통제할 때 의미가 있습니다. Tailwind 기본 토큰처럼 쓸 수 있는 폰트 크기가 수십 개면 사실상 스케일이 없는 것과 같아요. caption, body, head100, head200, head300 정도면 충분합니다.

그리고 오해 하나 정정할게요. DESIGN.md는 디자인 시스템이 아닙니다. AI가 이해할 최소한의 방향성을 정리한 설명서일 뿐이에요. 그 가이드로 토큰과 컴포넌트를 실제로 구축하고 반복 사용해야 비로소 시스템이 됩니다. 반복 사용되는 요소는 꼭 컴포넌트로 만들어달라고 요청하세요.

한 가지 더. AI는 규칙이 있어도 어깁니다. 써두는 건 예방이고, 어긴 걸 알아보는 검수의 눈은 여전히 필요합니다.

결국은 감각이다

마지막엔 사용자의 눈으로 화면을 보세요. "이 화면, 복잡하다고 느끼지 않을까?" "꼭 해야 하는 액션을 헤매지 않고 찾을 수 있을까?"

CRAP 질문 4개는 그 감각으로 가는 훈련 도구입니다. 미감은 오늘 완성되지 않아요. "나는 디자인 감각 없어" 하고 AI 디자인에 다 맡기는 게 아니라, 스스로 진단하고, 고민하고, AI에게 하나씩 요청하면서 계속 발전시키는 것입니다. 바이브코딩 중인 화면 하나 띄워놓고 질문 4개부터 던져보세요. 오늘부터요.

블랙리스트 제거와 CRAP 증상 진단을 자동으로 해주는 ai-design-slop-audit 스킬도 만들어뒀습니다. 단, "이 화면의 1순위가 뭔가"는 스킬이 여러분에게 되묻습니다. 그 판단이 오늘 기른 눈이 하는 일이에요. 디자인과 함께 앱을 만드는 전 과정을 같이 경험하고 싶다면 바이브빌딩클럽에서 만나요.