- 2008년경 프론트엔드를 떠난 개발자를 대상으로, 지난 20년간의 변화를 설명하는 글
- 모든 도구는 실제 문제(상처) 위에 생긴 흉터 조직이며 각 레이어의 해결책이 다음 레이어의 문제를 만들며 쌓였다는 것이 전체 논지
- 글 전체에서
<button>하나를 표본으로 삼아 각 시대에 버튼이 어떻게 변했는지 추적함
- Layer I — jQuery (2006–2010)
- 전체 페이지를 새로고침하지 않고 일부만 바꾸고 싶다는 요구에서 시작됨
- jQuery가 브라우저 간 차이를 없애고 AJAX를 대중화했으나, 데이터가 JS 변수와 화면 양쪽에 존재해 개발자가 직접 동기화해야 하는 문제가 생김
- 이 수동 DOM 조작이 이후 모든 레이어가 해결하려는 "원죄"임
- Layer II — 프레임워크 (2010–2015)
- 선언적 UI: 화면을 갱신하는 절차 대신 데이터에 따른 화면의 모습을 기술하면 프레임워크가 갱신을 처리함
- React가 컴포넌트 + JSX + Virtual DOM으로 시대를 주도했고, Vue/Angular/Svelte/Solid가 뒤를 이음
- 현재 모든 프레임워크는 의존 관계를 추적해 필요한 곳만 갱신하는 signal 개념으로 수렴 중
- htmx, Alpine.js, Hotwire 등 서버에서 HTML을 보내는 방식으로 회귀하는 진영도 존재함
- Layer III — 빌드 (2012–2018)
- JS에 모듈 시스템이 없어 CommonJS와 ES Modules가 경쟁했고, 구형 브라우저 호환을 위해 Babel 트랜스파일과 webpack 번들링이 필요해짐
- 빌드는 minify, tree-shaking, 코드 분할, 소스맵 생성을 포함함
- 대가로 node_modules가 생겼으며, 빈 스타터 프로젝트도 25만 개가량의 파일을 설치함
- Layer IV — 툴링 경쟁 (2018–2024)
- 느린 빌드와 복잡한 webpack 설정 문제를 Go/Rust로 재작성해 해결한 시대
- esbuild(Go)가 번들링을 10–100배 빠르게 만들었고, SWC(Rust)가 Babel을 대체함
- Vite가 기본 도구로 자리잡았고, 프로덕션 번들러는 Rust 기반 Rolldown으로 교체 중이며 관련 스택이 VoidZero(최근 Cloudflare가 인수) 아래로 통합되는 중
- 패키지 매니저도 pnpm, Bun 등으로 같은 흐름을 따름
- Layer V — 서버 렌더링의 귀환 (2014–2026)
- SPA는 서버가 빈 div만 보내므로 초기 로딩 시 빈 화면이 뜨고 검색엔진에도 빈 페이지로 보이는 문제가 있었음
- 해결책은 서버에서 HTML을 다시 렌더링하는 것으로, 2008년 방식으로의 회귀임
- SSR(요청마다 렌더링), SSG(빌드 시 사전 렌더링), ISR(자동 갱신되는 SSG)이 등장했고 Next.js, Astro, SvelteKit, Nuxt 등 메타 프레임워크가 이를 담당함
- 서버 HTML을 브라우저에서 다시 살리는 hydration 비용이 새로운 문제가 되었고, Islands(Astro), Resumability(Qwik), React Server Components가 hydration을 줄이는 방식으로 등장함
- Layer VI — 엔지니어링 도구 (2015–2026)
- TypeScript가 타입 시스템으로 리팩터링 안정성을 확보했고 사실상 표준이 됨
- Tailwind가 유틸리티 클래스 방식으로 스타일링을 주도하는 한편, 네이티브 CSS도 nesting, 변수, container query 등으로 발전해 기존 툴링의 필요가 줄어듦
- shadcn/ui는 컴포넌트를 설치하는 대신 소스를 복사해 소유하는 방식을 정착시켰고, TanStack Query, Zustand, Zod, Vitest, Playwright가 2026년 앱의 기본 어휘를 구성함
- Layer VII — 배포 (2015–2026)
- FTP 업로드 대신 Git 저장소를 Vercel/Netlify/Cloudflare에 연결하면 push마다 자동 빌드·배포되고 PR마다 라이브 프리뷰 URL이 생성됨
- 서버리스 함수와 엣지(사용자 근처 수백 개 데이터센터에서 코드 실행) 개념이 정착함
- Layer VIII — AI (2023–2026)
- v0, Lovable, Bolt에 자연어로 설명하면 동작하는 프론트엔드가 생성되고, Cursor, Claude Code, Copilot이 코드를 대신 작성함
- 백엔드/시스템 엔지니어도 하루 만에 프론트엔드를 만들 수 있게 되어 엔지니어링 분야 간 경계가 흐려짐
- 다만 생성된 코드는 위 8개 레이어의 지식을 전제하며, 이 격차를 메우는 것이 이 글의 목적임
- Bedrock — 결론
- 2026년 최전선의 방향은 서버에서 HTML을 렌더링하고, JS를 거의 보내지 않고, 웹 플랫폼을 활용하는 것임
- 업계가 20년간 큰 원을 그린 끝에 FTP로 올리던 파일과 닮은 지점으로 돌아왔다고 정리함