INTRO
나는 이때까지 백엔드만 공부해와서 3학년 전공 수업 때 살짝 맛만 본 이후로 프론트엔드 쪽을 제대로 공부해보는 것은 사실상 이번이 처음인 것 같다.
하지만 개발자란.. 💭 백엔드를 희망해도 프론트엔드를 맡게 될 수 있고,, 희망 기업의 직무에 백엔드가 없을 수 있기 때문에 풀스택이 요즘은 필수인 것 같다.
얼마 전 오랜만에 동기들을 만나 이런저런 얘기를 나눴는데 이제는 개발 직무를 크게 따지지 않고 IT 보이면 그냥 무조건 지원해본다는 아주 공감가는 웃픈 얘기를 나눴던 기억이 난다.
LG CNS AM Inpire Camp도 프론트엔드 과정이 포함되어 있고 현재 진행 중이기 때문에 본격적으로 들어가기에 앞서 관련 용어들을 정리해보고자 한다.
렌더링이란?
(사전 평가에도 나오고 강사님께서 자주 언급하시는데 솔직히 나는 렌더링이 정확히 뭔지도 잘 몰랐다 ㅎㅎ... 매우 프린이)
렌더링이라는 것은 브라우저가 HTML,CSS,JavaScript 파일을 받아서 사용자가 볼 수 있는 화면으로 변환하는 과정을 말한다.
쉽게 말하면, 코드 형태로 작성된 웹 페이지를 실제 화면에 표시하는 작업이라고 할 수있다.
🔎 렌더링 과정
1️⃣ HTML 파싱 및 DOM 트리 생성
이때 DOM(Document Object Model)이란 브라우저가 HTML 문서 구조를 표현한 객체 모델을 말한다.
브라우저가 HTML 파일을 읽으면 각 태그를 객체(노드)로 변환해서 트리구조로 만드는데 이 트리구조를 DOM 트리라고 한다.
아래와 같은 HTML이 있을 떄
<!DOCTYPE html>
<html>
<body>
<h1>Hello, World!</h1>
<p>This is a paragraph.</p>
</body>
</html>브라우저는 다음과 같은 DOM 트리를 생성한다.
Document
└── html
└── body
├── h1
│ └── "Hello, World!"
└── p
└── "This is a paragraph."2️⃣ CSS 파싱 및 CSSOM 트리 생성
브라우저는 HTML에 포함된 style 태그나 link로 가져온 CSS 파일을 파싱해서 CSS 규칙을 트리 형태로 표현한 구조인 CSSOM(CSS Object Model) 트리를 생성한다.
CSS 코드
h1 {
color: red;
}
p {
font-size: 16px;
}CSSOM 트리
CSSOM
├── h1 { color: red; }
└── p { font-size: 16px; }3️⃣ DOM과 CSSOM 결합 → 렌더 트리(Render Tree) 생성
브라우저는 DOM 트리와 CSSOM 트리를 결합해서 렌더 트리를 생성한다.
렌더 트리는 각 요소의 스타일과 위치 정보를 포함하고 있어 실제 화면에 표시될 요소만 포함하고, head 태그나 disply:none 처럼 보이지 않는 요소는 포함되지 않는다.
✔️ visibility: invisible 속성은 비슷해보이지만, 요소가 눈에 보이지 않을 뿐, 공간을 차지하기 때문에 Render tree에 포함된다.
4️⃣ 레이아웃(Layout)
브라우저는 렌더 트리를 기반으로 각 요소의 정확한 크기와 위치를 계산하는데 이 과정을 레이아웃이라고 한다.
페이지에서 각 객체의 정확한 크기와 위치를 파악하기 위해 브라우저는 렌더링 트리의 루트부터 시작하여 렌더링 트리를 순회한다.
5️⃣ 페인팅(Painting)
페인팅은 계산된 정보를 기반으로 각 요소를 픽셀 단위로 화면에 그리는 과정으로 텍스트, 색상, 그림자, 이미지 등 스타일 속성이 실제 화면에 반영된다.
6️⃣ 합성(Compositing)
브라우저는 레이아웃 결과를 여러 레이어로 나누고, 각 레이어를 독립적으로 렌더링한다.
이후 레이어들을 합쳐 최종적으로 사용자 화면에 표시한다.
SSR과 CSR
SSR(Server-Side Rendering): 서버 측 렌더링
- 렌더링 작업이 서버에서 이루어지는 방식
- 서버가 완전한 HTML 파일을 브라우저로 전달하고 브라우저는 서버에서 제공한 HTML을 바로 화면에 표시한다.
- MPA 방식 또는 Next.js 같은 SPA 프레임워크에서 사용
- SEO에 유리: 검색엔진이 완전한 HTML 콘텐츠를 바로 크롤링 가능.
- 초기 로딩 속도가 빠름(HTML 파일에 콘텐츠가 포함되어 있음)
CSR(Client-Side Rendering) : 클라이언트 측 렌더링
- 렌더링 작업이 브라우저(클라이언트)에서 이루어지는 방식
- 서버는 HTML 파일과 JavaScript를 클라이언트에 제공하고, 브라우저가 JavaScript를 실행해 화면을 구성한다.
- SPA에서 주로 사용
- SEO가 어렵다: 초기 HTML이 비어 있어 검색엔진이 내용을 크롤링하지 못할 수 있다.
- 초기 로딩 속도가 느릴 수 있음
MPA vs SPA
MPA(Multi Page Application)
MPA는 전통적인 웹 사이트 개발 방식으로, 여러 개의 HTML 페이지로 구성된 웹 애플리케이션이다.
사용자가 새로운 페이지로 이동할 때마다 서버에서 HTML 파일을 새로 받아오는 방식으로 동작한다.
웹의 초기 시대에는 대부분의 웹 애플리케이션이 MPA 방식으로 작동했다.
구현이 간단하고 SEO(검색 엔진 최적화)에 유리했지만,
페이지를 전환할 때마다 모든 콘텐츠(HTML, CSS, JS 등)를 매번 새로 로드했기 때문에 속도가 느리고 서버 부하가 많았다.
예를 들어, 쇼핑몰에서 카테고리를 클릭할 때마다 새로운 페이지가 로드되어 전체 화면이 깜빡이곤 했다는 것이다.
SEO에 유리하다?
MPA를 사용하여 여러 페이지를 생성할 수 있기 때문에 훨씬 더 많은 수의 키워드를 타겟팅할 수 있다. 이렇게 하면 Google에서 얻을 수 있는 유기적 트래픽의 양이 자동으로 향상된다.
더 많은 페이지로 인해 여러 HTML 파일이 존재하는데, HTML 다운로드하여 페이지를 크롤링하기 때문에 검색 엔진이 작동하는 방식에 더 적합하다.
AJAX의 등장
AJAX(Asynchronous JavaScript and XML)는 웹 개발 기법 중 하나로, 서버와 데이터를 비동기적으로 주고받아 페이지 일부만 업데이트할 수 있게 해주는 기술이다.
AJAX의 등장으로 인해 페이지를 전체 새로 로드하지 않고 필요한 데이터만 요청하고 업데이트할 수 있게 됨으로써 페이지 전환 속도가 빨라지고 사용자 경험도 개선되었다.
하지만 페이지의 개수가 많아질수록 페이지간 상태 관리도 필요하고, 페이지가 점점 복잡해지면서 유지보수가 어려워졌다.
SPA(Single Page Application)
이에 MPA + AJAX의 한계를 극복하기 위해 등장한 것이 SPA(Single Page Application) 모델이다.
SPA는 하나의 HTML 파일 안에서 JavaScript로 필요한 데이터를 서버와 주고받으면서 화면을 동적으로 변경하는 웹 애플리케이션이다.
쉽게 말해, 하나의 페이지에서 새로운 페이지를 불러오지 않고, 필요한 부분만 동적으로 변경한다는 것이다.
SPA는 웹 애플리케이션에 필요한 모든 정적 리소스(HTML, CSS, JavaScript)를 최초 접근 시 한 번에 다운로드하고 한 번 로드된 후에는 추가적인 데이터만 서버와 주고받기 때문에 페이지 전환 속도는 매우 빠르지만 초기 로딩 속도가 느려질 수 있다는 단점도 존재한다.
SPA는 대부분 CSR(Client-Side Rendering) 방식을 사용해서 브라우저에서 JavaScript로 화면을 렌더링하는데 자바스크립트를 읽지 못하는 검색엔진에 대해서 크롤링이 되지않아 색인이 되지 않는 문제가 발생할 수 있다.
또한 SPA는 브라우저에서 많은 JavaScript를 실행하기 때문에 XSS(교차 사이트 스크립팅) 공격에 취약할 수 있어 보안 문제도 존재한다.
결론적으로는 MPA과 SPA 각각 장단점이 있기 때문에 어떤것이 낫다! 라고 결정짓기는 어렵다.
각자의 서비스의 상황에 따라 고려해서 분별있게 사용하는 것이 중요한것 같다.
👍😊👍