AI 양산형 디자인에서 벗어나기 — 기본값을 덮어쓰는 UI 프롬프트

AI 디자인은 기본값대로 두면 보라색 그라데이션과 Inter 폰트, 둥근 카드가 반복되기 쉽습니다. 에이전트 스킬, 목적·톤·제약·차별화의 4차원 프롬프트, 스타일별 명령어, 모션 지시법, 안티 슬롭 체크리스트로 AI 기본값을 덮어쓰는 방법을 정리했습니다.

2026년 5월 3일에버스톤13분 분량디자인 · UX웹 · 업무 시스템 구축

AI 양산형 디자인에서 벗어나기 — 기본값을 덮어쓰는 UI 프롬프트 대표 이미지

AI 코딩 에이전트에게 화면을 맡기면 결과가 비슷해지는 이유는 AI의 기본값이 안전함이기 때문입니다. 이 자료는 그 기본값을 프롬프트와 스킬로 덮어써야 하며, 핵심은 화려함이 아니라 하나의 분명한 의도라고 정리합니다.

이 문서는 NotebookLM(노트북 LM)으로 자료를 조사해 만든 문서입니다.

AI 슬롭(Slop)은 무난한 산세리프, 보라색 그라데이션, 대칭 카드, 산만한 호버 효과의 조합입니다
에이전트가 코드를 쓰기 전에 방향을 정해 주는 **스킬(SKILL.md)**이 기본값을 바꾸는 장치입니다
프롬프트는 목적·톤·제약·차별화 네 축으로 짭니다
톤은 분명한 형용사로 고르고, 폰트·레이아웃·색은 금지 사항까지 적습니다
모션은 흩어진 효과 대신 시차를 둔 등장(Staggered reveal) 하나로 정리합니다

AI 슬롭은 어떻게 생기나

AI 슬롭(Slop)의 해부학 슬라이드. 가운데 보라색 그라데이션 머리 부분과 "환영합니다" 문구, "계속하기" 버튼이 있는 둥근 카드에 네 개의 화살표가 가리킨다. 텍스트/폰트는 AI가 남용하는 Inter, Roboto, Arial, Space Grotesk의 무비판적 사용으로 시각적 위계 부족. 컬러 팔레트는 특징 없는 보라색 그라데이션과 흰색 배경의 안전하고 지루한 조합. 레이아웃/구조는 완벽한 대칭, 예측 가능한 패딩, 의미 없이 둥근 모서리(border-radius) 카드. 모션은 맥락 없이 흩뿌려진 산만한 마이크로 인터랙션. 아래 문장은 AI의 기본값(Default)은 안전함이며 의도적인 프롬프트 없이는 10번을 생성해도 10번 모두 똑같은 양산형 디자인이 출력된다는 것

기본값을 덮어쓰는 무기 Agent Skills 슬라이드. SKILL.md 번개 화살표가 뇌 그림 옆의 Default Knowledge Base 상자를 가리킨다. frontend-design(Anthropic 공식)은 강한 미적 관점을 강제하고 AI 슬롭을 피하라는 지침을 주입, ui-ux-pro-max는 50개의 스타일과 97개의 팔레트를 포함한 디자인 데이터베이스 기반 의사결정. 아래 문장은 스킬(Skill)은 단순한 프롬프트 템플릿이 아니라 에이전트가 코드를 작성하기 전 디자인 방향성을 강제하는 1급(First-class) 제어 장치라는 것

AI가 만든 화면이 나빠서가 아니라 누구의 화면인지 구분되지 않아서 문제가 됩니다. 기능은 돌아가는데 브랜드가 보이지 않습니다. 스킬은 이 방향 설정을 매번 프롬프트에 쓰지 않고 작업 환경에 고정해 두는 방법입니다.

네 축으로 짜는 디자인 프롬프트

4차원 디자인 프롬프팅 프레임워크 네 칸 슬라이드. 목적(Purpose)은 이 인터페이스가 해결해야 할 문제는 무엇이고 핵심 사용자는 누구인가(예: B2B 대시보드, 포트폴리오). 톤(Tone)은 미학적 방향성을 극단적으로 선택하라(예: 브루탈리스트, 레트로 퓨처리스틱, 맥시멀리즘). 제약(Constraints)은 프레임워크, 접근성(WCAG 2.1), 퍼포먼스 제한 규정. 차별화(Differentiation)는 사용자가 기억할 단 하나의 시각적 특징은 무엇인가(예: 비대칭 레이아웃, 독특한 커서). 아래 인용은 명확한 개념적 방향을 선택하고 정밀하게 실행하라, 강렬함이 아니라 의도성이 핵심이라는 Anthropic SKILL.md의 문장

AI 기본값 vs 주관이 뚜렷한 디자인 비교표. AI Slop 쪽은 Inter/Roboto/Arial(단조로운 산세리프), 보라색 포인트 + 흰색 배경(균등하고 안전한 분배), 완벽한 대칭과 동일한 패딩과 예측 가능한 카드형 UI, 마우스 호버 시 발생하는 무작위 마이크로 인터랙션. Bespoke UI 쪽은 개성 있는 디스플레이 폰트 + 정제된 본문용 세리프의 과감한 믹스매치, 지배적인 모노크롬 + 단 하나의 날카로운 악센트 컬러, 비대칭적 배치·의도적인 겹침(Overlap)·대각선 흐름·과감한 여백(Negative Space), 페이지 로드 시 시차를 두고 전개되는 단 하나의 잘 짜여진 모션(Staggered reveal)

실무에서 먼저 바꿀 것은 톤을 한 단어로 정하는 일입니다. "깔끔하게", "모던하게" 같은 요청은 AI에게 기본값을 쓰라는 말과 같습니다. 업무용 화면이면 정보 밀도를, 소개 페이지면 타이포그래피를 먼저 정하는 식으로 목적에 맞는 명령어를 고르면 결과가 달라집니다.

세 가지 스타일 실제 예시

Deep Dive 1 에디토리얼 랜딩 페이지 슬라이드. 왼쪽은 HEAVY HEADLINE 제목 아래 크기가 다른 검은 이미지 블록과 텍스트 단이 비대칭으로 배치된 잡지형 와이어프레임. 오른쪽은 대형 세리프 디스플레이 폰트 혼용, 그리드를 깨는 비대칭 이미지 배치, 숨막히지 않는 의도된 거대한 여백(Negative Space). 미학적 목표는 웹사이트가 아닌 고급 하이패션 잡지의 인쇄면을 보는 듯한 착각을 불러일으키는 정제된 레이아웃

Deep Dive 2 레트로 퓨처리스틱 대시보드 슬라이드. 왼쪽은 검은 배경에 초록색 선으로 데이터 스트림 숫자 표, 레이더 도형, 선 그래프 패널이 격자로 나뉜 터미널 스타일 대시보드. 오른쪽은 데이터 밀도가 높은 모노스페이스 숫자 정렬, 심연에 가까운 다크 모드 배경과 형광(Neon) 악센트, 유틸리티 중심의 기계적인 테두리(Hairlines) 분할. 미학적 목표는 80년대 SF 영화에서 상상했던 터미널 콘솔의 향수와 현대적인 데이터 시각화의 결합

Deep Dive 3 임팩트 있는 모션 포트폴리오 슬라이드. 왼쪽은 세 장의 카드가 계단식으로 겹치고 점선 화살표가 순서대로 이어지는 도식. 오른쪽은 스크롤 트리거 기반의 요소 등장, 산만한 마이크로 인터랙션 제거, 시차를 두고 나타나는(Staggered Reveal) 초기 로드 애니메이션. 미학적 목표는 산만하게 움직이는 것이 아니라 오케스트라의 지휘처럼 하나의 거대한 안무로 페이지가 전개되는 경험

프롬프트 해부학 모션 오케스트레이션 슬라이드. 영문 프롬프트는 임팩트 있는 순간을 우선하고 흩어진 호버 효과를 쓰지 말 것, CSS staggered reveal로 잘 짜인 초기 페이지 로드를 만들 것, 요소는 부드럽게 위로 슬라이드하며 페이드 인하고 타이포그래피와 히어로 이미지에 0ms·150ms·300ms 같은 순차적 animation-delay를 쓸 것. 아래 세 프레임은 Frame 1(0.0s) 헤더 텍스트만 렌더링된 빈 화면, Frame 2(0.15s) 본문 텍스트가 아래에서 위로 부드럽게 등장, Frame 3(0.3s) 히어로 이미지가 마지막으로 페이드 인. 하단 문장은 CSS animation-delay를 명시적으로 요구하지 않으면 AI는 모든 요소를 한 번에 렌더링하여 무거운 느낌을 준다는 것

세 예시의 공통점은 하지 말 것을 먼저 적는다는 점입니다. Inter 금지, 그라데이션 금지, 둥근 모서리 제거처럼 기본값을 이름으로 짚어 막아야 AI가 다른 선택지로 넘어갑니다. 색상 값과 여백 단위까지 숫자로 주면 해석의 여지가 줄어듭니다.

기획·맥락과 함께 쓰는 스택, 그리고 체크리스트

최종 합성 Super-IC를 위한 바이브 코딩 스택 도식. 네 층으로 쌓인 판에서 맨 위 파란 층은 미학(Aesthetics) - UI Skills(frontend-design)로 양산형 슬롭을 방지하고 프로덕션 수준의 시각적 완성도 강제, 그 아래 실행(Execution) - Superpowers는 계획·TDD·코드 작성의 루프 실행, 컨텍스트(Context) - GSD는 작업이 길어져도 스펙과 상태가 표류(Drift)하지 않도록 맥락 고정, 맨 아래 결정(Decision) - gstack은 무엇을 왜 만들어야 하는가(요구사항 및 아키텍처 리뷰). 하단 문장은 디자인 프롬프트는 고립되어 작동하지 않으며 견고한 기획(gstack)과 맥락(GSD) 위에서 UI 스킬이 결합될 때 1인 스튜디오가 완성된다는 것

강렬함보다 의도성(Intentionality over Intensity) 마무리 슬라이드. 왼쪽 인용은 가장 우아한 디자인은 무작위로 생성된 100개의 기능이 아니라 통제된 1개의 의도에서 나온다는 문장. 오른쪽 Anti-Slop Checklist는 폰트를 명시적으로 지정했는가(Inter/Arial 금지령 포함), 보라색/파란색 기본 그라데이션을 차단했는가, 대칭을 깨고 여백(Negative Space)을 요구했는가, 산만한 마이크로 인터랙션 대신 Staggered Reveal을 지시했는가, 톤을 나타내는 명확한 형용사(예: Brutalist, Editorial)가 포함되었는가

마지막 스택 도식은 디자인 프롬프트만으로는 부족하다는 점을 짚습니다. 무엇을 왜 만드는지가 정해지지 않으면 어떤 톤을 골라도 화면이 흔들립니다. 다만 모든 서비스에 과감한 스타일이 맞는 것은 아닙니다. 공공·업무용 화면은 접근성과 일관성이 먼저이고, 이때도 색과 글꼴을 토큰으로 정해 두는 것만으로 양산형 느낌은 크게 줄어듭니다.

자주 묻는 질문

프롬프트에 톤 하나만 넣어도 효과가 있나요? 있습니다. 다만 톤만으로는 AI가 기본 폰트와 색으로 돌아가기 쉽습니다. 폰트·색·레이아웃에서 쓰지 말 것을 함께 적어야 결과가 안정적으로 달라집니다.

과감한 스타일이 업무용 화면에도 맞나요? 대부분은 맞지 않습니다. 업무용 화면은 정보 밀도와 가독성이 우선입니다. 자료도 B2B에는 실용적이고 정제된 톤을 권합니다. 차별화는 색 하나나 글꼴 하나로도 충분합니다.

모션은 어느 정도 넣는 것이 적당한가요? 첫 화면에서 요소가 순서대로 나타나는 정도면 충분합니다. 버튼마다 흩어진 효과를 넣기보다 시차를 둔 등장 하나를 정확히 지시하는 편이 가볍고 정돈돼 보입니다.

저희가 이 이야기를 하는 이유

에버스톤은 기업 홈페이지와 업무 시스템을 만들고, 제작 과정에 AI 코딩 도구를 쓰고 있습니다. 도구를 쓸수록 화면이 비슷해지는 문제를 겪기 때문에, 색과 글꼴을 토큰으로 먼저 정하고 금지 사항을 적어 두는 방식이 결과물의 차이를 만든다고 봅니다.

인용한 도구·수치·사례는 원 자료 기준이며, 저희가 검증한 내용이 아닙니다.