‘좋아요’ 버튼 사태는 페이스북 엔지니어링 팀에 깊은 상처와 더불어 중요한 질문을 남겼다. 서버(PHP/XHP)와 클라이언트(JavaScript/jQuery)가 완벽하게 분리되어 있다는 믿음이 얼마나 위험한 착각이었는지를 모두가 뼈저리게 깨달았다.
늦은 밤, 조던 워크는 텅 빈 사무실에 남아 자신의 모니터를 응시하고 있었다. 화면은 두 개의 창으로 나뉘어 있었다. 왼쪽에는 우아하고 간결한 XHP 코드가, 오른쪽에는 그 XHP 컴포넌트의 내부 구조를 헤집는 지저분한 jQuery 코드가 떠 있었다.
// 왼쪽 화면 (PHP/XHP)
<ui:like-button postID={$post->id} isLiked={$isLiked} />
// 오른쪽 화면 (JavaScript/jQuery)
$('.ui-like-button[data-post-id="' + postID + '"]').text('...');
이 극명한 대비. 조던은 생각했다.
‘문제의 근원은 언어가 다르다는 것이 아니다. 패러다임이 다르다는 것이다.’
XHP는 선언적(Declarative)이다.
<ui:like-button> 컴포넌트에게 ‘이런 데이터를 줄 테니, 알아서 그려줘’라고 선언하기만 하면 된다. 컴포넌트의 내부가 어떻게 생겼는지는 전혀 신경 쓸 필요가 없다.
반면, jQuery는 명령적(Imperative)이다.
화면의 특정 요소를 직접 찾아내서(Find), 그 텍스트를 바꾸고(Modify), 클래스를 추가하라고(Command) 하나하나 지시해야 한다. 개발자는 내부 구조를 속속들이 알고 있어야만 한다.
조던은 마른세수를 하며 의자에 깊숙이 몸을 묻었다. 그의 머릿속을 하나의 질문이 집요하게 맴돌았다.
“자바스크립트에서도 이게 가능할까?”
자바스크립트에서도 XHP처럼, 선언적으로 UI를 정의하고 조립하는 것이 가능할까? jQuery처럼 DOM을 직접 헤집고 다니는 대신, 마치 XHP가 그랬던 것처럼 컴포넌트라는 개념을 언어의 일부로 받아들일 수는 없을까?
그는 즉석에서 간단한 실험을 구상했다. 만약 자바스크립트에서 이런 코드를 쓸 수 있다면 어떨까?
// 가상의 자바스크립트 코드
var likeButton = LikeButton({ postID: 123, isLiked: true });
// likeButton 변수는 컴포넌트 객체를 담고 있다.
// 이 객체의 render() 함수를 호출하면...
var htmlString = likeButton.render();
// -> '<button class="liked">좋아요 취소</button>'
// 이 HTML 문자열을 원하는 곳에 삽입한다.
$('#container').html(htmlString);
겉보기에는 그럴듯했다. LikeButton이라는 함수나 클래스가 마치 컴포넌트 설계도처럼 작동하고, 데이터를 넘겨주면 HTML 문자열을 반환하는 방식. 이것만으로도 jQuery가 컴포넌트의 내부 구조에 직접 의존하는 문제는 어느 정도 해결할 수 있었다.
하지만 조던은 이것만으로는 부족하다는 것을 직감했다. XHP의 진정한 마법은 단순히 HTML 문자열을 만드는 데 있지 않았다. PHP 언어 자체가 HTML의 구조를 이해하고, 문법적으로 검증해주며, 자동으로 보안 처리를 해주는 데 있었다.
자바스크립트에는 그런 기능이 없었다. 그저 문자열일 뿐이었다.
'<' + tagName + '>' + content + '</' + tagName + '>'
이런 식으로 문자열을 조립하는 것은 결국 기존의 문제로 회귀하는 것에 불과했다. 여전히 태그를 닫는 것을 잊기 쉬웠고, 보안 문제를 개발자가 직접 신경 써야 했다.
“아니야… 이건 아니야.”
조던은 자신이 구상한 코드를 지웠다. 더 근본적인 접근이 필요했다. 자바스크립트 언어 자체를 건드리지 않으면서도, XHP와 같은 경험을 제공할 방법. 자바스크립트가 HTML의 구조를 이해하는 것처럼 ‘착각’하게 만들 교묘한 트릭.
그의 생각은 점점 더 깊은 곳으로 향했다. 평범한 웹 개발자의 사고방식을 넘어, 프로그래밍 언어의 본질과 컴파일러의 작동 원리에 대한 영역으로.
그리고 그 순간, 그의 뇌리에 오래전 자신을 매료시켰던 한 프로그래밍 언어의 기억이 섬광처럼 스쳐 지나갔다. 그것은 실용성과는 거리가 멀어 잊고 지냈던, 하지만 지극히 우아하고 수학적인 아름다움을 가졌던 언어.
바로 스탠다드 ML(Standard ML)이었다. 그 언어의 철학 속에, 지금의 혼돈을 해결할 실마리가 숨어 있을지도 모른다는 강렬한 예감이 그를 사로잡았다.
