백본(Backbone.js)의 도입은 성공적인 듯 보였다. 팀은 자신감을 얻어 페이스북의 핵심 기능 중 하나인 채팅 시스템의 일부를 백본으로 재구축하는 프로젝트에 착수했다. 맷은 이 프로젝트의 선봉에 섰다.
“보세요. 정말 간단하죠?”
맷은 새로 합류한 주니어 개발자에게 코드를 설명하고 있었다. 사용자 한 명의 정보를 담는 UserModel이 있고, 그 사용자의 프로필 사진과 온라인 상태를 표시하는 ChatUserView가 있었다.
UserModel의 onlineStatus 값이 ‘online’에서 ‘offline’으로 바뀌면, listenTo로 이 변화를 감지하고 있던 ChatUserView가 자동으로 render 함수를 호출해 상태 표시등의 색을 녹색에서 회색으로 바꿨다. 데이터와 뷰가 아름답게 동기화되었다.
문제는 새로운 요구사항이 추가되면서 시작되었다.
“사용자가 오프라인이 되면, 상태 표시등 색깔만 바꾸지 말고, 대화창 전체에 반투명한 필터를 씌워서 비활성화된 느낌을 확실히 줬으면 좋겠어요.”
기획팀의 요청은 합리적이었다. 맷은 즉시 코드를 수정했다. ChatUserView의 render 함수에 조건을 추가했다. 만약 onlineStatus가 ‘offline’이라면, 뷰 자기 자신의 배경색을 바꾸는 것뿐만 아니라, 채팅창 전체의 상태를 관리하는 별개의 모델, ChatRoomModel의 status를 ‘inactive’로 변경하도록 했다.
바로 이 지점에서, 보이지 않는 함정이 작동하기 시작했다.
며칠 후, QA팀으로부터 버그 리포트가 도착했다.
[버그] 채팅창: 사용자가 로그아웃할 때, 화면이 미세하게 깜빡이며 상태가 일시적으로 엇갈려 보이는 문제.
맷은 고개를 갸웃거렸다. 엇갈린 상태라니? 그는 현상을 재현해 보았다. 서버로부터 특정 유저가 로그아웃했다는 실시간 신호가 도착하는 순간, 정말로 기묘한 일이 벌어졌다. 찰나의 순간이었지만, 프로필 사진 옆의 상태 표시는 회색으로 바뀌었는데, 대화창은 여전히 활성화된 상태로 보였다가 0.1초쯤 뒤에야 반투명 필터가 씌워졌다.
원인을 파고들자, 복잡한 이벤트의 연쇄 반응이 모습을 드러냈다.
- 서버 신호가
UserModel의onlineStatus를 ‘offline’으로 변경한다. UserModel은 ‘change:onlineStatus’ 이벤트를 발생시킨다.- 이 이벤트를 듣고 있던
ChatUserView가render를 실행한다. 상태 표시등이 회색으로 바뀐다. - 동시에,
render함수 내부의 로직이ChatRoomModel의status를 ‘inactive’로 변경한다. ChatRoomModel은 별개의 ‘change:status’ 이벤트를 발생시킨다.- 대화창의 반투명 필터를 관리하는
ChatRoomView는 이 두 번째 이벤트를 듣고 그제야 자신의 모습을 바꾼다.
두 개의 이벤트가 거의 동시에, 하지만 엄연히 순서를 가지고 연쇄적으로 발생하면서 화면의 두 부분이 서로 다른 시간에 업데이트되는 것이었다.
맷은 머리를 감싸 쥐었다. 이걸 해결하려면 ChatUserView와 ChatRoomView가 서로의 타이밍을 맞추도록 더 복잡한 로직을 추가해야 했다. 그러다 보면 또 다른 곳에서 문제가 터질 것이 뻔했다. 모델과 뷰를 분리했지만, 결국 뷰가 모델을 바꾸고, 그 바뀐 모델이 다시 다른 뷰를 바꾸는 복잡한 상호작용의 사슬이 만들어진 것이다. 데이터는 양쪽 방향으로 정신없이 흐르며 예측을 불가능하게 만들었다.
그때, 맷의 등 뒤에서 그의 모니터를 지켜보던 조던 워크가 조용히 말했다.
“데이터의 흐름이 보이나요, 맷?”
“조던… 이건… 엉망진창이에요. 하나를 바꾸면 다른 하나가 바뀌고, 꼬리에 꼬리를 물어요.”
조던은 맷의 책상 옆 화이트보드에 그려진 모델과 뷰의 관계도를 가리켰다. 화살표들이 모델과 뷰 사이를 어지럽게 오가고 있었다.
“데이터가 양방향으로 흐르기 때문입니다. 뷰가 모델을 바꾸고, 모델이 다시 뷰를 바꾸죠. 흐름을 예측할 수가 없어요. 만약 데이터가 항상 한 방향으로만, 위에서 아래로만 흐른다면 어떨까요? 절대로 거슬러 올라가지 않는, 거대한 폭포수처럼 말입니다.”
폭포수. 그 단어가 맷의 머릿속에 박혔다. 양방향이 아닌, 오직 단 하나의 방향으로만 흐르는 데이터. 그것은 현재 그들이 가진 백본이라는 도구로는 불가능한, 완전히 새로운 패러다임에 대한 이야기였다.
