Umtri는 어떤 도구인가요?
바이브코딩은 편리하지만, 자신이 개발한 내용임에도 스스로 이해가 어려워지는 문제를 낳습니다. Umtri는 AI 에이전트를 활용해 프로젝트를 시각화할 수 있는 도구를 제공해 프로젝트를 직관적으로 이해할 수 있도록 합니다.
바이브코딩으로 앱을 만들다 보면 이런 순간이 옵니다.
“우리 앱에 이런 정보가 있었나? 어디 표시되고 있지?” “결제 흐름을 살짝 고치려는데, 어디까지 영향이 있지?” “언제 이 내용이 추가된 거지? 나도 모르게 추가되었네?”
직접 코드를 작성하던 시절에 비해, 이러한 문제가 좀 더 발생하기 쉬운 구조입니다. 그런데 프로젝트가 커질수록 이 ‘모름’이 점점 쌓여서, 사용자에게 질문을 받아도 AI 에이전트에게 답을 듣기 전에는 알기 어렵고 간단한 수정이라고 생각했던 문제가 예상보다 위험 범위가 넓어서 서비스를 오랫동안 멈추게 되기도 합니다. 자신도 모르던 내용이 노출되고 있어서 곤란한 상황에 처하기도 합니다.
누구나 따라하는 바이브코딩 시리즈를 작성하면서, 그리고 수많은 프로젝트를 진행하면서 통감했던 이 문제, 이 문제를 해결하기 위해 제작된 서비스가 바로 Umtri.io입니다.
프로젝트를 나무 한 그루로 그려 보기
Umtri는 프로젝트를 나무 형태로 그려줍니다. 프로젝트를 구성하는 핵심적인 구분이 밑동(Trunk)의 구분을 이루고, 그로부터 분기되는 흐름이 점차 더 굵은 줄기(Limb)에서 얇은 가지(Twig)로, 잎(Leaf)과 잎맥(Vein)으로 자라납니다.
| 나무의 부분 | 이름 | 내용 |
|---|---|---|
| 굵은 줄기 | Trunk | 서비스 구성 요소 (앱, 서버, 데이터베이스 등) |
| 큰 가지 | Limb | 주요 활동 구분 (사용자 메뉴, 장바구니·결제, 주문 내역 등) |
| 잔가지 | Twig | 모듈·관련 정보 묶음 (결제 과정) |
| 잎 | Leaf | 객체 (결제 화면 컴포넌트 등) |
| 잎맥 | Vein | 기능, 메소드(화면 안의 “주문하기”, “쿠폰 적용” 같은 동작) |
이 구분은 절대적이지는 않습니다. 프로젝트나 구성 요소의 성격마다 같을 수 없기 때문입니다. 단지 큰 것에서 작은 것으로 내려간다는 것이 유일하게 유지되는 규칙입니다. 사용자가 세부 내용을 세세히 알 필요는 없습니다. Umtri와 연동된 AI 에이전트에게 프로젝트를 나무로 그려달라고 요청하면, 에이전트는 규칙을 참조하여 나무를 그립니다. 단지 그 그림이 이해하기 쉬운지, 어려운지 판단해서 그림을 다시 그려달라고 조정을 요청하면 됩니다.
나무로 보면 무엇이 좋은가요?
한눈에 보입니다. 파일을 하나씩 열어 보지 않아도 우리 앱이 어떻게 자라나고 있고, 어떤 정보들이 어떤 가지에서 다뤄지고 있는지를 볼 수 있습니다.
자라 온 과정을 돌려 볼 수 있습니다. 화면 아래의 시간 슬라이더를 뒤로 당기면, 처음 만들었을 때의 작은 나무부터 가지가 하나씩 돋아나는 모습을 다시 볼 수 있습니다. 정보 구조의 생성 순서와 성장 흐름을 알 수 있습니다.
어디까지 영향이 가는지 보입니다. 나무를 그리면서 등록되는 각 노드 간에는 연결성과 종속성까지 같이 분석되어 기록됩니다. 이를 통해 어떤 곳에 문제가 생겼을 때 함께 확인해야 할 곳과 영향 범위가 표시되고, 기록됩니다. 해당 영역에 생긴 버그, 그리고 해결안이 어떤 영향을 주는지, 수정 이후 어떤 부분들을 확인해야 하는지를 체크할 수 있습니다.
팀원도, AI 에이전트도 같이 볼 수 있습니다. 나무로 그려진 결과는 팀원도, AI 에이전트도 같이 확인하며 더 명확한 소통을 돕습니다. 진행 중인 상황을 쉽게 공유할 수 있고 새로운 세션으로 시작된 에이전트도 프로젝트의 지도를 확인하면서 안전한 길을 찾을 수 있습니다.
먼저 구경해 보세요
가입하지 않아도 바로 확인할 수 있습니다. 아래의 데모를 확인해보세요.
데모 페이지에서는 아래를 해보실 수 있습니다.
- 가지와 잎을 눌러 보기 — 각 노드가 무엇인지 설명이 나옵니다.
- 아래쪽 시간 슬라이더를 끝까지 왼쪽으로 당겼다가 천천히 오른쪽으로 옮겨보세요. — 앱이 자라 온 순서대로 가지가 돋아납니다.
- 빨간 점(버그) 눌러 보기 — “결제를 다시 시도하면 쿠폰이 두 번 적용된다” 같은 버그가 어디에 붙어 있는지 보입니다.
Umtri를 제대로 체험해보기에는 부족하지만, 대략적인 동작은 확인할 수 있습니다. 그러나 진짜는 MCP 연동 후 프로젝트를 직접 관리하는 과정에서 드러난다는 사실을 기억하세요.
언제부터 쓰면 좋을까요
처음부터 새로 시작한다면 가장 좋습니다. 프로젝트 배지(Ground)를 만들고, 첫 번째 시즌(Season)을 만드세요. 시즌 이름은 PoC여도 좋고, 0.0.1이어도 좋습니다. 가장 처음 만들 목표물을 밑동으로 추가하고, 에이전트에게 생각하는 계획을 그려달라고 하세요. 계획 노드에 대해서는 4편에서 자세히 알 수 있습니다.
이미 만들어 둔 프로젝트가 있어도 상관없습니다. 지나온 시간을 시즌으로 만들고 AI에게 시즌별로 “코드를 보고 나무로 옮겨 줘”라고 부탁하면 됩니다. 깃(git)에 커밋된 기록을 기준으로 할 수도 있고, 파일이 생성된 시점으로 구분할 수도 있습니다. 처음 만들어진 배지는 옮겨심기 상태로, 기록을 남기지 않고 편집할 수 있는 상태가 됩니다. 이를 이용해 만들어둔 프로젝트를 깔끔하게 옮길 수 있습니다. 이 역시 3편에서 확인할 수 있습니다.
다음 편에서는 Umtri를 여러분이 쓰는 AI(Claude Code 등)와 연결하는 방법을 알아봅니다. Umtri의 진가는 MCP 연동을 통해 에이전트와 함께 나무를 가꾸면서 드러납니다. 성장 관리와 버그 관리, 위키를 이용한 스펙 관리 등 프로젝트 관리에 필요한 다양한 내용들을 에이전트와 함께 해 보세요.