화면 감각을 잡아 주는 스킬 열, 무엇을 고를까

만들려는 서비스의 성격을 먼저 묻고, 거기에 맞는 화면 스타일·색 조합·글꼴 짝·컴포넌트 구조를 통째로 짜 줍니다. UI 스타일 79종(실제로 고르는 것은 50종), 색 팔레트 192종, 글꼴 조합 74종, 판단 규칙 192개를 갖고 있어서 "알아서 예쁘게" 대신 "이 업종엔 이게 맞는다"는 근거를 답니다.

화면을 만들 때의 시각 방향과 타이포그래피를 잡아 줍니다. 흔한 템플릿처럼 보이지 않게 하는 데 초점이 있습니다.

WWDC 디자인 발표에서 정리한 애플의 인터페이스·모션 원칙을 웹(CSS·JS)에 맞게 옮겼습니다. 제스처 기반 UI, 스프링 애니메이션, 드래그·스와이프·시트 인터랙션, 반투명 재질과 깊이감, 타이포그래피까지 다룹니다.

색과 서체를 묶은 테마를 만들어 PPT, 보고서, 웹페이지 전체에 일관되게 입힙니다. 산출물마다 톤이 달라지는 문제를 뿌리에서 잡습니다.

마음에 드는 사이트 주소를 주면 그 디자인을 뜯어 색·간격·글꼴 같은 수치로 뽑아 줍니다. 여기서 그치지 않고 "왜 이렇게 했는가"까지 정리해 주기 때문에 그대로 베끼는 대신 내 화면에 옮겨 적용할 수 있습니다.

AI가 만든 화면에서 흔히 나오는 어색한 패턴 59가지를 규칙으로 잡아냅니다. 컬러 위 회색 글씨, 남발되는 글꼴, 카드 안에 카드, 낡은 이징 같은 것들입니다. 이 검사는 모델을 부르지 않고 돌아가서 API 비용이 들지 않습니다. audit(품질 점검), polish(마무리), animate(모션), typeset(타이포) 등 명령 23개를 갖췄습니다.

Vercel·Linear 에서 쌓은 디자인 엔지니어링 경험을 담은 가이드입니다. 애니메이션 타이밍·이징 선택부터 버튼·팝오버·토스트 같은 컴포넌트 설계 원칙, 성능·접근성까지 UI를 다듬는 전반을 다룹니다.

"팝오버가 튀어나오는 그거" 같은 애매한 설명을 정확한 애니메이션 전문 용어로 바꿔 줍니다. 직접 효과를 설계하지는 않고, 정확한 이름을 찾아주는 역할만 합니다.

코드는 고치지 않고, 코드베이스 전체의 애니메이션을 감사해 우선순위가 매겨진 개선 계획만 작성합니다. 다른 에이전트나 저비용 모델이 그대로 실행할 수 있는 형태로 나옵니다.

기능 검토가 아니라 애니메이션·모션 코드만 전문적으로 검토합니다. 기본값은 '지적'이고, 통과하려면 이징·지속시간·중단 가능 여부·성능·접근성 기준을 실제로 충족해야 합니다.