2026-10-29 소스 재검토 · v2.1.5

Taste Skill — 방향 선택과
브라우저 검사를 연결하는 디자인 스킬

에이전트 스킬

빠른 판단

무엇: 참고 데이터에서 디자인 방향을 선택하고 실제 이미지·여러 화면 폭의 브라우저 검사·스크린샷 검토로 구현을 다듬는 프론트엔드 에이전트 스킬
이럴 때: 새 웹 화면의 시각 방향을 구체화하거나 기존 화면·대시보드를 고칠 때, 구현 전후 캡처와 측정 규칙을 함께 남겨 결과를 검토할 때
도입 전 확인: 현재 한 스킬만 제공하며 classic·이미지 생성 스킬은 별도 저장소로 이동했다. 전체 흐름은 Node22+와 Chrome 계열 브라우저가 필요하고 이미지 검색에는 네트워크가 필요하다.

1. 프로젝트 한줄 요약

Taste Skill은 에이전트에게 디자인 방향을 고르게 하고 실제 이미지와 브라우저 검사로 결과를 확인시키는 프론트엔드 스킬이다. 현재 저장소는 design-taste-frontend 한 스킬을 제공한다. 과거 13개 스킬·다이얼 중심 구조와 구분해야 한다. 검토 소스는 12af471f627f866411b4bd785b19646d3672784c, 변경 이력의 최신 항목은 2.1.5다.

2. 왜 주목받는가

방법론·참고 데이터·선택 도구·기계 검사·스크린샷 검토를 연결한다. README는 247개 큐레이션 사이트 연구를 설명하지만 이 수치를 생성 품질의 독립 평가로 읽지는 않는다. 랜딩 페이지와 대시보드·설정·관리 화면의 경로를 나눠 콘텐츠·데이터·오류 상태에 맞게 판단한다.

3. 기술 스택 전체 지도

층	구성
지침	SKILL.md와 references/의 레이아웃·색·타입·모션·앱 화면 문서
데이터	library/의 방향·팔레트·폰트·앱·사이트 JSON
도구	Node 내장 모듈 기반 draw.mjs·inspect.mjs·assets.mjs·lint.mjs
브라우저	Chrome·Edge·Chromium을 CDP로 제어
자산	기본·앱 CSS/JS·차트·스크롤 장면 런타임

출력 프레임워크는 고정되지 않는다. README는 React·Vue·Svelte·일반 HTML 지원을 안내한다. 이 저장소 자체가 React 서버인 것은 아니다.

4. 아키텍처 심화 분석

요청·실제 자료 → 방향 후보(draw) → 에이전트 선택
                 → 이미지 출처·구현 → 브라우저 검사(inspect)
                 → 발견 사항·스크린샷 → 눈으로 검토·수정

draw.mjs는 분야·톤·보유 자산·기존 브랜드 조건으로 후보를 제한하고 최근 선택을 기억한다. --options 3은 파일을 쓰지 않고 세 후보를 제시하고, --app은 앱용 선택 모듈로 분기한다.

inspect.mjs는 기본 1440·768·390px에서 렌더한다. FAIL이 없으면 종료 코드 0, 있으면 1이다. 로컬 HTML은 임시 HTTP 서버로 제공한다. 기계 규칙 통과를 디자인의 의미·데이터 정확성·완전한 접근성 검증과 같게 볼 수는 없다.

5. 디렉토리 구조 해부

skills/taste-skill/
├── SKILL.md
├── references/  화면·모션·타입·이미지·비평
├── library/     방향·팔레트·앱·사이트 JSON
├── scripts/     draw, inspect, assets, lint, scenes
│   └── lib/     CDP·측정·규칙·캡처 파일 이름
└── assets/      기본/앱 CSS·차트·스크롤 장면
 tests/          프런트매터·도구·회귀 검사

classic 스킬은 Leonxlnx/taste-skill-classics, 이미지 생성 스킬은 Leonxlnx/imagegen-skills로 이동했다. 과거 skill.sh·skills/llms.txt는 제거됐다. 현재 경로를 기준으로 설치 대상을 고른다.

6. 학습 포인트

선택과 판단 분리: 스크립트가 조건에 맞는 후보를 제시하고 에이전트가 내용과 연결한다. 난수 선택 자체가 품질 평가는 아니다.

검사 산출물: v2.1.5는 같은 tablet 분류의 1024·768px 캡처를 덮어쓰지 않도록 파일명에 폭을 포함했다. 차트·분할 제목의 사용자 텍스트도 이스케이프하도록 수정했다고 변경 이력이 기록한다.

자원 소유권: v2.1.4의 임시 Chrome 프로필 정리는 소유 머신·프로세스 종료를 확인한다. 프로필 나이만으로 다른 실행의 자원을 지우는 오류를 피하기 위한 계약이다.

assets/base.js는 화면 진입 요소에 한 번만 표시 클래스를 붙이고 관찰을 해제한다. IntersectionObserver가 없으면 내용을 바로 표시하며, 관찰이 지연되는 경우를 위한 표시 보완도 있다. 별도의 장 구분 관찰자는 고정 헤더의 잉크 색만 바꾸므로 페이지 전체 배경을 관찰자로 재도색하는 구조와 구별된다.

7. 하드웨어 / 시스템 요구사항

용도	조건
전체 흐름	Node 22+와 설치된 Chrome·Edge·Chromium
방향 선택만	draw.mjs 헤더는 Node18+로 적지만 전체 최소 조건과 다름
이미지 검색	네트워크 필요. 검색 도구 자체는 API 키 불필요
코드 생성	파일·브라우저 도구를 갖춘 별도 코딩 에이전트

최소 RAM·GPU 수치는 명시되지 않았다. README의 30~45분·수십만 토큰은 작성자의 전형적 비용 설명이며 완료 시간 보장이 아니다. 최종 검사는 개발 서버 대신 배포용 빌드 화면에서 하도록 지침이 보완됐다.

8. 직접 해볼 수 있는 실습 과제

입문: Moved skills와 현재 트리를 대조해 제거 경로·새 저장소를 정리한다.
중급: draw.mjs의 분야·톤·브랜드 유지 조건이 후보를 어떻게 제한하는지 표로 적는다.
중급: 개인 HTML을 세 폭에서 검토할 계획을 만들고 제목·여백·데이터·오류 상태의 완료 기준을 적는다.
심화: inspection-files.mjs에서 같은 분류에 속한 두 폭의 파일명이 어떻게 구별되는지 읽는다.
심화: 차트 라벨에 태그 모양 문자열을 넣는 독립 예제를 설계해 이스케이프 경계를 설명한다.

# 문서의 명령 형식 예시 — 이 검토에서 실행하지 않음
node skills/taste-skill/scripts/inspect.mjs ./page.html --widths 1440,768,390 --app --json

9. 관련 기술 심화 학습 로드맵

주차	목표
1주	지침·참고 데이터·방향 선택 입력을 구분한다.
2주	타입·팔레트·레이아웃을 콘텐츠 요구와 연결한다.
3주	CDP 관측과 화면 폭별 발견 사항을 비교한다.
4주	스크린샷·발견 사항·수정 이력으로 검토 루프를 설계한다.

10. 핵심 키워드 사전

아트 디렉션: 내용을 어떻게 보이게 할지 정하는 시각적 방향.
CDP: 브라우저의 탐색·측정·캡처를 제어하는 디버깅 프로토콜.
기계 검사: 정해진 측정 규칙으로 위반을 찾는 과정. 사람의 판단을 전부 대신하지 않는다.
참고 라이브러리: 방향·타입·색·구성의 선택 근거를 구조화한 데이터.

11. 참고 링크

upstream 프로그램·설치·모델 호출 없이 고정된 소스를 읽어 개정했다.