[Side Project] 코딩 세션을 모아 보는 Agentic Engineering History

최근 LLM 사용 패턴을 파악해 보려고 LLM Usage Tracker를 만들고 나서, 블로그 글을 쓰려다 보니 기록을 보기 어렵다는 생각이 들었다. 아무래도 만드는 중에는 그 과정에 집중하다가, 어느 정도 완료되면(아직 마음의 결정을 하지 못해서 오픈소스로 공개하진 않지만...) 정리해서 개발 과정을 블로그에 남기고 싶다. 그런데 이때 예전 기록을 찾기가 어렵다는 걸 깨달았다.

로컬에 jsonl 파일로 세션 기록이 남아 있기는 하다. 조사해 보니 Claude Code는 30일 동안 보관하고(설정 가능함) Codex는 따로 정리하지 않아서 계속 쌓인다. 그래서 여길 보면 내용을 알 수 있고, 채팅으로 찾아 달라고 요청하면 잘 찾아주기도 한다. 하지만 커밋하진 않았어도 HTML이나 마크다운으로 정리한 내용, 검토했던 디자인 시안 등 개발 중간 과정을 보면서 글을 쓰고 싶었다. 그런데 없어진 기록이나 파일도 있어서 이런 작업 과정을 어딘가에 저장해 놓고 살펴보고 싶었다.

그래서 Agentic Engineering History를 만들기 시작했다. 사실 사용성이나 활용도 면에서 많이 부족하다고 느껴서 앞으로의 방향성을 고민하고 있는 프로젝트다. 그럼에도 글을 쓰는 건 1차 목표가 끝나서 기록도 남기고 회고하려는 뜻에서다. 또 글을 써야 이 프로젝트를 실제로 써 보면서 사용성을 다시 고민할 수 있다.

Agentic Engineering History 개발

Agentic Engineering History는 Claude Code나 Codex 같은 코딩 에이전트의 세션 기록을 모아 두는 서비스다. 내가 LLM한테 뭔가 요청하고 대화하면서 LLM이 작업한 내용을 다 남겨 두고, 나중에 필요할 때 찾아보려고 만들었다.

초기에 이 프로젝트로 하고 싶은 목표를 정하고 기본 골격을 잡기 시작했다. 프로젝트도 만들지만 테스트 목적도 있어서 처음 제안한 스택 위에서 내 취향에 대한 의견을 주면서 맞춰 가는 편이다. 결국 TypeScript에 oxlint, oxfmt, vitest를 쓰고, CSR을 선호하는 편은 아니라서 htmx를 써서 하이퍼미디어 방식의 SSR로 구현하도록 스택을 정했다. 한번 써 보고 싶어서 htmx를 선택했지만, 간단한 서비스이기도 하고 기술적 문제를 같이 고민한 것도 아니라 이걸 써 봤다고 할 수 있나 하는 생각이 들었다.

이 프로젝트를 하던 때는 한창 Loop Engineering이 유행하던 시기였다. 나는 주로 계속 검토하고 피드백하면서 작업하는 편이라 장기간 작업을 시키는 게 익숙지 않았다. 그래서 시험도 해 볼 겸 그때까지 잡은 방향성을 기준으로 Loop Engineering 자료를 주고 시도해 봤다.

Claude Code에서 Opus 4.8을 주로 사용했는데, 어느 정도는 장기간 작업이 돌아갔지만 기대만큼 오래 실행되지는 않고 자주 멈췄다. 다른 프로젝트지만 비슷한 시기에 Codex에서도 /goal로 시도했는데, 오히려 이쪽은 초기 목표를 너무 크게 줘서 그런지 거의 한 달 내내 돌아가서 느낌이 또 달랐다. 똑같은 방식으로 한 건 아니었지만, 이 차이는 모델보다는 내가 아직 하네스와 계획, 목표 설정에 능숙하지 않아서 생긴 것으로 느껴졌다.

Loop Engineering을 내가 잘 못해서 그런지(더 연습하긴 해야 하는데...) 결과는 적당히 만족스러운 수준이라, 그 이후에는 기존처럼 대화하면서 작업했다. 종종 생각하는데, 나는 구체적으로 어떻게 할지 명확히 정해 놓고 하기보다 머릿속의 막연한 생각을 얘기하고 설명하는 쪽이다. 그렇게 만들어진 결과를 보면서 결정하는 편이라 이 방식이 더 맘에 든다.

그동안 안 써 보던 다른 서비스도 써 보자는 생각에 이번에는 Cloudflare를 쓰기로 했다. Cloudflare Workers와 Cloudflare D1에 배포하도록 작업했고, 클라우드에 배포하므로 인증은 Cloudflare Access로 연결했다. 이후에 써 보니 어차피 작업해 두면 크게 신경 쓸 건 없었다. 다만 Google 로그인은 늘 구글에 로그인되어 있어서 쓰기 편한 데 비해, Cloudflare는 로그인해 둘 일이 많지 않다 보니 오히려 그 부분이 불편했다.

얼마 전에 만든 LLM Usage Tracker와 데이터를 로컬에서 수집해 원격에서 모아 보여주는 방식이 사실상 똑같아서, 기존과 유사한 구조를 사용했다. 로컬에 Claude Code와 Codex의 세션을 분석하고 수집해서 업로드하는 collector를 만들고, API 키로 원격 서버에 데이터를 계속 보내도록 했다.

UI

어느 정도 기능이 만들어지자 이제 UI를 본격적으로 만들기 시작했다. 혼자 사용하는 서비스라서 디자인을 디테일하게 챙기진 않는다. 요즘은 대충 말해도 디자인을 잘 뽑아내다 보니 시안의 초기 느낌만으로 고르고 이후에 개선해 나간다.

시안 A: 미니멀

시안 B: 에디토리얼

시안 C: 터미널

다 비슷한 느낌이지만(시안을 더 다양하게 받는 방법도 고민해 봐야겠다.) A 미니멀 버전을 선택하고 UI를 사용하면서 불편하다고 생각하는 부분을 계속 개선했다.

세션 목록은 마지막 대화 시간을 기준으로 보이게 했다. 그리고 로컬에서는 정액 요금제를 쓰고 있어서, collector가 세션을 업로드할 때 로컬에서 LLM을 사용해 내용 파악이 쉬운 제목을 붙이도록 했다. 서버에서 하면 더 잘하겠지만 그러면 비싼 API를 써야 해서 어쩔 수 없는 선택이다.

세션의 분량을 파악하기 쉽게 내가 얘기한 채팅과 LLM이 대답한 채팅, 서브에이전트의 채팅을 구분해서 보여준다. 사용한 모델도 쉽게 알아볼 수 있게 했다. Claude Code와 Codex도 계속 기능이 추가되어서 발견할 때마다 반영하고 있다. 다만 프로젝트라는 개념이 엄격하진 않아서 작업 폴더를 기준으로 프로젝트를 인식하도록 했는데, 잘못 판단하는 경우가 꽤 있어서 개선이 필요하다.

세션 상세는 채팅과 작업 내용을 쉽게 파악하는 게 목적인데, 양이 워낙 많아서 아직 어렵다. 불필요한 부분은 최대한 접게 했지만 여전히 많아서, 내용을 쉽게 파악하고 필요하면 더 자세히 볼 수 있는 방법을 고민 중이다.

세션 기록과 함께 중간에 생성한 에셋도 관리하는 게 목적이어서, 스샷을 찍거나 나한테 보여준 에셋 파일도 다 남기고 쉽게 볼 수 있게 구성했다. 그럼에도 아직 파악이 어려워서(사실 누락이 있을 수도 있고) 더 나은 방법을 고민 중이다.

세션의 구성을 쉽게 파악하고 탐색할 수 있도록 화면 우측에 레일 형식의 네비게이션을 구성했다. UI에서 이런 레일 형식의 네비게이션은 개인적으로 좋아하는 편이지만 사실 잘 써 본 적은 없어서 이번에도 시도해 보게 되었다. 한눈에 내가 얼마나 대화했고 그에 따라 코딩 에이전트가 얼마나 대답했는지 파악할 수 있게 했다. 최근엔 코딩 에이전트가 서브에이전트를 많이 사용해서 이 부분을 별도로 분리하고 서브에이전트의 작업도 표시하게 했더니, 저렇게 사람 이름처럼 이름이 붙어서 표시되었다.

내가 말한 부분으로 빠르게 이동하려고 네비게이션 기능도 넣었다. 다만 긴 세션 내용을 한 번에 로딩하지 않고 무한 스크롤로 채워지도록 구성해서, 특정 위치로 한 번에 움직이는 동작이 아직 어색해 고쳐야 한다.

에필로그

글 앞에서 말한 대로 이 프로젝트의 방향성은 아직 고민 중이다. 통계용 서비스라는 게 꼭 매일 봐야 의미가 있는 건 아니다. 그래도 현재 버전을 만족스럽게 개선하지 못하고 있어서 뭔가 부족하다는 생각이 든다.

일단 써 봐야 더 개선할 수 있으니, 그사이에 만든 사이드 프로젝트도 하나씩 정리해서 올려 보면서 고민할 생각이다. 이 프로젝트를 거의 만들었을 때쯤 다른 사람한테 AgentsView를 소개받았다. 훨씬 잘 만든 건 두말할 필요도 없고, LLM Usage Tracker와 별도로 만들 게 아니라 합쳤어야 했나 하는 생각도 하고 있다.