좋은 제품을 만들었다. 코드도 깔끔하고, UX도 신경 썼고, Core Web Vitals도 초록불이다. 그런데 사용자가 오지 않는다. 이 상황을 마주한 프론트엔드 개발자라면 보통 SEO를 점검하거나, 광고를 고민하거나, 콘텐츠 전략을 재검토할 것이다. 그런데 2026년에는 그것만으론 부족하다. 지금 인터넷의 '현관문'이 바뀌고 있기 때문이다.
AI 크롤러에게 당신의 SPA는 빈 껍데기다
dev.to에 올라온 한 글이 불편한 진실을 꺼냈다. ChatGPT, Perplexity, Google AI Overviews처럼 AI가 중개하는 검색에서 사용자는 이제 '링크 목록' 대신 '하나의 문장'을 받는다. 거기에 당신의 제품 이름이 없다면, 그 순간 당신은 존재하지 않는다. 페이지 2가 없다. 단 하나의 답만 있을 뿐이다.
더 심각한 건 대부분의 React, Vue, Svelte 기반 SPA가 AI 크롤러에게 사실상 빈 HTML을 보내고 있다는 점이다. 구글 봇은 JavaScript를 렌더링하지만, 대부분의 AI 크롤러는 그렇지 않다. 서버가 내려주는 raw HTML만 읽고 떠난다. 당신이 공들여 만든 인터랙티브 앱은 그들에게 <div id="root"></div> 한 줄짜리 페이지다. 2025년 대규모 연구에 따르면 AI Overviews에 인용된 페이지의 약 68%는 구글 상위 10위 안에도 없었다. 구글 SEO를 잘 한다고 AI 검색에 노출되는 게 아니라는 뜻이다. 랭킹 게임과 인용 게임은 이미 다른 게임이 됐다.
프론트엔드 관점에서 이건 아키텍처 문제다. Next.js의 React Server Components나 정적 렌더링(Static Generation)이 단순히 '성능'의 문제가 아니라 '가시성'의 문제가 된 것이다. 서버에서 의미 있는 HTML을 먼저 내려주는 구조, 즉 크롤러가 JavaScript 없이도 제품의 핵심을 읽을 수 있는 구조가 이제 필수 조건이 됐다. robots.txt로 AI 크롤러를 어떻게 대우할지, Schema Markup으로 모델이 제품을 잘못 설명하지 않도록 정보를 구조화하는 것도 마찬가지다. GEO(Generative Engine Optimization)는 SEO의 연장이 아니라 새로운 레이어다.
백엔드 없이, 서버 없이, 프라이버시도 지키는 AI
두 번째 흐름은 반대 방향에서 온다. AI를 클라우드로 보내는 대신, 브라우저 안으로 끌어들이는 시도다. dev.to에 공개된 CommentIQ 개발기는 Chrome 확장 프로그램에서 Gemini Nano를 온디바이스로 구동해 YouTube 댓글을 분석하는 프로젝트다. API 호출도 없고, 백엔드도 없고, 데이터가 브라우저 밖으로 나가지도 않는다.
기술적으로 흥미로운 지점이 여럿 있다. YouTube는 Polymer 기반 SPA라 댓글이 Shadow DOM 깊숙이 있고, 레이지 로딩으로 스크롤 전까지 DOM에 내용이 채워지지 않는다. 팀은 MutationObserver로 댓글 컨테이너를 감지하고, 프로그래매틱 스크롤로 첫 배치를 강제 렌더링한 뒤 분석을 시작했다. YouTube가 History API 기반 SPA라 페이지 이동마다 content script를 재초기화해야 했던 문제, popup과 content script 간 연결이 끊기는 문제도 실전에서 마주하고 해결한 것들이다.
Chrome의 내장 Prompt API(window.ai.languageModel)는 컨텍스트 윈도우 제한이 있다. 인기 영상은 댓글이 수천 개에 달하기 때문에 토큰을 체크하고, 청크 단위로 나눠 분석한 뒤 결과를 병합하는 파이프라인이 필요했다. 모델이 아직 다운로드되지 않은 경우(after-download 상태)를 UI에서 명확히 알려주고, 기기 요건을 충족하지 못할 때(no 상태)는 조용히 실패하는 대신 명시적인 메시지를 보여준다. 작은 디테일이지만 이게 UX의 신뢰를 만드는 부분이다.
두 흐름이 가리키는 하나의 질문
겉으로 보면 'AI 검색 가시성'과 '온디바이스 AI 활용'은 전혀 다른 주제처럼 보인다. 하지만 프론트엔드 개발자의 시각으로 들여다보면 이 두 흐름은 같은 질문을 던지고 있다. AI 시대에 우리가 만드는 프로덕트는 누구를 위해, 어떤 방식으로 설계되어야 하는가?
SPA가 AI 크롤러에게 보이지 않는다는 건, 우리가 그동안 '사람이 보는 인터페이스'만 설계해왔다는 뜻이다. 이제는 기계가 읽는 인터페이스도 함께 설계해야 한다. 온디바이스 AI가 의미 있는 건, 단순히 비용 절감이나 기술적 도전이 아니라 사용자의 데이터를 서버로 보내지 않아도 된다는 프라이버시 아키텍처의 선택지가 생겼다는 것이다. 두 경우 모두 '기술을 어떻게 쓸까'가 아니라 '이 경험이 사용자에게 진짜 도움이 되는가'를 먼저 물어야 한다는 점에서 동일하다.
프론트엔드의 역할은 조용히 확장되고 있다. 렌더링 전략 하나가 AI 검색 노출에 직결되고, 브라우저 API 하나가 백엔드 없는 AI 프로덕트를 가능하게 한다. 이 두 변화를 아키텍처 수준에서 이해하고 설계에 녹여내는 것이 지금 프론트엔드 개발자에게 요구되는 다음 역량이다.