WindChat

WindChat은 ChatGPT 답변에 들어 있는 코드 블록을 읽어 페이지로 그린다. 답변이 늘어날 때마다 화면도 바뀌므로 연속된 수정이 눈에 보이는 버전의 연속이 된다. 대화에서는 계속 입력하고 미리보기는 제자리에 남는다. 레이아웃을 말로 설명하는 것과 직접 보는 것의 차이가 여기에 있다.

Tailwind 지원이 이 확장 프로그램이 존재하는 이유다. flex, gap, rounded, bg-slate-900 같은 유틸리티 클래스가 적힌 그대로 적용되어 화면이 모델이 만든 마크업과 일치한다. 프로젝트 전용 CSS나 컴포넌트 라이브러리에 기대는 페이지는 여기서 다르게 보인다. 미리보기가 빌드 파이프라인에 연결되어 있지 않기 때문이다.

React 답변은 2024년 1월 버전부터 미리보기할 수 있다. Tailwind 클래스와 예시 데이터로 쓴 단일 컴포넌트라는 흔한 경우를 다룬다. ChatGPT의 React 프롬프트는 대부분 이 형식으로 나온다. 여러 파일로 나누고 import와 번들러 설정을 쓰는 프로젝트는 대화 안 미리보기에서 실행되지 않는다.

핵심은 속도다. 프롬프트에서 한 줄을 바꿔 다시 보내면 새 화면이 이전 화면을 대신한다. 여백과 위계를 판단하는 일이 배포가 아니라 한 번 보는 일이 된다. 이 순환 덕분에 ChatGPT는 코드 생성기에서 UI 스크래치패드에 가까워진다.

공식 사이트는 Tailwind CSS와 React용 시작 프롬프트를 공개한다. 출력 형식을 고정하는 내용으로, 코드 블록은 하나, 주석은 없음, 이미지는 picsum.photos, 아이콘은 Bootstrap Icons를 쓴다. 맨 앞에 붙여 두면 매번 규칙을 다시 설명하지 않아도 되고, 모델이 코드 안에 설명문을 넣지 않아 화면도 깔끔하다.

라이선스 하나로 최대 다섯 기기에서 활성화할 수 있어 노트북, 데스크톱, 여분의 브라우저 프로필까지 커버된다. 월 $1.99 외에 연 $9.99, 한 번 결제하는 평생 라이선스 $19.99가 있다. 용도가 좁은 도구라서 ChatGPT를 계속 프런트엔드 작업에 쓸 생각이라면 평생 라이선스가 합리적이다.