리팩토링은 나를 위한 선물?!
여러분은 개발자로서 가장 도전적이었던 순간을 떠올려 본 적 있으신가요? 때로는 익숙한 방식을 벗어나 새로운 구조를 도입하거나, 사용자의 진짜 문제를 해결하기 위해 기획과 개발의 균형을 맞추는 과정에서 우리는 더 깊이 성장하곤 합니다. 이번 인터뷰에서는 Product Engineer Camp(P.E.C)를 통해 성장한 동희님의 이야기를 소개합니다. 동희님은 현재 신사업 팀에서 프론트엔드 개발을 담당하며, 두 개의 제품을 성공적으로 출시했습니다. 특히 문서 기반 검색 시스템과 LLM을 활용한 문서 작성 지원 프로그램을 개발하며 FSD(Feature-Sliced Design)와 zustand를 도입해 프로젝트를 혁신적으로 리팩토링한 과정을 생생하게 들려주셨습니다. P.E.C를 통해 단순히 코드를 작성하는 개발자가 아닌, 사용자 경험을 주도적으로 개선하는 개발자로 변화한 동희님. FSD와 zustand를 결합해 복잡한 프로젝트를 체계적으로 관리하고, 사용자 중심의 철학을 실제 업무에 적용해 나가는 동희님의 경험은 많은 개발자들에게 실질적인 인사이트를 제공할 것입니다. 사용자를 위한 더 나은 제품을 만들기 위해 끊임없이 고민하고 도전한 동희님의 이야기, 지금 바로 만나보세요! Q. 요즘도 신사업 팀에서 계속 계신가요? 네, 올해 정말 바빴습니다. 제품 두 개를 출시했거든요. Q. 와, 두 개나요? 어떤 제품인지 간단히 설명해주실 수 있나요? 첫 번째는 문서를 업로드하면 색인을 하고 문서 기반으로 검색할 수 있는 시스템이에요. 프론트엔드는 다른 개발자 한 분과 함께 작업했죠. 두 번째는 ChatGPT나 SOLA 같은 LLM 모델을 활용해 문서를 작성할 수 있도록 도와주는 프로그램인데, 이건 프론트엔드 전체를 제가 혼자 담당했어요. Q. 혼자서 전체를 다 하신 거라니 대단합니다. 어려운 점은 없으셨나요? 두 번째 프로젝트는 UI는 간단했지만, 비즈니스 로직이 많아서 설계가 쉽지 않았어요. 특히 zustand를 사용해 전역 상태를 관리했는데, 이 프로젝트 특성상 props drilling만으로 해결이 안 되는 부분이 많았거든요. 그래서 zustand로 전역 상태를 관리했지만, 의존성 관리가 쉽지 않아 고생했죠. + (인터뷰어 의견) 맞아요. zustand를 그냥 사용하면 의존성이 꼬일 수밖에 없는 부분이 있을것 같아요. 클린 아키텍처에서 사용하는 usecase 개념을 zustand와 결합해서 설계하는 방향도 있더라고요. 이때 각 컴포넌트가 특정 스토어에만 의존하도록 스토어를 분리하는 작업이 정말 중요하더라고요. Q. FSD(Feature-Sliced Design)도 도입하셨다고 들었는데요. 어떤 과정으로 적용하셨나요? 이 프로젝트에서 FSD를 처음으로 적용했어요. 기존에는 모놀리식 구조로 개발을 시작했는데, 비즈니스 로직과 UI 코드가 한곳에 섞여 있어서 유지보수가 너무 힘들었어요. 그래서 FSD 구조로 리팩토링을 시작했죠. 처음에는 중요한 기능부터 차근차근 구조를 바꿨고, 시간이 생길 때마다 나머지 부분도 리팩토링을 진행했어요. Q. FSD 구조로 전환하면서 가장 큰 변화는 무엇이었나요? 가장 큰 장점은 비즈니스 로직과 공통 UI를 명확히 분리할 수 있었다는 거예요. 예를 들어, 공통 UI는 shared 폴더에, 특정 기능은 features 폴더에 배치하면서 코드의 위치가 명확해졌죠. 이전에는 모든 게 한 폴더에 몰려 있어서 찾기가 어려웠는데, 지금은 유지보수가 훨씬 쉬워졌어요. Q. 리팩토링 과정에서 어려움은 없으셨나요? 당연히 있었습니다. 특히 기존 구조가 의존성이 많아서 처음에 손대기가 쉽지 않았어요. 그래서 중요도가 높은 기능부터 FSD 구조로 리팩토링을 시작했고, 시간이 생길 때 점진적으로 나머지 코드를 수정했어요. 또 zustand와 FSD를 결합하는 과정에서 스토어 설계를 새로 해야 했는데, 스토어 간 의존성을 최소화하는 작업이 특히 어려웠어요. Q. 이런 리팩토링 작업은 당장 성과가 보이지 않을 텐데요. 힘들지 않으셨나요?
- PEC