AI 툴이 넘쳐날수록 판단력이 자산이 된다
Midjourney로 이미지를 뽑고, Adobe Firefly로 배경을 지우고, Canva AI로 레이아웃을 자동 생성하는 시대다. 버튼 한 번으로 “그럴듯한 결과물”이 나온다. 그런데 결과물이 쏟아질수록 “왜 이게 좋고 저게 나쁜지”를 설명할 수 있는 사람의 가치가 높아지고 있다. AI는 선택지를 만들 뿐, 최종 판단은 여전히 사람의 몫이기 때문이다.
타이포그래피, 컬러, 레이아웃 — 이 세 가지 기본기는 AI가 생성한 결과물을 평가하고 수정하고 방향을 잡는 기준이 된다. 도구가 자동화될수록 기준을 가진 사람이 파이프라인을 통제한다.
타이포그래피: AI 결과물에서 가장 먼저 흐트러지는 것
AI가 생성한 디자인에서 빈번하게 무너지는 요소 중 하나가 글자다. 자간, 행간, 위계가 뒤섞인 채 나오는 경우가 많다. 이 문제를 잡으려면 눈이 훈련되어 있어야 한다.
- 위계를 먼저 정한다. 제목(H1), 소제목(H2), 본문(Body), 캡션(Caption) — 4단계를 명확히 구분하는 것만으로 글자 관련 문제의 상당 부분이 해결된다.
- 폰트 조합은 최대 2종. Noto Sans KR과 영문 Serif처럼 역할이 다른 두 폰트만 쓴다. AI 생성 결과물에 폰트가 세 개 이상 섞여 있다면 정리가 필요하다는 신호다.
- 본문 행간은 font-size의 1.5~1.7배. 웹 접근성 지침(WCAG 1.4.12)이 권장하는 범위이며, Figma나 Adobe Illustrator에서 텍스트 박스를 열었을 때 이 범위를 크게 벗어나 있으면 가독성이 떨어진다.
컬러: 프롬프트로 지정하는 것, 시스템으로 관리하는 것
AI 이미지 생성기에 컬러를 지시할 때 “파란색”이라고 쓰면 결과가 매번 달라진다. 기본기가 있는 사람은 Hex 코드를 명시하여 의도를 구체화한다. “color palette: #1A1A2E, #16213E, #0F3460” 식으로 프롬프트에 포함하면 색상 방향성을 일관되게 유지하는 데 도움이 된다. 다만 AI 이미지 생성기는 Hex 코드를 참고 단서로 활용할 뿐, 정확한 색 재현을 보장하지는 않으므로 결과물은 반드시 육안 및 수치로 검수해야 한다.
- Coolors.co로 팔레트를 먼저 만들고, 그 Hex 값을 프롬프트에 그대로 붙여 넣는다.
- 컬러 역할을 3개로 고정한다: 주색(Primary), 보조색(Secondary), 강조색(Accent). AI가 생성한 결과물에 이 세 역할이 명확한지 확인하는 것이 검수의 핵심이다.
- 명도 대비는 WebAIM Contrast Checker로 수치로 확인한다. “대비가 약해 보인다”는 주관적 판단을 WCAG 기준 수치로 뒷받침할 수 있어야 클라이언트 설득도, AI 재생성 지시도 명확해진다.
레이아웃: AI가 생성하기 어려운 공간의 논리
AI는 학습 데이터 기반으로 시각적으로 익숙한 레이아웃을 생성한다. 하지만 왜 이 요소가 여기에 있어야 하는지의 논리는 별도로 설계해야 한다. 그 논리가 바로 레이아웃 기본기다.
- 그리드를 먼저 그린다. Figma의 Layout Grid 기능으로 12컬럼 그리드를 설정하고, AI가 생성한 결과물을 그 위에 올려놓는다. 정렬이 깨진 지점이 수정 지점이다.
- 여백은 콘텐츠다. 요소를 빽빽하게 채운 AI 결과물을 자주 보게 된다. 여백(Whitespace)을 의도적으로 확보하는 것만으로도 시각적 완성도가 달라진다.
- 시선 흐름(Z패턴, F패턴)을 의식한다. 웹 배너든 SNS 카드뉴스든, 사용자의 눈이 어떤 순서로 이동하는지를 먼저 설계하고 AI에게 그 구조를 프롬프트로 지시한다.
기본기는 AI를 이기는 무기가 아니라, AI를 다루는 언어다
타이포그래피·컬러·레이아웃을 모르는 사람은 AI가 내놓은 결과물 앞에서 “뭔가 이상한데”라고만 말할 수 있다. 기본기가 있는 사람은 “행간이 좁고, 강조색이 두 개 충돌하고, 그리드 정렬이 어긋났다”고 말한다. 이 차이가 AI를 도구로 쓰는 사람과 AI 결과물에 끌려다니는 사람을 가른다.
지금 당장 Figma 하나를 열고, 12컬럼 그리드 위에 텍스트 위계를 4단계로 잡아보자. 그게 AI 시대 디자인의 출발점이다.