웹 브라우저 엔진을 새로 만드는 프로젝트 Servo가 9월 개발 소식을 공개했어요. 제목에 꼽힌 항목은 <progress> 요소와 둥근 사각형(rounded rectangles)인데요. '진행 막대 하나가 뉴스라고?' 싶을 수 있지만, 바로 거기에 이 프로젝트의 재미가 있거든요. 우리가 매일 당연하게 쓰는 태그 하나하나가, 엔진을 새로 만드는 쪽에서는 전부 직접 구현해야 하는 숙제니까요.
> 참고: 이 글은 원문 전문을 확인하지 못한 채, 제목에 나온 사실과 공개된 배경 지식으로 썼어요. 9월 변경 사항의 전체 목록과 Servo의 실제 구현 방식은 공식 블로그에서 확인해 주세요.
Servo가 뭐냐면
브라우저 엔진은 HTML과 CSS를 받아서 화면에 그려주는 프로그램이에요. 크롬의 Blink, 사파리의 WebKit, 파이어폭스의 Gecko가 대표적이죠. 자동차로 치면 브랜드는 달라도 안에 들어가는 엔진은 몇 종류 안 되는 셈이에요.
Servo는 Mozilla가 2012년쯤 Rust로 시작한 연구 프로젝트예요. Rust는 메모리 관련 버그를 컴파일 단계에서 많이 막아주는 언어인데, 브라우저처럼 크고 복잡한 프로그램에서는 이런 버그가 곧 보안 사고로 이어지기 쉽거든요. Servo에서 나온 CSS 엔진 Stylo와 렌더러 WebRender는 실제로 Firefox에 들어가기도 했어요. 2020년 Mozilla 구조조정 이후 프로젝트는 Linux Foundation으로 넘어갔고, 지금은 Linux Foundation Europe 아래에서 Igalia 같은 회사의 개발자들이 중심이 되어 이어가고 있어요.
진행 막대 하나가 왜 일이냐면
쓰는 입장에서는 <progress value='70' max='100'></progress> 한 줄이면 끝이에요. 그런데 엔진 입장에서는 챙길 게 꽤 많거든요.
먼저 상태가 두 가지예요. value가 있으면 '70% 진행됨'처럼 확정된 상태고, value를 빼면 '얼마나 남았는지 모름'을 뜻하는 불확정(indeterminate) 상태가 돼요. 이때 CSS의 :indeterminate 선택자가 걸리고, 자바스크립트의 position 속성은 -1을 돌려줘야 해요. 표준에 적힌 이런 세부 동작을 하나씩 맞춰야 하는 거죠.
모양도 문제예요. 브라우저마다 기본 디자인이 있고, 개발자는 이걸 CSS로 바꾸고 싶어 하거든요. 그래서 Blink와 WebKit은 ::-webkit-progress-bar와 ::-webkit-progress-value를, Gecko는 ::-moz-progress-bar를 제공해요. 막대 안쪽을 따로 꾸밀 수 있게 열어둔 손잡이 같은 거예요. 여기에 스크린 리더가 진행 표시줄로 읽어줄 수 있게 접근성 정보도 내보내야 해요. 태그 하나에 표준, 렌더링, 스타일, 접근성이 전부 얽혀 있는 거죠.
둥근 사각형도 마찬가지예요
웹에서 둥근 사각형이 나오는 경로는 크게 두 가지예요. CSS의 border-radius와 Canvas의 roundRect()인데요. 제목의 표현만으로는 이번 소식이 어느 쪽인지 단정하기 어려워서, 여기서는 공통된 어려움만 짚어볼게요.
둥근 모서리는 보기보다 까다로워요. 네 모서리의 반지름이 다 다를 수 있고, 가로와 세로 반지름이 달라 타원처럼 휠 수도 있거든요. 반지름의 합이 변 길이보다 크면 비율을 맞춰 줄여야 한다는 규칙도 있고요. 곡선 경계가 계단처럼 보이지 않게 부드럽게 처리하는 안티앨리어싱도 필요해요.
업계에서 어떤 위치냐면
지금 브라우저 시장은 Chromium 쪽으로 크게 기울어 있어요. Edge, Brave, Opera, Vivaldi가 모두 Chromium 기반이라 겉모습은 달라도 엔진은 같거든요. 엔진이 하나로 쏠리면 그 엔진의 동작이 사실상 표준처럼 굳어질 위험이 있어요.
그래서 독립 엔진 시도가 의미가 있는데, 자주 비교되는 게 Ladybird예요. Ladybird가 완성된 브라우저를 직접 내놓는 쪽에 집중한다면, Servo는 다른 앱에 끼워 넣는 임베딩용 엔진을 강조한다는 점이 달라요. 데스크톱 앱을 보면 Electron은 Chromium을 통째로 싣고, Tauri는 OS의 웹뷰를 빌려 쓰는데요. Servo가 충분히 성숙하면 세 번째 선택지가 될 수 있어요. 다만 아직은 가능성이에요.
한국 개발자에게 주는 시사점
당장 서비스 지원 브라우저 목록에 Servo를 넣을 일은 없어요. 그래도 챙겨갈 게 있어요. 우선 브라우저 내부를 공부하는 교재로 좋아요. 표준의 한 문단이 Rust 코드로 어떻게 구현되는지 따라가 볼 수 있거든요. 표준을 읽고, 실패하는 Web Platform Tests(브라우저들이 함께 쓰는 표준 테스트 모음)를 찾아 고치는 흐름은 오픈소스 기여 연습으로도 괜찮고요.
실무 습관도 돌아볼 수 있어요. 진행 표시를 <div> 두 개로 직접 만들고 계시다면, 불확정 상태와 접근성까지 브라우저가 챙겨주는 <progress>를 먼저 떠올려 보세요.
마무리
한 줄로 정리하면, 이번 소식은 화려한 기능보다 웹을 이루는 작은 부품을 하나씩 채워 가는 기록이에요. 여러분은 Chromium 쏠림이 실무에서 문제가 된다고 느낀 적이 있나요? 독립 엔진이 어느 정도까지 올라와야 직접 써볼 생각이 드실 것 같나요?
🔗 출처: Hacker News