AI 에이전트 시대, UI 개발은 어떻게 바뀌나

AI 에이전트가 UI를 만드는 시대의 준비

Meta가 React(리액트) 19 기반 오픈소스 디자인 시스템인 Astryx(아스트릭스) 베타를 공개했습니다. 150개 이상 접근성 UI 구성 요소와 디자인 토큰, CLI(명령줄 인터페이스), MCP(모델 컨텍스트 프로토콜) 도구를 제공해 개발자와 AI 에이전트가 같은 UI 규칙을 활용하도록 설계한 것이 핵심입니다.

이는 AI가 화면 코드를 빠르게 만들어 주는 수준을 넘어, 팀의 디자인 규칙과 접근성 기준을 이해하는 개발 보조 도구가 되려는 흐름으로 볼 수 있습니다. 다만 베타 단계의 도구이므로 실제 서비스 도입 전에는 유지보수 범위와 호환성을 확인해야 합니다.

디자인 시스템이 AI 활용의 품질을 좌우합니다

디자인 시스템은 버튼, 입력창, 카드처럼 반복되는 화면 요소와 사용 규칙을 한곳에 모은 체계입니다. Astryx는 동작과 접근성 준수 사항을 컴포넌트에 두고, 색상·글꼴·여백 같은 시각 규칙은 디자인 토큰으로 분리합니다. 이 구조라면 AI에게 “회원가입 화면을 만들어 달라”고 요청했을 때도 임의의 스타일을 반복 생성하는 대신 정해진 구성 요소를 조합하게 만들 수 있습니다.

학생 개발자에게 중요한 점은 AI가 만든 결과물의 품질이 프롬프트만으로 결정되지 않는다는 사실입니다. 재사용 가능한 컴포넌트, 명확한 이름, 문서화된 색상과 간격 규칙이 있어야 AI의 제안도 프로젝트 안에서 일관되게 작동합니다. 접근성은 특히 자동 생성 결과에서 빠지기 쉬우므로, 키보드 조작과 화면 낭독기 지원을 직접 점검해야 합니다.

MCP 연결이 뜻하는 것

MCP는 AI 도구가 프로젝트의 문서·도구·규칙에 정해진 방식으로 접근하도록 돕는 연결 규약입니다. Astryx가 MCP와 CLI를 제공한다는 것은 AI 에이전트가 디자인 시스템을 찾아보고, 정해진 컴포넌트 사용 방식을 제안하는 작업 흐름을 염두에 둔다는 뜻입니다.

하지만 AI에게 도구 접근 권한을 주는 일은 편의성만의 문제가 아닙니다. Android도 앱 기능을 실행하는 AI 에이전트를 위해 EXECUTE_APP_FUNCTIONS 권한과 AppFunctions 프레임워크를 준비하고 있으며, 현재는 승인된 에이전트와 제한된 시험 환경 중심으로 운영됩니다. 교육용 프로젝트에서도 AI에게 파일 수정이나 외부 서비스 실행 권한을 줄 때는 최소 권한 원칙과 변경 내역 검토를 기본으로 삼아야 합니다.

학생 활용법

프론트엔드 포트폴리오를 만들 때 먼저 버튼·폼·카드 3종의 재사용 컴포넌트와 색상 토큰을 정의해 보세요. 그 뒤 AI에게 새 화면을 요청하고, 기존 규칙을 지켰는지와 접근성 속성이 빠지지 않았는지를 코드 리뷰 체크리스트로 검토하면 실무형 개발 습관을 만들 수 있습니다.