프론트엔드 개발 생산성을 높여보자

안녕하세요, 오늘은 AI툴과 MSW를 활용해 개발 생산성을 높이려고 시도한 과정을 말씀드리겠습니다.

이번 모의투자 프로젝트를 진행하면서 가장 큰 걸림돌이 되었던 것은 개발 일정이었습니다.

개발 기간이 10일 밖에 없는 상황에서 백엔드/프론트 개발 및 연동, 배포 환경 테스트, 모의투자대회 서비스 오픈까지 해야했습니다.

따라서 어떻게 하면 프론트엔드에서 생산성을 높일 수 있을까 고민했습니다.

제가 경험한 프로젝트는 일반적으로 위와 같이 진행됐습니다.

기획이 나오면 디자인 및 와이어 프레임 제작과 API 및 스키마 설계를 합니다.

그 후 백엔드 개발이 완료되면 프론트엔드 개발이 시작이 되죠.

따라서 프론트는 항상 프로젝트의 마지막 단계에서 병목 지점으로 오해받기도 합니다.

이번 프로젝트에서는 우선 디자인과 API 작성의 시간을 단축하고자 했습니다.

그래서 디자인에서는 Figma MCP를 활용했습니다.
Figma MCP를 사용하면 컨텍스트 기반으로 AI가 자동으로 화면을 만들어줍니다.

따라서 피그마를 다루지 못하는 사람도 와이어프레임 제작에 참여할 수 있어서
서로의 생각을 동기화하는데 유용하게 쓰였습니다.

그 다음으로는 V0를 사용했습니다.

V0의 경우 Next, tailwindCSS를 기반으로 코드가 작성되고 바로 인터렉션이 가능한 프로토타입을 생성하기 때문에 별다른 러닝커브 없이 빠르게 적용 가능해서 선택했습니다.

또한, 회의를 통해 기획 변경이 발생하더라도 프롬프팅으로 빠르게 수정이 가능합니다.
프로토타입을 제작하는데 가장 효과적인 툴이었습니다.

앞서 FigmaMCP와 V0로 만든 프로토 타입을 활용해서 API 명세서를 작성하였습니다.

이전 프로젝트에서는 로우 피델리티(도형과 텍스트로만 구성된 와이어 프레임)으로 API 명세서를 작성했습니다.

이로 인해 백엔드와 프론트엔드의 생각이 달라 개발을 하면서 계속 수정해야 하는 상황이 발생했습니다.

하지만, 인터렉션이 가능한 프로토타입을 활용하니 어떤 컴포넌트에서 어떤 요청을 보내야하는지 명확해졌고, API 명세서 작성 속도가 향상되었습니다.

따라서 이전 프로젝트에서 3일 걸리던 작업이 Figma MCP, V0 도입 후 하루만에 끝날 정도로 개발 생산성이 많이 올라가게 됐습니다.

그 다음에는 백엔드가 완성되지 않더라도 프론트엔드 작업을 병렬적으로 진행할 수 있는 방법에 대해 모색했습니다.

일반적으로 프론트가 백엔드 서버에 요청을 보내고, 백엔드에서는 비즈니스 로직을 처리한 뒤 프론트로 응답을 보냅니다.

프론트는 받은 응답을 바탕으로 컴포넌트를 렌더링하죠.

요청을 보내고, 응답이 와야 렌더링 되는 구조로 인해 백엔드에 대한 의존이 발생하게 됩니다.

따라서 이 의존을 없애면 프론트와 백엔드가 병렬적으로 작업을 진행할 수 있다고 판단했습니다.

저희가 이번에 도입한 것은 MSW 입니다.

사용자가 fetch()를 호출하면 브라우저 Web API가 Request를 생성 및 스케쥴링합니다.

그 뒤 현재 페이지가 해당 서비스 워커에 의해 컨트롤되고 있고, 요청 URL이 서비스 워커의 scope 안에 있으면 브라우저가 fetch 이벤트를 서비스 워커로 디스패치합니다.

MSW가 등록되어 있다면, MSW는 등록된 핸들러 목록에서 기준으로 요청을 매칭하고, 매칭되면 목업데이터를 반환하게 됩니다.

따라서 MSW 도입으로 3가지 효과를 얻었습니다.

첫 번째로는 백엔드와 프론트가 병렬 개발을 할 수 있게 되었습니다.

두 번째로는 에러 관련 응답을 반환하게 하거나 응답에 지연을 걸어서 폴백을 뜨게하는 등 비동기 처리에 수월해졌습니다.

마지막으로 vitest 같은 테스트 라이브러리를 쓰게되면 MSW로 모킹한 데이터를 받을 수 있어 테스트에도 용이해졌습니다.

따라서 10일이라는 짧은 개발 기간임에도 불구하고
백엔드가 개발이 완료되어 서버 인스턴스에 배포된 순간 프론트에도 별다른 조치없이 바로 연동되어 빠른 서비스 배포가 가능했습니다.

마무리

AI가 발전되면서 개발에 이를 어떻게 활용하는지에 따라 개발 생산성을 높일 수 있다는 걸 배웠습니다.

Figma MCP → V0 → MSW로 이어지는 흐름을 구축하면서 기획-디자인-프로토타입-명세-구현 과정에서의 개발 시간을 단축할 수 있었습니다.

특히, 백엔드 개발 전에 에러나 폴백 상황을 미리 개발할 수 있었던 게 특히 시간 단축에 도움이 되었던 것 같습니다.