블링크와 웹킷이란 무엇인가

둘 다 렌더링 엔진 이름이에요. 페이지에 나온 "브라우저의 심장", 그러니까 HTML 글자를 읽어서 화면에 그려주는 핵심 부품이요.

자동차로 비유하면

• 브라우저(크롬, 사파리, 엣지...) = 차 브랜드랑 겉모양
• 렌더링 엔진(블링크, 웹킷) = 보닛 안 엔진

겉모양은 달라도 엔진이 같으면 웹페이지가 거의 똑같이 보여요.

웹킷 (WebKit)

• 애플이 2003년에 사파리용으로 만든 엔진이에요.
• 맨땅에서 만든 건 아니고, 리눅스 쪽 오픈소스 엔진(KHTML)을 가져다 키운 거예요.
• 지금 쓰는 곳: 사파리, 그리고 아이폰에 있는 모든 브라우저. 애플이 아이폰에서는 웹킷만 쓰도록 강제해서, 아이폰 크롬 앱도 속은 웹킷이에요.

블링크 (Blink)

• 구글이 2013년에 웹킷에서 갈라져 나와 만든 엔진이에요.
• 크롬도 처음(2008년)엔 웹킷을 썼어요. 그러다 구글이 "우리 방식대로 빨리 바꾸고 싶다" 해서 따로 나왔어요.
• 지금 쓰는 곳: 크롬, 엣지(2020년부터), 오페라, 삼성인터넷, 네이버 웨일 등. 요즘 브라우저 대부분이 여기에 속해요.

족보로 보면 KHTML → 웹킷(애플) → 블링크(구글) 결국 블링크와 웹킷은 같은 뿌리에서 나온 형제예요. 남은 한 집안은 파이어폭스의 게코예요.

그래서 페이지 9번에 나온 것처럼, Crux 화면 확인할 땐 PC 크롬(블링크) 하나랑 아이폰 사파리(웹킷) 하나만 보면 거의 다 확인돼요.

한마디로 글자로 된 HTML 문서를 우리가 보는 화면으로 바꿔주는 일을 해요.

시공에 비유하면

• HTML = 도면 (어디에 뭐가 있는지: 제목, 사진, 버튼)
• CSS = 마감 사양서 (색깔, 크기, 글꼴, 배치)
• 렌더링 엔진 = 시공팀 (도면이랑 사양서를 보고 실제로 지어줌)

엔진이 하는 일 순서

1. 읽기: HTML을 한 줄씩 읽고 "제목 1개, 사진 2장, 버튼 3개" 하는 식으로 구조를 파악해요.
2. 꾸밈 확인: CSS를 보고 요소마다 색, 크기, 글꼴을 정해요.
3. 배치 (레이아웃): 화면 폭에 맞춰 각 요소의 위치와 크기를 계산해요. 폰에서 화면이 세로로 바뀌는 게 이 단계예요.
4. 그리기 (페인트): 계산한 대로 실제 픽셀을 칠해서 화면에 띄워요.
5. 다시 그리기: 스크롤하거나 버튼을 누르거나 내용이 바뀌면 필요한 부분만 빠르게 다시 그려요.

참고로 짝꿍이 하나 더 있어요 버튼을 눌렀을 때 계산하고 데이터를 불러오는 "움직이는 부분"(자바스크립트)은 JS 엔진이 따로 맡아요. 페이지 6번에 나온 크롬의 V8이 그거예요.

• 렌더링 엔진 = 화면을 짓고 그리는 담당
• JS 엔진 = 기능이 돌아가게 하는 담당

왜 중요하냐면 같은 도면이라도 시공팀마다 마감이 조금씩 다르게 나오잖아요. 마찬가지로 같은 Crux 화면도 블링크(크롬)랑 웹킷(아이폰)에서 글자 줄바꿈이나 간격이 살짝 다르게 보일 수 있어요. 그래서 이 두 개는 꼭 따로 확인하는 거예요.

엄밀히는 둘 사정이 조금 달라요.

블링크: 포함 안 돼 있음

• 블링크는 화면 그리는 일만 해요.
• JS 엔진은 V8이라는 별도 프로젝트예요.
• 크롬, 엣지, 웨일 같은 브라우저가 블링크와 V8을 같이 끼워서 쓰는 구조예요.
• V8은 따로 떼어서도 써요. 대표적인 게 서버용 자바스크립트인 Node.js예요. 즉 V8은 브라우저 밖에서도 일해요.

웹킷: 한 묶음에 들어 있음

• 웹킷 프로젝트 안에 JavaScriptCore(JSC) 라는 JS 엔진이 같이 들어 있어요.
• 내부적으로는 화면 담당과 JS 담당이 나뉘어 있지만, 같은 프로젝트에서 같이 관리돼요.
• 사파리랑 아이폰 브라우저들은 이 세트를 통째로 써요.

정리하면

시공으로 치면 블링크는 인테리어팀과 설비팀이 다른 회사인데 크롬이 둘을 같이 계약한 거고, 웹킷은 한 회사 안에 두 팀이 다 있는 구조예요.

그래서 아이폰 크롬 앱은 화면만이 아니라 JS도 V8이 아닌 JavaScriptCore로 돌아가요. Crux 기능이 아이폰에서만 이상하게 동작할 때 원인이 여기 있을 수 있어요.