Hylse

핵심은 텍스트를 React 컴포넌트로 바꾸는 흐름이다. 원하는 화면, 담아야 할 요소, 페이지에서의 배치를 적어 보내면 그림이 아니라 컴포넌트 코드가 돌아온다. 결과물은 실제 프로젝트에서 돌아가는 것을 전제로 하므로, 초안이 첫 왕복을 줄여 줄 때 값이 생긴다.

생성된 컴포넌트에는 별도 스타일시트가 아니라 Tailwind 유틸리티 클래스가 붙는다. 이미 Tailwind를 쓰는 팀에 맞는다. 마크업이 나머지 코드의 관례와 같아지기 때문이다. AI React 컴포넌트 생성기답게 다음 지시에서 여백 단위나 색 조합을 바꾸는 것도 된다. 클래스 이름을 하나씩 고칠 필요가 없다.

첫 시도에 딱 맞는 경우는 드물다. Hylse는 추가 지시를 여러 번 주는 상황을 전제로 만들어졌다. 어긋난 부분을 말로 전하면 되고 코드를 직접 다시 쓸 필요는 없다. 작은 팀에서 Tailwind CSS 컴포넌트 생성기가 힘을 쓰는 지점이 여기다. 수정 대화가 평범한 말로 이어진다.

브레이크포인트는 손으로 쓰는 Tailwind에서 가장 번거로운 부분이다. 이 도구는 휴대폰과 태블릿, 데스크톱 폭에서 버티는 레이아웃을 모든 클래스에 접두어를 붙이지 않고 내놓는 것을 목표로 한다. 공개 전에 마크업을 확인하고 디자인과 다른 가장자리만 손보면 된다.

컴포넌트는 기존 React 앱에 붙일 수 있는 코드로 나온다. 인수인계가 단순해진다. 자체 실행 환경에 묶이지 않고, 페이지를 Hylse에 올려야 한다는 조건도 없다. React Tailwind 코드 생성기로서 실질적인 한계는 자기 빌드 설정이 받아 주는 범위다.

입력이 일상 언어라서 React 기초를 아는 사람이면 Tailwind에 익숙하지 않아도 화면 초안을 만들 수 있다. 시제품에 참여하는 사람이 늘어난다. 그래도 공개 전에 개발자가 코드를 확인해야 하는 사실은 그대로다.