안티-슬롭 웹 디자인
대부분의 AI 기반 사이트는 모델이 모든 열린 결정을 가장 통계적으로 흔한 답변으로 채우기 때문에 비슷해 보입니다: Inter, 인디고에서 보라색으로의 그라데이션, 부드러운 그림자가 있는 rounded-2xl 카드, 중앙 정렬 히어로에 알약 배지, Lucide 아이콘이 있는 세 개의 기능 카드. 각각의 선택 자체는 괜찮습니다. 하지만 함께 있을 때는 '아무도 결정하지 않았다'는 느낌을 주며, 방문자는 즉시 이를 알아차립니다.
전문 디자이너가 이런 것들을 피하는 이유는 규칙 때문이 아닙니다. 그들은 주제(비즈니스, 콘텐츠, 대상)에서 시작하고 모든 선택이 그로부터 이어지기 때문에 피합니다. 여러분의 역할도 같은 방식으로 작업하는 것입니다. 아래 금지 목록은 방법론이 아니라 안전장치입니다.
프로세스
1. 코드 작성 전에 디자인 브리프를 작성하세요
추론 과정에서 몇 문장으로 작성하거나, 범위가 큰 경우 사용자에게 보여주세요. 다음을 채우세요:
- 주제: 무엇인지, 누구를 위한 것인지, 페이지에서 그들이 무엇을 해야 하는지?
- 성격: 이 주제에 특정한 세 가지 형용사. "현대적인, 깔끔한, 세련된"은 모든 것을 설명하므로 해당되지 않습니다. 중고 서점에는 "먼지 쌓인, 따뜻한, 약간은 덕후 같은", 연구실에는 "임상적인, 차분한, 정확한"과 같은 것이 좋습니다.
- 실제 세계 참고 자료: 페이지가 차용하는 물리적 또는 역사적 디자인 전통. 예: 기차 시간표, 1970년대 스위스 포스터, 씨앗 포장, 박물관 벽 레이블, 하드웨어 카탈로그, 신문 1면, 진지, 레스토랑 메뉴, 필드 노트북, 오래된 소프트웨어 매뉴얼, 레코드 슬리브. 주제에서 선택하고, 매번 같은 것으로 기본 설정하지 마세요.
- 팔레트: 3–5개의 실제 16진수 값과 그 출처(제품의 재질, 브랜드, 사진, 위 참고 자료).
- 틈새 및 유형: 틈새(빵집, 법률 사무소, 개발 도구, 체육관, 결혼식…)를 지정한 다음,
references/fonts-by-niche.md에서 해당 틈새 행의 폰트를 선택하고, 세 가지 형용사와 가장 일치하는 옵션을 고르세요. 왜 적합한지 한 줄을 쓰세요("Alfa Slab One: 양조장 벽에 그려진 간판처럼 보입니다"). 그 줄을 쓸 수 없다면 아직 선택하지 않은 것입니다. - 하나의 시그니처 디테일: 이 사이트에만 속하는 기억에 남는 단일 요소. 예: 손글씨 칠판처럼 적힌 가격, 법률 문서처럼 여백에 있는 섹션 번호, 그래프 용지 같은 ruled 그리드, 전체에 걸쳐 자르지 않고 사용된 풀 블리드 사진.
사용자가 이미 브랜드, 색상, 폰트 또는 참고 자료를 제공했다면 그것들이 우선합니다. 그들을 중심으로 브리프를 작성하세요.
2. 콘텐츠에서 바깥으로 구축하세요
- 콘텐츠가 있으면 실제 콘텐츠를 사용하세요. 없을 때는 이 주제에 대해 그럴듯하고 구체적인 플레이스홀더 카피(실제 같은 제품명, 실제 느낌의 숫자, 신뢰할 수 있는 주소)를 작성하고, 일반적인 마케팅 채우기 내용을 사용하지 마세요.
- 콘텐츠가 레이아웃을 결정하도록 하세요. 메뉴는 열과 점선 지시선을 원합니다. 포트폴리오는 큰 이미지와 적은 장식을 원합니다. 문서 사이트는 사이드바와 조밀한 텍스트를 원합니다. 모든 주제를 동일한 랜딩 페이지 템플릿에 부어 넣지 마세요.
- 섹션 구조를 다양화하세요. 실제 사이트에는 긴 텍스트 섹션 하나, 조밀한 테이블 하나, 그리드를 깨는 이미지 하나가 있습니다. "제목 + 부제목 + 3개 카드"를 여덟 번 반복하지 않습니다.
3. 넘기기 전에 감사하세요
references/slop-catalog.md(세션에서 이 스킬을 처음 사용할 때 읽으세요. 전체 목록과 이유 및 대안이 있습니다)를 기준으로 출력물을 확인하세요. 프로젝트가 디스크에 있고 Node를 사용할 수 있다면 스캐너도 실행하세요:
node <skill-path>/scripts/slop-check.js <파일-또는-폴더>
일반적인 징후(그라데이션, 글로우 그림자, 과도하게 사용된 폰트, 반짝이 이모지, 유행어 카피)를 파일과 줄과 함께 플래그 지정합니다. 모든 적중이 잘못된 것은 아닙니다. 일기 예보의 그라데이션이나 사용자가 명시적으로 요청한 폰트는 괜찮습니다. 각 적중을 수정하거나 이유를 가지고 의도적으로 유지하세요.
짧은 금지 목록
이것들은 가장 강력한 징후입니다. 사용자가 요청하거나 브랜드가 실제로 요구하지 않는 한 피하세요. 전체 목록은 카탈로그에 있습니다.
색상
- 배경, 버튼, 테두리 또는 텍스트의 보라색/바이올렛/인디고/파란색/분홍색 그라데이션
- 제목의 그라데이션 텍스트(
background-clip: text) - 거의 검은색 배경의 네온 악센트(전기 청록색, 마젠타, 산성 라임)
- 히어로 뒤의 흐린 색상 "오브", 오로라 또는 메시 그라데이션 블롭
- Tailwind 기본 팔레트를 그대로 브랜드 색상으로 사용(
indigo-600,slate-900,violet-500)
표면 및 효과
- 색상이 있는 글로우 그림자(
box-shadow: 0 0 40px rgba(139,92,246,.5)) 및 모든 것에shadow-2xl - 유리 모피즘: 반투명 흰색 채움과
border-white/10이 있는backdrop-blur - 모든 요소가 동일한 큰 반경(
rounded-2xl/3xl)의 자체 둥근 카드 안에 있음 - 방사형 페이드 마스크가 있는 점 또는 그리드 배경 패턴
- 애니메이션 그라데이션 테두리, 샤이머 스윕, "빔" 라인, 스포트라이트-커서-팔로우
- 호버 시 모든 카드가 들어 올려짐(
translateY(-4px)+ 더 큰 그림자)
타이포그래피
- Inter, Poppins, Montserrat, Plus Jakarta Sans, DM Sans, Outfit, Sora, Manrope, Space Grotesk, Geist 또는 Instrument Serif를 반사적으로 선택. 좋은 폰트입니다. 문제는 이유 없이 선택하는 것입니다.
- 틈새에 맞지 않거나 틈새의 명백한 클리셰인 폰트(참고:
references/fonts-by-niche.md) - 히어로 제목에 한 단어가 그라데이션이나 이탤릭 세리프("Build faster")
- 모든 섹션 제목 위에 있는 작은 대문자 넓은 트래킹 "눈썹" 레이블
- 모든 것이 중앙 정렬
레이아웃
- 템플릿: 스티키 네비게이션 → 중앙 정렬 히어로("✨ New" 알약 포함) → 두 개의 버튼 → "Trusted by" 회색조 로고 → 둥근 사각형에 아이콘이 있는 3열 기능 카드 → 통계 밴드 → 별 5개 테스트모니얼 카드 → 중간이 강조된 3단계 가격 → FAQ 아코디언 → 그라데이션 CTA 배너 → 4열 푸터
- 기본 기능 표시 방법으로서의 벤토 그리드
- 기울어진 원근 변환된 가짜 대시보드 스크린샷
콘텐츠 및 카피
- 아이콘이나 글머리 기호로 사용되는 이모지(🚀 ✨ ⚡ 💡 🔥) 및 "AI" 관련 반짝이 아이콘
- "Unlock the power of", "Supercharge", "Elevate", "Seamless", "Effortless", "Revolutionize", "Next-generation", "all-in-one platform", "built for the future", "take X to the next level"
- 삼단 슬로건: "Fast. Simple. Powerful."
- 조작된 통계(10k+ users, 99.9% uptime) 및 가짜 테스트모니얼("Sarah J., CEO at TechCorp")
모션
- 모든 요소에 스크롤 시 페이드 업, 지연 효과
- 떠다니는/보빙 요소, 타자기 헤드라인, 카운트 업 숫자
대신 할 것
색상. 중성색에서 시작하되, 순수한 #fff와 Tailwind slate 대신 온도(따뜻한 종이 #f4efe6, 차가운 회색 #e8eaec, 잉크 #1b1a17)를 부여하세요. 악센트 하나를 추가하고 링크, 기본 작업 및 한두 개의 하이라이트에만 드물게 사용하세요. 주제에서 가져오세요: 세라믹 스튜디오에는 테라코타, 교통 앱에는 시그널 오렌지, 약국에는 병 그린. 평면 채움을 사용하세요. 그라데이션이 정말로 어울리는 경우(하늘, 열 지도) 미묘하게 만들고 의미와 연결하세요.
타이포그래피. 틈새별로 폰트를 선택하고, 무작위로 또는 습관적으로 선택하지 마세요. 비즈니스가 간판, 메뉴, 라벨 또는 레터헤드에 인쇄했을 법한 것이 무엇인지 질문하고, 일치하는 유형을 찾으세요. 양조장과 법률 사무소는 우연히 같은 서체를 공유해서는 안 됩니다. 선택하기 전에 references/fonts-by-niche.md를 읽으세요. 각각 여러 옵션이 있는 약 40개의 틈새, AI가 각 틈새에서 도달하는 클리셰(게임용 Orbitron, 럭셔리용 Playfair, 체육관용 Bebas + Montserrat), 힌디어 및 타밀어와 같은 비라틴 스크립트용 폰트를 다룹니다. 시스템 폰트 스택(system-ui, -apple-system, "Segoe UI", sans-serif)은 도구 및 대시보드에 적합한 선택입니다. 하나의 패밀리로 충분한 경우가 많습니다. 최대 두 개. 크기, 두께 및 간격으로 계층을 구축하고 본문 텍스트를 읽을 수 있는 측정값(~60–75자)으로 왼쪽 정렬하세요.
표면. 그림자 대신 여백, 규칙(1px solid 더 어두운 중성색) 및 배경 전환으로 사물을 분리하세요. 그림자를 사용하는 경우 실제 빛처럼 작고 중성적이며 오프셋되게 만드세요(0 1px 2px rgb(0 0 0 / .08)). 반경을 의도적으로 선택하세요: 편집용 또는 산업용은 0, 대부분의 UI는 2-6px, 알약과 아바타에만 완전히 둥글게. 모든 것에 컨테이너가 필요한 것은 아닙니다.
레이아웃. 비대칭을 사용하세요: 넓은 텍스트 열과 좁은 사이드바, 그리드를 벗어나는 이미지, 왼쪽 정렬 히어로. 밀도가 콘텐츠와 일치하도록 하세요. 가격은 일반 테이블이 될 수 있습니다. 기능은 카드 대신 문장이 있는 목록이 될 수 있습니다. 주제에 필요하지 않은 섹션은 생략하세요. 빵집 사이트에는 통계 밴드가 필요하지 않습니다.
상호작용. 링크에 밑줄을 긋습니다. 호버 상태는 색상이나 밑줄을 변경하고, 위치는 변경하지 않습니다. 버튼에 명확한 눌림/포커스 상태를 제공하세요. 무언가를 설명하는 경우(메뉴 열기, 상태 변경)에만 모션을 사용하고 prefers-reduced-motion을 존중하세요.
이미지. 실제 사물의 실제 사진이 어떤 일러스트레이션보다 낫습니다. 사진이 없으면 정직한 플레이스홀더(라벨이 "photo: storefront, morning light"인 중성 상자)를 재고 3D 블롭, 등각 사람 또는 AI 아트보다 사용하세요. 간단한 다이어그램, 지도, 제품 사진 및 유형 전용 구성은 모두 인간적입니다.
카피. 그 일이 무엇을 하는지, 주인이 카운터에서 사용할 평범한 말로 구체적으로 말하세요. "Experience artisanal excellence."보다 "Fresh sourdough every morning from 7, closed Mondays"가 낫습니다. 통계를 만들어 내기보다는 생략하세요.
하나의 클리셰를 다른 클리셰로 바꾸지 마세요
기본값이 금지되면 두 번째로 흔한 답변이 새로운 기본값이 됩니다: Inter 대신 Space Grotesk, 보라색 대신 청록색, 모든 사이트에 두꺼운 검정 테두리와 노란색 하이라이트가 있는 "브루탈리스트". 디자인한 두 개의 다른 주제가 비슷해 보인다면, 브리프가 아닌 템플릿에서 작업하고 있는 것입니다. 1단계로 돌아가서 주제가 더 강하게 밀어붙이도록 하세요.
사용자가 "슬롭" 룩을 원할 때
일부 사용자는 광택 있는 SaaS 룩을 원하거나 브랜드가 실제로 보라색에 그라데이션일 수 있습니다. 명시적인 지시와 브랜드 가이드라인을 따르세요. 이것들은 이 스킬보다 우선합니다. 자유로운 곳에서는 여전히 절제를 적용할 수 있습니다: 5개 대신 하나의 그라데이션, 유행어 대신 실제 카피, 의도적인 폰트 페어링.