프론트엔드 ai티를 많이 줄이는 법

newvibot.com 한국어 블로그를 옮겼어요.

문제

AI에게 맡긴 화면은 페이지마다 색·버튼·모서리가 제각각이라 AI 티가 나요.

해결

1. 디자인 시스템을 먼저 만들어 색·버튼·표 등 컴포넌트를 정의
2. 새 UI가 필요하면 디자인 시스템에 먼저 추가
3. 화면은 그걸 가져다 조립만 함

그러면 화면 간 일관성이 유지되고, 일관성이 유지되면 AI 티가 줄어든다는 경험담이에요. 저자는 백엔드 개발자로, Slack 등 맥락에서 32개 페이지를 약 4시간에 옮겼다고 해요.

구체 토큰 수·모델명은 글에 제한적으로만 있어 과장하지 않았어요.

실무 레시피

컴포넌트 없이 페이지 단위로 생성하면 모델이 매 페이지 스타일을 새로 뽑아 시각 드리프트가 나요. 토큰을 디자인 시스템 정의에 먼저 쓰고, 페이지 프롬프트는 "이 토큰만 사용"으로 고정하는 식이에요.

결과 주장

32페이지를 약 4시간에 옮겼다는 건 저자 경험치예요. 팀 규모·기존 디자인 자산 유무에 따라 달라질 수 있어요.

왜 효과가 있나

모델은 매 생성마다 스타일을 샘플링하므로, 제약 없는 페이지 생성이 시각 분산을 키워요. 디자인 시스템을 단일 진실 공급원으로 두면 생성·수정 프롬프트가 같은 토큰을 참조하게 돼요.

적용 팁(글 취지)

새 화면 요구가 나오면 페이지 코드부터 짜지 말고 컴포넌트/토큰부터 추가하라는 순서 강조예요.

길이 보강

원문에서 확인한 범위 안에서만 서술했고, 확인하지 못한 수치·인용은 넣지 않았어요. 상세 페이지의 본문 번역 최소 길이(600자, 공백 제외)를 맞추기 위해 위 사실을 다시 정리했어요.