Taste Skill, 무엇이고 왜 쓰는가 - AI 티가 나지 않는 프런트엔드 원칙
중년개발자
@loxo
15일 전
Taste Skill: 왜 쓰고, 어떻게 시작하는가
1. Taste Skill은 왜 좋은가
Taste Skill은 디자인 라이브러리가 아니다. React나 Tailwind처럼 앱에 기능을 추가하는 패키지가 아니라, AI 코딩 에이전트에게 “이 프로젝트의 화면을 어떤 순서와 기준으로 설계할지” 알려주는 디자인 지침이다.
AI에게 단순히 “세련된 랜딩 페이지를 만들어줘”라고 하면, 다음처럼 익숙하고 뻔한 결과로 흐르기 쉽다.
- 보라색 또는 메시 그라데이션
- 큰 가운데 제목
- 동일한 기능 카드 3개
- 가짜 대시보드 화면
- 과한 글로우와 스크롤 효과
Taste는 이런 AI 기본값을 줄이고 아래 순서로 일하도록 유도한다.
제품과 사용자 이해
↓
디자인 방향 선언
↓
레이아웃 · 움직임 · 정보량 결정
↓
구현
↓
모바일 · 접근성 · 반복 패턴 점검즉, Taste의 핵심 가치는 “더 화려하게 만들기”가 아니라, 제품에 맞지 않는 디자인 결정을 초기에 막는 것이다.
Taste는 다음에 특히 적합하다.
- 신규 랜딩 페이지
- 브랜드 또는 제품 소개 사이트
- 포트폴리오
- 기존 마케팅 사이트 리디자인
반대로 관리자 대시보드, 데이터 테이블, 복잡한 업무용 SaaS, 여러 단계의 폼은 Taste만으로 시작하지 않는 편이 좋다. 이 경우에는 Material, Fluent, Carbon, shadcn 같은 정식 디자인 시스템을 먼저 정하고, Taste는 마케팅 페이지에 보조적으로 적용한다.
공식 문서: Taste Skill Docs
2. 설치는 무엇을 하는 것인가
Taste를 설치한다는 것은 앱에 코드를 추가하는 것이 아니다.
React 설치
↓
앱 실행에 필요한 라이브러리 추가
Taste 설치
↓
AI가 읽을 디자인 지침인 SKILL.md 추가Taste의 기본 skill은 design-taste-frontend이며, 현재 v2 experimental이다. 처음에는 전체 bundle보다 이 skill 하나만 설치하는 편이 가장 이해하기 쉽고 충돌도 적다.
npx skills add https://github.com/Leonxlnx/taste-skill \
--skill "design-taste-frontend"이 명령은 현재 프로젝트에 맞는 agent skills 경로에 Taste 지침을 추가한다.
어떤 Taste Skill을 써야 하나
처음에는 design-taste-frontend 하나만 설치하세요. 필요가 분명할 때만 보조 skill을 하나 추가합니다. 비슷한 디자인 규칙 skill을 여러 개 동시에 적용하면 지침이 충돌할 수 있습니다.
| 상황 | 설치할 skill | 용도 |
|---|---|---|
| 신규 랜딩·브랜드·포트폴리오 사이트 | design-taste-frontend | 기본 추천. 디자인 방향, 3 Dials, 레이아웃 다양성, anti-slop 점검 |
| 기존 사이트 개선·리디자인 | redesign-existing-projects | 현재 UI를 감사한 뒤 간격, 위계, 스타일을 안전하게 개선 |
| Codex/GPT 결과가 계속 평범할 때 | gpt-taste | GPT·Codex용으로 더 강한 레이아웃·모션·anti-slop 규칙 적용 |
| 이미지·스크린샷을 최대한 비슷하게 구현 | image-to-code | 이미지 분석 후 프런트엔드 코드 구현 |
| 웹사이트 시안 이미지를 먼저 만들기 | imagegen-frontend-web | 코드 없이 웹 레퍼런스 프레임 생성 |
| 모바일 앱 화면 시안을 먼저 만들기 | imagegen-frontend-mobile | 코드 없이 모바일 화면·플로우 이미지 생성 |
| 브랜드 무드보드부터 만들기 | brandkit | 로고 방향, 색상, 타이포그래피, 브랜드 적용 예시 생성 |
| 차분하고 고급스러운 UI | high-end-visual-design | 낮은 대비, 넉넉한 여백, 부드러운 모션 |
| Notion·Linear 같은 절제된 UI | minimalist-ui | 에디토리얼 구조, 제한된 색상, 명확한 정보 위계 |
| 강한 스위스·기계적 스타일 | industrial-brutalist-ui | 날카로운 대비, 구조적 그리드, 실험적 레이아웃 |
| AI가 구현을 자주 생략할 때 | full-output-enforcement | placeholder나 “나머지는 생략” 같은 불완전한 결과 방지 |
| Google Stitch 흐름을 쓸 때 | stitch-design-taste | Stitch 디자인 결과를 디자인 문서와 구현 흐름으로 연결 |
설치 형식은 동일합니다.
npx skills add https://github.com/Leonxlnx/taste-skill \
--skill "<skill 이름>" \
--agent <antigravity | claude-code | codex>추천 조합은 다음 정도면 충분합니다.
- 새 사이트:
design-taste-frontend - 기존 사이트 개선:
design-taste-frontend또는redesign-existing-projects - 이미지로 디자인 확정 후 구현:
imagegen-frontend-web→image-to-code - Codex 결과가 반복적으로 밋밋할 때:
gpt-taste를design-taste-frontend대신 별도 비교
design-taste-frontend, gpt-taste, minimalist-ui, high-end-visual-design을 한꺼번에 모두 적용하는 것은 권하지 않습니다. 각 skill의 디자인 판단이 겹쳐 오히려 결과가 불안정해질 수 있습니다.
3. Antigravity, Claude Code, Codex에서 설치하기
한 프로젝트에서 사용하는 AI 에이전트에만 설치하면 된다. 세 도구를 모두 쓴다면 각각 설치할 수 있다.
Antigravity
npx skills add https://github.com/Leonxlnx/taste-skill \
--skill "design-taste-frontend" \
--agent antigravity \
--copyAntigravity는 프로젝트의 .agents/skills/ 경로를 사용한다. --copy는 심볼릭 링크 인식 문제를 피하고 싶을 때 유용하다.
Claude Code
npx skills add https://github.com/Leonxlnx/taste-skill \
--skill "design-taste-frontend" \
--agent claude-codeClaude Code는 프로젝트의 .claude/skills/에 skill을 인식한다. 설치 후 새 세션에서 다음처럼 요청하면 된다.
이 프로젝트에서 design-taste-frontend skill을 적용해줘.
아직 코드는 작성하지 말고 디자인 방향부터 제안해줘.Codex
npx skills add https://github.com/Leonxlnx/taste-skill \
--skill "design-taste-frontend" \
--agent codexCodex에서도 프로젝트 단위 skill으로 적용하는 것이 좋다. 설치 뒤 새 task에서 아래처럼 명시한다.
이 프로젝트의 design-taste-frontend skill을 디자인 기준으로 적용해줘.
코드를 작성하기 전에
Brief → Design Read → 3 Dials → 레이아웃
순서로 판단해줘.
디자인 판단이 끝날 때까지 UI 코드를 작성하지 마.모든 프로젝트에서 개인 기본값으로 쓰고 싶다면 명령에 -g를 추가할 수 있다. 다만 브랜드와 제품 성격이 다른 프로젝트까지 같은 규칙이 적용될 수 있으므로, 처음에는 프로젝트 설치를 추천한다.
에이전트별 경로와 설치 옵션은 Skills CLI 문서, Claude Code의 skill 동작은 Claude Code Skills 문서를 참고한다.
4. 세 가지 핵심 값
Taste는 디자인 방향을 세 개의 다이얼로 정리한다. 숫자는 품질 점수가 아니라 AI에게 디자인의 자유도, 움직임, 정보량을 전달하는 설정이다.
| 값 | 의미 | 낮을 때 | 높을 때 |
|---|---|---|---|
DESIGN_VARIANCE | 레이아웃과 시각 구성의 실험 정도 | 안정적, 대칭적, 익숙한 구성 | 비대칭, 큰 여백 변화, 다양한 구성 |
MOTION_INTENSITY | 애니메이션과 상호작용의 강도 | 정적, hover와 클릭 피드백 중심 | 스크롤 연출, 전환, 시차 효과 |
VISUAL_DENSITY | 한 화면 안의 정보량 | 여백이 많고 메시지가 적음 | 정보가 촘촘하고 빠르게 훑기 좋음 |
신뢰가 중요한 B2B 서비스의 시작점은 다음처럼 잡을 수 있다.
DESIGN_VARIANCE: 4
MOTION_INTENSITY: 3
VISUAL_DENSITY: 5이는 낯설지 않은 레이아웃, 절제된 움직임, 충분한 제품 설명과 신뢰 근거를 뜻한다.
프리미엄 소비재 브랜드는 다음처럼 시작할 수 있다.
DESIGN_VARIANCE: 7
MOTION_INTENSITY: 5
VISUAL_DENSITY: 3이는 이미지와 여백의 비중을 높이고, 구성을 조금 더 개성 있게 하되 과한 연출은 피한다는 뜻이다.
숫자가 높을수록 좋은 것은 아니다. 금융, 공공, 접근성 중심 서비스는 낮은 Variance와 Motion이 더 적절할 수 있다.
5. 신규 프로젝트는 이렇게 시작한다
처음부터 “코드를 만들어줘”라고 요청하지 않는다. 먼저 디자인 방향만 확정한다.
준비할 정보
- 페이지 목적: 가입, 구매, 문의, 탐색 중 무엇인가
- 핵심 사용자: 누가 어떤 상황에서 보는가
- 제품 한 줄 설명: 무엇을 해결하는가
- 브랜드 자산: 로고, 색상, 폰트, 사진, 제품 화면
- 참고 사이트: 무엇을 참고할지와 그 이유
- 피할 것: 카드 남발, 너무 화려한 효과, 특정 색상 등
첫 프롬프트
이 프로젝트에 design-taste-frontend skill을 적용해줘.
페이지 목적: <예: 데모 신청 전환>
핵심 사용자: <예: 10-50명 규모 스타트업의 운영 리더>
제품: <한 줄 설명>
브랜드 자산: <로고, 색상, 제품 스크린샷, 사진>
참고 사이트: <URL과 참고할 이유>
피할 것: AI 보라색 그라데이션, 카드 3개 반복, 가짜 대시보드, 과한 애니메이션
아직 코드를 수정하지 마.
다음만 작성하고 멈춰줘.
1. 한 줄짜리 Design Read
2. DESIGN_VARIANCE, MOTION_INTENSITY, VISUAL_DENSITY 값과 이유
3. 색상, 폰트, 여백, 반경, 그림자 원칙
4. 필요한 섹션과 각 섹션의 역할
5. 실제 이미지 또는 제품 화면 전략승인 후 구현
디자인 방향이 맞으면 다음처럼 이어서 요청한다.
방향을 승인한다. 구현을 진행해줘.
모바일에서는 복잡한 비대칭 레이아웃을 한 열로 자연스럽게 정리해줘.
가짜 UI 대신 실제 제품 화면, 실제 데이터, 실제 동작하는 컴포넌트를 사용해줘.
완료 후 모바일, 키보드 포커스, 로딩·오류 상태, reduced motion을 점검해줘.이 흐름의 핵심은 “설계 → 승인 → 구현”이다. AI가 곧바로 JSX나 HTML부터 작성하는 것을 막으면 디자인 수정도 훨씬 구체적으로 할 수 있다.
6. 기존 디자인을 개선할 때
기존 사이트는 바로 새 UI를 덮어씌우면 안 된다. 먼저 무엇을 유지하고 무엇을 바꿀지 감사해야 한다.
Taste v2 자체에도 리디자인 감사 절차가 있다. 기존 프로젝트 개선만 집중해서 할 경우에는 별도 skill인 redesign-existing-projects를 추가로 사용할 수 있다.
npx skills add https://github.com/Leonxlnx/taste-skill \
--skill "redesign-existing-projects" \
--agent <현재 사용하는 에이전트>기존 사이트 감사 프롬프트
이 프로젝트를 Taste 기준으로 개선하고 싶어.
유지할 것: <브랜드 색상, 로고, 핵심 문구, URL, 네비게이션, 폼>
개선할 것: <예: 모바일 여백, 약한 제목 위계, 오래된 카드 UI>
바꾸면 안 되는 것: <SEO URL, anchor, 분석 이벤트, form field name, 법적 문구>
아직 코드를 수정하지 마.
다음만 분석해줘.
1. 현재 브랜드 토큰과 디자인 구조
2. 유지할 요소
3. 제거할 문제 패턴
4. 모바일, 접근성, 성능, SEO 위험
5. 개선 우선순위와 예상 영향대부분의 경우 안전한 개선 순서는 아래와 같다.
- 타이포그래피
- 여백과 리듬
- 색상 정리
- 버튼, focus, loading 등 인터랙션
- 히어로와 핵심 섹션 구조
URL, 네비게이션 이름, 폼 필드, 로고, 법적 문구는 명시적 승인 없이 바꾸지 않도록 요청한다.
7. AI 티가 나지 않는 프런트엔드 원칙
- 모든 섹션을 카드로 만들지 않는다.
- 동일한 레이아웃을 연속으로 반복하지 않는다.
- 강조색은 하나를 중심으로 사용한다.
- 가짜 대시보드나 가짜 제품 화면을 만들지 않는다.
- 실제 이미지, 실제 스크린샷, 실제 동작하는 컴포넌트를 쓴다.
- 한글 콘텐츠와 실제 긴 문장으로 줄바꿈을 검증한다.
- 애니메이션은 사용자의 이해를 돕는 경우에만 쓴다.
- 히어로는 핵심 메시지 하나와 CTA 하나를 중심으로 구성한다.
- 모바일, 키보드 탐색, 색상 대비, 이미지 실패 상태를 마지막에 확인한다.
Taste는 디자인을 대신하는 도구가 아니다. AI가 잘못된 기본값으로 빠지지 않게 만들고, 사람과 AI가 디자인 결정을 같은 언어로 하도록 돕는 도구다.