AI 코딩 에이전트가 널리 쓰이면서 개발 생산성이 크게 올랐다. Claude Code나 Cursor 같은 도구는 기능적으로 완성된 UI 코드를 빠르게 만들어 개발자의 작업을 덜어 준다. 그런데 이런 에이전트가 만든 코드에는 아직 미묘한 '감각'이 부족하다는 지적이 나온다. 사용자 경험을 좌우하는 미세 인터랙션, 애니메이션, 반응성, 타이포그래피 같은 디자인 엔지니어링 영역에서 특히 그렇다. 기능은 제대로 돌아가는데 사용자가 느끼는 만족도에서는 아쉬움이 남는다는 것이다. 개발자들은 AI가 만든 코드의 품질을 더 끌어올릴 방법을 찾고 있다.

AI 코딩 에이전트: UI 미세 조정의 딜레마

Claude Code, Cursor 같은 최신 AI 코딩 에이전트는 복잡한 UI 코드도 금세 만들어 개발자의 생산성을 크게 높인다. 이렇게 만든 코드는 기능적으로는 문제없이 작동하는 경우가 많다. 하지만 사용자 경험을 좌우하는 미세한 인터랙션과 시각 요소에서는 부족함이 드러난다. AI가 만든 UI는 기계적이고 투박하다는 평을 자주 듣는다.

애니메이션의 부드러움, 여러 기기에서의 반응성, 텍스트 가독성을 정하는 타이포그래피 같은 디자인 엔지니어링 영역에서 AI의 감각 부족이 특히 눈에 띈다. 사용자에게 쾌적하고 즐거운 경험을 주기 위한 섬세한 조정은 아직 사람 개발자의 몫이다. AI가 만든 코드의 완성도를 높이는 일이 AI 코딩 에이전트를 쓰는 개발자들의 과제가 됐다.

AI 에이전트가 흔히 저지르는 UI 코드 오류

AI 코딩 에이전트가 자주 되풀이하는 UI 코드 실수가 몇 가지 있다. 대표적인 것이 요소가 화면에 나타날 때 ease-in 애니메이션을 쓰는 경우다. 시작이 느려 보여서 사용자가 불필요한 지연을 느낀다. CSS 속성 변화에 transition-all을 무분별하게 써서 필요 없는 애니메이션까지 적용되고, 이것이 성능 저하로 이어지기도 한다.

scale(0)에서 커지는 진입 효과는 보기에 어색하고, 드롭다운 메뉴는 사용자가 기대하는 것보다 느리게 움직이는 경우가 많다. 타이포그래피에서는 본문 텍스트가 화면 전체 폭으로 늘어나 한 줄 길이가 약 65ch를 넘으면서 읽기 어려워지는 문제가 흔하다. 이런 오류가 쌓이면 사용자는 불편해지고 애플리케이션의 완성도도 떨어진다.

AI 코딩 에이전트는 등장 애니메이션에 ease-in 적용, 불필요한 transition-all 사용 등 여러 디자인 엔지니어링 실수를 반복한다.

디자인 엔지니어링 지식을 담은 AI 스킬 저장소

Vercel과 Linear 출신 디자인 엔지니어 에밀 코발스키는 AI 에이전트가 만드는 UI 코드의 품질을 높일 방법을 내놓았다. 그는 가이드라인 저장소 emilkowalski/skills를 만들어 AI 에이전트가 세밀한 디자인 엔지니어링 원칙을 이해하고 적용하도록 했다. 이 저장소는 디자인 엔지니어링 규칙과 정량적인 수치 기준을 프롬프트 스킬 형태로 묶어 AI 에이전트에 넣을 수 있게 만들었다.

개발자는 npx skills@latest add emilkowalski/skills 명령으로 이 스킬 세트를 AI 에이전트에 쉽게 추가할 수 있다. 주요 스킬은 emil-design-eng, animate, review-animations, find-animation-opportunities 등이다. 이 스킬들은 AI가 사용자 경험을 해치는 흔한 실수를 피하고, 더 다듬어지고 반응성 좋은 UI 코드를 만들도록 지침을 준다.

Vercel과 Linear 출신 에밀 코발스키는 AI 에이전트의 UI 코드 완성도를 높일 명시적 가이드라인 저장소 emilkowalski/skills를 공개했다.

UI 애니메이션 지속 시간: 사용자 경험 최적화

UI 애니메이션은 사용자가 지연을 느끼지 않도록 300ms를 넘지 않아야 한다. 그래야 사용자가 시스템이 빠르게 반응한다고 느낀다. 애니메이션 지속 시간은 요소의 종류와 인터랙션의 중요도에 따라 달리 잡는다.

마이크로 인터랙션은 100~150ms 안에 끝나야 한다. 툴팁이나 드롭다운 같은 일반 UI 요소는 150~250ms가 적당하다. 모달이나 드로어(서랍형 패널)처럼 화면의 큰 부분을 차지하는 요소는 200~300ms 동안 부드럽게 나타나야 사용자가 편하게 느낀다. 이런 수치 기준이 있어야 AI 에이전트도 사용자에게 편한 애니메이션을 정확하게 구현할 수 있다.

UI 애니메이션은 300ms를 넘지 않아야 하며, 요소 유형에 따라 100ms에서 300ms 사이의 최적 지속 시간이 정해진다.

정교한 모션 디자인을 위한 추가 원칙

AI 에이전트가 세밀한 모션 디자인을 구현하려면 몇 가지 원칙이 더 필요하다. 퇴장 애니메이션은 진입 애니메이션보다 약 20% 빠르게 설정해, 요소가 사라질 때 더 자연스럽고 빠르게 느껴지게 한다. 그래야 사용자가 다음 작업으로 바로 넘어갈 수 있다.

버튼을 누를 때는 scale(0.97) 정도의 미세한 눌림 피드백을 주고, 손을 떼면 200ms ease-out으로 원래 크기로 돌아오게 해 누른 감각을 분명히 전한다. UI 요소가 화면에 나타날 때는 ease-out이나 강한 커스텀 곡선으로 부드럽게 시작하고, 지연감을 주는 ease-in은 피한다. 키보드 조작이나 하루 100회 이상 자주 일어나는 동작에는 애니메이션을 빼거나 최소화해 사용자의 피로를 줄인다.

진입/퇴장 애니메이션 속도, 버튼 피드백, 사용 빈도에 따른 모션 적용 등 AI 에이전트가 지켜야 할 고급 원칙들이 있다.

AI 에이전트, '감각 있는' UI 코드를 향해

에밀 코발스키의 'skills' 저장소는 AI 코딩 에이전트가 기능 구현에 더해, 사람이 다듬은 것처럼 섬세하고 쓰기 편한 UI를 만들도록 돕는다. AI 코딩 에이전트에 대한 기대도 코드를 생성하는 속도에서 그 코드가 주는 사용자 경험의 품질까지로 넓어지고 있다. 명시적인 디자인 엔지니어링 가이드라인은 AI가 '감각 있는' UI를 배우고 실제 코드에 적용하는 데 바탕이 된다.

개발자는 이런 스킬 세트로 AI 에이전트가 더 완성도 높은 UI 코드를 만들도록 가르치고 함께 일할 수 있다. AI가 만든 애플리케이션을 사용자가 얼마나 만족스럽게 쓰는지는 이런 디자인 엔지니어링 원칙을 적용했는지에 따라 크게 달라진다. 'skills' 저장소가 AI 코딩 에이전트의 다음 단계에서 큰 역할을 할 것으로 기대된다.

참고