AI가 만든 콘텐츠가 실제 프로덕트 안으로 들어오고 있다. CJ온스타일은 Claude Enterprise를 전사 AI 플랫폼으로 공식 도입하면서 숏폼 제작·방송 자막 자동화·트렌드 분석까지 AI 활용 범위를 넓히고 있다. 이커머스 현장에서도 숏폼은 이미 UX의 핵심 요소로 자리잡았다. W컨셉이 숏폼 서비스를 도입한 지 2주 만에 상위 20개 브랜드 평균 매출이 40% 오른 사례가 그 방향을 가리킨다. 문제는 이 모든 흐름이 '프론트엔드가 성능을 어떻게 설계할 것인가'라는 질문으로 수렴된다는 점이다.
AI 생성 이미지는 기존 최적화 공식을 깨뜨린다. 일반적인 이미지 최적화는 빌드 타임에 치수와 포맷을 미리 알고 있다는 전제 위에 세워진다. AI 생성 이미지는 이 전제를 정면으로 부순다. 이미지는 사용자가 요청하기 전까지 존재하지 않는다. dev.to에 공개된 최적화 사례 분석에 따르면, 이 문제를 푸는 핵심 전략은 세 가지로 압축된다. 첫째, PNG 원본을 quality 85의 WebP로 변환한다. AI 생성 이미지는 이미 내재적인 텍스처 노이즈를 갖고 있어서 85 이상의 품질 설정은 파일 크기만 키울 뿐 육안 차이가 거의 없다. 이 단계만으로 평균 전달 파일 크기가 900KB에서 200KB로 줄었다.
CLS는 생성 전에 막아야 한다. 레이아웃 시프트를 없애는 가장 확실한 방법은 이미지가 도착하기 전에 컨테이너가 이미 올바른 크기를 점유하고 있는 것이다. AI 이미지 생성 도구의 특성상 사용자는 생성 전에 종횡비(1:1, 16:9, 9:16 등)를 먼저 선택한다. 이 선택 시점을 활용해 컨테이너에 aspect-square, aspect-video 같은 Tailwind 유틸리티를 미리 적용하면, 이미지가 없는 상태에서도 공간이 확보된다. 생성 중에는 같은 크기의 스켈레톤 UI가 그 자리를 채운다. 이 패턴 하나로 CLS가 완전히 제거됐다는 실측 결과가 있다. 생성 완료 이미지를 가장 중요한 LCP 요소로 선언하고 priority 힌트를 주는 것, 그리고 이미지 전달 도메인에 preconnect를 미리 걸어두는 것도 LCP를 4.1초에서 1.9초로 단축하는 데 결정적인 역할을 했다.
숏폼은 더 복잡한 성능 방정식을 요구한다. ZDNet 보도에 따르면 온라인 쇼핑의 76%가 모바일에서 이뤄지고 있고, 숏폼 시청 경험률은 83%에 달한다. 이커머스 자사몰에서 숏폼이 핵심 UX 요소로 부상한 것은 단순한 트렌드가 아니라 소비 패턴의 구조적 변화다. 문제는 숏폼이 이미지보다 훨씬 무거운 성능 부채를 안고 있다는 점이다. 이미지 최적화에서 배운 원칙—레이아웃 시프트 방지, 크리티컬 패스 관리, lazy/eager 로딩 전략의 구분—은 숏폼에 그대로 적용되면서 난도가 올라간다. 뷰포트에 진입하는 시점의 재생 제어, 스크롤 중 자동재생의 INP(Interaction to Next Paint) 영향, 영상 포스터 이미지의 LCP 처리까지 설계해야 할 레이어가 늘어난다.
캐싱 전략도 다시 설계해야 한다. AI 생성 이미지는 각각 고유한 URL을 갖기 때문에 CDN 레이어에서의 공격적인 캐싱(Cache-Control: public, max-age=31536000, immutable)은 안전하다. URL이 한 번 생성되면 그 이미지는 변하지 않는다. 반면 추론(inference) 레이어에서는 동일한 프롬프트라도 매번 새로운 이미지를 생성하는 것이 바람직하다. 사용자는 '신선한 생성'이라는 경험을 기대하기 때문이다. 숏폼 영상의 경우도 마찬가지다. 콘텐츠 자체는 CDN에서 적극적으로 캐싱하되, 개인화 추천 로직이나 시청 이력 기반의 피드 순서는 캐싱 대상에서 분리해야 한다.
프론트엔드의 역할이 확장되고 있다. CJ온스타일 사례는 단순한 기업용 AI 도입 뉴스가 아니다. AI가 숏폼을 만들고, 그 콘텐츠가 라이브 커머스 플랫폼을 통해 실시간으로 배포되는 흐름에서 프론트엔드 엔지니어는 더 이상 '주어진 에셋을 최적화하는 사람'이 아니다. AI가 생성한 동적 콘텐츠가 언제, 어떤 형태로, 얼마나 빠르게 사용자에게 도달하는지를 설계하는 사람이 되어야 한다. 콘텐츠의 생성 시점과 소비 시점 사이의 파이프라인—포맷 변환, 치수 예약, 우선순위 힌트, 캐싱 정책—전체가 프론트엔드 설계의 일부가 된다.
Core Web Vitals는 사용자 경험의 최소 기준이다. AI가 콘텐츠를 만들어주는 시대일수록, 그 콘텐츠를 사용자에게 어떻게 전달할지를 설계하는 것은 여전히 사람의 몫이다. AI가 생성한 이미지가 처음 화면에 그려지는 순간, 숏폼이 피드에 진입하며 재생을 시작하는 순간—그 경험의 품질은 AI가 아니라 그 앞단에서 설계된 프론트엔드 아키텍처가 결정한다.