다른 직군 개발자가 신규 SPA 프론트 구조를 이해할 수 있도록, 렌더링 과정부터 SSR·CSR과 SPA·MPA의 차이까지 설명했습니다.
- 무대
- 전사 개발자 컨퍼런스 · 프론트엔드팀 연사
- 날짜
- 2024
01배경
회사 서비스는 서버 템플릿(MPA) 기반 레거시와 프론트엔드팀이 새로 만든 SPA가 공존했습니다. 백엔드·앱·QA 등 다른 직군이 '왜 새 화면은 첫 로딩이 느린데 그 뒤엔 빠른가', '왜 검색 노출이 다른가'를 물었고, 그 질문에 답하려면 브라우저가 화면을 만드는 과정부터 공유해야 했습니다. 프론트엔드팀 대표로 전사 컨퍼런스에서 발표했습니다.
02구성
- 01프론트엔드가 분리된 과정 — 웹 트렌드 변화 → Ajax 비동기 통신 → 프론트/백엔드 분리
- 02브라우저 기본 구조 — UI · 브라우저 엔진 · 렌더링 엔진 · 네트워크 · JS 엔진 · 자료저장소
- 03렌더링 과정 — HTML/CSS 파싱(DOM·CSSOM) → 렌더 트리 → 레이아웃 → 페인팅
- 04SSR 흐름과 장점 — 서버가 완성 HTML을 내려 즉시 그리고, JS를 받은 뒤 Hydration. 초기 속도·저사양 기기·SEO
- 05CSR 흐름과 장점 — 빈 뼈대 + JS 전체 다운로드 후 브라우저가 DOM 생성. 화면 전환 속도·전체 리로딩 없음
- 06우리 서비스는 CSR 방식의 SPA — SPA란 무엇인가
- 07Virtual DOM — DOM 변경이 리플로우·리페인트를 부르는 비용, 바뀐 부분만 갱신하는 원리
- 08MPA vs SPA — 회사 레거시 페이지(MPA)와 신규 페이지(SPA)를 예로 성능·UX·SEO·개발 복잡도 비교
- 09마무리 — 직군 간 서로의 구조를 이해하는 것이 협업의 시작
03핵심 메시지
SSR과 CSR은 '어디서 HTML을 완성하는가'의 차이다 — 서버냐 브라우저냐. 장단점은 전부 여기서 갈린다.
SPA의 첫 로딩이 느리고 그 뒤가 빠른 건 버그가 아니라 구조다. JS를 먼저 받고, 이후엔 바뀐 부분만 그린다.
검색 노출이 필요한 페이지와 로그인 뒤 화면은 다른 전략이 맞다 — 하나의 정답이 아니라 화면 성격에 따른 선택이다.