메이커 스튜디오 개편하기

Published in

와디즈서비스

6 min readAug 5, 2019

메이커가 프로젝트를 더 쉽게 만들 수 있도록

와디즈에 있지만 누군가는 있는지도 잘 모르는 서비스 ‘메이커 스튜디오’가 있습니다. 메이커 스튜디오는 와디즈의 펀딩 프로젝트를 오픈하는 ‘메이커’가 프로젝트를 조금 더 쉽게 만들고 관리할 수 있는 도구로서 와디즈의 핵심 제품중에 하나입니다.

새롭게 새롭게 새롭게

와디즈의 메이커 스튜디오는 그동안 ‘대시보드’라고 불리는 jQuery기반의 낡고 오래된 도구였습니다. JSP에 복잡하게 만들어져 있는 마크업과 jQuery로 이루어진 수 많은 Javascript 코드 그리고 복잡한 Include와 Validation까지 제가 마주한 메이커 화면은 충격과 공포 그 자체 였습니다. 심지어 Validation 하나를 수정하면 어디서 어떤 Side Effect가 발생 될지 몰라서 항상 긴장하고 사막에서 바늘을 찾는 심정으로 소스코드를 봐야만 했습니다.

하지만 메이커 화면은 와디즈에서 정말 중요한 제품이고 기능도 많고 다양해서 기능들을 새로운 곳에 하나하나 옮겨 담는 것도 보통 일은 아니지만 메이커 편의와 유지보수의 편의성 모두 가지고 가기로 하고 새로운 그릇에 새롭게 담아낸다는 마음으로 기존 기능은 모두 하나도 쓰지 않고 분리수거 하지 않고 버리기로 결정 하였습니다.

메이커 스튜디오 개발은 시작부터 만만한 작업이 아니었습니다. 와디즈는 크게 리워드와 투자 두가지 펀딩 플랫폼을 운영 하고 있습니다. 이와 같은 이유로 메이커 스튜디오는 하나라고 해도 투자와 리워드 메이커 스튜디오는 전혀 다른 제품입니다.

우선은 투자 메이커 스튜디오를 먼저 개편하기로 하고 개발을 시작하였습니다. 다만, 향후 리워드 메이커 스튜디오를 추가 개발하기 위해 두가지 플랫폼의 메이커 스튜디오를 모두 운영 할 수 있는 기반으로 만들기 시작하였습니다.

SPA(Single Page Application) 도입…

jQuery로 만들어진 As-is는 하나의 JSP에 알 수 없는 코드들로 이루어져 있는데 새롭게 만들어지는 메이커 스튜디오는 메이커가 프로젝트를 만들고 프로젝트의 상태등을 확인 하는 곳이기 때문에 SPA로 개발하는 것이 훨씬 더 효율적이라고 판단해왔기 때문입니다.

메이커 스튜디오 개발에는 React, Redux로 개발 되었습니다. 와디즈에서는 React 애플리케이션 상태관리로 MobX를 사용 하고 있었지만 기존에 운영해 오고 있는 애플리케이션과는 달리 메이커 스튜디오는 SPA이고 개발환경과 애플리케이션 최적화에 소요되는 리소스를 절약하기 위해 Create React App(CRA)을 이용하고 관련 설정을 Eject하지 않고 사용하기로 최종 방향을 정했습니다.

CRA의 관련 설정을 Eject하게 되면 관련 설정을 변경하여 추가적인 최적화 작업등이 가능하지만 관련 설정이 업데이트 되면 업데이트에 유연하게 대응할 수 없고 설정 등을 잘못 관리한다면 애플리케이션 성능을 오히려 떨어뜨릴 수 있기 때문입니다.

메이커 스튜디오는 기존 다른 애플리케이션과 같이 MobX를 이용하면 MobX에서 사용하는 Decorator를 CRA에서 지원하지 않기 때문에 문제가 있었습니다. 이 시점부터 와디즈에서는 MobX 대신 Redux를 사용하기로 방향을 전환하였습니다. 전환을 결정했던 이유로는 MobX 대비 개발 도구가 훨씬 편리하다는 점과 관련 레퍼런스가 Redux가 훨씬 더 많다는 점이 큰 이유였습니다. 무엇보다도 새롭게 채용하고 있는 프론트엔드 개발자들은 대부분 Redux를 경험해 보았는데 MobX는 모두 생소한 것이 가장 컸습니다.

Redux vs. MobX

우리가 MobX를 사용 할 때 제대로 활용을 하지 못했던 이유도 있었겠지만 메이커 스튜디오를 개발하면서 Redux를 사용하기로 결정했던 것은 탁월한 선택이었던 것 같습니다. 무엇보다도 Redux Devtools가 잘 되어 있어 상태 처리에 대한 개발이 훨씬 쉬워 졌고 오류도 빠르게 잡아낼 수 있게 되었습니다.

그리고 CRA와 Redux는 찰떡궁합이었습니다. MobX를 사용하면서 느꼈던 어려움을 Redux로 전환하면서 상당부분 해소할 수 있었고 프론트엔드 개발팀의 인원이 많지 않아 관련 라이브러리를 다양하게 활용하기는 힘든 측면이 있어 될 수 있으면 한가지로 통일하고자 하는데요. 이후로는 MobX를 이용해 프로젝트를 진행하지는 않고 있습니다. (나중에 다시 기회가 닿는다면 모를까…)

MobX도 정말 좋은 장점이 많지만 우리의 실정에는 Redux가 훨씬 더 적합하였습니다. 특히 Redux Devtools의 Time Travel이나 Log Monitor와 같은 기능은 메이커 스튜디오를 만드는데 큰 도움이 되었습니다.

Storybook으로 공통 컴포넌트 관리

와디즈는 Wadiz UI라는 공통 UI라이브러리를 활용하여 디자인 일관성을 만들어 가고 있습니다. 이와 같이 와디즈의 사용자 경험을 일관되게 통일하고 경험할 수 있도록 메이커 스튜디오에서도 공통 컴포넌트 만들어 일관된 사용자 경험을 제공하고 있습니다.

이전 부터 서버와 연동 작업 이전에 컴포넌트 작성 단계에서는 Storybook을 활용하였는데요 메이커 스튜디오를 개발할 때에는 Storybook이 정말 많은 역할을 하였습니다. 메이커 스튜디오는 메이커와 관리자 간의 권한관리에 따라 컴포넌트를 다르게 보여주어야 할 때도 있고 기능을 일부 다르게 가져가야 하는 등 애로사항이 많았는데요. (특히 이런걸 jQuery로 한다고 생각한다면…) Storybook을 통해 권한 처리에 따라 다르게 UI를 구성한다던가 하는 부분에서 정말 큰 도움이 되었습니다.

드디어 오픈, 그리고 리워드!

2019년 4월 30일 드디어 투자 메이커 스튜디오가 세상에 나왔습니다. (이 날은 설레서 잠도 제대로 못 잤습니다.) 투자 메이커 스튜디오는 와디즈에서도 첫 SPA 제품으로 오픈하면서도 정말 제대로 운용이 될지 모험이었습니다. 오픈 이후 기존 메이커 스튜디오와 달라 혼란이 크지 않을까 걱정이 많았는데 오픈 이후에는 잘 운용되고 있는 것 같아서 뿌듯한 마음이 더 큰것 같습니다.

이제 메이커 스튜디오는 새로운 시작을 준비하고 있습니다. 다음은 리워드 메이커 스튜디오가 새 옷을 입을 차례인데요. 올해 하반기 오픈을 목표로 와디즈의 개발 팀 모두가 메이커를 고민하며 치열하게 만들어 나가고 있고 리워드 메이커 스튜디오 개편 이후에도 와디즈의 메이커가 프로젝트를 보다 더 쉽게 만들어 갈 수 있도록 다양한 기능을 기획 및 준비 하고 있습니다.