AI 디자인 퀄리티를 올리는 리소스 북

타이포그래피

한국어 단어가 어색하게 잘려서 내려감

Before

디자인을 모르는 사람을 위한 리소스 북

After

디자인을 모르는 사람을 위한 리소스 북

"북"만 혼자 다음 줄로 떨어지는 게 Before. 단어 단위로 줄바꿈되는 게 After.

"word-break: keep-all 적용해줘" 복사

레이아웃

요소 간 여백이 들쭉날쭉함

Before

제목

설명

다른 요소

버튼

After

제목

설명

다른 요소

버튼

여백이 7, 12, 18, 3px으로 제각각(Before) vs 전부 16px로 통일(After).

"여백을 8px 배수로 통일해줘" 복사

색상

색이 너무 많아서 산만함

Before

보라색 헤더

파란색 섹션

초록색 카드

노란색 알림

핑크색 버튼

After

헤더

본문 섹션

카드 영역

보조 텍스트

주요 버튼

Before는 무지개. After는 주색 1개 + 흑백 회색. 이것만으로 프로페셔널해 보인다.

"포인트 색 1개 + 회색 2단계만 써줘" 복사

전반

전체적으로 AI가 만든 티가 남

AI Slop

🚀✨🎯

Amazing Platform

Build the future today

Get Started Free

Human

쓸만한 도구를 만듭니다.

복잡한 문제를 단순하게 풀어주는
프로덕트 디자인 스튜디오

시작하기

이모지 3개, 보라-핑크 그라데이션, 둥근 버튼, 영어 마케팅 문구 — 전형적인 AI 패턴.

"[참고 URL] 스타일로 만들어줘" 복사

타이포그래피

폰트가 기본 시스템 폰트라 밋밋함

Before

오늘의 이야기

디자인은 어렵지 않습니다.

After

오늘의 이야기

디자인은 어렵지 않습니다.

기본 Arial vs Noto Serif KR + Pretendard. 폰트만 바꿔도 분위기가 확 달라진다.

"제목 Noto Serif KR, 본문 Pretendard" 복사

반응형

모바일에서 레이아웃이 깨짐

Before

카드 1

카드 2

카드 3

← 가로 스크롤 →

After

카드 1

카드 2

카드 3

가로로 삐져나감(Before) vs 모바일에서 세로 스택(After).

"모바일 퍼스트로 375px 기준으로" 복사