웹 디자인 디슬롭은(는) 무엇을 하나요?

웹 디자인의 'AI 슬롭'은 하나의 나쁜 선택이 아닙니다. 수많은 랜딩 페이지의 평균입니다: 보라-분홍 그라데이션, 배지 알약과 두 개의 버튼이 있는 중앙 정렬 히어로, 틴트 아이콘이 달린 세 개의 동일한 기능 카드, 거의 검은색 배경의 유리 카드, '끊김 없는 워크플로우를 잠금 해제하세요' 같은 카피. 각각은 개별적으로 괜찮습니다. 그러나 합쳐지면 어떤 회사에나 속할 수 있는 페이지가 되고, 이는 어느 회사에도 속하지 않음을 의미합니다.

이 스킬은 세 가지 작업을 수행합니다:

감사(Audit): 기존 페이지, 목업, 코드베이스를 검토하고 구체적인 수정 방안과 함께 슬롭 신호를 보고합니다.
가이드(Guide): 새 빌드를 처음부터 슬롭이 생기지 않도록 안내합니다.
재작성(Rewrite): AI가 만든 듯한 카피를 다시 작성합니다.

감사하거나 빌드할 때마다 references/tells.md (시각적, 레이아웃, 모션, Tailwind 신호 및 각각의 대체 패턴)를 읽으십시오. 헤드라인, 서브헤드, 기능 설명, CTA를 작성하거나 검토할 때는 references/copy.md를 읽으십시오.

유일하게 중요한 테스트

Swap 테스트. 로고와 제품명을 경쟁사의 것으로 바꿔보세요. 그래도 페이지가 여전히 작동하나요? 그렇다면, 아무리 정교해 보여도 그것은 슬롭입니다. 디자인된 페이지는 오직 이 브랜드만이 가진 재료(제품, 사람, 장소, 프로세스, 실제 수치, 목소리)로 만들어집니다. 아래의 모든 판단은 이 테스트의 특수한 경우입니다.

두 가지 보조 테스트:

눈을 가늘게 뜨고 보기 테스트 (Squint test). 눈을 흐리게 떠보세요. 동일한 간격으로 쌓인 같은 크기의 둥근 사각형으로 이루어진 중앙 열이 보인다면, 레이아웃은 템플릿입니다. 디자인된 페이지는 고르지 않은 실루엣을 가집니다: 한 섹션은 넓고, 다음은 좁고, 어떤 것은 매우 크고, 많은 것은 작습니다.
출처 테스트 (Source test). 각 결정은 어디서 왔나요? '브랜드의 재료로부터'는 좋습니다. '랜딩 페이지가 보통 그렇게 생겼으니까'는 신호입니다.

모드 1: 감사(Audit)

사용자가 URL, 스크린샷, Figma 프레임, 컴포넌트나 리포지토리를 공유하고 검토를 요청하거나, 페이지가 평범해 보인다고 말할 때 사용합니다.

먼저 모든 것을 읽으십시오. 코드의 경우, 모든 페이지/섹션 컴포넌트와 Tailwind 설정 또는 전역 CSS를 읽습니다. 스크린샷의 경우, 작성하기 전에 전체 페이지를 살펴보십시오. 히어로만 보고 코멘트하지 마십시오.
Swap 테스트를 실행하고 한 문장으로 평결을 말하십시오. 솔직하고 구체적으로 말하십시오: '이 페이지는 어떤 개발툴 스타트업의 홈페이지일 수도 있습니다'는 점수보다 유용합니다.
신호를 가장 나쁜 순서대로 나열하십시오. 각 신호에 대해: 신호, 위치(파일 및 라인 또는 섹션 이름), 생성된 것처럼 읽히는 이유, 수정 방법. references/tells.md에서 가져오되, 일반적인 대체 패턴이 아닌 이 페이지에 대한 수정 사항을 작성하십시오.
유지할 것을 지정하십시오. 모든 페이지에는 잘 작동하는 부분이 있습니다. 그 부분을 언급하지 않으면 사용자는 슬롭과 함께 그것도 버릴 수 있습니다.
가장 큰 효과를 내는 세 가지 변경 사항을 제시하십시오. 보통: 하나의 타이포그래피 결정, 하나의 레이아웃 결정, 하나의 콘텐츠 결정. 사용자가 이것들만 해도 페이지는 이미 Squint 테스트를 통과해야 합니다.

감사 출력 형식:

## 평결
한두 문장. Swap 테스트 결과. 전체 평가: 템플릿 / 혼합 / 디자인됨

## 이것들부터 수정하세요
1. [신호] / [위치] / [구체적인 수정]
2. ...
3. ...

## 기타, 영역별
### 타이포그래피 ### 색상 ### 레이아웃 ### 컴포넌트 ### 모션 ### 카피 ### 콘텐츠/이미지
(각 영역 아래 짧은 목록; 빈 영역은 생략)

## 유지
이미 좋은 부분과 그 이유

사용자가 수정을 적용하도록 요청하면, 실제 파일을 편집하십시오. 요청하지 않는 한 페이지 전체를 처음부터 다시 작성하지 마십시오. 대상 편집은 작동하는 부분을 유지하고 검토하기 쉽습니다.

모드 2: 슬롭 없이 빌드하기

사이트, 페이지, 섹션 또는 템플릿을 생성할 때마다 사용합니다. 순서가 중요합니다: 초기에 내린 결정(컨셉, 타이포그래피, 그리드)은 슬롭을 방지하고, 늦게 내린 결정(이 그라데이션을 저걸로 바꾸기)은 슬롭을 숨길 뿐입니다.

마크업을 작성하기 전에

브랜드의 원자재를 찾으십시오. 이 비즈니스는 실제로 무엇을 가지고 있나요? 실제 인터페이스가 있는 제품, 물리적 공간, 재료, 수공예 과정, 관점이 있는 창업자, 데이터셋, 이름이 있는 고객 기반. 한 가지를 선택하여 페이지를 이끌도록 하십시오. 커피 로스터 사이트는 로스트 프로필을 중심으로 만들 수 있습니다. 딜러십은 쇼룸 바닥을 중심으로. 인보이싱 앱은 실제 인보이스를 중심으로. 사용자가 아무것도 주지 않았다면, 한 가지 질문을 하거나, 답변 상단에 자신이 가정하고 빌드하는 바를 명시하십시오.
레이아웃 아이디어를 선택하고, 섹션 목록을 선택하지 마십시오. 페이지가 취하는 하나의 구조적 움직임을 결정하십시오: 스티커 왼쪽이 있는 편집용 2열, 전체 너비 이미지 리듬, 조밀한 인덱스/테이블 페이지, 매우 큰 헤드라인 하나와 작은 보조 텍스트, 제품의 가로 스크롤. 그런 다음 섹션은 자연스럽게 나오게 하십시오. 절대 '히어로 → 로고 → 기능 → 사용후기 → 가격 → FAQ → CTA → 푸터'에서 시작하지 마십시오. 그 목록 자체가 슬롭 템플릿입니다. 페이지에 이러한 섹션 중 일부가 필요하다면, 이 페이지처럼 보여야 하고 그 목록처럼 보여서는 안 됩니다.
색상보다 먼저 타이포그래피를 설정하십시오. 개성이 있는 디스플레이 폰트와 본문용 작업 폰트를 선택합니다. 큰 점프(예: 14 / 18 / 32 / 72 / 140)가 있는 실제 스케일을 설정하고, Tailwind의 완만한 상승(text-4xl에서 text-6xl로)을 사용하지 마십시오. 정렬을 결정합니다: 왼쪽 정렬은 디자인된 페이지의 기본값이고, 모든 것을 중앙 정렬하는 것은 생성된 페이지의 기본값입니다.
재료로부터 팔레트를 도출하십시오. 하나 또는 두 개의 브랜드 색상, 종이 또는 잉크 배경, 그리고 몇 군데에만 사용되는 악센트. 그라데이션이 금지된 것은 아닙니다. 그러나 아무것에서도 도출되지 않은 그라데이션(보라→분홍, 파랑→보라)은 현재 웹에서 가장 강력한 AI 신호입니다.

마크업을 작성하는 동안

리듬을 다양하게 하십시오. 모든 섹션이 py-24 max-w-7xl mx-auto일 필요는 없습니다. 한 섹션은 컨테이너를 벗어나게 하고, 하나는 좁은 너비에 놓고, 하나는 카드 대신 가는 선으로 구분된 목록으로 만드십시오.
카드와 그림자보다 선과 여백을 선호하십시오. 가는 테두리(border-b border-neutral-200), 여백, 글자 크기가 'rounded-2xl shadow-lg' 박스보다 계층을 더 잘 전달합니다. 카드는 실제로 개별 객체(제품, 요금제)일 때만 사용하고, 기본 래퍼로 사용하지 마십시오.
실제 콘텐츠 또는 정직한 플레이스홀더를 사용하십시오. 브랜드 재료에서 실제 헤드라인을 작성하십시오. 사실을 모른다면, '10,000+ 행복한 고객'을 지어내는 대신 {{TODO: 실제 수치}}를 작성하십시오. 가짜 로고, 가짜 별 다섯 개 사용후기, 둥근 숫자 통계는 콘텐츠 슬롭이며, 섹션이 누락된 것보다 더 나쁩니다.
아이콘은 적게 또는 전혀 사용하지 마십시오. 이모지는 절대 아이콘이 아닙니다. 기능 목록에는 행당 lucide 아이콘이 필요하지 않습니다. 아이콘을 사용한다면, 일관된 세트로, 작게, 텍스트에 부차적이어야 합니다.
이유가 있는 모션. 모든 요소에 stagger-fade-up을 적용하지 마십시오. 콘텐츠와 연결된 의도적인 움직임 한두 개(스크롤 시 드러나는 제품 이미지, 세부 정보를 보여주는 호버 효과)가 디자인된 것으로 읽힙니다. 기본 전환은 빠르고 간단해야 합니다.
이미지: 추상적보다 구체적으로. 3D 블롭, 그라데이션 오브, '책상 위 노트북' 재고 사진은 사용하지 마십시오. 실제 스크린샷, 제품 사진, 지도, 문서, 재료의 질감. 아무것도 없으면, 잘 설정된 타이포그래피 블록이 플레이스홀더 이미지보다 낫습니다.
2차 슬롭도 확인하십시오. 그라데이션 슬롭에 대한 반작용에도 자체적인 템플릿이 있습니다: 거대한 세리프, 그레인 오버레이, (01) 번호 섹션, 모든 곳의 대문자 모노 레이블, 마키(marquee) 행, 커서를 따라다니는 블롭, '© 2026 — All rights reserved' 모노. 그것도 똑같이 알아볼 수 있습니다. 이러한 이동이 '디자인됨'을 표시하기 때문이 아니라 브랜드에서 비롯될 때만 사용하십시오.

넘겨주기 전에

자신의 출력물에 감사를 빠르게 실행하십시오: Swap 테스트, Squint 테스트, references/tells.md 스캔. 발견한 것을 수정하십시오. 그런 다음 사용자에게 페이지가 왜 그렇게 보이는지(어떤 재료로 만들어졌는지, 레이아웃 아이디어가 무엇인지) 한두 줄로 말하여, 픽셀이 아닌 결정을 평가할 수 있도록 하십시오.

모드 3: 카피

references/copy.md를 읽으십시오. 짧게 요약하면: 생성된 카피는 추상적이고, 형용사적이며, 대칭적입니다. 디자인된 카피는 구체적이고, 특정적이며, 고르지 않습니다. 모든 주장을 사실로, 모든 '끊김 없는(seamless)'을 실제 일어나는 일로, 모든 세 개의 구를 중요한 한 가지로 대체하십시오. 헤드라인은 그 물건이 무엇인지 또는 무엇을 하는지, 브랜드의 목소리로, 고객이 사용할 단어로 말해야 합니다. CTA는 다음에 무슨 일이 일어나는지('로스트 보기', '시승 예약')를 말하고, '시작하기(get started)'가 아닙니다.

조정

모든 패턴이 모든 맥락에서 틀린 것은 아닙니다. 세 가지 요금제가 있는 가격 테이블은 세 가지 요금제가 있는 제품에 적합합니다. 신호는 가운데 요금제에 아무런 근거 없이 '가장 인기 있는' 배지가 있는 것입니다. 체크리스트가 아닌 Swap 테스트로 판단하십시오.
사용자는 전통적이고 신뢰할 수 있는 레이아웃(은행, 진료소, 딜러십)을 원할 수 있습니다. Deslop이 이상함을 의미하지는 않습니다. 그것은 특정함을 의미합니다. 실제 재료로 만들어진 전통적인 구조는 통과하고, 일반적인 카드로 가득한 실험적인 레이아웃은 통과하지 않습니다.
사용자가 디자이너나 개발자라면, 수정 사항을 코드나 정확한 값으로 제시하십시오. 그렇지 않다면, 변경 사항을 평이한 언어로 설명하고 실행하겠다고 제안하십시오.
아첨하지 말고 과장하지 마십시오. 하나의 정직한 평결, 순위 목록, 그리고 앞으로의 길을 제시하십시오.

웹 디자인 디슬롭