AI 기능이 UI에 녹아드는 시대, 프론트엔드가 먼저 청소해야 할 것들

AI 기능이 UI에 녹아드는 시대, 프론트엔드가 먼저 청소해야 할 것들

ChatGPT가 클릭 한 번으로 스타일을 바꿔주는 동안, 당신의 번들엔 2012년산 jQuery가 여전히 살아 숨 쉬고 있다.

레거시 의존성 번들 최적화 AI UI 성능 jQuery 제거 LLM 스트리밍 Core Web Vitals ChatGPT 스타일 프리셋 XSS 보안
광고

ChatGPT 이미지 생성 화면을 열면 이제 '낙서풍', '치비 스티커', '미니미' 같은 스타일 카드가 줄지어 뜬다. 복잡한 영문 프롬프트를 외울 필요 없이, 카드 하나를 누르고 사진을 올리면 끝이다. AI Matters가 전한 이 변화는 단순한 UX 편의 기능처럼 보이지만, 프론트엔드 개발자 입장에서 읽으면 다른 신호가 들린다. AI 기능이 더 이상 별도 탭이나 모달 뒤에 숨지 않고, UI의 1차 동선 위에 직접 올라오기 시작했다는 것.

문제는 그 순간이다. 사용자가 카드를 누르는 찰나, 첫 토큰이 스트리밍되기 직전의 그 30밀리초. 이 구간이 AI 경험의 체감 품질을 가르는 임계점이다. dev.to에 올라온 분석 글 "Kill the Zombies"는 이 지점을 정확히 짚는다. LLM 스트리밍 UI를 구축하면서 Network 탭을 열어보면 종종 발견되는 것: vendors-node_modules_jquery_dist_jquery_js. 2026년에 에이전트 UI를 오케스트레이션하면서, 30KB짜리 2012년산 라이브러리가 메인 스레드를 블로킹하고 있는 현실이다.

"캐시됐으니 괜찮다"는 착각이 가장 흔한 함정이다. 캐시는 다운로드 시간을 줄여줄 뿐, 브라우저는 페이지를 로드할 때마다 스크립트를 파싱하고 실행한다. 모바일 기기에서 이 Script Evaluation 비용은 성능 프로파일의 Long Task 블록 안에 조용히 숨어 있다가, 첫 토큰 렌더링 직전에 터진다. AI가 아무리 빠르게 응답을 내려보내도, UI 레이어가 그것을 받아낼 준비가 안 돼 있으면 사용자는 그냥 "느린 AI"라고 인식한다.

그렇다고 jQuery를 그냥 지우면 된다는 이야기가 아니다. 여기서 중요한 지점이 하나 더 있다. jQuery의 .html().append()는 단순한 DOM 조작 API가 아니라 내부적으로 XSS 필터링 레이어를 포함하고 있다. LLM의 출력을 그대로 innerHTML에 꽂으면, 성능을 얻는 대신 보안 구멍을 여는 셈이다. LLM 응답은 본질적으로 비결정적이다. 어떤 문자열이 흘러나올지 완벽히 예측할 수 없다. textContent를 쓰거나, HTML을 주입해야 한다면 반드시 DOMPurify 같은 전용 sanitizer를 거쳐야 한다. 성능 최적화와 보안은 반드시 같은 패키지로 묶여야 한다.

레거시 의존성 문제를 다루는 현실적인 순서는 이렇다. 먼저 webpack-bundle-analyzerrollup-plugin-visualizer로 번들을 시각화해서 jQuery가 어디서 흘러들어오는지 확인한다. npm list jquery로 부모 패키지를 찾아내면, 대부분의 경우 직접 쓰는 게 아니라 트랜지티브 의존성으로 묻어들어온 것임을 알게 된다. 그 패키지를 교체하거나, 정말 불가피하다면 Cash.js(jQuery 대비 10% 크기)처럼 경량 브리지를 쓰는 게 $ = document.querySelector로 심어두는 shimming보다 훨씬 안전하다. Shimming은 네이티브 DOM 엘리먼트에 jQuery 메서드가 없기 때문에, 런타임에 조용히 크래시를 유발한다.

두 흐름을 함께 놓고 보면 하나의 방향이 읽힌다. ChatGPT의 스타일 프리셋은 AI 기능의 UX 진입장벽을 극적으로 낮추는 방식—프롬프트 엔지니어링 지식 없이도 트렌드를 즉시 따라갈 수 있게 하는 설계—을 보여준다. AI 이미지의 경쟁 축이 "얼마나 정교한가"에서 "얼마나 쉽게 트렌드를 따라가게 해주는가"로 이동했다는 신호다. 이 흐름은 텍스트 UI, 음성 UI, 코드 에디터 할 것 없이 동일하게 적용된다. AI 기능은 점점 더 UI의 첫 번째 동선으로 올라온다.

그 말은 곧, UI 인프라의 품질 기준이 달라진다는 뜻이기도 하다. 예전에는 초기 로드가 200ms든 350ms든 사용자가 큰 차이를 느끼지 못했다. 하지만 스트리밍 토큰이 등장하는 순간, 인터페이스는 "빠르게 뜨거나" 아니면 "끊기는 느낌"으로 이분된다. 그 경계를 만드는 게 바로 스크립트 평가 시간이다. AI 기능을 UI에 올리기 전에, 프론트엔드 개발자가 먼저 해야 할 일은 번들을 열고 좀비 의존성을 추적하는 것이다.

프로덕트 관점에서 정리하면 간단하다. 사용자가 "AI가 느리다"고 느끼는 순간의 원인은 생각보다 자주 모델 레이턴시가 아니라 프론트엔드 레이어에 있다. AI 기능을 붙이기 전에 Core Web Vitals를 점검하고, 번들 분석을 돌리고, Long Task를 줄이는 것은 성능 작업이 아니라 AI 사용자 경험 설계의 일부다. 집을 깨끗하게 지어야 AI가 그 안에서 제대로 작동한다.

출처

더 많은 AI 트렌드를 Seedora 앱에서 확인하세요