HeroUI Chat

UI를 일상 언어로 설명하면 Tailwind CSS로 꾸민 React 컴포넌트가 돌아온다. 바탕이 HeroUI라서 출력은 아무렇게나 만든 div가 아니라 라이브러리의 접근성 높고 테마를 바꿀 수 있는 부품을 썼다. 실제 프로젝트에 얹기 전 손질이 줄어든다는 뜻이다.

스크린샷을 올리면 레이아웃을 시작할 만큼 재현한 편집 가능한 코드 토대가 나왔다. 흐름을 복제하거나 거친 디자인을 코드로 옮길 때 도움이 됐다. 픽셀 단위 복사가 아니라 출발점이므로 세부 조정은 각오해야 한다.

HeroUI Chat은 출시 당시 GitHub 별 23,000개를 넘긴 오픈소스 HeroUI 컴포넌트 일체를 그대로 물려받았다. 생성되는 부품은 모두 라이브러리의 디자인 토큰과 접근성 기본값을 따랐다. 이미 HeroUI를 쓰는 팀이라면 새 화면이 앱의 나머지와 같은 모습이 된다.

Dev 모드에서는 AI 크레딧을 태우지 않고 생성된 코드를 직접 고칠 수 있었다. 레이아웃이나 prop을 미세 조정하고, 크레딧은 새로 생성하고 싶을 때만 쓰면 됐다. 작은 수정이 메시지를 잡아먹지 않게 해 줬다.

생성한 UI를 자신의 React 코드베이스로 옮기는 내보내기 경로가 있었다. Tailwind 스타일과 맞물려 프로토타입에서 프로젝트로 넘어가는 거리를 줄여 줬다. 결과를 지키려고 호스팅형 빌더에 묶일 필요가 없었다.

아무 컴포넌트나 클릭하면 채팅에서 바로 열려 즉시 커스터마이징할 수 있었다. 버튼 하나 바꾸려고 페이지 전체를 다시 생성하는 대신 그 부품만 고쳤다. 시간과 크레딧 모두에서 반복 비용을 낮게 유지했다.