버추얼 DOM(Virtual DOM)이라는 개념이 팀 내에서 자리를 잡자, 조던 워크는 그 아이디어를 동료들이 더 쉽게 이해할 수 있도록 설명해야 할 필요를 느꼈다. 그는 회의실 화이트보드에 커다란 사각형 두 개를 그렸다. 왼쪽에는 '실제 DOM(Real DOM)', 오른쪽에는 '가상 DOM(Virtual DOM)'이라고 적었다.
“이 둘의 관계를 건축에 비유해 봅시다.” 조던이 입을 열었다. “왼쪽에 있는 실제 DOM은 우리가 사는 ‘실제 건물’입니다. 벽돌과 시멘트로 지어져 있고, 한번 지으면 수정하기가 매우 어렵고 비용이 많이 들죠.”
그는 화살표를 그려 jQuery나 일반적인 자바스크립트가 실제 DOM을 조작하는 과정을 표현했다.
“지금까지 우리는 이 실제 건물을 직접 수리해왔습니다. ‘3층 창문을 교체해라’, ‘지붕 색을 바꿔라’ 하고 인부(브라우저)에게 직접 명령했죠. 문제는 인부들이 한 가지 일을 할 때마다 건물 전체의 안전성을 점검하고, 배관과 전기선을 다시 확인하는 등 엄청난 부대 비용이 발생한다는 겁니다. 작은 창문 하나 바꾸는데 건물 전체가 울리는 셈이죠.”
팀원들은 고개를 끄덕였다. DOM을 조작할 때마다 발생하는 레이아웃 계산과 리페인팅의 고통을 너무나 잘 알고 있었기 때문이다.
조던은 오른쪽의 '가상 DOM' 사각형을 가리켰다.
“가상 DOM은 이 실제 건물을 짓기 전에 만드는, 아주 정교한 ‘청사진(Blueprint)’ 또는 ‘설계도’입니다. 이 설계도는 종이와 연필, 즉 자바스크립트 객체로 만들어져 있어서, 수십 번이고 새로 그리고 지우는 데 거의 비용이 들지 않습니다.”
그는 새로운 작업 흐름을 설명했다.
“이제 우리의 작업 방식은 이렇습니다. 먼저, 현재 건물의 모습을 본뜬 ‘기존 설계도(Old Virtual DOM)’를 한 장 가지고 있습니다.”
“건축가(개발자)가 ‘창문을 더 크게 만들고 싶다’는 새로운 요구사항을 받으면, 그는 실제 건물을 건드리지 않습니다. 대신, 깨끗한 새 종이에 완전히 새로운 설계도, 즉 ‘최신 설계도(New Virtual DOM)’를 처음부터 끝까지 다시 그립니다. 이 작업은 설계실(메모리) 안에서 순식간에 끝나죠.”
“이제 우리 손에는 두 장의 설계도가 있습니다. 기존 설계도와 최신 설계도. 여기서부터가 핵심입니다.”
조던의 목소리에 힘이 실렸다.
“우리는 이 두 장의 설계도를 나란히 놓고, 틀린 그림 찾기를 시작합니다. 전문 감리사(라이브러리)가 두 도면을 꼼꼼히 비교해서 변경된 부분들의 목록을 정확히 작성하는 거죠. ‘3층 창문 크기 변경’, ‘현관문 색상 변경’ 처럼요.”
“그리고 마지막 단계에서, 이 최종 변경 목록만을 들고 실제 건물로 찾아갑니다. 그리고 인부들에게 딱 한 번, 명확하게 지시하는 겁니다. ‘목록에 적힌 이것들만 정확히 수정해주시오.’라고요.”
비유는 완벽했다. 팀원들은 마침내 가상 DOM의 진정한 가치를 이해했다.
그것은 단순히 DOM의 복사본이 아니었다. 실제 세계의 복잡하고 값비싼 조작을, 가상의 빠르고 저렴한 세계에서 미리 시뮬레이션해보는 중간 단계였다. 개발자는 더 이상 실제 건물의 복잡한 구조나 수리 비용을 걱정할 필요 없이, 언제나 이상적인 최종 설계도를 그리는 데만 집중할 수 있게 되는 것이다.
데이빗이 감탄하며 말했다.
“결국, 성능 최적화라는 더러운 작업을 개발자의 손에서 기계의 손으로 완전히 넘겨버리는 거군요.”
“정확합니다.”
가상 DOM의 탄생. 그것은 페이스북 프론트엔드 개발의 역사를, 아니 웹 개발의 역사를 뒤바꿀 혁명의 서곡이었다. 이제 남은 것은 그 보이지 않는 설계도를 비교할 ‘감리사’, 즉 비교 알고리즘을 실제로 구현하는 험난한 과제뿐이었다.
