개발자 하민아빠의 Dev & Money

LLM 에이전트로 화면 매뉴얼 자동화하기: UI부터 백엔드, 전처리까지 소스 추적기

안녕하세요! 실무에서 부딪히는 다양한 문제들을 코드로 해결해 나가는 4년 차 개발자입니다. 😊 사내 플랫폼을 개발하다 보면 화면은 계속 늘어나는데, "이 화면 매뉴얼은 언제 작성되나요?"라는 질문을 받을 때가 참 많죠.조회형 대시보드부터 기준정보 관리, CRUD 화면까지 수백 개의 화면이 있지만 매뉴얼 작성은 늘 개발자의 몫이고 후순위로 밀리기 일쑤입니다. 저 역시 이 문제로 골머리를 앓다가, "화면 이름 하나만 입력하면 UI, 백엔드 API, 전처리 배치 소스까지 싹 다 추적해서 매뉴얼 초안을 써주는 에이전트를 만들면 어떨까?"라는 생각에 도달했습니다.오늘은 이 에이전트를 설계하며 겪었던 치열한 고민과 트러블 슈팅 경험을 공유해 보려고 합니다.1. 왜 이 에이전트를 만들었나? (3개의 세션을 오가던 ..

안녕하세요! 며칠 전 'AI 바이브 코딩을 활용해 웹으로 발표 자료를 만들었다'는 글을 남겼었는데요.드디어 그 자료를 들고 회사 팀빌딩에서 무사히 발표를 마치고 돌아왔습니다! 👏해당 자료는 여기 링크입니다.오늘은 지난번처럼 기술적인 'How-To'나 '웹 프레젠테이션 제작기'에 초점을 맞추기보다는, 동료들과 실제로 어떤 이야기를 나누었고 어떤 피드백을 주고받았는지 소소한 일기장처럼 회고를 남겨보려고 해요.AI 트렌드 속에서 어떻게 살아남아야 할지 고민하는 동료 개발자분들께 작은 공감과 영감이 되길 바랍니다.3가지 파트로 꽉 채운 발표 내용이번 팀빌딩 발표는 내용의 흐름을 자연스럽게 이어가기 위해 총 3개의 파트로 나누어 진행했어요.파트 1: 우리가 만드는 AI Agent 서비스가장 먼저, 현재 우리 팀..

안녕하세요! 오늘도 실무에서 겪은 트러블슈팅 경험을 나누러 온 4년 차 프론트엔드 개발자입니다. 😊React SPA(Single Page Application)를 개발하다 보면, 사용자의 인증 세션이 만료되었을 때 처리해야 할 일이 꽤 많습니다. Redux 상태를 초기화하고, 열려있던 모달이나 패널을 닫고, React Query 캐시를 날린 뒤, 로그인 페이지로 안내해야 하죠.그런데 이 '정리(Cleanup)' 로직을 작성하다 보면 한 가지 큰 벽에 부딪히게 됩니다.바로 "React 훅(Hook)은 컴포넌트 바깥에서 쓸 수 없다"는 React의 철칙 때문입니다. 오늘은 이 규칙 때문에 파편화된 로그아웃 로직을 모듈 스코프와 의존성 주입(DI) 패턴을 이용해 한 곳으로 우아하게 모은 과정을 공유해보려고 ..

안녕하세요! 최근 LangGraph를 활용해 AI 에이전트를 개발하면서 정말 골치 아픈 문제에 직면했었어요.바로 사용자와 에이전트가 대화를 나눌수록, 그리고 툴(Tool) 호출 결과가 쌓일수록 그래프 스테이트(Graph State)에 저장되는 데이터가 무한히 증식한다는 점이었습니다. 이로 인해 컨텍스트 한계값(현재 약 200만 토큰)에 도달해버리거나 서버 상태에 큰 부담을 주는 문제가 발생했죠.저와 비슷한 고민을 하고 계실 개발자분들을 위해, 이번에 클로드 코드(Claude Code)에서 영감을 받아 구현한 '대화 압축(Compact)' 기능의 실무 적용기를 공유해 보려고 해요!1. 컨텍스트 무한 증식, 무엇이 문제였을까?LangGraph는 노드 간 상태(State)를 전달하며 워크플로우를 이어가는 훌륭..

안녕하세요! 현업에서 치열하게 구르고 있는 4년 차 개발자입니다. 지난 3편에서는 GraphDB를 활용해 'UI-SQL 추출'과 '테이블 영향도 파악'을 자동화한 경험을 공유해 드렸는데요.글 말미에 잠시 예고해 드렸던 '에러 추적 에이전트' 기억하시나요?트랜잭션 관리부터 에러 로그 분석, 그리고 그 이면의 비즈니스 맥락까지... 하나의 글로 담기엔 내용이 너무 깊어 부득이하게 이번 심화 편으로 따로 빼서 찾아오게 되었습니다. "어? 에러 났어요!"라는 슬랙 메시지를 받으면 우리는 보통 에러 로그를 뒤지고, 몇 번째 라인인지 확인하고, Git Blame을 열어 누가 언제 고쳤는지 보고, 지라(Jira)를 뒤져서 왜 이런 요구사항이 들어왔는지 확인하죠. 원인을 찾는 데만 한참이 걸립니다.그래서 저는 이 모든..

안녕하세요! 현업에서 치열하게 구르고 있는 4년 차 개발자입니다.지난 1편에서는 AI 에이전트의 토큰 낭비를 막기 위해 GraphDB를 도입한 배경을, 2편에서는 소스 코드를 AST로 파싱해 CI/CD 파이프라인에서 자동으로 GraphDB를 갱신하는 과정을 다루었습니다. 인프라와 데이터 파이프라인이 완성되었으니, 이제 이 강력한 무기를 실무에서 어떻게 써먹고 있는지 보여드릴 차례입니다.현재 저희 팀은 GraphDB에 적재된 데이터를 바탕으로 크게 3가지의 AI 에이전트를 개발하여 운영 중인데요. 오늘은 그중에서도 개발자들의 퇴근 시간을 획기적으로 앞당겨준 'UI-SQL 추출 에이전트'와 '테이블 영향도 추적 에이전트'의 실전 활용기를 공유해 보겠습니다.1. UI-SQL 추출 에이전트: 화면부터 실제 DB..

안녕하세요! 현업에서 치열하게 구르고 있는 4년 차 개발자입니다. 지난 1편에서는 AI 모니터링 에이전트의 토큰 낭비를 막고 추적 성능을 높이기 위해, 왜 Git API 텍스트 검색 대신 GraphDB(Neo4j) 를 선택했는지 이야기해 보았습니다.그런데 GraphDB를 구축하기로 마음먹고 나니 가장 큰 현실적인 벽에 부딪혔습니다."서비스 코드는 매일매일 수정되고 배포되는데, GraphDB에 저장된 구조도(노드와 엣지)는 어떻게 최신 상태로 유지하지?" 사람이 코드가 바뀔 때마다 DB를 쿼리해서 관계를 수정하는 건 말도 안 되는 일이죠.그래서 저는 정적 분석(AST 파싱) 모듈을 파이썬(Python)으로 직접 개발하여 CI/CD 배포 파이프라인에 태웠습니다.즉, 개발자가 코드를 배포하면 파이프라인이 돌면..

안녕하세요! 현업에서 치열하게 구르고 있는 4년 차 개발자입니다. 최근 저희 팀은 운영 중인 기존 서비스에 '시스템 모니터링 및 기능 추적을 위한 AI 에이전트'를 도입하는 프로젝트를 진행했습니다.서비스에 장애가 나거나 특정 기능을 수정해야 할 때, AI가 "이 UI에서 호출하는 API가 어떤 테이블을 수정하는지" 단번에 추적해서 알려주길 바랐거든요. 처음에는 아주 단순하게 생각했습니다."AI 에이전트한테 Git 저장소 조회 API 권한을 주고, 코드를 직접 읽어서 분석하게 하면 되지 않을까?" 하고요.하지만 결과는 처참했습니다.방대한 소스 코드와 참조 관계를 따라가다 보니 LLM의 컨텍스트 토큰은 순식간에 고갈되었고, 추적 성능은 바닥을 쳤습니다. 이 문제를 해결하기 위해 제가 찾은 돌파구는 바로 Gr..

안녕하세요! 실무에서 치열하게 부딪히며 성장하고 있는 4년 차 개발자입니다. 😊 최근 사이드 프로젝트로 만들고 있는 Family Planner 앱의 백엔드(NestJS)를 개발하다가 정말 기묘한 버그를 만났습니다.공공데이터포털(data.go.kr)의 공휴일 API를 호출하는데, 자꾸만 400 INVALID_REQUEST_PARAMETER_ERROR 에러를 뱉어내는 것이었죠. 단순한 파라미터 에러인 줄 알았는데, 눈에 보이는 증거가 전혀 없어서 원인을 찾고 수정하느라 배포 커밋만 15번을 넘게 했고, 꼬박 2일이라는 시간을 쏟아부었습니다. 결론부터 말씀드리면 범인은 파라미터가 아니라 Sentry(모니터링 툴)가 몰래 주입한 HTTP 헤더 때문이었습니다.혹시 지금 저처럼 이유를 알 수 없는 공공 API 4..

안녕하세요! 실무에서 치열하게 고민하고 부딪히며 성장하고 있는 4년 차 개발자입니다. 😊 다들 사내 발표나 세미나를 준비하실 때 어떤 툴을 사용하시나요?아마 십중팔구 파워포인트(PPT)나 키노트를 떠올리실 텐데요.저 역시 항상 PPT로 발표 자료를 만들면서 '폰트 파일 챙겼나?', '발표장 PC에서 레이아웃이 깨지면 어떡하지?' 하는 불안감을 안고 살았어요. 다음 달에 사내에서 AI Agent 서비스 개발과 관련해 팀 빌딩 발표를 하게 되었는데, 명색이 최신 AI 기술을 발표하는 자리인데 구식 PPT 포맷을 쓰는 게 영 아쉽더라고요.그래서 과감하게 기존에 보유한 사업자 도메인에 HTML 기반의 웹 프레젠테이션을 올려보기로 결정했습니다. 결과적으로 바이브 코딩(Vibe Coding)을 활용해 PPT보다 ..