AI가 만든 UI, 이젠 실무에서 진짜 씁니다
배경 및 문제 인식
- 역할 전환: 스파르타 제품실은 PM, 디자이너, 개발자 구분을 없애고 PE(Product Engineer)로 전환하면서, 비디자이너도 AI를 통해 직접 UI 디자인을 제작할 수 있는 환경 구축이 필요해졌습니다.
- 피그마의 한계: 기존 피그마 환경은 코드와 완전히 일치하지 않고, 명세 유실 및 높은 토큰 비용 문제로 인해 AI가 읽고 수정하기에 부적합했습니다.
해결 방안: 피그마 생략 및 코드 기반 프로토타이핑
- 직접 코드 구현: 피그마를 거치지 않고 클로드 코드를 활용해 개발 환경에서 바로 프로토타입 디자인과 동작을 구현하는 `/ui-prototype-generate` 스킬을 구축했습니다.
- 격리된 데모 환경: 기존 코드에 영향을 주지 않도록 독립된 `prototype` 폴더 내에서만 작업 및 검증을 진행하도록 설계했습니다.
품질 제어를 위한 3가지 전략
- 디자이너 관점 이식: 디자인 시스템 스펙(`STACK-Spec`)과 UX/UI 의사결정 원칙(`Design-Principle`)을 문서화해 학습시켜 AI 특유의 부자연스러운 디자인을 개선했습니다.
- 레포지토리 기반 분석: 실제 작업 대상 코드 저장소를 스캔하여 제품의 기존 맥락 및 최신 정책을 반영하도록 했습니다.
- 7단계 표준 절차 도입: 기획 확인 → 정보 보강 → 모드 분기 → 격리 분석 → UI 전략 제안 및 승인 → 구현 → 결과 공유/적재의 고정된 프로세스로 검증된 결과물을 도출합니다.
성과 및 시사점
- 실무 적용: AX 해커톤을 시작으로 앱 바텀시트, 이력서 첨삭 하이라이팅, 학습 대시보드 등 실제 기능 프로토타이핑에 활발히 활용되고 있습니다.
- 가치의 명문화: 암묵지로 남아있던 디자인 가치와 원칙을 글로 정의하는 것의 중요성이 커졌으며, UI 생산이 쉬워진 만큼 ‘좋은 문제를 정의하고 해결하는 감각’이 핵심 역량이 되었습니다.
