들어가며3편에서는 워크플로우 빌더의 포트 시스템이 어떻게 만들어졌다가 사라졌는지, 그리고 재설계를 분석한 경험을 다뤘다.4편에서는 5주간의 프로젝트를 돌아보며 시리즈를 마무리하려 한다.5주간의 회고팀 협업 이야기기술적 회고이후 계획5주간의 회고잘한 점: 공통의 목표5주간 우리 팀이 잘했던 건 "출시할 수 있는 프로덕트 완성"이라는 목표를 끝까지 놓지 않은 것이다.나만무 프로젝트 특성상 개인의 성장이나 취업을 위한 기술 스택에 집중하기 쉽다. 물론 중요한 부분이지만, 그것에만 매몰되면 작은 기능에 복잡한 기술을 적용하는 오버엔지니어링으로 이어질 수 있다. 잘못하면 결과물 없이 프로젝트가 끝나는 상황도 생길 수 있다. 실제로 이전 기수에는 일정 내에 프로덕트가 완성되지 않아 발표를 하지 못하고 부트캠프를 마..

들어가며1편에서 SnapAgent의 기획 배경을, 2편에서 팀 협업을 위한 base 컴포넌트 설계와 노드 생성 가이드 문서화 과정을 다뤘다.3편에서는 내가 담당한 워크플로우 빌더 프론트엔드의 핵심 구현 이야기를 풀어보려 한다.워크플로우 빌더 구현하기5주 프로젝트에서 워크플로우 빌더 프론트엔드를 맡았다. ReactFlow 기반의 노드-엣지 에디터를 만드는 일이었다. ReactFlow를 사용해본 적도, 노드-엣지 구조를 만들어본 적도 없었다. 1편에서 다뤘듯이 코치님이 n8n, Dify, Botpress를 레퍼런스로 추천해줬고, 분석 끝에 Dify를 메인 레퍼런스로 잡았다. 오픈소스라 GitHub 코드를 참고하기 편했다. 2주차에 들어가기 전에 ReactFlow docs와 Dify 코드를 보면서 베이스를 만..

들어가며1편에서는 SnapAgent의 기획 배경과 기술 스택 선정 과정을 다뤘다. 비개발자에서 개발자로 타겟을 전환한 이유, 5주간의 타임라인, 그리고 팀의 기술적 배경을 고려한 스택 선정 과정을 정리했다. 2편에서는 팀 협업 이야기를 해보려 한다. 5명이서 워크플로우 에디터를 개발하면서, 어떻게 하면 서로의 작업이 충돌하지 않고 효율적으로 진행될 수 있을지 고민한 과정을 다룬다.SnapAgent가 어떻게 동작하는가팀 협업을 위한 base 컴포넌트 설계노드 생성 가이드 문서화SnapAgent가 어떻게 동작하는가본격적인 구현 이야기에 앞서, SnapAgent가 어떻게 동작하는지 간단히 소개한다.전체 흐름"시작 - 지식 검색 - LLM - 종료" 노드로 구성된 워크플로우 기준으로, 사용자가 채팅창에 메시지를..

들어가며5개월간의 크래프톤 정글 여정의 마지막 관문, "나만의 무기 만들기(나만무)" 프로젝트. 5주라는 시간 동안 팀원들과 함께 실제 서비스를 기획하고 개발해야 했다. 우리 팀이 선택한 주제는 AI 에이전트 워크플로우 빌더, 프로젝트명은 SnapAgent였다.GitHub (Frontend): https://github.com/Krafton-Jungle10-Team4/FrontendGitHub (Backend): https://github.com/Krafton-Jungle10-Team4/Backend기획 배경: 아이디어가 나오기까지첫 번째 아이디어처음 우리 팀이 가져간 아이디어는 GitHub 레포지토리 시각화 도구였다. 사용자가 GitHub URL을 입력하면 해당 레포지토리의 아키텍처를 시각적으로 재구성..