Agentic AI 기반 애플리케이션 생성 솔루션

🪄 프로젝트 소개

해당 프로젝트는 Agentic AI 기반 노코드 애플리케이션 생성 솔루션이에요. 사용자가 기능 요구사항을 입력하면, 백엔드 엔진이 Agent 단위로 코드를 생성하고, 생성 결과를 SCM에 반영한 뒤 빌드와 패키징까지 이어지는 파이프라인을 제공해요.

Web에서는 이 전체 파이프라인이 어떤 흐름으로 진행되는지 사용자가 확인할 수 있도록 구성했어요. 즉 단순히 결과물만 보여주는 것이 아니라, 코드 생성과 빌드가 실제로 어떤 상태로 진행 중인지 실시간으로 관찰할 수 있는 운영 화면을 만드는 것이 중요했어요.

해당 솔루션의 동작 흐름은 다음과 같아요.

1. 프로젝트를 생성해요.
2. 프로젝트 단위로 요구사항을 등록하고 관리해요.
3. 프로젝트 단위로 애플리케이션 생성에 필요한 메타데이터를 관리해요.
4. 요구사항과 메타데이터를 바탕으로 애플리케이션 코드를 생성해요.
5. 생성된 코드는 SCM과 연동된 파이프라인을 통해 빌드와 패키징을 진행해요.

생성 엔진은 Agentic AI 환경의 백엔드 엔진에서 동작하고, 프론트엔드는 그 결과와 진행 상태를 사용자가 이해할 수 있는 형태로 연결하는 역할을 맡고 있어요.

🛠️ 기술 스택

✨ 주요 기능

• 프로젝트 생성 기능
• 프로젝트 단위 요구사항 및 메타데이터 관리 기능
• Agent들의 병렬 코드 생성 작업을 실시간으로 보여주는 대시보드 UI
• SCM 반영 이후 빌드와 패키징 로그를 실시간으로 보여주는 스트리밍 UI
• 프로젝트 도메인 관련 CRUD 기능
• 공통 SSE 모듈을 활용한 실시간 이벤트 처리 구조

💼 담당한 일

저는 해당 프로젝트에서 프론트엔드 개발을 중심으로, Agentic AI 파이프라인의 진행 상태를 사용자가 이해할 수 있는 화면으로 연결하는 역할을 맡았어요.

• 백엔드 엔진에서 병렬로 코드 생성하는 Agent들의 작업 내용을 실시간으로 확인할 수 있도록 대시보드 형태의 UI를 구현했어요.
• Jenkins 서버에서 발생한 빌드와 패키징 로그를 백엔드 애플리케이션의 SSE 스트림을 통해 전달받아 Web에 노출했어요.
• 실시간 코드 생성 결과와 로그 스트림을 공통 방식으로 처리할 수 있도록 SSE 기반 커스텀 훅을 개발했어요.
• 프로젝트 생성, 요구사항 관리, 메타데이터 관리 등 프로젝트 도메인 관련 CRUD 개발에도 함께 참여했어요.

🧩 해결했던 과제

해당 프로젝트에서 가장 중요한 과제는 백엔드에서 실시간으로 발생하는 이벤트를 프론트엔드에서 안정적으로 처리하고, 사용자가 이해할 수 있는 상태로 변환하는 것이었어요.

• 코드 생성은 Agent 단위로 병렬 처리되기 때문에, 단순 로그 나열이 아니라 단계와 작업 상태가 읽히는 UI 구조로 재구성해야 했어요.
• 빌드 로그는 길고 연속적인 텍스트 스트림이기 때문에, 누락 없이 누적하면서도 화면이 과도하게 무거워지지 않도록 처리 흐름을 설계했어요.
• 실시간 처리 로직이 화면마다 흩어지지 않도록 공통 SSE 모듈을 만들어 재사용 가능한 형태로 정리했어요.
• 프로젝트 관리 화면과 실시간 스트리밍 화면이 같은 도메인 안에서 자연스럽게 이어지도록 CRUD와 스트리밍 UI 사이의 경계도 함께 정리했어요.

📝 회고

해당 프로젝트는 백엔드로부터 실시간으로 들어오는 데이터를 프론트엔드에서 어떻게 다뤄야 하는지 깊게 고민한 경험이었어요.

특히 SSE로 들어오는 이벤트를 단순히 state에 붙이는 수준이 아니라, 브라우저의 렌더링 비용과 JS 번들 환경까지 고려해 처리해야 했어요. 이벤트가 짧은 주기로 연속해서 들어오면 불필요한 렌더링이 쉽게 늘어나기 때문에, 공통 훅에서 이벤트를 어떻게 누적하고 어떤 단위로 화면 상태를 갱신할지 기준을 세워야 했어요. 이 과정에서 실시간 데이터 처리 로직을 UI 컴포넌트에 직접 섞지 않고, 공통 모듈로 분리해 관심사를 나누는 것이 중요하다는 점을 더 분명히 느꼈어요.

또한 Next.js 환경에서는 브라우저에서 보이는 실시간 연결만 생각하면 끝나는 것이 아니라, 프록시 환경과 배포 환경의 동작 방식까지 같이 고려해야 했어요. 개발 환경과 배포 환경에서 SSE 연결 유지 시간, 스트림 응답 방식, 경로 프록시 처리 방식이 달라질 수 있기 때문에, 단순히 로컬에서 동작하는 수준이 아니라 실제 서비스 환경에서도 연결이 안정적으로 유지되도록 구성하는 경험을 했어요.

결과적으로 해당 프로젝트를 통해 실시간 스트리밍 UI는 단순한 화면 구현이 아니라, 브라우저 런타임, 네트워크 흐름, 서버 응답 방식까지 함께 이해해야 제대로 만들 수 있다는 점을 배웠어요.