AI 요약
디자이너가 아닌 PdM이나 엔지니어도 Claude Code를 활용해 디자인 시스템(DS)에 부합하는 UI를 손쉽게 만들 수 있는 ‘하네스(Harness)’ 시스템을 구축한 사례를 공유한다. 하네스는 AI가 정해진 레일을 벗어나지 못하도록 문맥·제약·검증·피드백의 4개 층으로 구성되며, 이를 통해 AI가 DS 규칙을 준수한 UI를 생성하도록 유도한다. 실제로 하네스 유무에 따라 동일한 요청에도 DS에 부합하는 UI 품질이 크게 달라졌으며, 현재 팀 내에서 정식 운영 중이다.
핵심 포인트
- Claude Code로 4개월간 20만 줄 이상의 코드를 작성하며 개인 프로젝트(Melta)와 업무 DS 기반(Loom)을 개발
- 하네스는 ①문맥 ②제약 ③검증 ④피드백의 4개 층으로 구성, AI가 ‘헤매지 못하게’ 하는 구조적 제약
- 하네스 적용 시 DS 부품 정확 사용률이 4개 중 2개에서 4개 전부로 향상
- DESIGN.md와 CLAUDE.md 같은 문서만으로는 AI가 규칙을 지키지 않아, 자동 검증과 피드백 루프가 필수
향후 전망
- 5층째인 ‘생성 직후 자동 체크’ 기능을 개발 중이며, AI가 만든 결과물을 신뢰할 수 있는 검품 체계까지 Claude Code로 구축 가능
출처:hatena