AI가 UI를 만들어주지만, 유지보수까지 해줄까요?
AI는 단 몇 분 만에 UI를 구축할 수 있습니다. 완성된 것처럼 보이죠. 하지만 이것은 함정입니다. 엔지니어링 결정이 우선되어야 합니다.
6개월 뒤에도 팀이 이 코드를 유지보수할 수 있을까요? AI가 작성한 코드는 처음에는 좋아 보입니다. 하지만 검토해 보면 이상한 점이 발견됩니다.
흔한 징후:
- 중복된 컴포넌트.
- 잘못된 간격(spacing).
- 부실한 에러 상태 처리.
- 하드코딩된 색상.
잘못된 프롬프트를 사용하는 것을 멈추세요. 단순히 "아름다운 대시보드를 만들어줘"라고 요청하지 마세요.
더 나은 프롬프트를 사용하세요. AI에게 기존 컴포넌트를 사용하라고 지시하세요. 시맨틱 HTML을 사용하고, 로딩 및 에러 상태를 포함하며, 상태(state)는 로컬로 유지하도록 하세요.
AI에게는 경계가 필요합니다. 화면(screen)은 컴포넌트가 아닙니다.
컴포넌트에는 다음과 같은 상태가 필요합니다:
- 로딩(Loading).
- 빈 상태(Empty).
- 에러(Error).
- 성공(Success).
UI가 해피 패스(happy path)만 보여준다면, 프로덕션에 투입될 준비가 되지 않은 것입니다.
먼저 컨트랙트(contract)를 정의하세요. 그래야 무분별한 데이터 페칭(fetch)과 숨겨진 가정을 방지할 수 있습니다.
AI는 색상을 제멋대로 만들어냅니다. 이를 막으세요. 디자인 토큰(design tokens)을 사용하도록 강제해야 합니다. 일관성이 곧 유지보수성입니다.
시작 단계부터 접근성(accessibility)을 고려하세요. 시맨틱 HTML을 사용하고, 키보드 포커스를 지원하며, 레이블(label)을 사용하세요.
다음 리뷰 체크리스트를 활용하세요:
- 기존 토큰 사용 여부.
- 에러 상태 처리 여부.
- 시맨틱 마크업 사용 여부.
- 명시적인 props 사용 여부.
- 사람이 읽기 쉬운 로직인지 여부.
AI는 초안 작성이나 테스트 스캐폴딩(scaffolding)에는 도움이 됩니다. 하지만 아키텍처 설계와 장기적인 소유권 관리에는 한계가 있습니다.
속도도 도움이 되지만, 판단력이 중요합니다. 빠르게 만든 초안보다는 유지보수가 가능한 제품이 더 낫습니다.
Source: https://www.syncfusion.com/blogs/post/frontend-development-trends Source: https://risingstars.js.org/2025/en Source: https://stackoverflow.blog/2026/03/16/domain-expertise-still-wanted-the-latest-trends-in-ai/
Optional learning community: https://dev.to/johnnylemonny/ai-can-build-your-ui-but-can-it-maintain-it-d2l