웹 렌더링 이해하기: 피자 만들기 비유로 살펴보다

Table of Contents

비유: 피자 만들기
웹 렌더링 설명
- 브라우저 내 렌더링 메커니즘
사용자 브라우저 렌더링 vs 웹 서버 측 Node.js 렌더링

웹 렌더링과 웹 페이지 렌더링 메커니즘을 비유를 사용하여 살펴보겠습니다.

비유: 피자 만들기

피자를 만들고 싶다고 상상해보세요.

피자의 구조를 알려주는 레시피(HTML)가 있습니다: 도우, 소스, 토핑, 치즈.
또한 이러한 토핑을 추가하는 특정 스타일 또는 방법이 있습니다: 양파를 얼마나 얇게 썰어야 하는지, 치즈를 어떻게 퍼뜨려야 하는지 등(CSS).
마지막으로, 서빙하기 직전에 올리브 오일을 뿌리거나 누가 피자를 먹을지에 따라 토핑을 조절하고 싶을 수도 있습니다(JavaScript).

이러한 재료(HTML, CSS, JavaScript)를 결합하여 최종 피자(당신이 보는 웹페이지)를 만드는 과정은 브라우저의 렌더링 과정과 유사합니다.

웹 렌더링 설명

레시피 가져오기 (HTML): URL을 입력하고 Enter 키를 누르면, 브라우저는 웹 페이지의 "레시피"를 가져오기 위해 인터넷으로 이동합니다. 이것은 기본 구조를 제공합니다: 제목, 문단, 링크, 이미지 등.
스타일 이해하기 (CSS): 구조와 함께, 브라우저는 CSS로 작성된 스타일을 가져옵니다. 이것은 브라우저에게 요소가 어떻게 보여야 하는지 알려줍니다: 색상, 폰트, 간격 등.
동적 요소 준비하기 (JavaScript): 때로는 웹사이트에 동적 컨텐츠가 있습니다. 예를 들어 버튼을 클릭하면 새로운 문단이 나타날 수 있습니다. 이것은 JavaScript에 의해 제어됩니다. 브라우저는 이를 가져와 페이지에서 어떤 동적 변경이 발생해야 하는지 이해합니다.
모든 것을 결합하기: 브라우저는 그런 다음 HTML, CSS 및 JavaScript에서의 변경 사항을 결합하여 Render Tree라는 시각적 표현을 만듭니다. 이것은 레시피와 스타일을 기반으로 모든 피자 재료를 올바른 순서로 배치하는 것과 같습니다.
최종 페이지 표시하기 (페인팅): 브라우저는 이 시각적 표현을 화면에 '그립니다'. 이것은 모든 재료를 맛있는 완성된 제품으로 바꾸는 것, 즉 피자를 굽고 제공하는 것과 같습니다.

브라우저 내 렌더링 메커니즘

flowchart TD classDef default fill:#f9f9f9,stroke:#333,stroke-width:2px; classDef emphasis fill:#efefef,stroke:#666,stroke-width:2px; Fetch[URL 입력 후 Fetch] --> Parse[HTML & CSS 파싱] Parse --> DOM[DOM 구성] DOM --> RenderTree[Render Tree 생성] RenderTree --> Layout[레이아웃: 크기와 위치 생성] Layout --> Paint[페인팅: 화면에 보여주기] Paint --> JS[JavaScript 실행] JS --> DOM{DOM 업데이트?} DOM --> Update[화면 업데이트] class Fetch,Parse,DOM,RenderTree,Layout,Paint,JS,Update emphasis

파싱: 브라우저는 HTML과 CSS를 읽어서 이해할 수 있는 형식으로 변환합니다.
DOM (Document Object Model) 구성: 파싱된 HTML로부터 브라우저는 페이지의 모든 요소를 나타내는 DOM이라는 구조를 만듭니다.
Render Tree 생성: 브라우저는 DOM과 CSS를 결합하여 화면에 어떻게 표시될 요소를 나타내는 Render Tree를 생성합니다.
레이아웃: 브라우저는 화면에 모든 것이 어디에 위치하는지 계산하여 각 요소의 크기와 위치를 결정합니다.
페인팅: 이 단계에서 최종적으로 확정된 Render Tree는 화면의 픽셀로 변환되어 웹 페이지가 표시됩니다.
JavaScript 실행: JavaScript가 있다면, 브라우저는 이를 실행하게 되며, 이는 DOM을 업데이트하고 따라서 화면에 보이는 것을 업데이트 할 수 있습니다.

요약하면, 웹 렌더링은 브라우저가 웹사이트의 코드(HTML, CSS, 및 JavaScript)를 가져와 시각적인 웹 페이지로 변환하는 과정입니다. 피자 재료를 완성된 피자로 바꾸는 것처럼, 브라우저는 코드를 매일 상호 작용하는 웹사이트로 바꿉니다!

사용자 브라우저 렌더링 vs 웹 서버 측 Node.js 렌더링

웹사이트의 코드를 최종 사용자에게 표시할 수 있는 형식으로 변환하는 과정에서 브라우저 기반 렌더링과 Node.js를 사용한 서버 측 렌더링 모두 포함됩니다. 그러나 두 방법은 접근 방식, 장점, 사용 사례에서 크게 다릅니다. 이 두 가지의 차이점을 논의해 보겠습니다:

렌더링 위치

브라우저 렌더링 (클라이언트 측 렌더링):
- 원시 데이터(HTML, CSS, 그리고 잠재적으로 JavaScript)가 브라우저로 직접 전송됩니다.
- 브라우저는 JavaScript를 실행하여 내용과 스타일을 생성하고 사용자에게 표시합니다.
- React, Vue, Angular와 같은 인기 있는 프레임워크는 기본적으로 이 방법을 사용합니다.
Node.js를 사용한 서버 측 렌더링:
- 서버는 먼저 웹사이트의 코드(JavaScript 포함)를 실행하고 최종 HTML 내용을 생성합니다.
- 이 최종 HTML이 브라우저로 전송되어 사용자에게 표시됩니다.
- 이 방법은 서버에서 내용을 생성하기 위해 Next.js(React용) 및 Nuxt.js(Vue용)와 같은 프레임워크에서 사용됩니다.

초기 로드 시간

브라우저 렌더링:
- 브라우저가 먼저 JavaScript를 다운로드하고 내용을 생성하기 위해 처리해야 하므로 초기 로드 시간이 느릴 수 있습니다.
서버 측 렌더링:
- 브라우저는 사전 렌더링된 HTML 내용을 받기 때문에 초기 페이지 로드가 일반적으로 더 빠릅니다.

SEO (검색 엔진 최적화)

브라우저 렌더링:
- 클라이언트 측에서 렌더링된 내용은 검색 엔진이 JavaScript를 제대로 기다리거나 실행하지 않을 수 있기 때문에 항상 제대로 색인되지 않았습니다. 그러나 Google과 같은 현대의 검색 엔진은 클라이언트에서 렌더링된 내용을 색인하는 능력을 향상시켰지만, 여전히 도전과제가 있을 수 있습니다.
서버 측 렌더링:
- 검색 엔진이 완전히 렌더링된 내용을 받기 때문에 SEO에 더 유리합니다. 이로 인해 모든 내용이 색인됩니다.

자원 사용량

브라우저 렌더링:
- 기기가 JavaScript를 처리하고 내용을 렌더링해야 하므로 클라이언트의 기기에 더 많은 부하가 생깁니다.
서버 측 렌더링:
- 특히 높은 트래픽 동안 서버에 더 많은 부하가 발생합니다. 서버는 각 요청에 대해 내용을 렌더링해야 합니다.

상호 작용 및 후속 로드

브라우저 렌더링:
- 초기 내용이 로드되고 JavaScript 애플리케이션이 초기화되면 후속 상호 작용 및 페이지 변경은 매우 빠를 수 있으며, 전체 페이지를 다시 로드할 필요가 없을 수 있습니다.
서버 측 렌더링:
- 초기 로드는 완전히 렌더링된 페이지를 제공하지만, 후속 상호 작용은 클라이언트 측 JavaScript(하이브리드 접근법을 위한) 또는 서버에 새 요청을 생성하여 처리될 수 있습니다.

데이터 유연성

브라우저 렌더링:
- 내용은 종종 AJAX 또는 유사한 기술을 사용하여 필요에 따라 동적으로 가져옵니다. 이로 인해 더 상호 작용적이고 실시간 경험이 가능합니다.
서버 측 렌더링:
- 초기 내용은 서버에서 생성되지만, 초기 로드 후에 동적 작업 또는 업데이트는 클라이언트 측 JavaScript를 사용하여 처리될 수 있습니다.

사용 사례

브라우저 렌더링:
- 내용이 자주 업데이트되거나 사용자 상호 작용에 따라 변경되는 웹 응용 프로그램, 예를 들면 단일 페이지 응용 프로그램(SPA)에 적합합니다.
서버 측 렌더링:
- SEO가 중요하고 내용이 실시간으로 자주 변경되지 않는 콘텐츠 중심의 웹사이트, 예를 들면 블로그나 전자상거래 사이트에 적합합니다.

결론적으로, 브라우저 렌더링과 서버 측 렌더링 사이의 선택은 웹 응용 프로그램 또는 웹사이트의 특정 필요와 제약 조건에 따라 달라집니다. 두 방법 모두 장단점이 있으며, 현대의 응용 프로그램은 두 세계의 최선을 얻기 위해 종종 하이브리드 접근법을 사용할 수 있습니다.