거대 기업 Shopify의 선택 - 15년 된 리액트(React) 앱을 왜 리믹스(Remix)로 바꿀까?

전 세계 수백만 상점의 온라인 비즈니스를 책임지는 거대 기업, 쇼피파이(Shopify)가 최근 아주 중대한 기술적 결정을 내렸습니다.

무려 15년 동안이나 유지하고 발전시켜 온 거대한 관리자 페이지(Admin)를, '리믹스(Remix)'라는 웹 프레임워크를 사용해 새롭게 만들어가겠다고 선언한 것인데요.

수많은 프레임워크 중에서 왜 하필 리믹스였을까요.

이것은 단순히 새로운 기술을 도입하는 것을 넘어, 현대 웹 개발의 흐름에 중요한 질문을 던지는 사건입니다.

쇼피파이의 고민과 그들이 리믹스에서 발견한 해답은 무엇이었는지, 그들의 여정을 따라가 보겠습니다.

1. 15년 된 거인의 고민: 쇼피파이가 마주한 문제들

쇼피파이의 관리자 페이지는 루비 온 레일즈(Ruby on Rails) 기반 위에 리액트(React)로 만든 거대한 SPA(Single Page Application)가 얹어진 구조였습니다.

오랜 시간 동안 수많은 기능이 추가되면서, 이 거대한 시스템은 여러 가지 성장통을 겪기 시작했습니다.

문제점 하나: 느려지는 성능

가장 큰 문제는 성능 저하였습니다.

사용자가 관리자 페이지에 접속하면, 브라우저는 어마어마한 양의 자바스크립트 코드를 한 번에 내려받아야 했습니다.

이는 곧 느린 초기 로딩 속도로 이어졌습니다.

또한, 데이터를 가져오는 방식도 비효율적이었습니다.

사용자 정보를 가져온 뒤, 그 정보로 주문 내역을 가져오고, 또 그 주문 내역으로 상품 정보를 가져오는 식의 '데이터 폭포(Data Waterfall)' 현상 때문에 화면이 완전히 표시되기까지 많은 시간이 걸렸습니다.

문제점 둘: 복잡해지는 개발 경험

개발자 입장에서도 어려움이 많았습니다.

서버(레일즈)와 클라이언트(리액트)가 분리되어 있어 데이터 관리가 복잡했고, 수많은 로딩과 에러 상태를 클라이언트 측에서 모두 직접 처리해야 했습니다.

이는 개발 속도를 늦추고 버그 발생 가능성을 높이는 원인이 되었습니다.

문제점 셋: 불안정한 사용자 경험

사용자 입장에서는, 자바스크립트가 제대로 로드되지 않으면 기능이 멈추거나 아예 흰 화면만 보이는 불안정한 경험을 해야 했습니다.

네트워크가 조금이라도 느리면 그 불편함은 더욱 커졌습니다.

2. 해답을 찾아서: 쇼피파이가 원했던 것

쇼피파이는 이 문제들을 해결하기 위해 새로운 기술 스택을 찾기 시작했습니다.

그들이 원했던 것은 명확했습니다.

• 웹 표준 존중: 복잡한 추상화 대신, 웹의 기본 원리인 HTML, CSS, HTTP를 최대한 활용하는 프레임워크여야 합니다.
  
  
• 뛰어난 성능: 자바스크립트 의존도를 낮추고, 서버의 힘을 빌려 사용자에게 더 빠른 경험을 제공해야 합니다.
  
  
• 간결한 개발: 개발자들이 데이터 흐름을 쉽게 이해하고, 핵심 비즈니스 로직에만 집중할 수 있도록 도와줘야 합니다.
  
  
• 견고함: 어떤 상황에서도 앱이 깨지지 않고 최소한의 기능이라도 동작하는, 회복력 높은 구조를 원했습니다.
  
  

3. 왜 리믹스(Remix)였을까요?

수많은 선택지 속에서, 리믹스는 쇼피파이가 가진 모든 고민에 대한 해답을 제시했습니다.

해답 하나: 서버가 먼저 일하는 구조

리믹스는 '서버 중심' 프레임워크입니다.

클라이언트(브라우저)가 데이터를 하나씩 요청하는 대신, 리믹스는 서버에서 필요한 모든 데이터를 미리 준비해서 완전히 그려진 HTML 페이지를 사용자에게 먼저 보냅니다.

이는 '데이터 폭포' 문제를 원천적으로 해결하며, 사용자는 거의 즉시 의미 있는 콘텐츠를 볼 수 있게 됩니다.

마치 식당에 가자마자 모든 요리가 한상에 차려져 나오는 것과 같습니다.

해답 둘: 간결하고 명확한 데이터 관리

리믹스에는 데이터를 가져오는 loader 함수와, 데이터를 서버에 전송(생성/수정/삭제)하는 action 함수가 있습니다.

이 두 가지 개념은 각 페이지(라우트)에 묶여있어, 데이터의 흐름이 놀라울 정도로 명확해집니다.

개발자는 더 이상 복잡한 클라이언트 상태 관리 라이브러리에 의존할 필요 없이, 해당 페이지에 필요한 데이터 로직에만 집중할 수 있습니다.

해답 셋: 점진적 향상(Progressive Enhancement)이라는 마법

이것이 리믹스의 가장 빛나는 특징 중 하나인데요.

리믹스로 만든 웹사이트는 자바스크립트가 아예 없어도, 마치 2000년대 초반의 웹사이트처럼 정상적으로 작동합니다.

예를 들어, 폼을 제출하면 페이지가 새로고침되면서 데이터가 서버로 전송됩니다.

그러다가 자바스크립트 로딩이 완료되는 순간, 리믹스는 이 웹사이트에 '생명'을 불어넣습니다.

그때부터는 폼을 제출해도 페이지 새로고침 없이, SPA처럼 부드럽고 빠르게 작동합니다.

이는 최악의 네트워크 환경에서도 서비스가 멈추지 않는, 엄청난 '회복력'과 '안정성'을 의미합니다.

4. 거대한 코끼리를 옮기는 방법: 점진적인 도입

쇼피파이는 15년 된 거대한 시스템을 하루아침에 바꾸는 무모한 도전을 하지 않습니다.

대신, 기존 레일즈 시스템 안에 리믹스를 통합하여, 관리자 페이지의 특정 라우트(주소)부터 하나씩 점진적으로 리믹스로 전환하는 전략을 택했습니다.

이는 거대한 프로젝트를 관리 가능하게 만들고, 위험을 최소화하는 매우 현실적이고 현명한 접근 방식입니다.

웹의 미래에 대한 쇼피파이의 대답

쇼피파이가 리믹스를 선택한 것은 단순히 '새로운 프레임워크 도입' 이상의 의미를 가집니다.

이것은 지난 10년간 웹을 지배해 온 '클라이언트 중심의 복잡한 SPA' 시대에 대한 반성이자, 웹의 기본으로 돌아가자는 '서버 중심 아키텍처'로의 회귀를 알리는 중요한 신호탄입니다.

성능, 개발자 경험, 그리고 사용자의 안정성까지 모두 잡으려는 그들의 선택은, 앞으로 우리가 웹 애플리케이션을 어떻게 만들고 발전시켜야 할지에 대한 깊은 영감을 줍니다.

거대 기술 기업의 이러한 움직임은 분명 미래의 웹 개발 생태계에 큰 영향을 미칠 것입니다.

우리가 이 변화에 주목해야 하는 이유입니다.