[피플]아임웹이 레거시를 대하는 자세 (Feat. MFE)


“개발자로서 상상한 기술을 구현하는 것도 의미있지만, 진짜 성장을 위해서라면 레거시도 다룰 줄 알아야 해요. 레거시는 어느 기업에나 존재하고, 큰 프로젝트에 참여하다보면 레거시와의 만남은 피할 수 없거든요.”

-프론트엔드 엔지니어 흥준님



서비스를 처음 개발하는 단계라면, 대중화된 최신 기술스택을 적용하면 됩니다. 간단하죠. 오랜 시간 운영된 서비스라면? 이야기는 달라집니다. 그때는 최신이었던 기술 스택이 지금의 트렌드와는 맞지 않거나, 서비스의 확장성과 안정성을 고려해야 하는 성장 단계에서는 적합하지 않을 수 있거든요.

아임웹은 2016년, 드래그앤드롭만으로 간편하게 반응형 홈페이지를 제작할 수 있는 서비스를 선보이며 웹빌더 시장의 신흥 강자로 빠르게 자리잡았는데요. 당시 아임웹 서비스의 근간이 되는 기술 언어 중 하나가 PHP였습니다. 시간은 흘러 서비스 출시 이후 8년이 지났어요. 그동안 아임웹은 웹 빌더를 넘어 다양한 커머스 기능까지 아우르는 브랜드 빌더로서 폭발적인 성장을 해왔습니다. 24년 8월 기준, 합계 MAU만 1억명 이상에 달하는 80만 브랜드 고객과 함께하고 있는데요. 성장은 달콤했지만, 변화가 점점 빨라지는 요즘 관점에서 PHP는 레거시 코드이자 아임웹이 해결해야 할 기술 부채가 되어 있었죠.

레거시를 해결해나가는 동시에 아임웹도 변화에 보다 민첩한 조직으로 성장할 필요가 커졌어요. 아임웹이 서비스 전반에 MSA(MicroService Architecture, 마이크로서비스 아키텍쳐)를 적용하고 있는 이유입니다. MSA는 애플리케이션을 독립적으로 개발, 배포, 확장 가능한 작은 서비스들의 집합으로 구성하는 소프트웨어 설계 방식을 말하는데요. 레거시를 개선해나가는 과정에 있어 아임웹이 도입하고 있는 MSA가 어떤 역할을 하고 있는지, 백엔드를 넘어 프론트엔드에서는 이러한 흐름이 어떻게 이어지고 있는지 한번 살펴볼까요?


작게, 조금씩…‘MSA’는 어떻게 아임웹을 바꾸고 있나

 

“아임웹은 80만 브랜드 고객이 사용하는 대형 SaaS로 성장했습니다. 제공하는 제품 범주만 해도 크게 10가지 전문 분야가 있을 정도로 거대한 모놀리식 앱이었죠. UX와 룩 앤 필, 그리고 하위 호환성을 유지하며 10년에 걸친 업데이트가 있는 제품을 단기간에 리빌드 하려면 대규모 인원과 3년 이상의 시간이 예상됐어요. 그래서 MSA를 도입하여 단계적, 부분적, 도메인별로 업데이트를 계획했습니다.”

-CTO 형섭님


아임웹은 2022년부터 MSA 도입을 준비해왔어요. 변화에 빠르게 대응할 수 있는 비즈니스 민첩성을 가진 조직으로 진화하고자 ‘작게 실행할 수 있는 환경’ 만들기에 주력해왔습니다. 특히 기능 조직에서 목적 중심의 스쿼드(squad) 체제로 개편되는 아임웹의 조직적 성장에 발맞춰, 구성원들의 엔지니어링 역량을 지속적으로 강화해왔는데요. 각 스쿼드별 공통의 목표 하에 여러 기능의 직군들이 밀도 높게 소통하며 일하는 문화가 아임웹에 자연스럽게 정착될 수 있었던 이유죠.

그 덕분에 23년 3월부터 가장 어렵고 복잡한 ‘주문/결제’ 영역의 MSA 리빌드를 시작할 수 있었는데요. 아임웹의 주문 관리 시스템(OMS)은 약 1년의 개발 끝에 런칭할 수 있었던 난이도 높은 기능이었어요. 이 시스템은 주문을 관리하는 판매자의 큰 페인포인트 3가지를 해결하는데 초점이 맞춰져 있었고, 그 중 한가지는 추가결제 및 분할배송 등 실질적인 업무 처리에 유연함을 주는 것이었죠.

아임웹은 주문 관리 시스템 론칭이라는 대대적인 작업을 통해 기술적으로는 신규 시스템과 레거시 시스템 사이의 연동 노하우를 쌓을 수 있었습니다. 아임웹 내에서 MSA를 보다 쉽게 적용하며, 레거시 코드를 하나씩 바꿔나가는 계기가 되기도 했고요. 단일 기술스택에서 스쿼드별 유연한 스택 결정으로 기술 스택이 다변화되고, 어떤 기술이든 아임웹에 도입할 수 있다는 자신감도 얻을 수 있었죠. 


Back to the Front, 아임웹 프론트엔드가 구현하는 ‘MFE’

아임웹의 MSA 시도가 더욱 특별한 이유 중 하나는, 일반적으로 MSA 적용이 쉽지 않은 ‘프론트엔드’ 파트에서도 작은 실행이 가능한 환경을 고민해나가고 있다는 점입니다.



“하나의 거대한 서비스는 변화를 만들기 쉽지 않습니다. 많은 히스토리를 알아야 하고 조직 간의 개발이 서로의 제품에 영향을 주기도 합니다. 새로운 시도를 두렵게 만들고, 조직 간에 계획과 조정을 고민하게 됩니다. MFE(Micro Frontend)는 프론트엔드 단에서 그러한 문제를 해결해 주는 아키텍쳐죠.”

-프론트엔드 엔지니어 덕성님


아임웹은 레거시를 한번에 바꾸는 것이 아닌, 작게 변환해 내는 전략으로써 MFE를 활용하고 있으며, 실제 서비스에 적용을 통해 단단하게 미래를 준비하고 있습니다.

MFE는 기술적 분리와 기능적 분리를 어떻게 할지부터 퍼포먼스와 복잡도는 어떻게 관리할지까지 그 전략과 구현방법이 매우 다양한데요. 아임웹은 문제의 복잡도를 낮추고 레거시를 분해하여 전환하는 것에 집중하기 위해 ‘화면 단위’ 분할을 통해 그 영역을 확대해 나가고 있습니다.

예를 들면, 가장 확장성이 좋은 iframe 통합을 사용하는 동시에 CORS 등 제약사항들을 인프라 레벨에서 함께 해결했고, 또 url import를 활용한 javascript 통합 방식을 병행해 사용하며 MFE의 기술적 통합과 퍼포먼스를 달성해나가고 있죠.



“스케일업을 위해 코드 모던화 작업은 필수예요. 초기의 빨리빨리 구현 모드에서 벗어나 모두가 함께 만들 수 있는 구조가 필요하죠. 아임웹은 새로 합류하는 분들의 온보딩 시간을 단축시켜 개발 여정에 빠르게 동참하실 수 있도록 민첩한 구조를 만들어나가고 있는 중입니다.”

-프론트엔드 엔지니어 태호님


최근 아임웹에서 MFE를 적용한 사례 중 하나는 서비스 환경설정 내의 상담채널 연동 화면을 개편할 때였는데요. 이 과정에서 모던 스택을 적용했고, 서비스별 신청 플로우를 개선했습니다. 이를 통해 유저가 연동 서비스별 차이를 보다 명확하게 인지할 수 있는 화면 구성으로 변경할 수 있었습니다. 또한 아임웹의 디자인 시스템인 ‘Clay’를 통한 디자인 통일성과 효율성도 확보할 수 있게 되었죠.


MFE를 적용한 아임웹의 상담채널 연동 화면



한걸음 더 나아가 아임웹은 MFE를 더 간편히 도입할 수 있는 아키텍쳐를 설계했는데요. 쉽게 서비스를 생성할 수 있을 뿐만 아니라 수십만개 다른 도메인 주소에서도 활용할 수 있는 아키텍쳐였습니다. 아임웹에서는 현재 10여개의 서비스가 MFE로 운영되고 있고, 더 자동화된 배포 프로세스를 통해 주니어 FE도 직접 서비스를 빠르게 프로덕션으로 출시할 수 있게 됐어요.



아임웹에서 MFE의 어려움과 향후 과제는


물론 MFE 적용 과정이 쉽기만한 것은 아니었습니다.


  • MFE 변환 단위를 너무 크지도 작지도 않게 결정하는 과정이 어려운 점 중 하나였습니다. 단위가 너무 크면 변환을 위해 테스트 해야할 단위도 커져 시간이 오래걸리죠. 반대로 너무 작으면 서비스들을 통합하는 것이 지나치게 어려워지고 레거시 전환 효과를 보기도 어렵습니다. 아임웹은 스쿼드 간 활발한 커뮤니케이션을 통해 실행에 적절한 범위를 정한 후 변환하는 방식을 활용하고 있습니다.

  • 한편, 스쿼드마다 MFE의 UI들을 각자 구현하게 된다면 너무 많은 개발 리소스가 들어가고 유저 경험이 파편화되기 쉬운데요. 아임웹은 자체 디자인 시스템 Clay를 통해서 개발자 생산성을 챙기는 동시에 아임웹의 디자인 통일성을 갖춰나가고 있습니다.

  • 화면들을 분할하면서 필연적으로 발생하는 퍼포먼스 이슈 또한 해결해야 할 문제입니다. 아임웹은 서비스의 독립성은 유지하면서 import map 부터 network cache 까지 가능한 방법들을 활용해 최적화하고 그 노하우들을 문서와 라이브러리로 공유하고 있습니다.

  • 서비스가 늘어나면서 많은 서비스를 배포하고 운영하는 복잡도 또한 함께 증가하고 있습니다. 아임웹에서는 이에 대응해 적절한 모니터링 툴을 갖추면서 서비스 복잡도를 낮출 수 있는 MFE 배포 정책들을 세워나가고 있습니다.



아임웹에서 MFE는 아직 도입 단계입니다. 더욱 다양한 시도와 성공 경험이 필요할 텐데요. MFE 도입 자체가 여건상 쉽지 않은 기업들도 많은 점을 고려해보면 MFE가 서비스 전반에 광범위하게 적용되며, 실질적인 변화를 체감할 수 있는 부분은 특별한 경험이 될 수 있죠.


“레이싱의 피트스탑은 더 빨리 달리기 위한 필수 과정이지만, 피트스탑 또한 지연되지 않고 더 빨라져야 합니다. 아임웹의 경우, 레거시 화면에 MFE를 적용하는 방법이 더 쉽고 더 빨라질 수 있도록, MFE를 적용하기 위한 여러 도구들과 심리스한 유저 경험을 위한 장치들을 준비해나가고 있습니다.”

-프론트엔드 엔지니어 덕성님


아임웹 프론트엔드 개발자들은 점진적으로 기존 레거시 화면 모두를 MFE로 최신화함으로써 개발의 효율성을 높이기 위해 노력하고 있는데요. MFE의 도입은 아임웹에게 단순한 기술 업그레이드 이상의 의미를 지닙니다. 빠르게 변화하는 시장에 대응하면서 궁극적으로는 고객에게 더 나은 서비스를 제공하기 위한 일이거든요. 업력과 규모를 갖춘 서비스에서 필연적으로 마주하게 되는 레거시 코드의 모던화 과정을, MFE라는 최신 기술을 적용하며 경험해보고 싶다면 아임웹의 문을 두드려주세요.


엔지니어로서 주도적으로 문제를 해결하며 성장하고 싶다면?

아임웹 합류하기




by communications 수빈



상호명 (주)아임웹  l  대표이사 : 이수모  l 개인정보책임자 : 김형섭
사업자등록번호 : 105-87-83592
통신판매업신고번호 : 제 2023-서울강남-02377
서울특별시 강남구 테헤란로 501 VPLEX
채용문의 : join@imweb.me
Made by Imweb Corp.