스파게티 코드의 지옥

"젠장! 또 터졌어!"

미국 캘리포니아, 팔로 알토에 위치한 페이스북 본사. '좋아요' 버튼 하나로 전 세계를 연결하는 디지털 제국의 심장부. 그러나 화려한 외관과 달리, 웹 개발팀 사무실은 지금 총성 없는 전쟁터였다.

붉은 경고등처럼 번뜩이는 모니터 불빛 아래, 개발자들의 얼굴은 잿빛으로 질려 있었다. 방금 전, 페이스북의 핵심 수익원 중 하나인 '광고 관리자' 페이지에서 치명적인 UI 버그가 보고된 것이다.

"대체 어디가 문제야! 어제까지만 해도 멀쩡했잖아!"

팀 리더 마크가 신경질적으로 키보드를 내려쳤다. 그의 외침은 이미 수십 번 반복된 레퍼토리였다. 이곳에서 '멀쩡함'이란 신기루와 같은 단어였다. 특히 광고 관리자 페이지는 악명이 자자했다. 마치 건드리면 폭발하는 지뢰밭처럼 기능 하나를 추가하거나 수정하면, 예상치 못한 다른 곳에서 버그가 연쇄적으로 터져 나왔다.

개발자들은 이 복잡하게 얽히고설킨 코드 덩어리를 '스파게티 코드'라고 불렀다. 이름 그대로였다. 누가, 언제, 왜 이렇게 만들었는지 모를 코드 가닥들이 뒤죽박죽 엉겨 붙어 거대한 괴물을 이루고 있었다. 한 가닥을 잡아당기면 전체가 딸려오거나, 엉뚱한 곳이 끊어졌다.

// 임시방편으로 땜질된 코드 조각
$('#ad-preview-button').click(function () {
  var campaignName = $('#campaign-name-input').val();
  if (campaignName.length > 10) {
    $('#error-message-1').show();
    // ... (수십 줄의 복잡한 UI 업데이트 로직)
    if (user.isAdmin) {
      // 갑자기 끼어든 권한 체크?
      updateAdminDashboard(campaignName); // 이게 왜 여기서 호출되지?
    }
  } else {
    // ... (또 다른 수십 줄의 UI 업데이트 로직)
    $('#ad-preview-modal').show();
    // 앗! 모달 창 닫기 버튼 이벤트가 다른 곳에서 덮어씌워졌다!
  }
});

"빌어먹을 제이쿼리(jQuery)! DOM을 직접 건드리는 건 편하지만, 나중엔 이게 다 업보로 돌아온다고!"

한 개발자가 머리를 쥐어뜯으며 중얼거렸다. 당시 웹 개발의 표준처럼 여겨졌던 제이쿼리. 분명 편리한 도구였지만, 프로젝트 규모가 커지고 기능이 복잡해질수록 상태 관리는 악몽이 되었다. 어떤 이벤트가 어떤 UI 변화를 일으키는지, 그 변화가 또 다른 변화에 어떤 영향을 미치는지 추적하는 것은 불가능에 가까웠다.

"버그 잡았다! 여기였어!"

잠시 후, 한 개발자가 환호성을 질렀다. 하지만 기쁨은 잠시였다.

"어? 잠깐만. 이걸 고치니까… 결제 모듈에서 오류가 나는데?"

"뭐라고?!"

사무실은 다시 절망의 탄식으로 가득 찼다. 하나를 고치면 다른 두 개가 터지는 상황. 밑 빠진 독에 물 붓기. 이것이 페이스북 웹 개발팀, 특히 UI 개발팀의 일상이었다.

그 아수라장 속, 유독 한 사내의 눈빛은 달랐다. 그의 이름은 조던 워크(Jordan Walke). 다른 개발자들이 눈앞의 불을 끄기에 급급할 때, 그는 모니터 속 '스파게티'의 심연을 응시하고 있었다. 그의 표정에는 단순한 짜증이나 피로를 넘어선, 근본적인 문제에 대한 깊은 회의감이 서려 있었다.

'이건… 단순한 버그가 아니야. 구조적인 문제다.'

그의 머릿속은 복잡했다. 사용자의 클릭 한 번에 수십 개의 UI 요소가 동시에, 혹은 순차적으로 변경되어야 하는 페이스북의 복잡한 인터페이스. 현재의 방식으로는 이 혼돈을 제어할 수 없었다. MVC 패턴? 양방향 데이터 바인딩? 모두 시도해봤지만, 결국 거대해진 애플리케이션 앞에서는 한계를 드러냈다. 데이터 흐름은 엿가락처럼 늘어졌고, 어디서 상태가 변경되어 문제를 일으키는지 예측하는 것은 점쟁이의 영역이었다.

'왜 UI 업데이트는 이렇게 고통스러워야 하는 거지? 사용자의 행동(Action)에 따라 상태(State)가 변하고, 그 상태를 그저 화면(View)에 보여주면 되는 것 아닌가? 왜 이 당연한 과정이 이렇게 복잡하고 예측 불가능해야 하는 걸까?'

조던 워크는 키보드 위에서 손가락을 멈췄다. 그의 눈앞에는 여전히 버그 리포트와 스파게티 코드가 어지럽게 펼쳐져 있었다. 하지만 그의 시선은 더 이상 그 코드의 미로를 헤매지 않았다. 그는 이 지옥 같은 현실을 벗어날 새로운 길, 새로운 패러다임을 갈망하고 있었다.

'상태가 변하면… 그냥 처음부터 다시 그리는 것처럼 생각하면 어떨까? 마치…'

그의 뇌리에 희미한 섬광이 스쳤다. 아직은 형태를 갖추지 못한, 막연하지만 강렬한 예감.

"조던! 뭐 해? 정신 안 차려?"

팀 리더의 고함 소리가 그의 상념을 깨뜨렸다. 조던은 짧게 대답하며 다시 키보드를 잡았다. 하지만 그의 눈빛은 이전과 달랐다. 혼돈 속에서 피어난 작은 의문과 가능성의 씨앗. 그것은 훗날 웹 개발의 역사를 뒤바꿀 혁명, '리액트(React)'라는 이름의 연금술, 그 첫 불씨였다.