웹 디자인 파이프라인 스킬과 이를 5개 에이전트에 설치하는 CLI 를 담은 모노레포. 스킬 (packages/skill) - SKILL.md 261줄 + 참조 문서 16개 3,349줄. progressive disclosure 로 본문은 절차와 인덱스만, 지식은 references/ 로 분리 - 0~6단계 파이프라인. 규모에 따라 전체·연장·국소 세 경로로 분기 - 하드 게이트 12개는 grep·카운트로 검증 가능한 것만. 취향 판단은 제외 - 미학 프리셋 5종, AI 슬롭 지문 목록, 한글 조판 규칙, SVG 필터·three.js·인터랙티브 모션·HTML-in-Canvas 실전 지침 설치 CLI (packages/cli, packages/core) - npx designpaca 온보딩 TUI. Claude Code · Codex · Cursor · Windsurf · AGENTS.md - 매니페스트에 설치 시점 해시를 기록해 사용자가 고친 파일은 update 가 건너뛴다 - 타깃별로 본문의 references/ 경로를 실제 설치 위치로 재작성 - AGENTS.md 는 항상 로드되므로 본문 대신 303자 포인터만 주입 - Windsurf 는 12,000자 상한 초과 시 설치를 차단 배포 (build/ci, .forgejo/workflows) - 태그 v* → 검사·테스트·빌드 → npmjs 배포 + Forgejo 레지스트리 미러 → draft 릴리스 → Cloudflare Pages. 재실행 멱등 근거 (research/) - 약 250개 웹 소스 조사 결과와 도그푸딩 검증 2건. 스킬의 모든 수치는 여기서 나온다 테스트 22개 통과 (core 16 · cli 6)
27 KiB
04 — "AI가 만든 티" 시그니처 목록 (금지 목록)
이 문서가
designpaca의 핵심이다. 아래 항목은 전부 구체적 패턴이다. "generic하다", "심심하다" 같은 말은 쓰지 않는다. 각 항목은패턴 → 왜 문제인가 → 대신 무엇을 하나구조다.총 101개 시그니처 — A 컬러 13 · B 타이포 15 · C 레이아웃 14 · D 컴포넌트 16 · E 모션 9 · F 카피 14 · G 이미지 9 · H 품질 11 (+ I 코드 지문 grep 목록, J 자가 채점표)
사용법: 작업 완료 전 이 문서를 훑고, 걸린 항목의 ID를 나열한 뒤 전부 해소해야 한다. 3개 이상 걸리면 그 디자인은 폐기하고 다시 시작한다.
0. 근거: 이건 인상이 아니라 실측이다
Adrian Krebs가 Show HN 랜딩페이지 1,590개를 Playwright로 렌더한 뒤 DOM·computed style 기반 결정론적 규칙 16개로 채점한 결과:
| 등급 | 기준 | 비율 | 개수 |
|---|---|---|---|
| Heavy slop | 4개 이상 패턴 검출 | 22% | 347 |
| Mild slop | 2–3개 | 32% | 508 |
| Clean | 0–1개 | 46% | 735 |
개별 패턴 검출률 (일부 공개치):
| 패턴 | 검출률 |
|---|---|
| CTA 버튼이 보라 계열 (indigo/violet) | 10.7% |
| 헤드라인 전체 대문자 | 10.5% |
| 번호 매긴 단계 시퀀스 (1·2·3) | 9.4% |
Krebs 본인의 결론: "슬롭 페이지가 나쁜 건 아니다. 그냥 영감이 없을 뿐이다. 전환은 잘 될 수도 있다. 다만 지금 Show HN에 올라오는 것의 절반 이상은 '의견 없는 채팅 인터페이스가 만들었다'는 시각적 지문을 갖고 있다."*
즉 이 문서의 목표는 "예쁘게"가 아니라 지문 제거다.
A. 컬러 시그니처
| ID | 시그니처 (구체적으로) | 왜 문제인가 | 대신 무엇을 하나 |
|---|---|---|---|
| A-01 | 다크 모드를 기본값으로. 브리프에 없는데 bg-slate-900 / #0B0B0F 배경으로 시작 |
AI 툴(v0·Cursor·Bolt)의 가장 흔한 반사 반응. 단일 시그니처 중 검출 빈도 1위 | 라이트를 기본으로 설계하고 다크는 토큰으로 파생. 다크가 필요하면 브리프에 근거를 대라 |
| A-02 | 보라→파랑 그라디언트 히어로. #6366f1 → #a855f7, #8b5cf6 → #3b82f6, Tailwind from-purple-600 to-blue-500 |
Tailwind 기본 팔레트의 indigo/violet은 "결정하지 않았다"의 신호. 수십만 개 튜토리얼의 기본값 | 브랜드 색 1개를 정하고 단색 + 중립으로 간다. 그라디언트를 쓸 거면 같은 hue 내 명도 변화(예: #1B4332 → #2D6A4F) |
| A-03 | "VibeCode Purple" — 라벤더-퍼플 (#a78bfa, #c4b5fd 계열)이 어디에나 |
텍스트→랜딩 생성기의 출력 지문. 색을 고른 게 아니라 안 고른 것 | 보라를 쓰지 마라. 꼭 필요하면 채도를 낮추고 온도를 바꿔라 (#6B5B95 같은 탁한 보라) |
| A-04 | 네온 온 다크 — 시안(#22d3ee) / 바이올렛(#a855f7)이 검정 위에서 발광 |
"사이버펑크 기본값". 게이밍·개발자 툴 브리프가 아닌데 나오면 즉시 티가 남 | 다크가 필요하면 저채도 액센트 1개. 발광 대신 명도 차이로 위계를 만들어라 |
| A-05 | 컬러 글로우 / 박스섀도. box-shadow: 0 0 80px rgba(139,92,246,.5) 같은 큰 컬러 그림자 |
깊이감을 색으로 가짜로 만든 것. 실제 광원 논리가 없음 | 그림자는 중립색으로, 작게. 0 1px 2px rgba(0,0,0,.06) + 0 8px 24px rgba(0,0,0,.08) 2단 구성 |
| A-06 | 방사형 그라디언트 헤일로 — 히어로 뒤 떠 있는 보라·파랑 원형 발광 오브 | 구성을 못 잡았을 때의 회피 수단. 정보를 담지 않는 픽셀 | 배경은 비워두거나 실제 콘텐츠(제품 스크린샷, 타입)로 채워라 |
| A-07 | 순백 #ffffff / 순흑 #000000 배경·텍스트 |
아무 결정도 하지 않았다는 뜻. 대비 눈부심과 텍스트 번짐도 유발 | 오프화이트 #FAFAF7 / 잉크 #111014 처럼 살짝 틀어라. 브랜드 hue를 2–4% 섞으면 더 좋다 |
| A-08 | Tailwind 기본 토큰 그대로 — slate-900, gray-500, indigo-600, emerald-500 |
수학적으로 정돈됐지만 누구나 알아본다. 이건 팔레트가 아니라 미결정 상태 | tailwind.config의 색을 교체하라(확장이 아니라). ink-900, ember-600 같은 프로젝트 고유 이름 |
| A-09 | 의미 없는 색 이름 토큰 — purple-500을 코드 전체에서 직접 호출 |
브랜드가 바뀌면 전부 다시 찾아야 함. 색이 역할을 못 가짐 | --color-action-primary, --color-surface-elevated, --color-text-secondary 같은 의미 토큰 |
| A-10 | 다크 테마에서 본문 대비가 겨우 통과하거나 미달 — #0f172a 위 #94a3b8 |
Krebs가 별도 패턴으로 잡을 만큼 흔한 기능적 결함 | 본문 4.5:1(WCAG) 또는 APCA Lc ≥ 75 확보. 다크에서는 순백 대신 #E8E6E3 정도로 눈부심 완화 |
| A-11 | 그라디언트 텍스트 — 헤드라인·지표 숫자에 background-clip: text 그라디언트 |
가독성과 스캔성을 깎으면서 정보는 0. 스크린샷·OG 이미지에서도 깨짐 | 단색. 강조가 필요하면 크기·굵기·여백으로 |
| A-12 | 크림/베이지 배경(#FDF8F3, #F5F0E8)을 "고급스러움"의 기본값으로 |
2025–26년 들어 새로 생긴 슬롭. 보라의 대체 기본값이 됐다 | 크림을 쓸 거면 왜 크림인지 브리프와 연결하고, 텍스트·액센트를 그에 맞춰 재설계하라 |
| A-13 | 색상 hue 4개 이상 사용 | 결정을 못 한 상태의 전형 | hue 3개 이하. 면적 배분 60(지배)/30(중립)/10(강조) |
B. 타이포그래피 시그니처
| ID | 시그니처 | 왜 문제인가 | 대신 |
|---|---|---|---|
| B-01 | Inter를 이유 없이 기본값으로. 특히 중앙 정렬 히어로 헤드라인에 | AI 인터페이스의 기본 서체. Krebs 16패턴 1번 항목 | Satoshi / Switzer / DM Sans / Work Sans. Inter는 초고밀도 다국어 UI 같은 명확한 이유가 있을 때만 |
| B-02 | Space Grotesk + Instrument Serif + Geist 조합 | 이 셋의 반복 조합이 생성 지문으로 특정됨 | 셋 중 하나만 쓰거나, 파운드리를 바꿔라 (Fontshare, Velvetyne) |
| B-03 | 헤드라인 한 단어만 세리프 이탤릭 — 나머지는 sans (Build <em>better</em> products) |
가장 널리 퍼진 "성의 표시" 관용구. 지금은 성의가 아니라 지문 | 강조는 줄바꿈·크기·색·여백으로. 굳이 서체를 섞으려면 문장 전체 단위로 |
| B-04 | 페이지 전체에 폰트 패밀리 1개 | 위계를 크기로만 만들게 되어 밋밋해짐 | 디스플레이 1 + 본문 1의 2개 조합. 성격 차이를 크게 (세리프+그로테스크 등) |
| B-05 | 타입 스케일이 평평함 — 16 / 18 / 20 / 24처럼 단계 간 비율이 1.15 미만 | 위계가 안 서고 모든 게 똑같이 중요해 보임 | 비율 1.25 또는 1.333. 최대/본문 비 4배 이상 (17 → 68) |
| B-06 | 타입 스케일 단계가 8개 이상 | 통제 실패. 값이 우연히 결정됐다는 뜻 | 3–5단계로 제한하고 각 단계에 역할 이름을 붙여라 |
| B-07 | 모든 섹션 라벨이 대문자 + 자간 넓힘 (FEATURES, HOW IT WORKS) |
검출률 10.5%. 얻지 않은 권위를 빌리는 장치 | 라벨을 없애거나, 소문자로 쓰거나, 라벨 없이 헤드라인만으로 섹션을 구분 |
| B-08 | 히어로 = 작은 pill 배지 + 그 아래 거대 헤드라인 (✨ Now in beta + H1) |
Krebs 16패턴 중 "badge above H1". 가장 알아보기 쉬운 구조 지문 | 배지를 지워라. 정말 필요한 정보면 문장 안에 넣거나 내비 옆에 둬라 |
| B-09 | _01_ _02_ _03_ 형식의 작은 번호 섹션 라벨 |
에디토리얼 흉내인데 실제 구조는 없음 | 번호가 순서를 의미할 때만 쓴다. 장식용 번호는 삭제 |
| B-10 | 본문 letter-spacing 0.05em 이상 | 글자 그룹이 흩어져 단어 인식이 느려짐 | 본문 자간 0. 대문자 소형 라벨에만 +0.08em |
| B-11 | 대형 헤드라인에 과도한 음수 자간 (-0.06em 이상) | 글자가 서로 먹힘. "디자인한 척"의 부작용 | -0.02em ~ -0.04em 범위. 한글은 음수 자간 금지 |
| B-12 | line-height 1.3 미만의 본문 | 답답하고 읽기 어려움 | 영문 본문 1.5–1.7, 한글 본문 1.6–1.8 |
| B-13 | 본문 12px 이하 | 접근성 실패이자 밀도를 못 잡은 신호 | 본문 최소 14px, 권장 16–18px |
| B-14 | 한글 폰트를 지정하지 않아 시스템 기본으로 떨어짐 (맑은 고딕 / Apple SD 산돌고딕) | 한국어 사이트에서 즉시 미완성으로 읽힘 | Pretendard 또는 본고딕 명시. word-break: keep-all 함께 설정 |
| B-15 | 모노스페이스를 장식으로 사용 — 코드가 아닌 라벨·캡션에 font-mono |
"테크 느낌"의 저비용 흉내 | 모노스페이스는 코드·데이터·식별자에만. 톤이 필요하면 그로테스크의 폭 좁은 컷을 써라 |
C. 레이아웃 · 구조 시그니처
| ID | 시그니처 | 왜 문제인가 | 대신 |
|---|---|---|---|
| C-01 | 표준 페이지 골격: 히어로 → 3열 피처 → 로고월 → 요금제 → FAQ → 푸터 | shadcn/ui 예제, Tailwind UI 스크린샷, Vercel 템플릿의 순서 그대로. 구조를 설계하지 않았다는 증거 | 섹션 순서를 브리프의 설득 논리로 재배열. 예: 문제 제시 → 실제 사용 화면 → 반론 처리 → 가격. FAQ를 쓸 거면 실제로 받은 질문으로 |
| C-02 | 중앙 정렬 히어로 (텍스트 가운데 + CTA 2개 + 아래 스크린샷) | 가장 안전해서 가장 흔한 구조 | 비대칭 그리드(5:7, 7:5), 좌측 정렬 대형 타입, 또는 텍스트를 화면 하단 3분의 1로 내리기 |
| C-03 | 정확히 3열, 균등 폭 피처 카드 | 콘텐츠가 3개여서가 아니라 3이 예쁘게 떨어져서 3인 것 | 항목 수를 콘텐츠가 정하게 하라. 2개면 2개, 5개면 5개. 폭도 중요도에 따라 다르게 |
| C-04 | 아이콘이 카드 상단 중앙에 있는 피처 카드 (둥근 사각 아이콘 타일 + 제목 + 2문장) | "universal AI feature-card template". 가장 확실한 단일 지문 | 아이콘을 없애고 숫자·스크린샷·실제 UI 조각으로 대체. 아이콘을 쓸 거면 좌측 인라인 배치 |
| C-05 | 카드 좌측 3–4px 컬러 스트립 (border-l-4 border-purple-500) |
텍스트의 em-dash에 맞먹는 신뢰도의 AI 지문 | 좌측 스트립 삭제. 구분이 필요하면 배경 톤 차이 또는 여백 |
| C-06 | 카드 안의 카드 안의 카드 (cardocalypse) | 시각적 소음. 깊이가 정보와 무관 | 중첩 최대 1단계. 안쪽은 카드가 아니라 구분선 또는 여백 |
| C-07 | 번호 매긴 1·2·3 단계 섹션 | 검출률 9.4% | 단계가 실제로 순서일 때만. 그 경우에도 번호 대신 화면 캡처 3장이 낫다 |
| C-08 | 지표 배너 행 (10,000+ users · 99.9% uptime · 4.9★) |
근거 없는 숫자 3–4개 나열. 검증 불가라 신뢰를 오히려 깎음 | 숫자 1개만, 출처와 함께. 없으면 쓰지 마라 |
| C-09 | 모든 여백이 같은 값 — 전부 p-6, 전부 gap-4 |
리듬이 없어 강약이 사라짐 | 8pt 그리드 위에서 4–6종의 여백 값. 섹션 간 : 요소 간 = 대략 1:5 |
| C-10 | 섹션마다 같은 상하 패딩 (py-20 반복) |
페이지가 균질해져 어디가 중요한지 알 수 없음 | 중요한 섹션에 더 많은 여백. 여백이 곧 강조다 |
| C-11 | 벤토 그리드를 기본 선택지로 | 2026년 기준 벤토는 표준이라 차별화가 아니다. "고민 안 했음"의 새 신호 | 벤토는 타일 크기 차이가 정보 위계를 반영할 때만. 아니면 단순 리스트가 낫다 |
| C-12 | 콘텐츠가 뷰포트 가장자리에 붙음 — 컨테이너 패딩 없이 텍스트가 화면 끝에 닿음 | 모바일에서 특히 조악해 보임 | 모바일 16–24px, 데스크톱 24–80px 좌우 패딩 |
| C-13 | 본문 컬럼이 화면 전체 폭 — 1440px에 한 줄 텍스트 | 영문 100자 이상 줄이 되어 읽기가 무너짐 | 텍스트 컬럼 max-width: 65ch (영문) / 국문은 25–40자 폭 |
| C-14 | 푸터가 링크 4열 + 소셜 아이콘 + 카피라이트 로만 구성 | AI가 가장 성의 없이 만드는 곳 | 푸터에 실제 정보를 넣어라 (연락처, 주소, 사업자 정보, 뉴스레터). 링크가 4개뿐이면 4열로 만들지 마라 |
D. 컴포넌트 시그니처
| ID | 시그니처 | 왜 문제인가 | 대신 |
|---|---|---|---|
| D-01 | rounded-2xl shadow-lg p-6 를 손대지 않고 그대로 사용 |
shadcn/ui 기본값. AI 에이전트가 복붙하도록 설계된 값 | radius를 하나의 어휘로 통일하되 프로젝트 고유값으로 (예: 4px 또는 12px). 큰 그림자 대신 1px 보더 + 배경 톤 차이 |
| D-02 | 모든 요소가 동일한 border-radius 16px | radius가 결정이 아니라 기본값임을 드러냄 | radius 어휘 2개 (예: 컨테이너 12px, 인터랙티브 요소 8px). 혹은 0으로 통일하고 각을 살려라 |
| D-03 | radius 24px 이상의 과도하게 둥근 카드 | 블롭처럼 보이며 정보 밀도를 낮춤 | 12–16px 이하 |
| D-04 | 1px 회색 보더 + 넓게 퍼진 그림자의 동시 사용 | 두 가지 깊이 표현을 겹친 것. 광원 논리 없음 | 하나만 선택. 보더로 갈 거면 그림자 제거 |
| D-05 | 글래스모피즘을 전면에 사용 (backdrop-blur 카드 다수) |
실기기에서 FPS 15–30% 하락. 2022년 유행의 잔재 | 내비게이션 바·모달 정도로 제한. 카드에는 쓰지 마라 |
| D-06 | 이모지를 아이콘 대신 사용 — 사이드바·피처 카드의 🚀 ⚡ 🎯 ✨ | Krebs 16패턴 중 "emoji icons in nav". 즉각적인 아마추어 신호 | 아이콘 세트 하나를 정해 일관되게 (Lucide, Phosphor, Radix). 이모지는 카피 안에서만 |
| D-07 | 버튼이 항상 2개, 나란히 (Get started + Learn more) |
주 행동이 무엇인지 정하지 못했다는 뜻 | 주 CTA 1개. 보조는 텍스트 링크로 격하 |
| D-08 | CTA 버튼이 보라·인디고 계열 | 검출률 10.7%로 단일 최다 | 브랜드 색. 없으면 중립 대비가 가장 강한 색(잉크/화이트 반전) |
| D-09 | 로고월 — 회색조 로고 6–8개 일렬 배치 | 로고를 나열하는 것 자체가 신호를 못 만듦. 대부분 가짜거나 무관 | 실제 고객이면 한 곳의 사례를 문장으로. 없으면 섹션 자체를 삭제 |
| D-10 | 아바타가 이니셜 원형인 텍스트 후기 3개 | 검증 불가한 후기는 신뢰를 깎는다 | 실명 + 직함 + 원문 링크(리뷰 플랫폼, 트윗). 없으면 넣지 마라 |
| D-11 | 아코디언 FAQ 6개, 질문이 전부 가상 ("How does it work?") | 실제로 받은 질문이 아니라 채운 것 | 실제 문의 3개. 답변에 구체적 숫자·조건 포함 |
| D-12 | 요금제 3열 카드 + 가운데에 "Most popular" 배지 | 가장 재현율 높은 SaaS 템플릿 | 표 형식 비교, 단일 가격, 또는 가격 계산기. 3열 카드가 필수는 아니다 |
| D-13 | 펄스 애니메이션 상태 점 (초록 원이 깜빡이며 "All systems operational") | 정적 정보에 장식 애니메이션을 붙인 것 | 상태가 실제로 바뀔 때만 애니메이션. 아니면 정적 점 |
| D-14 | 자동 스크롤 마퀴 — 로고·후기·태그가 끝없이 흐름 | 콘텐츠를 가리고 읽기를 방해하며 주의를 강탈 | 정적 그리드. 정말 많으면 페이지네이션 |
| D-15 | hover 시 아무 변화 없거나, 전 요소가 동일하게 scale(1.02) |
인터랙션을 설계하지 않았다는 신호 | 요소마다 다른 반응 (링크는 밑줄, 카드는 배경 톤, 버튼은 명도). hover는 가장 먼저 설계한다 |
| D-16 | 장식용 깜빡이는 커서 — 편집 불가능한 히어로 카피 뒤의 ` | ` | 타이핑 흉내. 정보 없음 |
E. 모션 시그니처
| ID | 시그니처 | 왜 문제인가 | 대신 |
|---|---|---|---|
| E-01 | 모든 요소에 동일한 fade-in-up (opacity 0→1, translateY 20px→0, 전부 같은 delay) |
모션 언어가 없다는 뜻. 페이지가 계속 "떠오르기만" 함 | 모션은 중요한 것에만. 나머지는 즉시 노출. 순차 등장이 필요하면 stagger 40–60ms |
| E-02 | 인터페이스 요소에 bounce / elastic 이징 | 2010년대 감성. 즉시 촌스러움 | ease-out 또는 cubic-bezier(0.2, 0, 0, 1) |
| E-03 | 이미지 hover 시 scale 또는 rotate |
생성 UI의 반복 지문 | 이미지 자체는 두고 캡션·오버레이·보더를 변화시켜라 |
| E-04 | duration이 전부 300ms | 마이크로와 연출을 구분하지 못함 | 마이크로 100–200 / 트랜지션 200–400 / 연출 600–1200ms |
| E-05 | 스크롤 reveal 실패 시 콘텐츠가 opacity: 0으로 남음 |
JS 실패·prefers-reduced-motion 시 빈 페이지가 됨 | 기본 상태를 visible로 두고 JS가 숨긴 뒤 보여주는 방식. 또는 CSS scroll-driven animation |
| E-06 | prefers-reduced-motion 미대응 |
접근성 실패이자 성의 없음의 증거 | 미디어 쿼리로 모션 제거 경로를 반드시 제공 |
| E-07 | 패럴랙스를 전 섹션에 적용 | 스크롤 감각이 어긋나고 성능이 떨어짐 | 한 섹션에만, 이동량 작게 (10–20px) |
| E-08 | 히어로에 Spline / 3D 씬을 이유 없이 삽입 | JS 런타임 800KB–2MB. 모바일 4G에서 Core Web Vitals 실패 | 3D는 브리프가 요구할 때만. 필요하면 정적 렌더 이미지 + 미세 모션으로 대체 |
| E-09 | 로딩 화면 / 프리로더 카운터 | 실제로 로딩할 게 없는데 대기를 만듦 | 삭제. 진짜 무거우면 스켈레톤 |
F. 카피 · 문장 시그니처
AI 티는 시각보다 문장에서 먼저 난다. 이 섹션이 가장 치명적이다.
| ID | 시그니처 | 왜 문제인가 | 대신 |
|---|---|---|---|
| F-01 | It's not X, it's Y / 단순한 X가 아니라 Y입니다 구문 |
ChatGPT의 최대 지문. 400단어 글에 3번씩 나옴. 독자가 즉시 이탈 | 그냥 Y를 말해라. 대조가 필요하면 구체적 비교 대상을 실명으로 |
| F-02 | Streamline / Empower / Supercharge / Unlock / Leverage / Seamless / Elevate |
아무 제품에나 붙는 동사. 정보량 0 | 제품이 실제로 하는 동작 동사 (정산한다, 병합한다, 4일을 6시간으로 줄인다) |
| F-03 | world-class / cutting-edge / enterprise-grade / best-in-class / state-of-the-art |
자기 평가 형용사는 증거가 아니다 | 증거로 대체 — 인증명, 벤치마크 수치, 고객사 실명 |
| F-04 | Build the future of X / Your all-in-one platform / Scale without limits 류 히어로 헤드라인 |
경쟁사 이름으로 바꿔도 성립함 | 경쟁사 치환 테스트를 통과하는 문장으로. 예: Stripe의 "Financial infrastructure for the internet" |
| F-05 | em-dash(—) 과다 사용, 특히 한 문단에 2회 이상 | AI 문장 리듬의 대표 지문 | 마침표로 끊거나 쉼표로. 한국어에서는 특히 부자연스럽다 |
| F-06 | 스타카토 3연타 (No fluff. No filler. No BS. / 빠르게. 정확하게. 간단하게.) |
리듬으로 내용 없음을 감추는 장치 | 한 문장으로 구체적으로 |
| F-07 | In today's fast-paced digital landscape... 로 시작하는 도입 |
아무 말도 하지 않는 문단 | 첫 문장부터 본론. 도입 문단 삭제 |
| F-08 | 헤지 표현 (may help you, can potentially, ~할 수 있습니다) |
확신 없음이 곧 신뢰 없음 | 단정하거나, 조건을 명시하라 (10명 이하 팀에서는) |
| F-09 | 레이블·서브레이블·헬퍼텍스트가 같은 말을 3번 (이메일 / 이메일 주소 / 이메일 주소를 입력하세요) |
화면 소음 | 하나만 남긴다 |
| F-10 | CTA가 Get Started / Learn More / 시작하기 |
무엇이 시작되는지 알 수 없음 | 결과를 말하는 CTA (무료로 30일 써보기, 가격표 보기, 데모 예약) |
| F-11 | 숫자가 전부 어림수 (10,000+ users, 99.9% uptime, 50% faster) |
검증 불가한 숫자는 없느니만 못함 | 정확한 수치와 측정 조건 (평균 응답 240ms, 2026년 7월 p95 기준) |
| F-12 | 모든 헤딩이 명사구로 통일 (Powerful Features, Simple Pricing) |
헤딩이 정보를 전달하지 않음 | 헤딩에 주장을 담아라 (엑셀 없이 정산이 끝난다) |
| F-13 | ~를 통해, ~에 대한, ~에 있어서 번역투 (한국어) |
영문 AI 카피를 기계 번역한 티 | 능동 한국어로. ~로, ~의, ~에서 |
| F-14 | 이모지로 시작하는 불릿 리스트 (✅ 빠른 속도) |
정보 위계를 이모지로 대체한 것 | 일반 불릿 또는 없애고 문장으로 |
F 섹션 통합 테스트 — 경쟁사 치환: 카피에서 제품·회사 이름을 경쟁사 이름으로 바꿔 읽는다. 여전히 자연스러우면 그 카피는 아무것도 말하지 않은 것이다.
G. 이미지 · 아이콘 · 일러스트 시그니처
| ID | 시그니처 | 왜 문제인가 | 대신 |
|---|---|---|---|
| G-01 | 랩탑 앞에서 웃는 다국적 팀 스톡 사진 (밝은 오픈 오피스) | 방문자는 스톡을 알아보고, 신뢰도가 실제로 하락한다는 실측이 있음 | 실제 팀 사진, 실제 작업 공간, 또는 사진 없이 타입으로 |
| G-02 | 떠 있는 3D 추상 블롭 / 기하 도형 | 콘텐츠 부재를 덮는 장식. 브랜드와 무관 | 제품 실제 화면, 데이터 시각화, 또는 여백 |
| G-03 | AI 생성 일러스트 — "약간 지나치게 매끄럽고 지나치게 대칭인" | 손 개수·글자 깨짐 같은 결함이 아니어도 톤에서 티가 남 | 일관된 일러스트 시스템을 직접 정의하거나, 일러스트를 아예 쓰지 않는다 |
| G-04 | 일반 SVG 도형을 조합한 히어로 그래픽 | 플레이스홀더 클립아트처럼 읽힘 | 제품 UI 조각을 실제로 렌더해 보여줘라 |
| G-05 | 손으로 그린 듯한 조악한 SVG 마스코트 | 의도된 러프함이 아니라 그냥 못 그린 것으로 읽힘 | 마스코트를 쓸 거면 제대로 만들거나 쓰지 마라 |
| G-06 | 아이콘 세트가 섞임 — 라인·필·이모지가 한 화면에 | 시스템이 없다는 증거 | 세트 하나 고정. 굵기·크기·광학 정렬 통일 |
| G-07 | src가 비어 있거나 깨진 이미지 태그 |
생성 코드가 검증 없이 배포된 흔적 | 배포 전 이미지 로드 전수 확인 |
| G-08 | 모든 이미지가 같은 종횡비의 둥근 사각형 | 그리드를 이미지에 강제한 것 | 콘텐츠에 맞는 비율. 풀블리드 1장을 섞으면 리듬이 생긴다 |
| G-09 | 반복 그라디언트 줄무늬를 표면 장식으로 | 의미 없는 텍스처 | 실제 질감(필름 그레인, 종이 스캔) 또는 무지 |
H. 품질 · 접근성 결함 (AI 생성물에서 특히 잦음)
| ID | 시그니처 | 왜 문제인가 | 대신 |
|---|---|---|---|
| H-01 | 헤딩 레벨 건너뜀 (h1 → h3) | 문서 아웃라인 파손. 스크린리더·SEO 영향 | 순차적 헤딩. 크기는 CSS로 조절 |
| H-02 | 본문 대비 WCAG AA 미달 (본문 4.5:1, 대형 3:1 미만) | 기능적 결함 | 대비 검증을 빌드에 포함. APCA Lc ≥ 75 |
| H-03 | 포커스 링 제거 (outline: none만 있고 대체 없음) |
키보드 사용자가 조작 불가 | :focus-visible에 명확한 링. 브랜드 색으로 예쁘게 만들어도 된다 |
| H-04 | p-2 미만의 좁은 패딩으로 텍스트가 컨테이너에 붙음 |
조악함의 직접 원인 | 최소 12–16px 내부 패딩 |
| H-05 | 잡히지 않은 스크립트 에러로 인터랙션 파손 | 검증 없이 생성·배포된 흔적 | 콘솔 클린 상태를 배포 조건으로 |
| H-06 | 터치 타깃 44×44px 미만 | 모바일에서 못 누름 | 최소 44px, 간격 8px 이상 |
| H-07 | 폼에 label 없이 placeholder만 |
입력 시작하면 라벨이 사라짐. 접근성 실패 | 항상 label. placeholder는 예시용 |
| H-08 | alt 속성 없거나 image, photo 같은 무의미한 값 |
스크린리더·SEO 실패 | 이미지가 전달하는 정보를 문장으로. 장식이면 alt="" |
| H-09 | 다크/라이트 전환 시 일부 컴포넌트만 대응 | 토큰 없이 하드코딩했다는 증거 | 색은 전부 토큰 경유. 하드코딩 hex 금지 |
| H-10 | 모바일에서 가로 스크롤 발생 | 폭 계산 없이 고정값을 쓴 결과 | max-width: 100%, overflow-x: hidden은 증상 은폐이므로 원인을 찾아라 |
| H-11 | 폰트 로딩 시 FOIT (텍스트가 안 보이는 구간) | 체감 성능 하락 | font-display: swap + 서브셋 + preload |
I. 코드 지문 (grep으로 잡을 수 있는 것)
배포 전 아래 문자열을 검색해서 걸리면 재검토한다.
# 색
indigo-|violet-|purple-|fuchsia-
#6366f1|#818cf8|#a855f7|#8b5cf6|#c4b5fd|#a78bfa|#22d3ee
from-purple|to-blue-|from-violet|via-purple
bg-slate-900|bg-gray-900|text-gray-400
#ffffff|#000000 (배경/텍스트로 사용된 경우)
# 컴포넌트 기본값
rounded-2xl|rounded-3xl
shadow-lg|shadow-xl|shadow-2xl
border-l-4|border-t-4
backdrop-blur
# 타이포
font-family:.*Inter
Space Grotesk|Instrument Serif|Geist
uppercase tracking-wide(r|st)?
# 카피
Get Started|Learn More|Empower|Streamline|Supercharge|Seamless
world-class|cutting-edge|enterprise-grade|best-in-class
It's not .* it's
— (한 문단에 2개 이상)
# 이모지 아이콘 (JSX/HTML 텍스트 노드 안)
🚀|⚡|✨|🎯|🔥|💡|✅
J. 자가 채점표
작업 완료 전 이 표를 채워라.
| 카테고리 | 걸린 항목 ID | 조치 |
|---|---|---|
| A 컬러 | ||
| B 타이포 | ||
| C 레이아웃 | ||
| D 컴포넌트 | ||
| E 모션 | ||
| F 카피 | ||
| G 이미지 | ||
| H 품질 |
판정 기준
| 걸린 개수 | 판정 |
|---|---|
| 0–1 | 통과 |
| 2–3 | 해당 항목만 수정 후 재검 |
| 4 이상 | 폐기하고 02번 문서 §6 절차부터 다시 (Krebs 기준 "heavy slop") |
K. 한 줄 요약
AI 티는 못 만들어서 나는 게 아니라 결정을 안 해서 난다. 보라 그라디언트, Inter, 3열 아이콘 카드,
rounded-2xl shadow-lg, "Get Started"는 전부 미결정의 기본값이다. 각 축마다 하나씩 의도적으로 다른 값을 고르고, 그 이유를 한 문장으로 말할 수 있으면 지문은 사라진다.