AI에 디자인 감각을: Emil Kowalski, UI·모션 Skills 오픈소스 공개

emilkowalski/skills는 AI 코딩 에이전트를 위해 설계된 인터페이스 및 모션 규칙 오픈소스 라이브러리다. Vercel과 Linear 출신의 디자인 엔지니어이자 인기 라이브러리 Sonner와 Vaul의 제작자인 Emil Kowalski가 프론트엔드 인터랙션 노하우를 AI가 직접 참고할 수 있는 Skill 형태로 정리했다.

프로젝트의 목적은 명확하다. 코딩 에이전트는 코드를 짜는 법은 알지만 인터페이스의 미세한 감각까지는 챙기지 못한다. 화면에 등장하는 요소에 ease-out 대신 엉뚱하게 ease-in 감속을 적용하거나, 부드러운 반투명 그림자 대신 투박한 실선 테두리를 두르는 실수를 반복한다. 이런 사소한 선택들이 쌓이면서 AI가 만든 웹사이트 특유의 어색하고 저렴한 인상이 만들어진다.

에이전트의 감각을 교정하는 핵심 규칙들

이 라이브러리는 디자이너들이 직관적으로 판단하던 세부 규칙들을 에이전트가 바로 이해할 수 있는 명문화된 지침으로 바꿔준다.

핵심 축은 emil-design-eng와 animate다. 모델이 애니메이션을 처음부터 작성할 때 올바른 완화 곡선, 지속 시간, 속성을 강제하도록 유도한다. React Native 및 Expo 생태계를 지원하는 animate-expo도 포함되어 있어, 제스처 반응, 바텀 시트, 햅틱 반응을 자바스크립트 스레드 밖에서 처리해 프레임 드롭 없는 매끄러운 움직임을 구현한다.

가장 눈에 띄는 기능 중 하나는 코드베이스 전반의 모션을 진단하는 improve-animations다. 최고 성능 모델을 통해 프로젝트의 애니메이션을 물리적 관성, 중단 가능성, 접근성 등 8가지 범주로 심사하고 우선순위가 매겨진 작업 계획을 plans 폴더에 저장한다. 이후 실제 수정 작업은 비용이 저렴한 하위 모델에 위임하도록 설계해 고성능 모델이 불필요하게 소스코드를 직접 건드리지 않도록 만들었다.

이 외에도 애플의 WWDC 인터페이스 강연에서 유려한 물리 원칙을 추출해 웹용 규칙으로 번역한 apple-design, 모바일 웹에서 자주 발생하는 탭 하이라이트 깜빡임이나 100vh 스크롤 버그, 입력창 확대 문제를 해결하는 mobile-native 등이 기본 구성에 포함되어 있다.

사용 방법

프로젝트는 GitHub에 공개되어 있으며, skills 규격을 지원하는 AI 개발 도구를 사용 중이라면 터미널에서 npx skills@latest add emilkowalski/skills 명령어를 실행해 즉시 추가할 수 있다.

별도의 로컬 하드웨어 사양을 요구하지 않으며, 정제된 규칙 기반 텍스트 지침으로 작동하므로 사용자 컨텍스트 주입을 지원하는 다양한 모델에서 곧바로 적용 가능하다.

왜 중요한가

우리는 이 프로젝트가 AI 시대에 전문 지식을 패키징하는 가장 영리한 방식을 보여준다고 본다. 디자인 감각이라는 추상적인 영역 역시 결국 수많은 구체적인 예외 처리와 엔지니어링 규칙의 집합임을 증명했기 때문이다.

전담 디자이너 없이 높은 완성도의 웹이나 앱을 만들어야 하는 1인 개발자나 풀스택 엔지니어라면 지금 당장 도입해 볼 가치가 충분하다. AI가 생성하는 결과물의 조잡한 티를 걷어내고, 프로덕션 배포 전에 어색한 인터랙션을 미리 잡아주는 믿음직한 디자인 검수자 역할을 해준다.