Agents with Taste — 취향을 에이전트 스킬로 옮기는 방법

한 줄 요약

에이전트가 시각적 결과물에서 “무엇이 어색한지”를 스스로 잘 판단하지 못한다면, 전문가의 취향을 이유·규칙·예시가 포함된 스킬 파일로 명시해 에이전트의 작업 기준으로 제공하자는 글이다.

핵심 주장

Emil Kowalski는 오늘날 엔지니어가 에이전트 군단 덕분에 큰 레버리지를 얻었지만, 애니메이션처럼 시각적 품질이 중요한 작업에서는 코딩 에이전트가 아직 “무엇이 좋은지”를 충분히 모른다고 말한다. 해결책은 인터페이스의 각 측면에 대해 좋은 결과의 규칙을 설명하고, 이를 에이전트가 따를 수 있는 skill file로 만드는 것이다.

취향은 신비한 감각이 아니라 경험을 통해 “무엇이 더 나은지”와 “왜 더 나은지”를 설명할 수 있게 된 상태다. 설명 가능한 판단을 규칙으로 패키징하면 에이전트가 덜 경험 많은 디자이너를 가이드하듯 동작할 수 있다.

글에서 제시한 규칙 예시

Practical Tips

버튼은 :active에서 transform: scale(0.97)로 즉시 반응시킨다.
요소가 갑자기 튀어나오는 느낌을 피하려면 scale(0)이 아니라 scale(0.95)에서 시작한다.
흔들림이 있으면 will-change: transform을 검토한다.
hover flicker를 피하려면 부모보다 자식 요소를 애니메이션한다.
popover는 중앙이 아니라 trigger 위치를 transform-origin으로 삼는다.
연속 tooltip에서는 첫 항목 이후 불필요한 delay와 animation을 생략한다.
작은 버튼도 pseudo-element 등을 이용해 최소 44px hit area를 확보한다.
여전히 어색한 crossfade는 20px 미만의 미세한 blur로 시각적 단절을 완화한다.

Easing과 duration

글의 easing flowchart는 진입·이탈에 ease-out, 화면 안 이동·morphing에 ease-in-out, hover 변화에 ease, 일정한 움직임에 linear를 기본 선택으로 둔다. UI duration은 micro-interaction 100–150ms, tooltip/dropdown 150–250ms, modal/drawer 200–300ms 범위로 제안하며, UI 애니메이션을 300ms 아래로 유지한다.

타이포그래피 규칙

본문은 약 65ch로 제한하고, 가격 열에는 tabular-nums를 적용하며, 마크업의 ... 대신 …를 사용한다. 대문자 라벨은 letter-spacing을 여유 있게 두고, 폴백 폰트의 x-height와 weight를 주 글꼴에 맞춘다. UI 강조는 bold를 우선하고 italic은 인용·언어적 강조에 남겨 둔다.

에이전트 운영 관점

취향을 관찰 가능한 규칙으로 쪼갠다. “더 세련되게” 대신 시작 scale, easing, duration, origin, hit area처럼 검증 가능한 값으로 쓴다.
왜를 함께 기록한다. 규칙만 나열하면 새로운 상황에 일반화하기 어렵다. 예를 들어 scale(0)은 요소가 무에서 생긴 것처럼 보여서 피한다.
생성보다 리뷰가 중요하다. 스킬 파일은 에이전트에게 구현을 시킬 뿐 아니라, 기존 결과의 문제 목록과 변경 전후 비교를 만들게 한다.
도메인 지식은 레버리지다. AI가 전문가를 대체한다기보다, 전문가가 축적한 판단을 반복적으로 적용하는 범위를 넓힌다.

한계와 주의점

제시된 수치는 기본값이지 모든 제품·플랫폼에 대한 법칙은 아니다.
시각적 취향을 패키징해도 브랜드·콘텐츠·사용자 맥락에 따른 창의적 판단은 남는다.
will-change와 blur는 성능 비용이 있으므로 실제 기기에서 검증해야 한다.
접근성 설정, 입력 방식, 사용 빈도를 함께 보지 않으면 “polish”가 오히려 지연과 피로를 만들 수 있다.

LLM Wiki

탐색기