AI에게 UI를 맡기면
기능은 잘 만드는데,
묘하게 “손맛”이 없을 때가 있습니다.
드롭다운이 괜히 느리고,
버튼은 과하게 튀고,
모든 화면에 애니메이션이 붙습니다.
Vercel과 Linear에서 일했던
디자인 엔지니어 Emil Kowalski가
이런 사소한 차이를
Agent Skills로 정리해 공개했습니다.
Emil Kowalski Skills
/
github.com
GitHub - emilkowalski/skills: Skills for Designers and Engineers.
[댓글 @cc.dev_]
1/
이 저장소의 출발점부터 재밌습니다.
“Agents don’t have great taste.”
AI가 코드를 못 짜서가 아니라
좋은 UI를 만드는 작은 판단에서
자꾸 실수한다는 겁니다.
그래서 자신의 디자인 경험을
AI가 참고할 작업 규칙으로 만들었습니다.
[댓글 @cc.dev_]
2/
예를 하나 들어보겠습니다.
AI에게
“여기 애니메이션 좀 넣어줘.”
라고 하면 보통
뭔가를 움직이려고 합니다.
그런데 이 Skill은 먼저 묻습니다.
“여기가 정말
움직여야 하는 곳인가?”
[댓글 @cc.dev_]
3/
하루에 수백 번 사용하는
단축키나 Command Palette라면?
답은 의외로 단호합니다.
애니메이션을 넣지 않습니다.
자주 사용하는 기능일수록
멋진 움직임보다 즉각적인 반응이
더 중요하다고 보기 때문입니다.
[댓글 @cc.dev_]
4/
반대로 회원가입 성공 화면이나
처음 보는 Onboarding처럼
가끔 만나는 장면에는
조금 더 재미를 줘도 됩니다.
모든 곳을 화려하게 만드는 게 아니라
쓸 수 있는 “재미의 예산”을
중요한 순간에 몰아주는 느낌입니다.
[댓글 @cc.dev_]
5/
움직임을 만들 때도
아무 숫자나 쓰지 않습니다.
버튼을 눌렀을 때는
scale(0.97),
여러 요소가 등장할 때는
30~80ms 정도의 짧은 Stagger처럼
실제로 사용할 값과 Recipe가
상당히 구체적으로 들어 있습니다.
[댓글 @cc.dev_]
6/
성능까지 꽤 집요하게 봅니다.
가능하면 transform과 opacity를 쓰고,
간단한 Fade 하나 때문에
무거운 Motion Library를
설치하지 말라고 합니다.
CSS로 충분하면 CSS,
정말 필요할 때만 JS나 Motion.
화려함보다 적절한 도구 선택을
더 중요하게 보는 쪽입니다.
[댓글 @cc.dev_]
7/
이미 AI가 애니메이션을
잔뜩 만들어놨다면?
처음부터 다시 만들 필요는 없습니다.
improve-animations로
코드베이스 전체를 훑고,
어색하거나 과한 Motion을 찾아
우선순위와 수정 계획부터
뽑아낼 수 있습니다.
[댓글 @cc.dev_]
8/
반대 상황도 있습니다.
“우리 사이트가 너무 정적인데
어디를 움직여야 할지 모르겠어요.”
find-animation-opportunities를 쓰면
움직이면 좋아질 곳과
오히려 건드리면 안 될 곳을
같이 찾아줍니다.
많이 추천하는 게 아니라
5~7개 이하로 추리는 것도 재밌습니다.
[댓글 @cc.dev_]
9/
전체 설치는 이렇게 합니다.
npx skills@latest add emilkowalski/skills
설치한 뒤에는
“이 UI에 Motion을 추가해줘.”
“현재 애니메이션을 감사해줘.”
“움직임을 넣으면 좋은 곳만 찾아줘.”
처럼 목적에 맞는 Skill을
Agent에게 맡기면 됩니다.
[댓글 @cc.dev_]
10/
이 저장소는 기능보다
한 문장이 기억에 남았습니다.
AI가 전문성을 대체하는 게 아니라
전문성이 있을 때 AI가
그걸 더 크게 증폭시킨다는 이야기.
바이브코딩도 비슷한 것 같습니다.
AI에게 “예쁘게 해줘”라고
열 번 말하는 것보다,
좋은 디자인이 뭔지 아는 사람의
판단 기준을 하나 넣어주는 편이
결과가 더 빨리 달라질 수 있습니다.
