Back to Blog
[TUTORIAL]

taste-skill 완전 정리: AI가 만든 웹사이트가 다 똑같은 이유와 해결책

4 min read1 views

taste-skill 완전 정리: AI가 만든 웹사이트가 다 똑같은 이유와 해결책

AI에게 "홈페이지 만들어줘"라고 하면 이상하게 결과물이 다 비슷합니다. 보라색 그라데이션, 가운데 정렬된 히어로 영역, 똑같은 3개짜리 기능 카드, Inter 폰트에 회색 배경. 개발자들은 이 뻔한 결과물을 'slop(슬롭)'이라고 부릅니다. AI가 학습한 데이터의 평균값으로 수렴한 것이죠.

이 문제를 정면으로 겨냥한 오픈소스가 있습니다. taste-skill입니다. 이름 그대로 "AI에게 취향(taste)을 주는" 스킬 모음으로, 2026년 2월 19일 공개된 뒤 2026년 7월 8일 기준 GitHub 별 60,187개, 포크 4,088개를 기록하며 이 분야에서 가장 많이 쓰이는 프로젝트 중 하나가 됐습니다.

taste-skill이란 무엇인가

taste-skill은 AI 코딩 에이전트(Claude Code, Codex, Cursor)가 만드는 프론트엔드가 템플릿 같지 않도록 강제하는 안티-슬롭 프론트엔드 Agent Skill 모음입니다. MIT 라이선스로 공개돼 있고, 공식 홈페이지는 tasteskill.dev입니다.

핵심 형식은 SKILL.md입니다. 에이전트가 자동으로 불러오는 이식 가능한 지시문 파일인데, 특정 프레임워크에 묶이지 않습니다. 디자인 의도를 겨냥하지 특정 API를 겨냥하지 않기 때문에 React, Vue, Svelte 어디서든 동작합니다.

설치는 한 줄입니다.

npx skills add https://github.com/Leonxlnx/taste-skill

Vercel Labs의 agent-skills CLI가 저장소의 skills/ 폴더를 스캔하는 방식입니다. 단일 스킬만 쓰려면 --skill "design-taste-frontend"처럼 설치 이름을 지정하면 됩니다.

핵심은 3개의 다이얼

taste-skill은 브리프(요구사항)를 읽은 뒤 1부터 10까지의 다이얼 3개로 결과물의 성격을 조율합니다. 기본값은 8, 6, 4입니다.

  • DESIGN_VARIANCE (기본 8): 레이아웃 실험도. 낮으면 대칭적이고 깔끔하게, 높으면 비대칭적이고 실험적으로.
  • MOTION_INTENSITY (기본 6): 애니메이션 깊이. 낮으면 hover 정도, 높으면 스크롤 기반 시네마틱 모션.
  • VISUAL_DENSITY (기본 4): 화면당 정보량. 낮으면 미술관처럼 여백이 많게, 높으면 대시보드처럼 빽빽하게.

사용자가 파일을 직접 편집하는 게 아니라 대화로 조정합니다. "미니멀하고 Linear 스타일로"라고 하면 5-6 / 3-4 / 2-3 정도로 낮아지고, "에이전시처럼 화려하게"라고 하면 9-10 / 8-10으로 올라갑니다.

v2로 대대적 재작성

2026년 현재 기본 스킬인 design-taste-frontend는 v2 실험판입니다. v1의 근본적 재작성으로, 다이얼 철학은 유지하되 구조와 하드룰, 구체적인 구현 패턴을 대거 추가했습니다. 정확한 이전 동작이 필요하면 taste-skill-v1로 설치할 수 있습니다.

v2의 대표적인 신규 개념이 **브리프 추론(Brief Inference)**입니다. 코드를 한 줄이라도 쓰기 전에 "이건 어떤 페이지 종류이고, 청중은 누구이고, 어떤 무드인지"를 읽고 한 줄로 "Design Read"를 선언합니다. 예를 들면 "B2B SaaS 랜딩, 기술 구매자 대상, Linear 스타일 미니멀 언어로" 같은 식입니다. AI가 요구사항을 제대로 읽지 않고 자기 디폴트 취향으로 점프하는 걸 막는 장치입니다.

'AI가 만든 티'를 금지 목록으로 박다

taste-skill이 인기를 끈 진짜 이유는 "AI가 만든 티(AI Tell)"를 콕 집어 금지하기 때문입니다.

가장 유명한 규칙이 엠대시(—) 완전 금지입니다. 헤드라인, 본문, 인용, 버튼, alt 텍스트 어디에도 엠대시를 쓸 수 없습니다. 하이픈(-)을 쓰거나 문장을 재구성해야 합니다. v2 이전 테스트에서 가장 많이 위반된 스타일 문제였다고 합니다.

그 외에도 다음이 금지됩니다.

  • THE LILA RULE: "AI 퍼플/블루 글로우" 그라데이션 금지. 중립 베이스(Zinc, Slate, Stone)에 고대비 단일 강조색을 씁니다.
  • 세리프 폰트 남발 금지: "창의적 브리프 = 세리프"라는 발상이 실전에서 가장 많이 검출되는 AI 티입니다. Fraunces와 Instrument_Serif는 디폴트로 명시 금지.
  • 프리미엄 소비재 팔레트 금지: 베이지/크림에 브라스/점토색 조합(모든 AI가 요리기구나 공예 브리프에 쓰는 바로 그 팔레트)을 구체적인 hex 코드까지 지정해 금지.
  • 가짜 UI 금지: div로 그린 가짜 대시보드나 가짜 터미널.
  • 아이브로 절제: 섹션 3개당 작은 대문자 라벨(아이브로)은 최대 1개. 프로덕션 테스트에서 1위로 많이 위반된 규칙입니다.

공식 디자인 시스템을 존중한다

v2는 브리프가 Material, Fluent, Carbon, Polaris, Atlassian, Primer, GOV.UK, USWDS 같은 시스템으로 읽히면 직접 CSS를 흉내 내지 말고 공식 패키지를 설치해 쓰라고 요구합니다. 반대로 글래스모피즘, bento, 브루탈리즘처럼 공식 패키지가 없는 트렌드는 웹 표준으로 만들되 "차용한 영감"임을 코드 주석에 솔직히 표기하게 합니다.

스택 기본값은 Tailwind v4, 애니메이션 라이브러리는 Motion(구 Framer Motion)입니다. GSAP 스크롤 애니메이션은 Sticky-Stack, Horizontal-Pan 두 가지 정본 코드 스켈레톤을 제공합니다. 다만 "모션은 동기가 있어야 한다"는 원칙이 있어서 "멋있어서"는 애니메이션 추가 사유가 되지 않습니다.

QJC 관점: 취향을 규칙으로

taste-skill이 던지는 메시지는 단순합니다. AI 결과물이 뻔해 보인다면 그건 모델 탓이 아니라 '취향 규칙'이 없어서라는 것입니다. AI는 코드든 글이든 가장 무난한 평균으로 수렴하기 때문에, 취향을 금지 목록과 대안으로 명문화해야 결과물이 평범해지지 않습니다.

이 문제의식은 QJC가 한국어 글쓰기 품질과 웹 카피에서 강제하는 원칙과 정확히 같습니다. 번역투와 AI 관용구를 생성 단계에서 회피하고, 밋밋한 평서형 카피와 밀도 초과를 금지하는 것도 결국 "AI의 평균 수렴"을 막는 같은 싸움입니다.

자주 묻는 질문

taste-skill은 다른 AI 디자인 스킬과 뭐가 다른가요? 여러 전문 변형(미니멀, 브루탈리스트, 소프트 등)과 조절 가능한 다이얼, 그리고 별도 리서치로 뒷받침된 안티-반복 규칙을 갖췄습니다. 모든 주요 코딩 에이전트에서 프레임워크 무관하게 동작합니다.

React, Vue, Svelte에서 다 되나요? 네. 규칙이 특정 프레임워크 API가 아니라 디자인 의도를 겨냥하기 때문입니다.

SKILL.md가 정확히 뭔가요? 에이전트가 자동으로 불러오는 이식 가능한 지시문 파일입니다. npx skills add로 설치하거나 저장소에 복사하거나 대화창에 붙여넣어 쓸 수 있습니다.

무료인가요? 네. MIT 라이선스 오픈소스입니다. 원하면 GitHub Sponsors로 개발자를 후원할 수 있습니다.

참고자료