# 웹 브라우저 엔지니어링 (2021)

> Clean Markdown view of GeekNews topic #17255. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=17255](https://news.hada.io/topic?id=17255)
- GeekNews Markdown: [https://news.hada.io/topic/17255.md](https://news.hada.io/topic/17255.md)
- Type: GN+
- Author: [neo](https://news.hada.io/@neo)
- Published: 2024-10-16T09:40:14+09:00
- Updated: 2024-10-16T09:40:14+09:00
- Original source: [browser.engineering](https://browser.engineering/index.html)
- Points: 2
- Comments: 1

## Topic Body

- **웹 브라우저 엔지니어링 소개**
  - 웹 브라우저는 일상적으로 사용되지만, 그 작동 원리는 복잡함. 이 책은 네트워킹부터 JavaScript까지 몇 천 줄의 Python 코드로 기본적이지만 완전한 웹 브라우저를 구축하는 방법을 설명함.

- **서문**
  - 웹 브라우저와 웹의 역사에 대한 개요를 제공함.

- **1부: 페이지 로드**
  - **웹 페이지 다운로드**
    - URL과 HTTP 요청을 통해 웹 페이지를 다운로드하는 방법 설명.
  - **화면에 그리기**
    - 창을 생성하고 캔버스에 그리는 방법 설명.
  - **텍스트 서식**
    - 단어 줄 바꿈과 줄 간격 조정 방법 설명.

- **2부: 문서 보기**
  - **HTML 트리 구성**
    - HTML을 파싱하고 수정하는 방법 설명.
  - **페이지 레이아웃**
    - 인라인 및 블록 레이아웃 적용 방법 설명.
  - **작성자 스타일 적용**
    - CSS를 파싱하고 적용하는 방법 설명.
  - **버튼 및 링크 처리**
    - 하이퍼링크와 브라우저 크롬 처리 방법 설명.

- **3부: 애플리케이션 실행**
  - **서버로 정보 전송**
    - 양식 제출 및 웹 서버와의 상호작용 방법 설명.
  - **인터랙티브 스크립트 실행**
    - DOM 변경 및 이벤트 반응 방법 설명.
  - **데이터 보호**
    - 쿠키 및 로그인, XSS 및 CSRF에 대한 설명.

- **4부: 현대 브라우저**
  - **시각적 효과 추가**
    - 블렌딩, 클리핑, 합성 방법 설명.
  - **작업 및 스레드 스케줄링**
    - 이벤트 루프 및 렌더링 파이프라인 설명.
  - **애니메이션 및 합성**
    - GPU를 사용한 부드러운 애니메이션 설명.
  - **콘텐츠 접근성 제공**
    - 키보드 입력, 확대/축소, 접근성 트리 설명.
  - **임베디드 콘텐츠 지원**
    - 이미지, iframes, 스크립팅 지원 방법 설명.
  - **이전 계산 재사용**
    - 무효화, 편집, 정확성 설명.

- **결론**
  - 다루지 않은 내용과 변화하는 환경에 대한 설명.

- **부록**
  - 용어집, 참고 문헌, 저자 소개, 기여자 목록, 이 책을 기반으로 한 강의 목록 포함.

### GN⁺의 정리
- 이 책은 웹 브라우저의 작동 원리를 이해하고자 하는 사람들에게 유용함. Python을 사용하여 브라우저를 구축하는 과정을 통해 네트워킹, HTML 파싱, CSS 적용 등 다양한 기술을 배울 수 있음.
- 웹 브라우저의 역사와 현대 브라우저의 기능을 이해하는 데 도움을 줌. 특히, 웹 보안과 접근성에 대한 내용을 포함하고 있어 실무에 적용할 수 있는 지식을 제공함.
- 이 책은 웹 개발자나 소프트웨어 엔지니어에게 흥미롭고 유익할 수 있으며, 웹 브라우저의 내부 작동 방식을 이해하는 데 큰 도움이 될 것임.

## Comments



### Comment 30087

- Author: neo
- Created: 2024-10-16T09:40:15+09:00
- Points: 1

###### [Hacker News 의견](https://news.ycombinator.com/item?id=41846780) 
- 'Stuff I didn't do' 부분이 이 책의 훌륭한 점임
  - 레이아웃 작업은 매우 어려움
  - CSS는 레이아웃을 더욱 복잡하게 만듦
  - CSS, HTML, JavaScript는 현재 매우 복잡한 소프트웨어임
  - 비디오 디코딩은 하드웨어로 오프로드되어 배터리 소모가 줄어듦

- 15년 전 헤드리스 브라우저 작업을 시작했으며, SpiderMonkey를 사용하여 JS 인터프리터로 활용했음
  - 커스텀 DOM 구현과 Flash 런타임을 추가했음
  - 이 프로젝트는 매우 재미있었음
  - 이 책에 관심이 있음

- 이 책은 MITRE ATT&CK을 떠올리게 하는 포괄적인 자료임

- 브라우저 엔지니어링이 트렌드가 되는 것이 신선함
  - 현재는 Google, Apple, Mozilla가 주도하고 있음
  - 독립적인 브라우저 엔진이 더 많아지기를 바람

- 저자가 Python을 선택한 이유를 설명한 글이 있음
  - 일부는 Python을 JS로 컴파일하여 브라우저에서 실행됨

- 저자 중 한 명이 감사의 말을 전하며 질문에 답변할 준비가 되어 있음

- 재미있는 프로젝트를 찾고 있었으며, 이 책을 즐기고 있음
  - Chrome 작동 방식을 설명한 만화책도 시작하기 좋은 자료임

- 이러한 자료가 만들어지는 것이 매우 흥미로움
  - 브라우저는 신비롭고 해독하기 어려운 블랙박스처럼 보임
  - Ladybird와 같은 프로젝트가 그 벽을 허물고 있음
  - 언젠가 기여하고 싶으며, 이 책이 훌륭한 시작점임

- 브라우저 내부 구조에 대해 배우고 있으며, 이 책이 매우 유용함
  - 브라우저 작동 방식을 직관적으로 이해하는 데 도움을 줌

- 좋은 책이며, 9장을 두 개의 별도 장으로 나누는 것을 추천함
  - JavaScript 실행과 DOM 및 이벤트 상호작용을 각각 다루는 것이 좋음