서버가 병목이다 — 근본 질문부터 시작하자
CodeSandbox, StackBlitz, CodePen. 우리가 매일 쓰는 클라우드 IDE 대부분은 같은 구조를 공유한다. 브라우저에서 코드를 입력하면 WebSocket을 통해 원격 Node.js 또는 Docker 컨테이너로 전송되고, 서버가 컴파일한 뒤 결과를 다시 돌려보낸다. 작동은 한다. 하지만 키를 누를 때마다 네트워크 레이턴시와 싸워야 한다. Wi-Fi가 잠깐 끊기거나 서버 부하가 높아지면 flow state는 그 자리에서 무너진다.
이 구조적 한계에 정면으로 도전한 사례가 있다. dev.to에 공개된 NitroIDE 빌드 과정 글에서 개발자는 질문 하나를 던진다. "서버를 완전히 없애면 어떻게 될까?" 그 답이 바로 iframe srcdoc 기반의 로컬 퍼스트 라이브 프리뷰 엔진이다.
핵심 무기: iframe srcdoc
대부분의 개발자가 iframe을 YouTube 영상 임베드나 외부 URL 로딩 수단 정도로 인식한다. 하지만 srcdoc 속성은 다르다. HTML, CSS, JavaScript를 문자열로 직접 주입하면 브라우저가 이를 완전히 격리된 독립 문서로 처리한다. URL을 fetch하지 않으니 네트워크 요청이 없고, 렌더링은 말 그대로 즉각적이다.
구현 자체는 단순하다. Monaco나 CodeMirror 같은 에디터에서 코드를 가져와 하나의 HTML 문자열로 조합하고 iframe.srcdoc에 할당하면 끝이다. 키 입력이 화면 반영으로 이어지는 데 걸리는 시간은 0ms, 즉 브라우저 렌더링 사이클 그 자체다.
세 가지 구현 레이어
이 아키텍처를 프로덕션 수준으로 끌어올리려면 기본 주입 외에 두 가지를 더 해결해야 한다.
콘솔 가로채기. iframe 안에서 실행되는 console.log()는 브라우저 DevTools에만 찍힌다. IDE를 만든다면 이 로그를 커스텀 UI에 출력해야 한다. 해법은 사용자 코드 실행 전에 console.log와 console.error를 오버라이드하는 인터셉터 스크립트를 주입하는 것이다. 오버라이드된 메서드는 postMessage API로 부모 창에 로그를 전송하고, 부모는 window.addEventListener('message', ...)로 이를 수신해 커스텀 터미널 UI에 렌더링한다.
샌드박스 보안. 사용자가 입력한 JavaScript를 그냥 실행하면 부모 창의 쿠키, localStorage, 세션 토큰에 접근할 수 있다. sandbox 속성이 이 문제를 해결한다. sandbox="allow-scripts allow-modals"를 설정하면 iframe은 '유니크 오리진'으로 격리되어 부모 컨텍스트에 접근하는 경로가 차단된다. 스크립트 실행은 허용하되, 탈출 경로는 없애는 방식이다.
이 아키텍처가 의미하는 것
단순히 '서버 없이 돌아간다'는 것보다 더 큰 임플리케이션이 있다.
첫째, 레이턴시 제로는 UX 패러다임의 전환이다. v0.dev나 Cursor 같은 AI 기반 프로토타이핑 도구가 코드를 생성할 때, 그 결과를 실시간으로 프리뷰하는 경험은 '도구를 쓰는 느낌'과 '생각이 바로 구현되는 느낌'을 가르는 결정적 차이다. AI가 코드를 제안하는 속도와 프리뷰가 반응하는 속도가 같아질 때, 피드백 루프는 비로소 완성된다.
둘째, 인프라 비용 구조가 바뀐다. 클라우드 컨테이너를 사용자별로 프로비저닝하는 모델에서 벗어나면 AWS 비용이 사라진다. 실행은 사용자의 로컬 메모리에서 일어나고, 코드는 외부로 나가지 않는다. 개인정보 보호와 비용 절감이 동시에 달성된다.
셋째, 브라우저가 런타임이 된다는 것은 오프라인 퍼스트의 가능성이기도 하다. 네트워크 없이 코딩 환경이 작동한다는 것은 교육 도구, 로컬 프로토타이핑 환경, 임베디드 IDE 시나리오에서 완전히 새로운 제품 설계 공간을 열어준다.
한계와 확장 가능성
물론 이 접근법이 모든 것을 대체할 수는 없다. Node.js 환경이 필요한 백엔드 코드, 파일 시스템 접근, npm 패키지 설치는 순수 클라이언트 사이드에서 처리하기 어렵다. NitroIDE는 이 한계를 CDN 기반 패키지 로딩과 가상 파일 시스템으로 일부 극복하지만, 복잡한 빌드 파이프라인까지 브라우저로 옮기려면 WebAssembly 레이어가 필요해진다. StackBlitz의 WebContainers가 그 방향의 선도 사례다.
전망: AI 프로토타이핑 도구의 다음 레이어
브라우저 기반 실행 엔진의 성숙은 AI 코드 생성 도구와 결합할 때 더 흥미로워진다. 오늘날 AI가 컴포넌트를 생성하고 사용자가 그 결과를 보기까지 불필요한 지연이 존재한다. srcdoc 기반 프리뷰 엔진이 AI 생성 루프 안에 직접 통합된다면, 생성-수정-확인의 사이클이 단일 브라우저 세션 안에서 완결될 수 있다. '코드가 곧 화면'인 경험. 그것이 이 작은 srcdoc 속성이 가리키는 방향이다.