기능 정의만으로 스타일 일관성이 유지되는 애니메이션 아이콘 세트 생성

제품을 만들 때 아이콘들을 이것저것 조합하게 됩니다. 아이콘 라이브러리에서 하나를 가져오고, 다른 것은 AI가 그리게 하는데, 이들을 합치면 스타일이 맞지 않고 호버 효과(hover effects)도 모두 다르게 처리됩니다.

Claude Skill인 Kubai Icons가 바로 이 문제를 해결합니다. 기능 목록(feature list)이나 제품 코드만 제공하면, 일관된 스타일을 가진 애니메이션 아이콘 세트를 그려낼 수 있습니다.

저장소(repo)에는 예시로 66개의 아이콘이 포함되어 있습니다. 호버 시 각 아이콘은 자신이 수행해야 할 동작을 실행합니다. 폴더가 열리거나, 봉투가 개봉되거나, 달력이 다음 날짜로 넘어가는 식입니다.

GitHub:
http://github.com/kubai087/kubai-icons
…
그리기가 완료되면, 정적 상태(static state)부터 호버 상태까지 모든 프레임을 거치며 아이콘이 24픽셀과 28픽셀에서 선명한지 확인하기 위해 스크린샷을 찍습니다. 그리고 통과하지 못하는 부분은 계속해서 수정합니다.

또한 정적 SVG로 내보내서(export) 바로 Figma에 끌어다 놓을 수 있습니다. 7가지 색상 구성표(color scheme)가 제공되며, 모든 그라디언트와 그림자(shadows)는 단일 기본 색상(primary color)에서 파생되므로, 색상을 변경하면 전체 세트가 업데이트됩니다.

작성자는 매 라운드마다 새로운 Claude 세션에서 블라인드 테스트를 진행하며, 오직 규칙 파일(rules file)만 제공하고 알람 시계나 계산기 같은 새 아이콘을 그리게 한 다음, 충분히 명확하게 작성되지 않은 모든 규칙을 채워 넣습니다.

저는 이러한 방식으로 규칙을 다듬어 나가는 접근법이 매우 견고하다고 생각합니다.