AI 에이전트와 함께 퍼블리싱 기간 줄이기

개선하게 된 계기

현재 재직중인 '씨드투'에서 주로 에이전시 형식으로 개발을 진행하고 있었다.
이 때 약 40~50페이지의 앱의 퍼블리싱 기간이 AI를 활용하지 않고 약 3일 정도로, 개발 기간의 상당 부분을 차지하고 있었다.
그래서 이 문제를 개선하기 위해 여러 방법을 고안 했었고, 마침 디자이너 분들이 디자인 시스템의 개발을 모두 완료해서 디자인 시스템의 코드 개발 작업을 준비하려고 했다.

실제 개발 전에 고안했던 것

우선 AI를 활용하기 전에 손코딩으로 하기 편안한가를 중점적으로 봤다.
디자인 시스템이 한번만 개발하고 던지는 것이 아닌, 이후에도 유지보수가 돼야 하는데 손코딩으로 하기에 무리가 있다면 결국 어려움이 따를 것이라고 예상했다.
그래서 디자인 시스템을 활용할 때 어떻게 활용할 것인지, 개발자가 유지보수하기 편안한지 등을 중점적으로 생각을 했고, react-native의 디자인 시스템에 해당 부분을 어느정도 반영을 했다.

대표적으로 컴포넌트의 토큰 적용 과정을 예시로 들 수 있다.
디자인 시스템에서 컴포넌트도 중요하지만 컴포넌트의 토큰도 중요하다고 생각했다.
만약 일정하지 않은 토큰으로 하드코딩을 해서 임의로 적용할 경우 유지보수가 어렵다고 생각을 했고, 이것을 개선하기 위해 공용으로 토큰을 활용하는 방안을 적용했다.
그래서 DesignSystemProvider라는 ContextAPI와 tailwind의 플러그인을 활용해서 전역으로 토큰을 관리할 수 있도록 했다.
특히 디자인 시스템 중 브랜드 컬러가 변동 되더라도 바로 변경될 수 있게 반영을 했는데, 아래와 같이 변경할 수 있도록 처리했다.

// ...
<DesignSystemProvider
  theme={{
    colors: {
      brand: {
        primary: {
          50: "#E5F6FF",
          100: "#B3ECFF",
          // Colors... //
        },
      },
    },
  }}
>
  {/* ... */}
</DesignSystemProvider>

이러한 형식으로 개발자가 디자인 시스템을 활용할 때 통합된 UI/UX도 중요하지만 그에 못지 않은 커스텀 기능도 대응이 돼야한다고 생각해서 최대한 커스텀 기능의 수정 용이성을 개선하는 방향으로 개발을 진행했다.
물론 객체 형태로 변경할 수 있다고 해서 타입도 Record<string, string>이 아닌 디자인 시스템에 맞는 커스텀 타입을 활용해서 어떠한 색상을 바꿀 수 있는지 명확하게 처리도 했다.

실제 AI기반으로 개발 시 고안했던 것

AI는 부족하다. 요즘 많이 나아진 것이 맞긴하지만 그래도 부족하다.
그래서 AI에게 명확한 지시를 하는 것이 중요하다고 생각했다.
이번에 디자인 시스템 개발 중 발생했던 문제점 및 개선방법에 대해 설명하겠다.

AI가 컴포넌트를 이해하지 못하고 임의로 생성하는 경우

AI는 페이지를 만들기 위해 디자인 시스템을 이해하고 개발하는 것이 아닌, 임의로 컴포넌트를 직접 만드는 경우가 많았다.
지금까지 겪었던 사례로는 디자인 시스템의 버튼, TextField를 사용하지 않고 임의로 tailwind를 통해 직접 만들려고 하는 시도가 많았다.
그래서 우선 boilerplate의 AI에게 npm으로 배포된 디자인 시스템의 패키지 이름과 함께 디자인 시스템을 무조건 우선적으로 활용해서 개발을 하도록 지시했다.
해당 방법으로 적용하니 그나마 다행히 AI가 이해를 하고 기존에 컴포넌트를 새로 만드는 것이 아닌, 디자인 시스템의 컴포넌트를 우선적으로 검색을 하고 개발을 잘 수행했다.
간혹 랜딩 페이지 내 히어로 이미지 등 컴포넌트 중 없는 항목도 있었는데, 이 때는 AI가 임의로 컴포넌트를 만들어도 되는 것으로 우선순위를 나눠서 지시를 하면 대부분 해결 됐다.

최종적으로 AI가 디자인 시스템을 우선적으로 탐색하고, 이후에 없으면 임의로 컴포넌트를 만드는 과정을 가져 AI의 디자인 시스템 활용도가 향상됐다.

결과

결론적으로 말하면 AI를 활용해서 도움이 됐다.
덕분에 약 40~50페이지의 앱의 퍼블리싱만 약 3일에서 5일 정도 소요됐던 것에 반해 AI를 활용해서 반나절에서 하루로 줄일 수 있었다. 수치로 따지면 약 83%정도 된다.
다만, 무조건 AI가 모든것은 다 해주지 않고 발견했던 문제점이 있었는데, 주로 AI가 벡터 디자인을 직접 가져오지 못하고 이상하게 변환해서 가져오는 경우가 많았다.
이러한 경우에 대해서는 방법은 찾지 못했고 최소한의 최종 검수를 통해 개선하는 방향으로 진행했다.

느낀점

원래 나는 AI를 조금 부정적으로 보고 있었다.
초기 AI가 나왔을 때만 해도 무언가 만드는 능력은 좋았다. 그런데 만드는 흉내만 냈을 뿐이지 설계에 대한 근거가 많이 부족했고, 사용자가 제시한 방향이 있는데도 무시하는 것이 대부분이었다.
그런데, 이번에 디자인 시스템을 위해 AI 에이전트를 함께 활용 했을 때는 그런 부정적인 생각은 많이 바뀐것 같다.
물론 지시사항은 조금 더 명확하게 해야하는 부분이 있긴 했지만 80%정도는 내가 의도한 바에 맞게 개발을 잘 수행해줬고, 손을 직접 보는 일이 많이 줄었기 때문이다.
만약 이후에 AI 에이전트를 활용하는 개발을 지시 받거나 주도하게 된다면 거리낌 없이 AI 에이전트를 활용할 것 같다.